Add landing page

web/src/App.tsx

@@ -1,17 +1,18 @@
-import { Navigate, Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router';
 import DeviceUpdateView from './views/device/update/DeviceUpdateView';
 import DeviceEditorLayout from './views/device/editor/DeviceEditorLayout';
 import NotFoundView from './views/NotFoundView';
 import AppLayout from '@/views/AppLayout';
 import DeviceConnectView from './views/device/DeviceConnectView';
 import DeviceLayout from '@/views/device/DeviceLayout';
 import DevicePresetView from '@/views/device/editor/DevicePresetView';
+import HomePage from '@/views/home/HomePage';
 
 function App() {
   return (
     <Routes>
       <Route Component={AppLayout}>
-        <Route index element={<Navigate to="device" replace />} />
+        <Route index Component={HomePage} />
         <Route path="device" Component={DeviceLayout}>
           <Route index Component={DeviceConnectView} />
           <Route path="editor" Component={DeviceEditorLayout}>

web/src/views/home/HomePage.module.scss

@@ -0,0 +1,13 @@
+.container {
+  height: 100vh;
+  align-content: center;
+}
+
+.heroSection {
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 72px;
+  margin: 0;
+}

web/src/views/home/HomePage.tsx

@@ -0,0 +1,64 @@
+import classes from './HomePage.module.scss';
+import { AppShell, Button, Container, Flex, Group, Stack, Text, useSafeMantineTheme } from '@mantine/core';
+import { FaGithub } from 'react-icons/fa6';
+import { MdOpenInNew } from 'react-icons/md';
+import { Fragment } from 'react';
+import ColourSchemeButton from '@/components/ColourSchemeButton';
+import { useNavigate } from 'react-router';
+
+export function HomePage() {
+  const { defaultGradient } = useSafeMantineTheme();
+  const navigate = useNavigate();
+
+  return (
+    <Fragment>
+      <AppShell.Header>
+        <Group h="100%" px="md" justify="end">
+          <Group>
+            <Button
+              onClick={() => {
+                void navigate('/device');
+              }}
+            >
+              Open Editor
+            </Button>
+            <ColourSchemeButton />
+          </Group>
+        </Group>
+      </AppShell.Header>
+      <div className={classes.container}>
+        <Container size="xl">
+          <Flex justify="space-between" gap="lg">
+            <Stack className={classes.heroSection}>
+              <h1 className={classes.title}>MIDI-X</h1>
+              <Text c="dimmed" size="xl">
+                A completely configurable MIDI controller built for the stage
+              </Text>
+              <Flex gap="md">
+                <Button size="lg" variant="gradient" gradient={defaultGradient}>
+                  Open Editor
+                </Button>
+                <Button size="lg" variant="light">
+                  Learn More
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  leftSection={<FaGithub size={28} />}
+                  rightSection={<MdOpenInNew />}
+                  component="a"
+                  href="https://github.com/issy/midi-footcontroller"
+                  target="_blank"
+                >
+                  GitHub
+                </Button>
+              </Flex>
+            </Stack>
+          </Flex>
+        </Container>
+      </div>
+    </Fragment>
+  );
+}
+
+export default HomePage;