Some small progress on landing page

package-lock.json

@@ -8,6 +8,7 @@
       "name": "dev-run",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.563.0",
@@ -699,6 +700,39 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "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.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -993,7 +1027,7 @@
       "version": "19.2.10",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1069,7 +1103,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/detect-libc": {

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",

src/app/page.tsx

@@ -1,65 +1,158 @@
-import Image from "next/image";
+import { Timer, Zap, Trophy, Users, ArrowRight, Play } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+const Landing = () => {
+  const features = [
+    {
+      icon: Timer,
+      title: "Race the Clock",
+      description: "Built-in timer with splits tracking. Every millisecond counts in your pursuit of the perfect run.",
+    },
+    {
+      icon: Trophy,
+      title: "Compete Globally",
+      description: "Weekly and all-time leaderboards. Claim your spot among the fastest runners worldwide.",
+    },
+    {
+      icon: Zap,
+      title: "Quick Runs",
+      description: "No signup walls. Jump into a run instantly and start grinding for that PB.",
+    },
+    {
+      icon: Users,
+      title: "Community First",
+      description: "Share your runs, compare splits, and celebrate clean runs with fellow speedrunners.",
+    },
+  ];
+
+  const stats = [
+    { value: "12K+", label: "Runners" },
+    { value: "847K", label: "Total Runs" },
+    { value: "156", label: "Problems" },
+    { value: "2:34", label: "World Record" },
+  ];
 
-export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative pt-32 pb-20 overflow-hidden">
+        {/* Background gradient */}
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{ background: 'radial-gradient(ellipse at top, hsl(270 91% 75% / 0.12) 0%, transparent 60%)' }}
         />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+
+        <div className="container mx-auto px-6 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            {/* Badge */}
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-8 animate-fade-in">
+              <Zap className="h-4 w-4" />
+              <span>The speedrunning platform for developers</span>
+            </div>
+
+            {/* Headline */}
+            <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6 animate-fade-in stagger-1 opacity-0" style={{ animationFillMode: 'forwards' }}>
+              Code Fast.{" "}
+              <span className="text-primary text-glow">Run Faster.</span>
+            </h1>
+
+            {/* Subheadline */}
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in stagger-2 opacity-0" style={{ animationFillMode: 'forwards' }}>
+              DevRun is competitive programming reimagined. Race the clock through algorithmic challenges,
+              track your splits, and compete for the fastest runs on the global leaderboard.
+            </p>
+
+            {/* CTA Buttons */}
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in stagger-3 opacity-0" style={{ animationFillMode: 'forwards' }}>
+              <Link href="/run">
+                <Button variant="hero" className="group">
+                  <Play className="h-5 w-5" />
+                  Start Your First Run
+                  <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
+                </Button>
+              </Link>
+              <Link href="/leaderboards">
+                <Button variant="hero-outline">
+                  <Trophy className="h-5 w-5" />
+                  View Leaderboards
+                </Button>
+              </Link>
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto mt-20">
+            {stats.map((stat, i) => (
+              <div
+                key={stat.label}
+                className="text-center animate-fade-in opacity-0"
+                style={{ animationDelay: `${0.4 + i * 0.1}s`, animationFillMode: 'forwards' }}
+              >
+                <p className="text-3xl md:text-4xl font-bold text-primary font-mono">{stat.value}</p>
+                <p className="text-sm text-muted-foreground mt-1">{stat.label}</p>
+              </div>
+            ))}
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-24 border-t border-border">
+        <div className="container mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+              Built for the <span className="text-primary">grind</span>
+            </h2>
+            <p className="text-muted-foreground max-w-xl mx-auto">
+              Everything you need to optimize your runs and climb the ranks.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {features.map((feature, i) => (
+              <div
+                key={feature.title}
+                className="group bg-card border border-border rounded-xl p-6 card-hover animate-fade-in opacity-0"
+                style={{ animationDelay: `${i * 0.1}s`, animationFillMode: 'forwards' }}
+              >
+                <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                  <feature.icon className="h-6 w-6 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
+              </div>
+            ))}
+          </div>
         </div>
