feat: Redesign landing page with scroll-based storytelling (#22)

frontend/src/App.tsx

@@ -1,17 +1,17 @@
-import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { LoginPage } from './pages/LoginPage';
 import { SignupPage } from './pages/SignupPage';
-import { Playground } from './pages/Playground';
+import { LandingPage } from './pages/LandingPage';
 import { Dashboard } from './components/Dashboard';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth();
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-lg">Loading...</div>
+      <div className="min-h-screen flex items-center justify-center bg-[#0a0a0b]">
+        <div className="text-lg text-white">Loading...</div>
       </div>
     );
   }
@@ -23,25 +23,24 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
-function PlaygroundWrapper() {
-  const navigate = useNavigate();
+function LandingWrapper() {
   const { user } = useAuth();
 
   // If user is logged in, redirect to dashboard
   if (user) {
     return <Navigate to="/dashboard" replace />;
   }
 
-  return <Playground onSignupClick={() => navigate('/signup')} />;
+  return <LandingPage />;
 }
 
 function AppRoutes() {
   const { user } = useAuth();
 
   return (
     <Routes>
-      {/* Playground is the new landing page */}
-      <Route path="/" element={<PlaygroundWrapper />} />
+      {/* New Landing Page */}
+      <Route path="/" element={<LandingWrapper />} />
 
       <Route 
         path="/login" 
@@ -60,7 +59,7 @@ function AppRoutes() {
         }
       />
 
-      {/* Legacy route redirect */}
+      {/* Fallback */}
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,40 @@
+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",
+        success:
+          "border-transparent bg-green-500/10 text-green-500 border-green-500/20",
+        glow:
+          "border-transparent bg-blue-500/10 text-blue-400 border-blue-500/20",
+      },
+    },
+    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 }