From ab83c4d697cf59edbb31f24e7bef3f0c5c68f6b3 Mon Sep 17 00:00:00 2001
From: issy <issy@issy.dev>
Date: Fri, 3 Apr 2026 22:32:00 +0100
Subject: [PATCH 1/6] Add homepage

---
 web/src/App.tsx                         |  5 +++--
 web/src/views/home/HomePage.module.scss | 18 ++++++++++++++++++
 web/src/views/home/HomePage.tsx         | 18 ++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 web/src/views/home/HomePage.module.scss
 create mode 100644 web/src/views/home/HomePage.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index a60299e..2c1c66d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,4 +1,4 @@
-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';
@@ -6,12 +6,13 @@ 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}>
diff --git a/web/src/views/home/HomePage.module.scss b/web/src/views/home/HomePage.module.scss
new file mode 100644
index 0000000..b543a92
--- /dev/null
+++ b/web/src/views/home/HomePage.module.scss
@@ -0,0 +1,18 @@
+.container {
+  height: 100vh;
+  padding: 5rem;
+}
+
+.heroSection {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border: solid 1px red;
+}
+
+.title {
+  font-size: 72px;
+  background: -webkit-linear-gradient(var(--mantine-color-indigo-3), var(--mantine-color-blue-5), var(--mantine-color-teal-3));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/web/src/views/home/HomePage.tsx b/web/src/views/home/HomePage.tsx
new file mode 100644
index 0000000..7bc710c
--- /dev/null
+++ b/web/src/views/home/HomePage.tsx
@@ -0,0 +1,18 @@
+import classes from './HomePage.module.scss';
+import { Container, Flex, Title } from '@mantine/core';
+
+export function HomePage() {
+  return (
+    <div className={classes.container}>
+      <Container size="xl">
+        <Flex justify="space-between" gap="lg">
+          <div className={classes.heroSection}>
+            <Title className={classes.title}>MIDI-X</Title>
+          </div>
+        </Flex>
+      </Container>
+    </div>
+  );
+}
+
+export default HomePage;

From b6afd32f0269f838c0c5b35bf0f7e3a931fe7b50 Mon Sep 17 00:00:00 2001
From: issy <issy@issy.dev>
Date: Fri, 3 Apr 2026 22:41:02 +0100
Subject: [PATCH 2/6] Centre the div

---
 web/src/views/home/HomePage.module.scss | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/web/src/views/home/HomePage.module.scss b/web/src/views/home/HomePage.module.scss
index b543a92..f60bed1 100644
--- a/web/src/views/home/HomePage.module.scss
+++ b/web/src/views/home/HomePage.module.scss
@@ -1,18 +1,14 @@
 .container {
   height: 100vh;
-  padding: 5rem;
+  align-content: center;
 }
 
 .heroSection {
   display: block;
-  height: 100%;
-  width: 100%;
-  border: solid 1px red;
+  margin: 0 auto;
 }
 
 .title {
   font-size: 72px;
-  background: -webkit-linear-gradient(var(--mantine-color-indigo-3), var(--mantine-color-blue-5), var(--mantine-color-teal-3));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  margin: 0;
 }

From bd690c99948b7872efc3c1d4eda17940c42798b8 Mon Sep 17 00:00:00 2001
From: issy <issy@issy.dev>
Date: Fri, 3 Apr 2026 22:41:06 +0100
Subject: [PATCH 3/6] Text

Subtitle

More text
---
 web/src/views/home/HomePage.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/views/home/HomePage.tsx b/web/src/views/home/HomePage.tsx
index 7bc710c..b3c9b0d 100644
--- a/web/src/views/home/HomePage.tsx
+++ b/web/src/views/home/HomePage.tsx
@@ -1,5 +1,5 @@
 import classes from './HomePage.module.scss';
-import { Container, Flex, Title } from '@mantine/core';
+import { Container, Flex, Text } from '@mantine/core';
 
 export function HomePage() {
   return (
@@ -7,7 +7,10 @@ export function HomePage() {
       <Container size="xl">
         <Flex justify="space-between" gap="lg">
           <div className={classes.heroSection}>
-            <Title className={classes.title}>MIDI-X</Title>
+            <h1 className={classes.title}>MIDI-X</h1>
+            <Text c="dimmed" size="xl">
+              A completely configurable MIDI controller built for the stage
+            </Text>
           </div>
         </Flex>
       </Container>

From 51a4edb453251ffd962c728885a32485739c078a Mon Sep 17 00:00:00 2001
From: issy <issy@issy.dev>
Date: Fri, 3 Apr 2026 22:50:31 +0100
Subject: [PATCH 4/6] Add CTA

---
 web/src/views/home/HomePage.module.scss |  1 -
 web/src/views/home/HomePage.tsx         | 25 ++++++++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/web/src/views/home/HomePage.module.scss b/web/src/views/home/HomePage.module.scss
index f60bed1..194c076 100644
--- a/web/src/views/home/HomePage.module.scss
+++ b/web/src/views/home/HomePage.module.scss
@@ -4,7 +4,6 @@
 }
 
 .heroSection {
-  display: block;
   margin: 0 auto;
 }
 
diff --git a/web/src/views/home/HomePage.tsx b/web/src/views/home/HomePage.tsx
index b3c9b0d..dc95dd2 100644
--- a/web/src/views/home/HomePage.tsx
+++ b/web/src/views/home/HomePage.tsx
@@ -1,17 +1,36 @@
 import classes from './HomePage.module.scss';
-import { Container, Flex, Text } from '@mantine/core';
+import { Button, Container, Flex, Stack, Text } from '@mantine/core';
+import { FaGithub } from 'react-icons/fa6';
+import { MdOpenInNew } from 'react-icons/md';
 
 export function HomePage() {
   return (
     <div className={classes.container}>
       <Container size="xl">
         <Flex justify="space-between" gap="lg">
-          <div className={classes.heroSection}>
+          <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>
-          </div>
+            <Flex gap="md">
+              <Button size="lg" variant="gradient" gradient={{ from: 'indigo', to: 'blueviolet', deg: 20 }}>
+                Learn more
+              </Button>
+              <Button
+                size="lg"
+                variant="light"
+                color="gray"
+                leftSection={<FaGithub size={28} />}
+                rightSection={<MdOpenInNew />}
+                component="a"
+                href="https://github.com/issy/midi-footcontroller"
+                target="_blank"
+              >
+                GitHub
+              </Button>
+            </Flex>
+          </Stack>
         </Flex>
       </Container>
     </div>

From 8896b462218c4a64e86a691d6b324e768375e395 Mon Sep 17 00:00:00 2001
From: issy <issy@issy.dev>
Date: Fri, 3 Apr 2026 22:54:52 +0100
Subject: [PATCH 5/6] Rearrange buttons

---
 web/src/views/home/HomePage.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/views/home/HomePage.tsx b/web/src/views/home/HomePage.tsx
index dc95dd2..e8aede3 100644
--- a/web/src/views/home/HomePage.tsx
+++ b/web/src/views/home/HomePage.tsx
@@ -15,11 +15,14 @@ export function HomePage() {
             </Text>
             <Flex gap="md">
               <Button size="lg" variant="gradient" gradient={{ from: 'indigo', to: 'blueviolet', deg: 20 }}>
-                Learn more
+                Open Editor
+              </Button>
+              <Button size="lg" variant="light" color="gray">
+                Learn More
               </Button>
               <Button
                 size="lg"
-                variant="light"
+                variant="outline"
                 color="gray"
                 leftSection={<FaGithub size={28} />}
                 rightSection={<MdOpenInNew />}

From 59089fbb30c66e24f2eb263c3b52a4c29a32d0a7 Mon Sep 17 00:00:00 2001
From: issy <issy@issy.dev>
Date: Fri, 3 Apr 2026 23:07:40 +0100
Subject: [PATCH 6/6] Add header

---
 web/src/views/home/HomePage.tsx | 87 ++++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/web/src/views/home/HomePage.tsx b/web/src/views/home/HomePage.tsx
index e8aede3..309a597 100644
--- a/web/src/views/home/HomePage.tsx
+++ b/web/src/views/home/HomePage.tsx
@@ -1,42 +1,63 @@
 import classes from './HomePage.module.scss';
-import { Button, Container, Flex, Stack, Text } from '@mantine/core';
+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 (
-    <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={{ from: 'indigo', to: 'blueviolet', deg: 20 }}>
-                Open Editor
-              </Button>
-              <Button size="lg" variant="light" color="gray">
-                Learn More
-              </Button>
-              <Button
-                size="lg"
-                variant="outline"
-                color="gray"
-                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>
+      <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>
   );
 }