Redesign landing and generate Proto docs

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>
+    );
+}