From 97f3bb5b11e2488e371c625f3405e1e4c29d4951 Mon Sep 17 00:00:00 2001 From: spaaaacccee Date: Thu, 9 May 2024 00:17:16 +1000 Subject: [PATCH] Update landing page --- package-lock.json | 6 + package.json | 1 + src/components/theme.ts | 10 +- src/css/custom.css | 5 + src/pages/en-au.json | 38 ++++- src/pages/index.tsx | 233 +++++++++++++++++--------- static/img/gallery/astar.png | Bin 0 -> 369506 bytes static/img/gallery/complex-view.png | Bin 0 -> 509757 bytes static/img/gallery/image-3.png | Bin 0 -> 283401 bytes static/img/gallery/image-7.png | Bin 0 -> 225121 bytes static/img/gallery/room-detection.png | Bin 0 -> 394767 bytes 11 files changed, 205 insertions(+), 88 deletions(-) create mode 100644 static/img/gallery/astar.png create mode 100644 static/img/gallery/complex-view.png create mode 100644 static/img/gallery/image-3.png create mode 100644 static/img/gallery/image-7.png create mode 100644 static/img/gallery/room-detection.png diff --git a/package-lock.json b/package-lock.json index ce77da2..899270a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@mui/material": "^5.15.15", "lodash": "^4.17.21", "material-ui-popup-state": "^5.1.0", + "overlayscrollbars": "^2.7.3", "prism-react-renderer": "^2.1.0", "react": "^18.0.0", "react-dom": "^18.0.0", @@ -11244,6 +11245,11 @@ "opener": "bin/opener-bin.js" } }, + "node_modules/overlayscrollbars": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.7.3.tgz", + "integrity": "sha512-HmNo8RPtuGUjBhUbVpZBHH7SHci5iSAdg5zSekCZVsjzaM6z8MIr3F9RXrzf4y7m+fOY0nx0+y0emr1fqQmfoA==" + }, "node_modules/p-cancelable": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz", diff --git a/package.json b/package.json index dfe827b..a887b03 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@mui/material": "^5.15.15", "lodash": "^4.17.21", "material-ui-popup-state": "^5.1.0", + "overlayscrollbars": "^2.7.3", "prism-react-renderer": "^2.1.0", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/components/theme.ts b/src/components/theme.ts index 9c904f9..0ec347a 100644 --- a/src/components/theme.ts +++ b/src/components/theme.ts @@ -55,7 +55,7 @@ export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) => fontSize: 15, }, h1: { - fontSize: "max(32px, min(46px, 6vw))", + fontSize: "max(42px, min(58px, min(6vw, 6vh)))", fontWeight: 600, }, h2: { @@ -135,13 +135,11 @@ export function useAcrylic(color?: string): SxProps { export function usePaper(): (e?: number) => SxProps { return (elevation: number = 1) => ({ - boxShadow: "inset 0px 0px 0px 1px rgba(255,255,255,0.02)", borderRadius: 8, - backdropFilter: "blur(32px)", - background: "url(img/noise.png)", + backdropFilter: "blur(64px)", + background: ({ palette }) => + `url(img/noise.png), ${alpha(palette.background.paper, 0.75)}`, backgroundSize: "32px 32px", - backgroundColor: ({ palette }) => - alpha(palette.action.disabledBackground, elevation * 0.01), }); } diff --git a/src/css/custom.css b/src/css/custom.css index 7e708b0..b2ebce8 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,5 +1,10 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&display=swap"); +html, +body { + overflow-x: hidden; +} + /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to diff --git a/src/pages/en-au.json b/src/pages/en-au.json index 0700e38..ce222e2 100644 --- a/src/pages/en-au.json +++ b/src/pages/en-au.json @@ -1,4 +1,7 @@ { + "org": "ShortestPathLab", + "name": "Posthoc", + "openAppLabel": "Open Posthoc Web", "logoUrl": "img/logo192.png", "closeVideo": "Close video", "backdropVideoUrl": "media/clip.webm", @@ -15,14 +18,37 @@ "url": "https://github.com/shortestpathlab/posthoc" } ], - "heroTitle": "Understand your solver's decision-making process visually.", - "heroSubtitle": "Posthoc is zero-commitment and is useful from the get-go.", + "gallery": [ + { + "url": "img/gallery/astar.png", + "label": "Demonstration, A* search" + }, + { + "url": "img/gallery/complex-view.png", + "label": "Post-game analysis, StarCraft" + }, + { + "url": "img/gallery/image-7.png", + "label": "Compression algorithm analysis, RLE" + }, + { + "url": "img/gallery/image-3.png", + "label": "Debugging, duel euclidean path search" + }, + { + "url": "img/gallery/room-detection.png", + "label": "Debugging, room detection algorithm" + } + ], + "heroTitle": "Understand decision-making processes intuitively.", + "heroSubtitle": "Posthoc is a zero-commitment visualiser that is useful from the get-go.", "heroCallToAction": "Get started", - "demoSectionTitle": "demoSectionTitle", - "demoSectionSubtitle": "demoSectionSubtitle", - "featuresSectionTitle": "featuresSectionTitle", + "heroCallToActionUrl": "./docs/overview", + "demoSectionTitle": "Accepted into the ICAPS 24 Demo Track", + "demoSectionSubtitle": "Check out our submission", + "featuresSectionTitle": "Features", "featuresSectionSubtitle": "featuresSectionSubtitle", - "teamSectionTitle": "teamSectionTitle", + "teamSectionTitle": "Team", "teamSectionSubtitle": "teamSectionSubtitle", "features": [ { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3d6cc3e..2ea2e55 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,30 +1,36 @@ import { ArrowBack, ArrowForward, - FilterTiltShiftOutlined, - Menu, + CloseOutlined as CloseIcon, + DragHandleOutlined as MenuIcon, + LaunchOutlined as OpenIcon, + FilterTiltShiftOutlined as ShowVideoIcon, } from "@mui/icons-material"; import { - Fade, Box, Button, ButtonBase, CssBaseline, Divider, + Fade, IconButton, - Popover, Stack, StackProps, SxProps, + Tab, + Tabs, Theme, ThemeProvider, Typography, alpha, useMediaQuery, useScrollTrigger, + useTheme, } from "@mui/material"; -import { Dictionary, find, first, keyBy, mapValues, times } from "lodash"; -import PopupState, { bindPopover, bindTrigger } from "material-ui-popup-state"; +import { Dictionary, find, first, keyBy, map, mapValues, times } from "lodash"; +import PopupState, { bindTrigger } from "material-ui-popup-state"; +import { OverlayScrollbars } from "overlayscrollbars"; +import "overlayscrollbars/overlayscrollbars.css"; import { ComponentProps, ReactNode as RN, @@ -33,8 +39,9 @@ import { useRef, useState, } from "react"; -import l10n from "./en-au.json"; +import { createPortal } from "react-dom"; import { makeTheme, usePaper } from "../components/theme"; +import l10n from "./en-au.json"; const theme = makeTheme("dark"); @@ -72,8 +79,8 @@ function useScrollListener(setShowVideo: (b: boolean) => void) { } function AppBar({ showVideo }: SV) { - const paper = usePaper(); const sm = useSm(); + const paper = usePaper(); const top = useScrollTrigger({ threshold: 0, disableHysteresis: true }); const menu = l10n.sections.map(({ url, label }) => ( } + sx={{ py: 1.5, px: 2, color: "text.primary", borderRadius: 32 }} onClick={() => window.open(l10n.appUrl)} > - Open Posthoc + {l10n.openAppLabel} ); return ( t.zIndex.appBar, @@ -113,15 +120,13 @@ function AppBar({ showVideo }: SV) { p: 1, mx: "auto", mt: sm ? 2 : 4, - transition: (t) => - t.transitions.create(["background-color", "backdrop-filter"]), ...(top ? { ...paper(1), // boxShadow: "inset 0px 1px 0px 1px rgba(255,255,255,0.05)", } : {}), - width: 1000, + width: 1000 + 8 * 4, maxWidth: "100%", height: 64, borderRadius: 9, @@ -138,29 +143,32 @@ function AppBar({ showVideo }: SV) { {(state) => ( <> - + - - - {menu} - - + {createPortal( + + t.zIndex.modal, + top: 0, + left: 0, + width: "100vw", + height: "100vh", + borderRadius: 0, + }} + > + + + + + {menu} + + + , + document.body + )} )} @@ -182,53 +190,97 @@ function Logo(props: ComponentProps<"img">) { return ; } +function Gallery() { + const paper = usePaper(); + const [selected, setSelected] = useState(0); + return ( + + + + + setSelected(i)} + sx={{ + " button.Mui-selected": { color: "text.primary" }, + }} + > + {map(l10n.gallery, ({ label, url }, i) => ( + + ))} + + + ); +} + type SV = { showVideo?: boolean; onShowVideo?: (b: boolean) => void; }; function Hero({ showVideo, onShowVideo }: SV) { + const sm = useSm(); return ( {space()} - + + {l10n.org} / {l10n.name} + + {l10n.heroTitle} {l10n.heroSubtitle} - {space()} - - {space(2)} + + + + + {space(4)} ); } @@ -338,6 +390,7 @@ function DocSelector() { function Background({ showVideo, onShowVideo }: SV) { const paper = usePaper(); const ref = useRef(); + const theme = useTheme(); let cancelled = false; useEffect(() => { const f = () => { @@ -377,6 +430,7 @@ function Background({ showVideo, onShowVideo }: SV) { loop style={{ objectFit: showVideo ? "contain" : "cover", + background: theme.palette.background.paper, }} > @@ -394,7 +448,7 @@ function Background({ showVideo, onShowVideo }: SV) { background: (t) => ` linear-gradient(to bottom, ${alpha( t.palette.background.default, - 0.6 + 0.9 )} 60%, ${t.palette.background.default}) `, }} @@ -484,16 +538,39 @@ export default function Home() { const [showVideo, setShowVideo] = useState(false); useScrollListener(setShowVideo); useVideoStartController(showVideo); + useEffect(() => { + OverlayScrollbars(document.body, { + overflow: { x: "hidden", y: "scroll" }, + scrollbars: { + theme: "os-theme-light", + }, + }); + }, []); return ( + + t.transitions.create(["z-index", "opacity"]), + backgroundSize: "cover", + backgroundPosition: "center", + background: `radial-gradient(46.56% 45.08% at 56.04% 55.33%,rgba(0,50,255,.2) 0,transparent 100%),radial-gradient(46.69% 41.74% at 69.64% 60.81%,rgba(192,59,196,.2) 0,transparent 100%),radial-gradient(59.78% 45.73% at 30.42% 58.68%,rgba(0,120,212,.2) 0,transparent 100%),radial-gradient(32.53% 31.57% at 50% 66.82%,rgba(70,54,104,.2) 0,transparent 100%)`, + }} + > + + - - + /> */} + {/* {times(6, () => ( } /> ))} - - */} + {/* - - */} + {/* ( ))} - + */}