feat(biochem): add landing page

app/(reference-data)/biochem/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Link from 'next/link';
+
+export default function BiochemPage() {
+    return (
+        <Box component="main" sx={{ maxWidth: 720, mx: 'auto', py: { xs: 4, md: 8 }, textAlign: 'center' }}>
+            <Typography component="h1" variant="h3" gutterBottom>
+                Biochemistry
+            </Typography>
+            <Typography color="text.secondary" sx={{ mb: 4 }}>
+                Explore ModelSEED biochemical reactions and compounds.
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, justifyContent: 'center', gap: 2 }}>
+                <Button component={Link} href="/biochem/reactions" variant="contained" color="primary" size="large">
+                    Reactions
+                </Button>
+                <Button component={Link} href="/biochem/compounds" variant="contained" color="primary" size="large">
+                    Compounds
+                </Button>
+            </Box>
+        </Box>
+    );
+}

app/page.tsx

@@ -138,7 +138,7 @@ function HomePageContent() {
                                 </Typography>
                                 <Button
                                     component={Link}
-                                    href="/biochem/reactions"
+                                    href="/biochem"
                                     variant="contained"
                                     className={styles.biochemButton}
                                     sx={{

tests/e2e/biochem/landing.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Biochemistry landing page', () => {
+    test('homepage Biochemistry CTA links to the landing page', async ({ page }) => {
+        await page.goto('/');
+
+        const biochemistry = page.getByRole('link', { name: 'Biochemistry (No login required)' });
+        await expect(biochemistry).toBeVisible();
+        await expect(biochemistry).toHaveAttribute('href', '/biochem');
+    });
+
+    test('renders public reaction and compound links', async ({ page }) => {
+        await page.goto('/biochem');
+
+        await expect(page).toHaveURL(/\/biochem$/);
+        await expect(page.getByRole('heading', { name: 'Biochemistry' })).toBeVisible();
+
+        const reactions = page.getByRole('link', { name: 'Reactions' });
+        await expect(reactions).toBeVisible();
+        await expect(reactions).toHaveAttribute('href', '/biochem/reactions');
+
+        const compounds = page.getByRole('link', { name: 'Compounds' });
+        await expect(compounds).toBeVisible();
+        await expect(compounds).toHaveAttribute('href', '/biochem/compounds');
+    });
+});