add refreshed home page

ui/src/components/navbar.tsx

@@ -1,12 +1,6 @@
 import { Link } from "./link";
 import { Component, createSignal, For } from "solid-js";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "~/components/ui/select.tsx";
+import { Settings } from "~/components/settings.tsx";
 
 interface Props {
   theme: string;
@@ -17,6 +11,7 @@ interface Route {
   path: string;
   display: string;
 }
+
 export const Navbar: Component<Props> = (props: Props) => {
   // let storedPreference = localStorage.getItem('theme');
   const [theme, setTheme] = createSignal(props.theme);
@@ -38,23 +33,25 @@ export const Navbar: Component<Props> = (props: Props) => {
   ] as Route[];
 
   return (
-    <header class="flex items-center justify-between px-6 py-4 bg-primary text-white light:text-black">
-      <h1 class="text-2xl font-bold">Accuribet</h1>
-      <nav class="space-x-4 flex flex-row items-center">
-        <Select
-          value={theme()}
-          onChange={changeTheme}
-          options={["blackout", "logan", "lavender", "light", "blue"]}
-          placeholder="Select a theme"
-          itemComponent={props => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
-        >
-          <SelectTrigger aria-label="Theme" class="w-[180px]">
-            <SelectValue<string>>{state => state.selectedOption()}</SelectValue>
-          </SelectTrigger>
-          <SelectContent />
-        </Select>
-        <For each={routes}>{route => <Link href={route.path}>{route.display}</Link>}</For>
-      </nav>
-    </header>
+    <>
+      <header class="px-4 lg:px-6 h-14 flex items-center bg-primary light:bg-primary text-100 light:text-black">
+        <Link class="text-2xl font-bold" href="/">
+          Accuribet
+        </Link>
+        <nav class="ml-auto flex gap-4 sm:gap-6 items-center">
+          <For each={routes}>
+            {route => (
+              <Link
+                href={route.path}
+                class="text-sm font-medium hover:underline underline-offset-4"
+              >
+                {route.display}
+              </Link>
+            )}
+          </For>
+          <Settings theme={theme()} callback={changeTheme} />
+        </nav>
+      </header>
+    </>
   );
 };

ui/src/components/settings.tsx

@@ -0,0 +1,53 @@
+import { ComponentProps } from "solid-js";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from "~/components/ui/alert-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "~/components/ui/select.tsx";
+import { OcGear3 } from "solid-icons/oc";
+
+export interface SettingsProps extends ComponentProps<"div"> {
+  theme: string;
+  callback: (theme: string) => void;
+}
+
+export function Settings(props: SettingsProps) {
+  const availableThemes = ["blackout", "logan", "lavender", "light", "blue"];
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>
+        <OcGear3 class="w-6 h-6" />
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogTitle>Settings</AlertDialogTitle>
+        <AlertDialogDescription>
+          <label class="block text-sm font-medium mb-2">Theme</label>
+          <Select
+            value={props.theme}
+            onChange={props.callback}
+            options={availableThemes}
+            placeholder="Select a theme"
+            itemComponent={props => (
+              <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+            )}
+          >
+            <SelectTrigger aria-label="Theme" class="w-[180px]">
+              <SelectValue<string>>{state => state.selectedOption()}</SelectValue>
+            </SelectTrigger>
+            <SelectContent />
+          </Select>
+        </AlertDialogDescription>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

ui/src/index.tsx

@@ -3,6 +3,7 @@ import { Route, Router } from "@solidjs/router";
 import { render } from "solid-js/web";
 
 import App from "~/App";
+import { Home } from "~/pages/Home";
 import { Games } from "~/pages/Games";
 import { History } from "~/pages/History";
 import { Error } from "~/pages/Error";
@@ -14,7 +15,7 @@ const root = document.getElementById("root") as HTMLElement;
 render(
   () => (
     <Router root={App}>
-      {/*<Route path="/" component={Home} />*/}
+      <Route path="/" component={Home} />
       <Route path="/games" component={Games} />
       <Route path="/history" component={History} />
       <Route path="*" component={Error} />

ui/src/pages/Home.tsx

@@ -1,41 +1,128 @@
-import { Button } from "~/components/ui/button.tsx";
+import { Link } from "~/components/link.tsx";
 
 export const Home = () => {
   return (
     <>
-      <main class="flex-1">
-        <section class="bg-200 py-20 px-6 text-center">
-          <h2 class="text-4xl font-bold mb-4 text-secondary">Welcome to NBA Predictor</h2>
-          <p class="text-xl text-700 mb-8">Your go-to AI tool for NBA game predictions.</p>
-          <Button class="px-8 py-3 bg-700 text-white" variant="default">
-            Get Started
-          </Button>
-        </section>
-        <section class="py-20 px-6">
-          <h2 class="text-4xl font-bold text-center mb-8 text-secondary">Latest Predictions</h2>
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {/* Card components */}
-          </div>
-        </section>
-        <section class="bg-200 py-20 px-6">
-          <h2 class="text-4xl font-bold text-center mb-8 text-secondary">Featured Games</h2>
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {/* Card components */}
-          </div>
-        </section>
-      </main>
-      <footer class="bg-secondary text-white py-12 px-6">
-        <div class="flex items-center justify-between">
-          <div>
-            <h3 class="text-xl font-bold mb-2">NBA Predictor</h3>
-            <nav class="space-x-4">{/* Navigation links */}</nav>
-          </div>
-          <div>
-            <h3 class="text-xl font-bold mb-2">Follow Us</h3>
-            <div class="flex space-x-4">{/* social links? */}</div>
-          </div>
-        </div>
-      </footer>
+      <div class="flex flex-col min-h-[100dvh] bg-primary light:bg-primary text-100 light:text-black">
+        <main class="flex-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
+          <section class="w-full py-12 md:py-24 lg:py-32">
+            <div class="container px-4 md:px-6">
+              <div class="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+                <div class="flex flex-col justify-center space-y-4">
+                  <div class="space-y-2">
+                    <h1 class="text-3xl text-100 light:text-white font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+                      Predict NBA Game Outcomes with Accuribet
+                    </h1>
+                    <p class="max-w-[600px] text-200 light:text-white md:text-xl dark:text-gray-400">
+                      Accuribet uses machine learning algorithms to predict the outcomes of NBA
+                      games. We use 42-48 unique data points and 10 years of historic data to
+                      predict the outcome.
+                    </p>
+                  </div>
+                </div>
+                <img
+                  alt="Hero"
+                  class="mx-auto aspect-video overflow-hidden rounded-xl object-cover sm:w-full lg:order-last lg:aspect-square"
+                  height="550"
+                  src="https://placeholder.pics/svg/300/F97EFF-8589FF/Placedholder"
+                  width="550"
+                />
+              </div>
+            </div>
+          </section>
+          <section class="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800">
+            <div class="container px-4 md:px-6">
+              <div class="flex flex-col items-center justify-center space-y-4 text-center">
+                <div class="space-y-2">
+                  <div class="inline-block rounded-lg bg-100 px-3 py-1 text-sm text-secondary">
+                    Accuracy
+                  </div>
+                  <h2 class="text-3xl font-bold tracking-tighter sm:text-5xl text-primary light:text-black">
+                    Unparalleled Prediction Accuracy
+                  </h2>
+                  <p class="max-w-[900px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed text-secondary light:text-100">
+                    Accuribet's machine learning models have been trained on years of historical NBA
+                    data, giving you the most accurate predictions in the industry. Our users report
+                    an average accuracy of over 80% on their bets.
+                  </p>
+                </div>
+              </div>
+              <div class="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
+                <img
+                  alt="Accuracy Chart"
+                  class="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last"
+                  height="310"
+                  src="https://placeholder.pics/svg/300x200/F97EFF-8589FF/Placedholder"
+                  width="550"
+                />
+                <div class="flex flex-col justify-center space-y-4">
+                  <ul class="grid gap-6">
+                    <li>
+                      <div class="grid gap-1">
+                        <h3 class="text-xl font-bold text-primary light:text-black">
+                          80%+ Accuracy
+                        </h3>
+                        <p class="text-secondary light:text-100">
+                          Our machine learning models have an average accuracy of over 80% on NBA
+                          game predictions.
+                        </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div class="grid gap-1">
+                        <h3 class="text-xl font-bold text-primary light:text-black">
+                          Real-Time Updates
+                        </h3>
+                        <p class="text-secondary light:text-100">
+                          Get the latest predictions and updates as soon as new data becomes
+                          available.
+                        </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div class="grid gap-1">
+                        <h3 class="text-xl font-bold text-primary light:text-black">Easy to Use</h3>
+                        <p class="text-secondary light:text-100">
+                          Our intuitive interface makes it simple to access the information you need
+                          to make informed bets.
+                        </p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </section>
+          <section class="w-full py-12 md:py-24 lg:py-32 bg-500">
+            <div class="container px-4 md:px-6">
+              <div class="grid items-center justify-center gap-4 text-center">
+                <div class="space-y-3">
+                  <h2 class="text-3xl font-bold tracking-tighter md:text-4xl/tight text-primary">
+                    Get Started with Accuribet
+                  </h2>
+                  <p class="mx-auto max-w-[600px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed text-secondary">
+                    Sign up today to start using our powerful NBA prediction platform and start
+                    winning big.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+        <footer class="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t">
+          <p class="text-xs text-gray-500 dark:text-gray-400">
+            © 2024 Accuribet. All rights reserved.
+          </p>
+          <nav class="sm:ml-auto flex gap-4 sm:gap-6">
+            <Link class="text-xs hover:underline underline-offset-4" href="#">
+              Terms of Service
+            </Link>
+            <Link class="text-xs hover:underline underline-offset-4" href="#">
+              Privacy
+            </Link>
+          </nav>
+        </footer>
+      </div>
     </>
   );
 };