Add get started page

docs/0-get-started.mdx

@@ -0,0 +1,39 @@
+---
+sidebar_position: 0
+title: Get started
+slug: get-started
+---
+
+import Card from "../src/components/ActionCard";
+import { grid } from "../src/components/grid";
+import { Stack } from "@mui/material";
+import imageA from "./image-3.png";
+import imageB from "./30531.png";
+import imageC from "./image-9.png";
+
+# Hey there!
+
+We're excited to have you here. 😊
+
+Posthoc is a way to build quick-and-dirty visualisations ✨ for sequential decision-making algorithms, such as search algorithms. 🚀 Just print logs as [search traces](./search-trace) and drop those into the [Posthoc visualiser](./visualiser/overview).
+
+<Stack direction="row" sx={{ ...grid(360), gap: 2, mb: 4 }}>
+  <Card
+    primary="Try Posthoc"
+    secondary="Dive right into Posthoc and try out some examples."
+    onClick={() => open("https://posthoc.pathfinding.ai")}
+    image={imageA}
+  />
+  <Card
+    primary="Watch the primer"
+    secondary="Watch our ICAPS 24 demo video, which explains how Posthoc works."
+    onClick={() => open("https://youtu.be/qVpHPYRi6GY")}
+    image={imageB}
+  />
+  <Card
+    primary="Read the docs"
+    secondary="Ready to build your own visualisations? Continue exploring our documentation."
+    onClick={() => open("http://localhost:3000/docs/overview")}
+    image={imageC}
+  />
+</Stack>

docs/2-search-trace.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # Search trace

docs/3-visualiser/overview.md

@@ -8,7 +8,6 @@ Posthoc visualises [search traces](/docs/search-trace). It gives you a variety o
 tools to help you analyse and debug your algorithm. It's quick to get started and
 install-free — even better, it's robust and performant enough to support the
 largest of problem instances.
-
 ![Complex view](../complex-view.png)
 
 ## Get Posthoc

docs/4-visualiser-adapter-protocol.md

@@ -1,4 +1,5 @@
 ---
+sidebar_position: 4
 title: Visualiser Adapter Protocol ⚠️
 ---
 

src/components/ActionCard.tsx

@@ -0,0 +1,65 @@
+import { ArrowForwardOutlined } from "@mui/icons-material";
+import {
+  Box,
+  ButtonBase,
+  Card,
+  CardProps,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { ReactNode } from "react";
+
+type Props = {
+  primary?: ReactNode;
+  secondary?: ReactNode;
+  image?: string;
+};
+
+export default function ActionCard({
+  primary,
+  secondary,
+  image,
+  ...props
+}: Props & CardProps) {
+  return (
+    <ButtonBase
+      sx={{
+        borderRadius: (t) => t.shape.borderRadius,
+        p: 0,
+      }}
+    >
+      <Card
+        {...props}
+        sx={{
+          height: "100%",
+          width: "100%",
+          textAlign: "left",
+          borderRadius: (t) => t.shape.borderRadius,
+          border: (t) => `1px solid ${t.palette.divider}`,
+          ...props.sx,
+        }}
+      >
+        <Box
+          sx={{
+            aspectRatio: 16 / 9,
+            width: "100%",
+            backgroundImage: `url(${image})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        />
+        <Box sx={{ position: "relative" }}>
+          <ArrowForwardOutlined
+            sx={{ m: 3, position: "absolute", right: 0, top: 0 }}
+          />
+          <Stack sx={{ p: 3, gap: 1 }}>
+            <Typography variant="h6" sx={{ fontSize: 18, fontWeight: 600 }}>
+              {primary}
+            </Typography>
+            <Typography>{secondary}</Typography>
+          </Stack>
+        </Box>
+      </Card>
+    </ButtonBase>
+  );
+}

src/components/grid.tsx

@@ -0,0 +1,5 @@
+export const grid = (size: number) => ({
+  display: "grid",
+  gridAutoFlow: "row",
+  gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${size}px), 1fr))`,
+});

src/components/theme.ts

@@ -15,9 +15,9 @@ export type Shade = keyof (typeof colors)[AccentColor];
 export const { common, ...accentColors } = colors;
 
 const shadow = `
-      0px 4px 9px -1px rgb(0 0 0 / 4%), 
+      0px 4px 3px -2px rgb(0 0 0 / 4%), 
       0px 5px 24px 0px rgb(0 0 0 / 4%), 
-      0px 10px 48px 0px rgb(0 0 0 / 4%)
+      0px 10px 48px 0px rgb(0 0 0 / 2%)
   `;
 
 export const getShade = (

src/pages/en-au.json

@@ -44,7 +44,7 @@
   "heroTitle": "Understand decision-making processes intuitively.",
   "heroSubtitle": "Posthoc is a zero-commitment visualiser that is useful from the get-go.",
   "heroCallToAction": "Get started",
-  "heroCallToActionUrl": "./docs/overview",
+  "heroCallToActionUrl": "./docs/get-started",
   "demoSectionTitle": "Accepted into the ICAPS 24 Demo Track",
   "demoSectionSubtitle": "We're excited to present Posthoc to the search and planning community",
   "featuresSectionTitle": "Features",

src/pages/index.tsx

@@ -45,15 +45,10 @@ import {
 import { createPortal } from "react-dom";
 import { makeTheme, usePaper } from "../components/theme";
 import l10n from "./en-au.json";
+import { grid } from "../components/grid";
 
 const theme = makeTheme("dark");
 
-const grid = (size: number) => ({
-  display: "grid",
-  gridAutoFlow: "row",
-  gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${size}px), 1fr))`,
-});
-
 const getShowVideoOpacityStyle = (showVideo?: boolean): SxProps<Theme> => ({
   opacity: +!showVideo,
   transition: (t) => t.transitions.create("opacity"),