From 88b947f6e87eb94736d474d6ff0c09399043c0a9 Mon Sep 17 00:00:00 2001
From: Speedauge <192351844+Speedauge@users.noreply.github.com>
Date: Thu, 3 Jul 2025 21:02:56 +0200
Subject: [PATCH 1/7] replace landing page images

---
 app/globals.css                       |  94 +++
 app/layout.tsx                        |  94 +++
 app/page.tsx                          | 531 ++++++++++++++++
 next-env.d.ts                         |   3 +-
 package-lock.json                     | 860 ++++++++++++++++++++++++--
 package.json                          |  13 +-
 postcss.config.mjs                    |   8 +
 public/manifest.json                  |  23 +
 src/components/ui/badge.tsx           |  36 ++
 src/components/ui/button.tsx          |  56 ++
 src/components/ui/card.tsx            |  86 +++
 src/lib/utils.ts                      |   6 +
 src/pages/{index.tsx => analysis.tsx} |   0
 tailwind.config.ts                    |  81 +++
 14 files changed, 1843 insertions(+), 48 deletions(-)
 create mode 100644 app/globals.css
 create mode 100644 app/layout.tsx
 create mode 100644 app/page.tsx
 create mode 100644 postcss.config.mjs
 create mode 100644 public/manifest.json
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/button.tsx
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/lib/utils.ts
 rename src/pages/{index.tsx => analysis.tsx} (100%)
 create mode 100644 tailwind.config.ts

diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 00000000..ac684423
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,94 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 00000000..26fbccfc
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,94 @@
+import type React from "react";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  metadataBase: new URL("https://chesskit.org"),
+  title: {
+    default: "Chesskit - Free Chess Game Analysis",
+    template: "%s | Chesskit",
+  },
+  description:
+    "Analyze your chess games for free with Chesskit. Support for Chess.com, Lichess, and PGN files. No ads, no subscriptions, open-source and privacy-focused.",
+  keywords: [
+    "chess analysis",
+    "free chess analyzer",
+    "chess.com analysis",
+    "lichess analysis",
+    "PGN analysis",
+    "chess improvement",
+    "chess tools",
+    "open source chess",
+  ],
+  authors: [{ name: "Chesskit Team" }],
+  creator: "Chesskit Team",
+  publisher: "Chesskit",
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/android-chrome-192x192.png", type: "image/png", sizes: "32x32" },
+    ],
+    shortcut: "/favicon.ico",
+    apple: "/android-chrome-192x192.png",
+  },
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://chesskit.org",
+    title: "Chesskit - Free Chess Game Analysis",
+    description:
+      "Analyze your chess games for free. Support for Chess.com, Lichess, and PGN files. No ads, no subscriptions.",
+    siteName: "Chesskit",
+    images: [
+      {
+        url: "/social-networks-1200x630.png",
+        width: 1200,
+        height: 630,
+        alt: "Chesskit - Free Chess Game Analysis",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Chesskit - Free Chess Game Analysis",
+    description:
+      "Analyze your chess games for free. Support for Chess.com, Lichess, and PGN files.",
+    creator: "@chesskit",
+    images: ["/social-networks-1200x630.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  verification: {
+    google: "your-google-verification-code",
+  },
+  generator: "v0.dev",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 00000000..1845895f
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,531 @@
+/* eslint-disable deprecation/deprecation */
+import type { Metadata } from "next";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Github,
+  MessageCircle,
+  Zap,
+  Shield,
+  Heart,
+  Upload,
+  BarChart3,
+  Eye,
+  Users,
+  Star,
+} from "lucide-react";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title:
+    "Chesskit - Free Chess Game Analysis | Analyze Chess.com & Lichess Games",
+  description:
+    "Analyze your chess games for free with Chesskit. Support for Chess.com, Lichess, and PGN files. No ads, no subscriptions, open-source and privacy-focused.",
+  keywords:
+    "chess analysis, free chess analyzer, chess.com analysis, lichess analysis, PGN analysis, chess improvement, chess tools, open source chess",
+  authors: [{ name: "Chesskit Team" }],
+  openGraph: {
+    title: "Chesskit - Free Chess Game Analysis",
+    description:
+      "Analyze your chess games for free. Support for Chess.com, Lichess, and PGN files. No ads, no subscriptions.",
+    type: "website",
+    url: "https://chesskit.com",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Chesskit - Free Chess Game Analysis",
+    description:
+      "Analyze your chess games for free. Support for Chess.com, Lichess, and PGN files.",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+export default function ChessKitLanding() {
+  return (
+    <div className="min-h-screen bg-[#121212] text-white">
+      {/* Header */}
+      <header className="border-b border-[#2e2e30] bg-[#121212]/95 backdrop-blur supports-[backdrop-filter]:bg-[#121212]/60 sticky top-0 z-50">
+        <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <img
+              src="/android-chrome-192x192.png"
+              alt="Chesskit Icon"
+              className="w-8 h-8"
+            />
+            <span className="text-xl font-bold">Chesskit</span>
+          </div>
+          <nav className="hidden md:flex items-center space-x-6">
+            <Link
+              href="#features"
+              className="text-gray-300 hover:text-[#3b9ac6] transition-colors"
+            >
+              Features
+            </Link>
+            <Link
+              href="#how-it-works"
+              className="text-gray-300 hover:text-[#3b9ac6] transition-colors"
+            >
+              How It Works
+            </Link>
+            <Link
+              href="#community"
+              className="text-gray-300 hover:text-[#3b9ac6] transition-colors"
+            >
+              Community
+            </Link>
+            <Button asChild className="bg-[#3b9ac6] hover:bg-[#3b9ac6]/90">
+              <Link href="#get-started">Get Started</Link>
+            </Button>
+          </nav>
+        </div>
+      </header>
+
+      <main>
+        {/* Hero Section */}
+        <section className="py-20 px-4">
+          <div className="container mx-auto text-center max-w-4xl">
+            <div className="flex justify-center mb-6">
+              <Badge
+                variant="secondary"
+                className="bg-[#2e2e30] text-[#3b9ac6] border-[#3b9ac6]/20"
+              >
+                <Star className="w-4 h-4 mr-1" />
+                100% Free & Open Source
+              </Badge>
+            </div>
+            <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+              Analyze Your Chess Games
+              <span className="block text-[#3b9ac6]">Like a Grandmaster</span>
+            </h1>
+            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto leading-relaxed">
+              Get deep insights into your chess games with our free, open-source
+              analysis platform. Support for{" "}
+              <Link
+                href="https://www.chess.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#3b9ac6] hover:underline"
+              >
+                Chess.com
+              </Link>
+              ,{" "}
+              <Link
+                href="https://lichess.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#3b9ac6] hover:underline"
+              >
+                Lichess
+              </Link>
+              , and PGN files. No ads, no subscriptions, no hidden costs.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+              <Button
+                size="lg"
+                className="bg-[#3b9ac6] hover:bg-[#3b9ac6]/90 text-white px-8 py-3 text-lg"
+                asChild
+              >
+                <Link href="/analysis">
+                  <BarChart3 className="w-5 h-5 mr-2" />
+                  Start Analyzing
+                </Link>
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-[#2e2e30] text-gray-300 hover:bg-[#2e2e30] px-8 py-3 text-lg"
+                asChild
+              >
+                <Link
+                  href="https://github.com/GuillaumeSD/Chesskit"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Github className="w-5 h-5 mr-2" />
+                  View on GitHub
+                </Link>
+              </Button>
+            </div>
+            <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+              <div>
+                <div className="text-3xl font-bold text-[#3b9ac6]">100%</div>
+                <div className="text-gray-400">Free Forever</div>
+              </div>
+              <div>
+                <div className="text-3xl font-bold text-[#3b9ac6]">0</div>
+                <div className="text-gray-400">Ads or Tracking</div>
+              </div>
+              <div>
+                <div className="text-3xl font-bold text-[#3b9ac6]">∞</div>
+                <div className="text-gray-400">Game Analysis</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Section */}
+        <section id="features" className="py-20 px-4 bg-[#2e2e30]/20">
+          <div className="container mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl font-bold mb-4">Why Choose Chesskit?</h2>
+              <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+                Built by chess players, for chess players. Every feature
+                designed to help you improve your game.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              <Card className="bg-[#2e2e30] border-[#2e2e30] hover:border-[#3b9ac6]/50 transition-colors">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-[#3b9ac6]/20 rounded-lg flex items-center justify-center mb-4">
+                    <Zap className="w-6 h-6 text-[#3b9ac6]" />
+                  </div>
+                  <CardTitle className="text-white">
+                    Lightning Fast Analysis
+                  </CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Get instant analysis of your games with parallelized{" "}
+                    <Link
+                      href="https://stockfishchess.org/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[#3b9ac6] hover:underline"
+                    >
+                      Stockfish
+                    </Link>{" "}
+                    evaluation. No waiting, no delays.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="bg-[#2e2e30] border-[#2e2e30] hover:border-[#3b9ac6]/50 transition-colors">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-[#3b9ac6]/20 rounded-lg flex items-center justify-center mb-4">
+                    <Upload className="w-6 h-6 text-[#3b9ac6]" />
+                  </div>
+                  <CardTitle className="text-white">
+                    Multiple Platforms
+                  </CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Import games from{" "}
+                    <Link
+                      href="https://www.chess.com"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[#3b9ac6] hover:underline"
+                    >
+                      Chess.com
+                    </Link>
+                    ,{" "}
+                    <Link
+                      href="https://lichess.org"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[#3b9ac6] hover:underline"
+                    >
+                      Lichess.org
+                    </Link>
+                    , or upload your own PGN files seamlessly.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="bg-[#2e2e30] border-[#2e2e30] hover:border-[#3b9ac6]/50 transition-colors">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-[#3b9ac6]/20 rounded-lg flex items-center justify-center mb-4">
+                    <Shield className="w-6 h-6 text-[#3b9ac6]" />
+                  </div>
+                  <CardTitle className="text-white">Privacy First</CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Your data stays yours. We don't collect personal information
+                    beyond basic monitoring.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="bg-[#2e2e30] border-[#2e2e30] hover:border-[#3b9ac6]/50 transition-colors">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-[#3b9ac6]/20 rounded-lg flex items-center justify-center mb-4">
+                    <Heart className="w-6 h-6 text-[#3b9ac6]" />
+                  </div>
+                  <CardTitle className="text-white">No Hidden Costs</CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Completely free forever. No subscriptions, no premium tiers,
+                    no surprise charges.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="bg-[#2e2e30] border-[#2e2e30] hover:border-[#3b9ac6]/50 transition-colors">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-[#3b9ac6]/20 rounded-lg flex items-center justify-center mb-4">
+                    <Github className="w-6 h-6 text-[#3b9ac6]" />
+                  </div>
+                  <CardTitle className="text-white">Open Source</CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Transparent, community-driven development. Contribute,
+                    suggest features, or fork the project.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="bg-[#2e2e30] border-[#2e2e30] hover:border-[#3b9ac6]/50 transition-colors">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-[#3b9ac6]/20 rounded-lg flex items-center justify-center mb-4">
+                    <Eye className="w-6 h-6 text-[#3b9ac6]" />
+                  </div>
+                  <CardTitle className="text-white">
+                    Ad-Free Experience
+                  </CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Focus on improving your chess without distractions. Clean,
+                    minimal interface.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* How It Works Section */}
+        <section id="how-it-works" className="py-20 px-4">
+          <div className="container mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl font-bold mb-4">How It Works</h2>
+              <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+                Get started in three simple steps. No registration required.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#3b9ac6] rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
+                  1
+                </div>
+                <h3 className="text-xl font-semibold mb-4">Import Your Game</h3>
+                <p className="text-gray-400">
+                  Upload a PGN file or paste your game URL from{" "}
+                  <Link
+                    href="https://www.chess.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[#3b9ac6] hover:underline"
+                  >
+                    Chess.com
+                  </Link>{" "}
+                  or{" "}
+                  <Link
+                    href="https://lichess.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[#3b9ac6] hover:underline"
+                  >
+                    Lichess
+                  </Link>
+                  .
+                </p>
+              </div>
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#3b9ac6] rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
+                  2
+                </div>
+                <h3 className="text-xl font-semibold mb-4">Get Analysis</h3>
+                <p className="text-gray-400">
+                  <Link
+                    href="https://stockfishchess.org/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[#3b9ac6] hover:underline"
+                  >
+                    Stockfish
+                  </Link>{" "}
+                  engine analyzes every move, highlighting mistakes and missed
+                  opportunities.
+                </p>
+              </div>
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#3b9ac6] rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
+                  3
+                </div>
+                <h3 className="text-xl font-semibold mb-4">
+                  Improve Your Game
+                </h3>
+                <p className="text-gray-400">
+                  Study the suggestions and learn from your mistakes to become a
+                  stronger player.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Community Section */}
+        <section id="community" className="py-20 px-4 bg-[#2e2e30]/20">
+          <div className="container mx-auto text-center">
+            <h2 className="text-4xl font-bold mb-4">Join Our Community</h2>
+            <p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
+              Connect with fellow chess enthusiasts, contribute to the project,
+              and help shape the future of Chesskit.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-[#3b9ac6] text-[#3b9ac6] hover:bg-[#3b9ac6] hover:text-white px-8 py-3"
+                asChild
+              >
+                <Link
+                  href="https://github.com/GuillaumeSD/Chesskit"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Github className="w-5 h-5 mr-2" />
+                  Star on GitHub
+                </Link>
+              </Button>
+              <Button
+                size="lg"
+                className="bg-[#3b9ac6] hover:bg-[#3b9ac6]/90 px-8 py-3"
+                asChild
+              >
+                <Link
+                  href="https://discord.gg/NAtPPqZpFN"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <MessageCircle className="w-5 h-5 mr-2" />
+                  Join Discord
+                </Link>
+              </Button>
+            </div>
+            <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto">
+              <Card className="bg-[#2e2e30] border-[#2e2e30]">
+                <CardHeader className="text-center">
+                  <Github className="w-8 h-8 text-[#3b9ac6] mx-auto mb-2" />
+                  <CardTitle className="text-white">Open Source</CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Contribute code, report bugs, or suggest new features on our
+                    GitHub repository.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+              <Card className="bg-[#2e2e30] border-[#2e2e30]">
+                <CardHeader className="text-center">
+                  <Users className="w-8 h-8 text-[#3b9ac6] mx-auto mb-2" />
+                  <CardTitle className="text-white">
+                    Community Support
+                  </CardTitle>
+                  <CardDescription className="text-gray-400">
+                    Get help, share tips, and discuss chess strategy with our
+                    friendly community.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section id="get-started" className="py-20 px-4">
+          <div className="container mx-auto text-center">
+            <h2 className="text-4xl font-bold mb-4">
+              Ready to Improve Your Chess?
+            </h2>
+            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+              Start analyzing your games today. No signup required, completely
+              free forever.
+            </p>
+            <Button
+              size="lg"
+              className="bg-[#3b9ac6] hover:bg-[#3b9ac6]/90 text-white px-12 py-4 text-lg"
+            >
+              <BarChart3 className="w-6 h-6 mr-2" />
+              Analyze Your First Game
+            </Button>
+          </div>
+        </section>
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-[#2e2e30] py-12 px-4">
+        <div className="container mx-auto">
+          <div className="flex flex-col md:flex-row justify-between items-center">
+            <div className="flex items-center space-x-2 mb-4 md:mb-0">
+              <img
+                src="/android-chrome-192x192.png"
+                alt="Chesskit Icon"
+                className="w-8 h-8"
+              />
+              <span className="text-xl font-bold">Chesskit</span>
+            </div>
+            <div className="flex items-center space-x-6">
+              <Link
+                href="https://github.com/GuillaumeSD/Chesskit"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-[#3b9ac6] transition-colors"
+              >
+                <Github className="w-5 h-5" />
+              </Link>
+              <Link
+                href="https://discord.gg/NAtPPqZpFN"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-[#3b9ac6] transition-colors"
+              >
+                <MessageCircle className="w-5 h-5" />
+              </Link>
+            </div>
+          </div>
+          <div className="mt-8 pt-8 border-t border-[#2e2e30] text-center text-gray-400">
+            <p>
+              &copy; {new Date().getFullYear()} Chesskit. Open source and free
+              forever.
+            </p>
+            <p className="mt-2 text-sm">
+              No data collection beyond monitoring. Your privacy is our
+              priority.
+            </p>
+            <p className="mt-4 text-xs">
+              Powered by{" "}
+              <Link
+                href="https://stockfishchess.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#3b9ac6] hover:underline"
+              >
+                Stockfish
+              </Link>
+              . Not affiliated with{" "}
+              <Link
+                href="https://www.chess.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#3b9ac6] hover:underline"
+              >
+                Chess.com
+              </Link>{" "}
+              or{" "}
+              <Link
+                href="https://lichess.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#3b9ac6] hover:underline"
+              >
+                Lichess.org
+              </Link>
+              .
+            </p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/next-env.d.ts b/next-env.d.ts
index 52e831b4..3cd7048e 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
index eedca5c7..8fb49f2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,17 +16,23 @@
         "@mui/lab": "^6.0.0-beta.21",
         "@mui/material": "^6.3.0",
         "@mui/x-data-grid": "^7.23.5",
+        "@radix-ui/react-slot": "1.1.1",
         "@sentry/nextjs": "^8.47.0",
         "@tanstack/react-query": "^5.75.5",
         "chess.js": "^1.2.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "firebase": "^11.1.0",
         "idb": "^8.0.1",
         "jotai": "^2.11.0",
+        "lucide-react": "^0.454.0",
         "next": "15.2.4",
         "react": "18.3.1",
         "react-chessboard": "^4.7.3",
         "react-dom": "18.3.1",
         "recharts": "^2.15.0",
+        "tailwind-merge": "^2.5.5",
+        "tailwindcss-animate": "^1.0.7",
         "tinycolor2": "^1.6.0"
       },
       "devDependencies": {
@@ -37,6 +43,7 @@
         "@types/tinycolor2": "^1.4.6",
         "@typescript-eslint/eslint-plugin": "^8.18.2",
         "@typescript-eslint/parser": "^8.18.2",
+        "autoprefixer": "^10.4.20",
         "aws-cdk": "^2.1007.0",
         "aws-cdk-lib": "^2.186.0",
         "constructs": "^10.0.0",
@@ -46,9 +53,23 @@
         "eslint-plugin-deprecation": "^3.0.0",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-prettier": "^5.2.1",
+        "postcss": "^8.5",
+        "tailwindcss": "^3.4.17",
         "typescript": "^5.7.2"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -1719,6 +1740,96 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -2306,7 +2417,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -2319,7 +2429,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -2328,7 +2437,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -2948,6 +3056,16 @@
         "@opentelemetry/api": "^1.1.0"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pkgr/core": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
@@ -3077,6 +3195,39 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-dnd/asap": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -4827,6 +4978,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -4840,6 +4997,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -5027,6 +5190,44 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -5534,9 +5735,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz",
-      "integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==",
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
+      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
       "funding": [
         {
           "type": "opencollective",
@@ -5553,10 +5754,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001688",
-        "electron-to-chromium": "^1.5.73",
+        "caniuse-lite": "^1.0.30001726",
+        "electron-to-chromium": "^1.5.173",
         "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.1"
+        "update-browserslist-db": "^1.1.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5641,10 +5842,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001690",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
-      "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==",
+      "version": "1.0.30001726",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001726.tgz",
+      "integrity": "sha512-VQAUIUzBiZ/UnlM28fSp2CRF3ivUn1BWEvxMcVTNwpw91Py1pGbPIyIKtd+tzct9C3ouceCVdGAXxZOpZAsgdw==",
       "funding": [
         {
           "type": "opencollective",
@@ -5732,6 +5942,18 @@
       "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==",
       "license": "MIT"
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -5855,7 +6077,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -5866,6 +6087,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -6126,6 +6359,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6139,6 +6378,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "license": "MIT"
+    },
     "node_modules/dnd-core": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
@@ -6198,17 +6443,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.76",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.76.tgz",
-      "integrity": "sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==",
+      "version": "1.5.179",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.179.tgz",
+      "integrity": "sha512-UWKi/EbBopgfFsc5k61wFpV7WrnnSlSzW/e2XcBmS6qKYTivZlLtoll5/rdqRTxGglGHkmkW0j0pFNJG10EUIQ==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/enhanced-resolve": {
@@ -7030,7 +7280,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -7046,7 +7295,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -7076,7 +7324,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -7227,12 +7474,42 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/forwarded-parse": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/forwarded-parse/-/forwarded-parse-2.1.2.tgz",
       "integrity": "sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==",
       "license": "MIT"
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -7388,7 +7665,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -8125,6 +8401,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -8156,6 +8447,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/jotai": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.11.0.tgz",
@@ -8299,6 +8599,18 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -8373,6 +8685,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.454.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
+      "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -8403,7 +8724,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -8412,7 +8732,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -8486,10 +8805,21 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -8571,6 +8901,34 @@
         }
       }
     },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -8606,6 +8964,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -8614,6 +8982,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
@@ -8795,6 +9172,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8845,7 +9228,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8942,6 +9324,24 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -8953,9 +9353,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -8970,15 +9370,96 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
@@ -9121,7 +9602,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9269,6 +9749,15 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -9444,7 +9933,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -9486,7 +9974,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9705,7 +10192,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -9717,7 +10203,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9804,6 +10289,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -9841,9 +10338,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9912,6 +10410,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -10041,6 +10560,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -10090,6 +10622,90 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10130,6 +10746,109 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/yaml": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -10255,6 +10974,27 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -10297,6 +11037,12 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -10469,9 +11215,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
-      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
       "funding": [
         {
           "type": "opencollective",
@@ -10489,7 +11235,7 @@
       "license": "MIT",
       "dependencies": {
         "escalade": "^3.2.0",
-        "picocolors": "^1.1.0"
+        "picocolors": "^1.1.1"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
@@ -10506,6 +11252,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -10784,6 +11536,24 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 5c51c6b8..b8821422 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,13 @@
     "react-chessboard": "^4.7.3",
     "react-dom": "18.3.1",
     "recharts": "^2.15.0",
-    "tinycolor2": "^1.6.0"
+    "tinycolor2": "^1.6.0",
+    "clsx": "^2.1.1",
+    "class-variance-authority": "^0.7.1",
+    "tailwind-merge": "^2.5.5",
+    "lucide-react": "^0.454.0",
+    "tailwindcss-animate": "^1.0.7",
+    "@radix-ui/react-slot": "1.1.1"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.74.7",
@@ -48,6 +54,9 @@
     "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "tailwindcss": "^3.4.17",
+    "postcss": "^8.5",
+    "autoprefixer": "^10.4.20"
   }
 }
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 00000000..1a69fd2a
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 00000000..611b5f0d
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,23 @@
+{
+  "name": "Chesskit - Free Chess Game Analysis",
+  "short_name": "Chesskit",
+  "description": "Analyze your chess games for free with Chesskit. Support for Chess.com, Lichess, and PGN files.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#121212",
+  "theme_color": "#3b9ac6",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000..9ec9a1a0
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000..f2329bdf
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 00000000..77278459
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000..a5ef1935
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/pages/index.tsx b/src/pages/analysis.tsx
similarity index 100%
rename from src/pages/index.tsx
rename to src/pages/analysis.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 00000000..ca151e28
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,81 @@
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "*.{js,ts,jsx,tsx,mdx}",
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "#121212",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "#3b9ac6",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "#2e2e30",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "#2e2e30",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "#2e2e30",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "#2e2e30",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "#2e2e30",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
+
+export default config

From cfffb1ac642c15e076f3ac09b837959e894f1cf4 Mon Sep 17 00:00:00 2001
From: TonNom <ton@email.com>
Date: Thu, 3 Jul 2025 21:27:21 +0200
Subject: [PATCH 2/7] fix

---
 app/page.tsx                    |  5 ++++-
 src/sections/layout/NavMenu.tsx |  2 +-
 tsconfig.json                   | 20 ++++++++++++++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 1845895f..85dbf777 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -83,7 +83,7 @@ export default function ChessKitLanding() {
               Community
             </Link>
             <Button asChild className="bg-[#3b9ac6] hover:bg-[#3b9ac6]/90">
-              <Link href="#get-started">Get Started</Link>
+              <Link href="/analysis">Get Started</Link>
             </Button>
           </nav>
         </div>
@@ -445,9 +445,12 @@ export default function ChessKitLanding() {
             <Button
               size="lg"
               className="bg-[#3b9ac6] hover:bg-[#3b9ac6]/90 text-white px-12 py-4 text-lg"
+              asChild
             >
+              <Link href="/analysis">
               <BarChart3 className="w-6 h-6 mr-2" />
               Analyze Your First Game
+              </Link>
             </Button>
           </div>
         </section>
diff --git a/src/sections/layout/NavMenu.tsx b/src/sections/layout/NavMenu.tsx
index 337b2299..434f5c3f 100644
--- a/src/sections/layout/NavMenu.tsx
+++ b/src/sections/layout/NavMenu.tsx
@@ -13,7 +13,7 @@ import {
 
 const MenuOptions = [
   { text: "Play", icon: "streamline:chess-pawn", href: "/play" },
-  { text: "Analysis", icon: "streamline:magnifying-glass-solid", href: "/" },
+  { text: "Analysis", icon: "streamline:magnifying-glass-solid", href: "/analysis" },
   {
     text: "Database",
     icon: "streamline:database",
diff --git a/tsconfig.json b/tsconfig.json
index bae9a401..0c371c2e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
     "target": "ES2021",
-    "lib": ["dom"],
+    "lib": [
+      "dom"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "strict": true,
@@ -24,9 +26,19 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    "next.config.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

From c1f816cd258af7c73d2513c3585cdf59372cfccb Mon Sep 17 00:00:00 2001
From: TonNom <ton@email.com>
Date: Thu, 3 Jul 2025 23:20:45 +0200
Subject: [PATCH 3/7] Built with love

---
 app/page.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index 85dbf777..33e02388 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -524,7 +524,16 @@ export default function ChessKitLanding() {
               >
                 Lichess.org
               </Link>
-              .
+              <p className="mt-4 text-xs">
+                Landing page built with ❤️ by               <Link
+                href="https://github.com/Speedauge"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#3b9ac6] hover:underline"
+              >
+                SpeedAuge
+              </Link>
+              </p>
             </p>
           </div>
         </div>

From c6bd192685d226ba79e036860abdae04fd15a812 Mon Sep 17 00:00:00 2001
From: TonNom <ton@email.com>
Date: Fri, 4 Jul 2025 16:33:54 +0200
Subject: [PATCH 4/7] =?UTF-8?q?am=C3=A9liorer=20la=20section=20d'accueil?=
 =?UTF-8?q?=20avec=20un=20nouveau=20bouton=20de=20feedback=20et=20des=20aj?=
 =?UTF-8?q?ustements=20de=20mise=20en=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.tsx | 45 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 33e02388..d0295905 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,6 +11,7 @@ import { Badge } from "@/components/ui/badge";
 import {
   Github,
   MessageCircle,
+  MessageCircleWarning,
   Zap,
   Shield,
   Heart,
@@ -93,13 +94,13 @@ export default function ChessKitLanding() {
         {/* Hero Section */}
         <section className="py-20 px-4">
           <div className="container mx-auto text-center max-w-4xl">
-            <div className="flex justify-center mb-6">
+            <div className="flex justify-center mb-12">
               <Badge
                 variant="secondary"
                 className="bg-[#2e2e30] text-[#3b9ac6] border-[#3b9ac6]/20"
               >
                 <Star className="w-4 h-4 mr-1" />
-                100% Free & Open Source
+                Free & Open Source
               </Badge>
             </div>
             <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
@@ -107,8 +108,8 @@ export default function ChessKitLanding() {
               <span className="block text-[#3b9ac6]">Like a Grandmaster</span>
             </h1>
             <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto leading-relaxed">
-              Get deep insights into your chess games with our free, open-source
-              analysis platform. Support for{" "}
+              <br></br>
+              Support for{" "}
               <Link
                 href="https://www.chess.com"
                 target="_blank"
@@ -155,6 +156,7 @@ export default function ChessKitLanding() {
                 </Link>
               </Button>
             </div>
+            <br></br>
             <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
               <div>
                 <div className="text-3xl font-bold text-[#3b9ac6]">100%</div>
@@ -404,8 +406,23 @@ export default function ChessKitLanding() {
                   Join Discord
                 </Link>
               </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-[#3b9ac6] text-[#3b9ac6] hover:bg-[#3b9ac6] hover:text-white px-8 py-3"
+                asChild
+              >
+                <Link
+                  href="https://tally.so/r/3x7OLy"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <MessageCircleWarning className="w-5 h-5 mr-2" />
+                  Give a Feedback
+                </Link>
+              </Button>
             </div>
-            <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto">
+            <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
               <Card className="bg-[#2e2e30] border-[#2e2e30]">
                 <CardHeader className="text-center">
                   <Github className="w-8 h-8 text-[#3b9ac6] mx-auto mb-2" />
@@ -428,6 +445,24 @@ export default function ChessKitLanding() {
                   </CardDescription>
                 </CardHeader>
               </Card>
+              <Card className="bg-[#2e2e30] border-[#2e2e30]">
+                <CardHeader className="text-center">
+                  <Heart className="w-8 h-8 text-[#3b9ac6] mx-auto mb-2" />
+                  <CardTitle className="text-white">
+                   Community driven
+                  </CardTitle>
+                  <CardDescription className="text-gray-400">
+                    We would be happy to hear your {" "}
+                    <Link
+                    href="https://tally.so/r/3x7OLy"
+                    target="_blank"
+                    className="text-[#3b9ac6] hover:underline"
+                  >
+                    feedback
+                  </Link> and suggestions.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
             </div>
           </div>
         </section>

From 291d34cb3f1e3fe70ab231eebd1716deeb2431bd Mon Sep 17 00:00:00 2001
From: Speedauge <192351844+Speedauge@users.noreply.github.com>
Date: Fri, 4 Jul 2025 17:49:33 +0200
Subject: [PATCH 5/7] small ui change

---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index d0295905..6ae50220 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -83,7 +83,7 @@ export default function ChessKitLanding() {
             >
               Community
             </Link>
-            <Button asChild className="bg-[#3b9ac6] hover:bg-[#3b9ac6]/90">
+            <Button asChild className="text-white bg-[#3b9ac6] hover:bg-[#3b9ac6]/90">
               <Link href="/analysis">Get Started</Link>
             </Button>
           </nav>

From 930ffcd12100aa99fda4f20a9167c63f16cbe592 Mon Sep 17 00:00:00 2001
From: Speedauge <192351844+Speedauge@users.noreply.github.com>
Date: Fri, 4 Jul 2025 18:00:09 +0200
Subject: [PATCH 6/7] =?UTF-8?q?mise=20=C3=A0=20jour=20des=20routes=20pour?=
 =?UTF-8?q?=20rediriger=20vers=20l'analyse=20au=20lieu=20de=20la=20page=20?=
 =?UTF-8?q?d'accueil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/database.tsx                         | 2 +-
 src/sections/analysis/panelHeader/loadGame.tsx | 2 +-
 src/sections/play/gameRecap.tsx                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/database.tsx b/src/pages/database.tsx
index d6bff021..396e7a0b 100644
--- a/src/pages/database.tsx
+++ b/src/pages/database.tsx
@@ -118,7 +118,7 @@ export default function GameDatabase() {
               }
               label="Open Evaluation"
               onClick={() =>
-                router.push({ pathname: "/", query: { gameId: id } })
+                router.push({ pathname: "/analysis", query: { gameId: id } })
               }
               color="inherit"
               key={`${id}-open-eval-button`}
diff --git a/src/sections/analysis/panelHeader/loadGame.tsx b/src/sections/analysis/panelHeader/loadGame.tsx
index d8a7ea4f..7a3bb4e5 100644
--- a/src/sections/analysis/panelHeader/loadGame.tsx
+++ b/src/sections/analysis/panelHeader/loadGame.tsx
@@ -90,7 +90,7 @@ export default function LoadGame() {
       label={isGameLoaded ? "Load another game" : "Load game"}
       size="small"
       setGame={async (game) => {
-        await router.push("/");
+        await router.push("/analysis");
         resetAndSetGamePgn(game.pgn());
       }}
     />
diff --git a/src/sections/play/gameRecap.tsx b/src/sections/play/gameRecap.tsx
index 91eae118..4153d09b 100644
--- a/src/sections/play/gameRecap.tsx
+++ b/src/sections/play/gameRecap.tsx
@@ -35,7 +35,7 @@ export default function GameRecap() {
     });
     const gameId = await addGame(gameToAnalysis);
 
-    router.push({ pathname: "/", query: { gameId } });
+    router.push({ pathname: "/analysis", query: { gameId } });
   };
 
   return (

From 2fd34ee8ccc382d11a1d533f226e95ff6008375e Mon Sep 17 00:00:00 2001
From: Speedauge <192351844+Speedauge@users.noreply.github.com>
Date: Fri, 4 Jul 2025 21:38:50 +0200
Subject: [PATCH 7/7] Small UI improvement

---
 app/page.tsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6ae50220..dd57494e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -27,7 +27,7 @@ export const metadata: Metadata = {
   title:
     "Chesskit - Free Chess Game Analysis | Analyze Chess.com & Lichess Games",
   description:
-    "Analyze your chess games for free with Chesskit. Support for Chess.com, Lichess, and PGN files. No ads, no subscriptions, open-source and privacy-focused.",
+    "Analyze your chess games for free with Chesskit. Support for Chess.com, Lichess, and PGN / FEN. No ads, no subscriptions, open-source and privacy-focused.",
   keywords:
     "chess analysis, free chess analyzer, chess.com analysis, lichess analysis, PGN analysis, chess improvement, chess tools, open source chess",
   authors: [{ name: "Chesskit Team" }],
@@ -97,7 +97,7 @@ export default function ChessKitLanding() {
             <div className="flex justify-center mb-12">
               <Badge
                 variant="secondary"
-                className="bg-[#2e2e30] text-[#3b9ac6] border-[#3b9ac6]/20"
+                className="bg-[#2e2e30] text-[#3b9ac6] border-[#3b9ac6]/20 mb-8"
               >
                 <Star className="w-4 h-4 mr-1" />
                 Free & Open Source
@@ -127,7 +127,7 @@ export default function ChessKitLanding() {
               >
                 Lichess
               </Link>
-              , and PGN files. No ads, no subscriptions, no hidden costs.
+              , FEN, and PGN files. No ads, no subscriptions, no hidden costs.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
               <Button
@@ -203,7 +203,7 @@ export default function ChessKitLanding() {
                     >
                       Stockfish
                     </Link>{" "}
-                    evaluation. No waiting, no delays.
+                    evaluation. 
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -248,7 +248,7 @@ export default function ChessKitLanding() {
                   <CardTitle className="text-white">Privacy First</CardTitle>
                   <CardDescription className="text-gray-400">
                     Your data stays yours. We don't collect personal information
-                    beyond basic monitoring.
+                    beyond monitoring. No account required.
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -313,7 +313,7 @@ export default function ChessKitLanding() {
                 </div>
                 <h3 className="text-xl font-semibold mb-4">Import Your Game</h3>
                 <p className="text-gray-400">
-                  Upload a PGN file or paste your game URL from{" "}
+                  Upload a PGN / FEN or paste your game URL from{" "}
                   <Link
                     href="https://www.chess.com"
                     target="_blank"
@@ -428,8 +428,14 @@ export default function ChessKitLanding() {
                   <Github className="w-8 h-8 text-[#3b9ac6] mx-auto mb-2" />
                   <CardTitle className="text-white">Open Source</CardTitle>
                   <CardDescription className="text-gray-400">
-                    Contribute code, report bugs, or suggest new features on our
-                    GitHub repository.
+                    Contribute code, report bugs, or suggest new features on our {" "}
+                    <Link
+                    href="https://github.com/GuillaumeSD/Chesskit"
+                    target="_blank"
+                    className="text-[#3b9ac6] hover:underline"
+                  >
+                    GitHub
+                  </Link> repository.
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -441,7 +447,14 @@ export default function ChessKitLanding() {
                   </CardTitle>
                   <CardDescription className="text-gray-400">
                     Get help, share tips, and discuss chess strategy with our
-                    friendly community.
+                    friendly community on {" "}
+                    <Link
+                    href="https://discord.gg/NAtPPqZpFN"
+                    target="_blank"
+                    className="text-[#3b9ac6] hover:underline"
+                  >
+                    Discord
+                  </Link>.
                   </CardDescription>
                 </CardHeader>
               </Card>