Start setting up Next js with the new app router

frontend/src/app/global.css

@@ -0,0 +1,154 @@
+@font-face {
+  font-family: 'Karla';
+  src: url('/fonts/karla-variable.ttf') format('truetype');
+  font-weight: 200 800;
+}
+
+@font-face {
+  font-family: 'Samurai Bob';
+  src: url('/fonts/samuraibob.woff2') format('woff2'),
+    url('/fonts/samuraibob.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Molot';
+  src: url('/fonts/molot.woff2') format('woff2'),
+    url('/fonts/molot.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+:root {
+  color-scheme: light dark;
+
+  --primary: #F79E00;
+
+  /* LIGHT */
+  --background-light: #FFFFFF;
+  --text-light: #000000;
+  --shadow-light: #F48600;
+  --highlight-light: #F4BB60;
+  --secondary-light: var(--shadow-light);
+  --tertiary-light: var(--highlight-light);
+  --surface-light: #FEF2DD;
+  --error-light: #D32F2F;
+  --loading-light: #DDDDDD;
+  --font-weight-light: 600;
+
+  /* DARK */
+  --background-dark: #111111;
+  --text-dark: #DDDDDD;
+  --shadow-dark: #CC7313;
+  --highlight-dark: #F4BB60;
+  --secondary-dark: var(--highlight-dark);
+  --tertiary-dark: var(--shadow-dark);
+  --surface-dark: #30240F;
+  --error-dark: #E53935;
+  --loading-dark: #444444;
+  --font-weight-dark: 500;
+
+  /* Define light defaults */
+  --background: var(--background-light);
+  --text: var(--text-light);
+  --shadow: var(--shadow-light);
+  --highlight: var(--highlight-light);
+  --secondary: var(--secondary-light);
+  --tertiary: var(--tertiary-light);
+  --surface: var(--surface-light);
+  --error: var(--error-light);
+  --loading: var(--loading-light);
+  --font-weight: var(--font-weight-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: var(--background-dark);
+    --text: var(--text-dark);
+    --shadow: var(--shadow-dark);
+    --highlight: var(--highlight-dark);
+    --secondary: var(--secondary-dark);
+    --tertiary: var(--tertiary-dark);
+    --surface: var(--surface-dark);
+    --error: var(--error-dark);
+    --loading: var(--loading-dark);
+    --font-weight: var(--font-weight-dark);
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+body {
+  margin: 0;
+  font-family: 'Karla', sans-serif;
+  background: var(--background);
+  color: var(--text);
+  font-weight: var(--font-weight);
+}
+
+.light {
+  color-scheme: light;
+
+  --background: var(--background-light);
+  --text: var(--text-light);
+  --shadow: var(--shadow-light);
+  --highlight: var(--highlight-light);
+  --secondary: var(--secondary-light);
+  --tertiary: var(--tertiary-light);
+  --surface: var(--surface-light);
+  --error: var(--error-light);
+  --loading: var(--loading-light);
+  --font-weight: var(--font-weight-light);
+}
+
+@media not print {
+  .dark {
+    color-scheme: dark;
+
+    --background: var(--background-dark);
+    --text: var(--text-dark);
+    --shadow: var(--shadow-dark);
+    --highlight: var(--highlight-dark);
+    --secondary: var(--secondary-dark);
+    --tertiary: var(--tertiary-dark);
+    --surface: var(--surface-dark);
+    --error: var(--error-dark);
+    --loading: var(--loading-dark);
+    --font-weight: var(--font-weight-dark);
+  }
+}
+
+@media print {
+  #app, .light, .dark {
+    --background: white;
+  }
+}
+
+a {
+  color: var(--primary);
+}
+
+*::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+*::-webkit-scrollbar-track {
+  background: var(--surface);
+}
+*::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  border: 4px solid var(--surface);
+  width: 12px;
+  background: var(--tertiary);
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+*::-webkit-scrollbar-thumb:active {
+  background: var(--secondary);
+}

frontend/src/app/home.module.scss

@@ -0,0 +1,4 @@
+.nav {
+  text-align: center;
+  margin: 20px 0;
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import { Metadata } from 'next'
+
+import { fallbackLng } from '/src/i18n/options'
+import { useTranslation } from '/src/i18n/server'
+
+import './global.css'
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://crab.fit'),
+  title: 'Crab Fit',
+  keywords: ['crab', 'fit', 'crabfit', 'schedule', 'availability', 'availabilities', 'when2meet', 'doodle', 'meet', 'plan', 'time', 'timezone'],
+  description: 'Enter your availability to find a time that works for everyone!',
+  themeColor: '#F79E00',
+  manifest: 'manifest.json',
+  openGraph: {
+    title: 'Crab Fit',
+    description: 'Enter your availability to find a time that works for everyone!',
+    url: '/',
+  },
+  icons: {
+    icon: 'favicon.ico',
+    apple: 'logo192.png',
+  },
+}
+
+const RootLayout = async ({ children }: { children: React.ReactNode }) => {
+  const { i18n } = await useTranslation([])
+
+  return <html lang={i18n.resolvedLanguage ?? fallbackLng}>
+    <body>
+      {children}
+    </body>
+  </html>
+}
+
+export default RootLayout

frontend/src/app/page.tsx

@@ -0,0 +1,24 @@
+import { Button, Footer, Header, Recents } from '/src/components'
+import { useTranslation } from '/src/i18n/server'
+
+import styles from './home.module.scss'
+
+const Page = async () => {
+  const { t } = await useTranslation('home')
+
+  return <div>
+    <Header isFull />
+
+    <nav className={styles.nav}>
+      <a href="#about">{t('home:nav.about')}</a>
+      {' / '}
+      <a href="#donate">{t('home:nav.donate')}</a>
+    </nav>
+
+    <Recents />
+    <Button>Hey there!</Button>
+    <Footer />
+  </div>
+}
+
+export default Page