-      </main>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-24 border-t border-border relative overflow-hidden">
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{ background: 'radial-gradient(ellipse at bottom, hsl(270 91% 75% / 0.08) 0%, transparent 60%)' }}
+        />
+
+        <div className="container mx-auto px-6 relative">
+          <div className="max-w-2xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+              Ready to chase your PB?
+            </h2>
+            <p className="text-muted-foreground mb-8">
+              Join thousands of runners pushing the limits of competitive programming.
+            </p>
+            <Link href="/problems">
+              <Button variant="hero" className="group">
+                Browse Problems
+                <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
     </div>
   );
-}
+};
+
+export default Landing;

src/components/app/Footer.tsx

@@ -0,0 +1,84 @@
+import { Timer, Github, Twitter, MessageCircle } from "lucide-react";
+
+const Footer = () => {
+  return (
+    <footer className="border-t border-border bg-card/50 mt-auto">
+      <div className="container mx-auto px-6 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* Brand */}
+          <div className="md:col-span-1">
+            <div className="flex items-center gap-2 mb-4">
+              <Timer className="h-6 w-6 text-primary" />
+              <span className="text-lg font-bold">
+                Dev<span className="text-primary">Run</span>
+              </span>
+            </div>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              The competitive programming platform for speedrunners. Race the clock, not the grind.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Quick Links</h4>
+            <ul className="space-y-2">
+              {["Problems", "Leaderboards", "Categories", "Rules"].map((link) => (
+                <li key={link}>
+                  <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors hover-underline">
+                    {link}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Community */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Community</h4>
+            <ul className="space-y-2">
+              {["Discord", "Reddit", "Twitter", "GitHub"].map((link) => (
+                <li key={link}>
+                  <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors hover-underline">
+                    {link}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Social */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Connect</h4>
+            <div className="flex gap-3">
+              <a href="#" className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all">
+                <Github className="h-5 w-5" />
+              </a>
+              <a href="#" className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all">
+                <Twitter className="h-5 w-5" />
+              </a>
+              <a href="#" className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all">
+                <MessageCircle className="h-5 w-5" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4">
+          <p className="text-sm text-muted-foreground">
+            © 2026 DevRun. Made with ⚡ by runners, for runners.
+          </p>
+          <div className="flex gap-6">
+            <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+              Privacy
+            </a>
+            <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+              Terms
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/app/LeaderboardRow.tsx

@@ -0,0 +1,73 @@
+import { Trophy } from "lucide-react";
+
+interface LeaderboardRowProps {
+  rank: number;
+  username: string;
+  pb: string;
+  runsCount: number;
+  category: string;
+  index?: number;
+}
+
+const LeaderboardRow = ({ rank, username, pb, runsCount, category, index = 0 }: LeaderboardRowProps) => {
+  const getRankStyle = (rank: number) => {
+    if (rank === 1) return "rank-gold";
+    if (rank === 2) return "rank-silver";
+    if (rank === 3) return "rank-bronze";
+    return "bg-secondary text-muted-foreground";
+  };
+
+  const getRankGlow = (rank: number) => {
+    if (rank === 1) return "glow-gold";
+    if (rank === 2) return "glow-silver";
+    if (rank === 3) return "glow-bronze";
+    return "";
+  };
+
+  const isTopThree = rank <= 3;
+
+  return (
+    <tr 
+      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? 'bg-secondary/30' : ''}`}
+      style={{ animationDelay: `${index * 0.05}s`, animationFillMode: 'forwards' }}
+    >
+      {/* Rank */}
+      <td className="py-4 px-4">
+        <div className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(rank)} ${getRankGlow(rank)}`}>
+          {rank <= 3 ? <Trophy className="h-4 w-4" /> : rank}
+        </div>
+      </td>
+
+      {/* Username */}
+      <td className="py-4 px-4">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary/50 to-primary/20 flex items-center justify-center text-xs font-bold text-primary">
+            {username.charAt(0).toUpperCase()}
+          </div>
+          <span className={`font-medium ${isTopThree ? 'text-foreground' : 'text-secondary-foreground'} group-hover:text-primary transition-colors`}>
+            {username}
+          </span>
+        </div>
+      </td>
+
+      {/* PB */}
+      <td className="py-4 px-4">
+        <span className="font-mono text-primary font-semibold">{pb}</span>
+      </td>
+
+      {/* Runs */}
+      <td className="py-4 px-4 text-muted-foreground">
+        {runsCount}
+      </td>
+
+      {/* Category */}
+      <td className="py-4 px-4">
+        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
+          {category}
+        </span>
+      </td>
+    </tr>
+  );
+};
+
+export default LeaderboardRow;

src/components/app/NavLink.tsx

@@ -0,0 +1,29 @@
+import Link, { LinkProps } from "next/link";
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+import { usePathname } from "next/navigation";
+
+interface NavLinkCompatProps extends Omit<LinkProps, "className"> {
+  className?: string;
+  activeClassName?: string;
+  pendingClassName?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
+  ({ className, activeClassName, pendingClassName, href, ...props }, ref) => {
+    const pathname = usePathname();
+    const isActive = pathname === href;
+    const isPending = false;
+
+    return (
+      <Link
+        ref={ref}
+        href={href}
+        className={cn(className, isActive && activeClassName, isPending && pendingClassName)}
+        {...props}
+      />
+    );
+  }
+);
+
+NavLink.displayName = "NavLink";

src/components/app/Navbar.tsx

@@ -0,0 +1,71 @@
+import Link from "next/link";
+import { Timer, Trophy, User, Zap } from "lucide-react";
+import { usePathname } from "next/navigation";
+
+const Navbar = () => {
+  const pathname = usePathname();
+
+  const navLinks = [
+    { to: "/problems", label: "Problems", icon: Zap },
+    { to: "/run", label: "Run", icon: Timer },
+    { to: "/leaderboards", label: "Leaderboards", icon: Trophy },
+    { to: "/profile", label: "Profile", icon: User },
+  ];
+
+  const isActive = (path: string) => pathname === path;
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
+      <div className="container mx-auto px-6">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <Link
+            href="/"
+            className="flex items-center gap-2 group"
+          >
+            <div className="relative">
+              <Timer className="h-8 w-8 text-primary transition-transform duration-300 group-hover:scale-110" />
+              <div className="absolute inset-0 bg-primary/30 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            </div>
+            <span className="text-xl font-bold text-foreground">
+              Dev<span className="text-primary">Run</span>
+            </span>
+          </Link>
+
+          {/* Navigation Links */}
+          <div className="hidden md:flex items-center gap-1">
+            {navLinks.map(({ to, label, icon: Icon }) => (
+              <Link
+                key={to}
+                href={to}
+                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 ${isActive(to)
+                    ? "bg-primary/10 text-primary"
+                    : "text-muted-foreground hover:text-foreground hover:bg-secondary"
+                  }`}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </Link>
+            ))}
+          </div>
+
+          {/* CTA Button */}
+          <div className="flex items-center gap-4">
+            <button className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-semibold transition-all duration-300 hover:scale-105 glow-purple hover:glow-purple-intense">
+              Start Run
+            </button>
+
+            {/* Mobile menu button */}
+            <button className="md:hidden p-2 text-muted-foreground hover:text-foreground">
+              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/app/ProblemCard.tsx

@@ -0,0 +1,81 @@
+import { Clock, Zap, Users } from "lucide-react";
+
+interface ProblemCardProps {
+  name: string;
+  difficulty: "easy" | "medium" | "hard";
+  tags: string[];
+  bestTime?: string;
+  attempts: number;
+  index?: number;
+}
+
+const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }: ProblemCardProps) => {
+  const difficultyStyles = {
+    easy: "diff-easy",
+    medium: "diff-medium",
+    hard: "diff-hard",
+  };
+
+  const difficultyLabels = {
+    easy: "Easy",
+    medium: "Medium",
+    hard: "Hard",
+  };
+
+  return (
+    <div 
+      className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`}
+      style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
+    >
+      {/* Glow effect on hover */}
+      <div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      
+      <div className="relative">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-3">
+          <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
+            {name}
+          </h3>
+          <span className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}>
+            {difficultyLabels[difficulty]}
+          </span>
+        </div>
+
+        {/* Tags */}
+        <div className="flex flex-wrap gap-2 mb-4">
+          {tags.map((tag) => (
+            <span 
+              key={tag} 
+              className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        {/* Stats */}
+        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+          {bestTime && (
+            <div className="flex items-center gap-1.5">
+              <Clock className="h-4 w-4 text-primary" />
+              <span className="font-mono">{bestTime}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-1.5">
+            <Users className="h-4 w-4" />
+            <span>{attempts} runs</span>
+          </div>
+        </div>
+
+        {/* Quick run button - appears on hover */}
+        <div className="absolute top-1/2 right-4 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
+          <button className="p-2 rounded-lg bg-primary text-primary-foreground">
+            <Zap className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProblemCard;

src/components/app/SplitRow.tsx

@@ -0,0 +1,66 @@
+import { Check, Minus } from "lucide-react";
+
+interface SplitRowProps {
+  problemName: string;
+  splitTime: string;
+  delta?: string;
+  isCompleted: boolean;
+  isCurrent?: boolean;
+  pbTime?: string;
+}
+
+const SplitRow = ({ problemName, splitTime, delta, isCompleted, isCurrent, pbTime }: SplitRowProps) => {
+  const getDeltaColor = (delta?: string) => {
+    if (!delta) return "text-muted-foreground";
+    if (delta.startsWith("-")) return "text-emerald-400";
+    if (delta.startsWith("+")) return "text-red-400";
+    return "text-muted-foreground";
+  };
+
+  return (
+    <div 
+      className={`flex items-center justify-between py-3 px-4 rounded-lg transition-all duration-300 ${
+        isCurrent 
+          ? 'bg-primary/10 border border-primary/30' 
+          : isCompleted 
+            ? 'bg-secondary/50' 
+            : 'bg-card'
+      }`}
+    >
+      <div className="flex items-center gap-3">
+        {/* Status indicator */}
+        <div className={`w-6 h-6 rounded-full flex items-center justify-center ${
+          isCompleted 
+            ? 'bg-emerald-500/20 text-emerald-400' 
+            : isCurrent 
+              ? 'bg-primary/20 text-primary pulse-live' 
+              : 'bg-secondary text-muted-foreground'
+        }`}>
+          {isCompleted ? <Check className="h-3.5 w-3.5" /> : <Minus className="h-3.5 w-3.5" />}
+        </div>
+        
+        <span className={`font-medium ${isCurrent ? 'text-primary' : isCompleted ? 'text-foreground' : 'text-muted-foreground'}`}>
+          {problemName}
+        </span>
+      </div>
+
+      <div className="flex items-center gap-4">
+        {/* Delta */}
+        {isCompleted && delta && (
+          <span className={`split-time ${getDeltaColor(delta)}`}>
+            {delta}
+          </span>
+        )}
+        
+        {/* Split time */}
+        <span className={`split-time min-w-[70px] text-right ${
+          isCompleted ? 'text-foreground' : 'text-muted-foreground'
+        }`}>
+          {isCompleted ? splitTime : pbTime || '--:--'}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default SplitRow;

src/components/app/StatCard.tsx

@@ -0,0 +1,35 @@
+import { LucideIcon } from "lucide-react";
+
+interface StatCardProps {
+  label: string;
+  value: string;
+  icon: LucideIcon;
+  trend?: string;
+  index?: number;
+}
+
+const StatCard = ({ label, value, icon: Icon, trend, index = 0 }: StatCardProps) => {
+  return (
+    <div 
+      className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
+      style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <div className="p-2 rounded-lg bg-primary/10">
+          <Icon className="h-5 w-5 text-primary" />
+        </div>
+        {trend && (
+          <span className={`text-xs font-medium ${
+            trend.startsWith('+') ? 'text-emerald-400' : 'text-muted-foreground'
+          }`}>
+            {trend}
+          </span>
+        )}
+      </div>
+      <p className="text-2xl font-bold text-foreground font-mono">{value}</p>
+      <p className="text-sm text-muted-foreground mt-1">{label}</p>
+    </div>
+  );
+};
+
+export default StatCard;

src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+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 transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }