Redesign landing and generate Proto docs

src/components/SiteHeader/SiteHeader.module.css

@@ -0,0 +1,58 @@
+.header {
+  position: sticky;
+  z-index: 50;
+  top: 0;
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+  background: light-dark(rgba(255, 255, 255, 0.92), rgba(26, 27, 30, 0.92));
+  backdrop-filter: blur(16px);
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 72px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: light-dark(var(--mantine-color-dark-9), var(--mantine-color-white));
+  text-decoration: none;
+}
+
+.brand img {
+  border-radius: 9px;
+}
+
+.link {
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+
+.link:hover,
+.link[data-active] {
+  color: var(--mantine-color-blue-6);
+}
+
+.burger {
+  display: none;
+}
+
+.drawerTitle {
+  font-weight: 700;
+}
+
+@media (max-width: 48em) {
+  .navigation {
+    display: none;
+  }
+
+  .burger {
+    display: block;
+  }
+}

src/components/SiteHeader/SiteHeader.tsx

@@ -0,0 +1,80 @@
+import {
+    Anchor,
+    Burger,
+    Container,
+    Drawer,
+    Group,
+    Stack,
+    Text,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { Link, useLocation } from 'react-router-dom';
+import { RosettaLogo } from '../RosettaLogo/RosettaLogo';
+import classes from './SiteHeader.module.css';
+
+const NAVIGATION = [
+    { label: 'Features', to: '/#features' },
+    { label: 'Apps', to: '/#apps' },
+    { label: 'Proto', to: '/proto' },
+    { label: 'Support', to: '/support' },
+];
+
+export function SiteHeader() {
+    const [opened, { close, toggle }] = useDisclosure(false);
+    const { pathname } = useLocation();
+
+    const links = NAVIGATION.map(({ label, to }) => {
+        const active =
+            (to === '/proto' && pathname === '/proto') ||
+            (to === '/support' && pathname === '/support');
+
+        return (
+            <Anchor
+                key={to}
+                component={Link}
+                to={to}
+                onClick={close}
+                className={classes.link}
+                data-active={active || undefined}
+            >
+                {label}
+            </Anchor>
+        );
+    });
+
+    return (
+        <header className={classes.header}>
+            <Container className={classes.inner}>
+                <Anchor component={Link} to="/" className={classes.brand} aria-label="Rosetta">
+                    <RosettaLogo size={36} />
+                    <Text component="span" fw={700} fz="lg">
+                        Rosetta
+                    </Text>
+                </Anchor>
+
+                <Group component="nav" gap="xl" className={classes.navigation}>
+                    {links}
+                </Group>
+
+                <Burger
+                    opened={opened}
+                    onClick={toggle}
+                    size="sm"
+                    className={classes.burger}
+                    aria-label="Toggle navigation"
+                />
+            </Container>
+
+            <Drawer
+                opened={opened}
+                onClose={close}
+                position="right"
+                size="xs"
+                title="Rosetta"
+                classNames={{ title: classes.drawerTitle }}
+            >
+                <Stack gap="lg">{links}</Stack>
+            </Drawer>
+        </header>
+    );
+}