Merge pull request #11 from orus-dev/ui-stuff

UI stuff

src/app/globals.css

@@ -163,33 +163,6 @@
 }
 
 @layer components {
-
-  /* ===== Glow effects ===== */
-  .glow-purple {
-    box-shadow:
-      0 0 20px color-mix(in oklch, var(--primary) 30%, transparent),
-      0 0 40px color-mix(in oklch, var(--primary) 10%, transparent);
-  }
-
-  .glow-purple-intense {
-    box-shadow:
-      0 0 30px color-mix(in oklch, var(--primary) 50%, transparent),
-      0 0 60px color-mix(in oklch, var(--primary) 20%, transparent);
-  }
-
-  .glow-gold {
-    box-shadow: 0 0 20px color-mix(in oklch, oklch(82.8% 0.189 84.429) 70%, transparent);
-    /* box-shadow: 0 0 20px color-mix(in oklch, var(--chart-4) 40%, transparent); */
-  }
-
-  .glow-silver {
-    box-shadow: 0 0 20px color-mix(in oklch, var(--foreground) 60%, transparent);
-  }
-
-  .glow-bronze {
-    box-shadow: 0 0 20px color-mix(in oklch, oklch(55.5% 0.163 48.998) 60%, transparent);
-  }
-
   /* ===== Text glow ===== */
   .text-glow {
     text-shadow: 0 0 20px color-mix(in oklch, var(--primary) 50%, transparent);
@@ -218,44 +191,13 @@
     box-shadow: 0 10px 40px color-mix(in oklch, var(--primary) 15%, transparent);
   }
 
-  /* ===== Timer / mono UI ===== */
+  /* ===== Timer ===== */
   .timer-display {
     font-family: var(--font-geist-mono);
     @apply text-6xl font-bold tracking-wider;
     text-shadow: 0 0 30px color-mix(in oklch, var(--primary) 60%, transparent);
   }
 
-  .split-time {
-    font-family: var(--font-geist-mono);
-    @apply text-sm tracking-wide;
-  }
-
-  /* ===== Rank badges ===== */
-  .rank-gold {
-    @apply bg-linear-to-r from-yellow-500 to-amber-400 text-black;
-  }
-
-  .rank-silver {
-    @apply bg-linear-to-r from-gray-300 to-gray-400 text-black;
-  }
-
-  .rank-bronze {
-    @apply bg-linear-to-r from-orange-600 to-amber-700 text-white;
-  }
-
-  /* ===== Difficulty badges ===== */
-  .diff-easy {
-    @apply bg-emerald-500/20 text-emerald-400 border border-emerald-500/30;
-  }
-
-  .diff-medium {
-    @apply bg-amber-500/20 text-amber-400 border border-amber-500/30;
-  }
-
-  .diff-hard {
-    @apply bg-red-500/20 text-red-400 border border-red-500/30;
-  }
-
   /* ===== Animations ===== */
   .pulse-live {
     animation: pulse-glow 2s ease-in-out infinite;

src/app/leaderboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
+import { Calendar, Globe } from "lucide-react";
 import { useState } from "react";
 
 import { Card } from "@/components/ui/card";
@@ -21,15 +21,14 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 
-import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
-import StatCard from "@/components/app/StatCard";
+import LeaderboardRow from "@/app/leaderboard/components/LeaderboardRow";
 import useAction from "@/hook/use-action";
 import {
   getGlobalLeaderboard,
   getWeeklyLeaderboard,
 } from "@/modules/leaderboard/actions";
 
-export default function Leaderboards() {
+export default function Leaderboard() {
   const [global] = useAction(getGlobalLeaderboard);
   const [weekly] = useAction(getWeeklyLeaderboard);
 
@@ -41,41 +40,13 @@ export default function Leaderboards() {
       <div className="container mx-auto px-6 space-y-8">
         {/* Header */}
         <div>
-          <h1 className="text-4xl font-bold">Leaderboards</h1>
-          <p className="text-muted-foreground">
-            The fastest runners in the game. Will you claim a spot?
+          <h1 className="text-4xl font-bold">Leaderboard</h1>
+          <p className="text-sm text-muted-foreground mb-4">
+            1,284 runners · Ranked by performance
           </p>
         </div>
 
-        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard
-            icon={Globe}
-            label="Total Runners"
-            value="12,453"
-            index={0}
-          />
-          <StatCard
-            icon={Trophy}
-            label="World Record"
-            value="2:34.21"
-            index={1}
-          />
-          <StatCard
-            icon={TrendingUp}
-            label="Runs This Week"
-            value="847K"
-            index={2}
-          />
-          <StatCard
-            icon={Calendar}
-            label="Until Reset"
-            value="5d 12h"
-            index={3}
-          />
-        </div>
-
-        {/* Tabs + Filters */}
+        {/* Filters */}
         <div className="flex flex-col md:flex-row gap-4 justify-between">
           <Tabs
             value={activeTab}

src/app/page.tsx

@@ -84,10 +84,10 @@ export default function Landing() {
                   <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
                 </Button>
               </Link>
-              <Link href="/leaderboards">
+              <Link href="/leaderboard">
                 <Button variant="hero">
                   <Trophy className="h-5 w-5" />
-                  View Leaderboards
+                  View Leaderboard
                 </Button>
               </Link>
             </div>

src/app/problems/components/ProblemCard.tsx

@@ -1,4 +1,13 @@
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { Problem } from "@/modules/problems/types";
 import { Clock, Zap, Users, Code } from "lucide-react";
@@ -15,9 +24,9 @@ const ProblemCard = ({
   attempts?: number;
 }) => {
   const difficultyStyles = {
-    easy: "diff-easy",
-    medium: "diff-medium",
-    hard: "diff-hard",
+    easy: "bg-emerald-500/10 text-emerald-400 border border-emerald-500/30",
+    medium: "bg-amber-500/10 text-amber-400 border border-amber-500/30",
+    hard: "bg-red-500/10 text-red-400 border border-red-500/30",
   };
 
   const difficultyLabels = {
@@ -27,66 +36,72 @@ const ProblemCard = ({
   };
 
   return (
-    <div
-      className="group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0 h-full flex flex-col justify-between"
+    <Card
+      className={cn(
+        "group relative cursor-pointer overflow-hidden",
+        "animate-fade-in opacity-0 h-full",
+        "card-hover gap-3",
+      )}
       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 pointer-events-none" />
+      {/* Glow */}
+      <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
 
-      {/* Content */}
-      <div className="relative flex flex-col h-full">
       {/* Header */}
-        <div className="flex items-start justify-between mb-3">
-          <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
+      <CardHeader>
+        <CardTitle className="flex justify-between items-center">
           {problem.title}
-          </h3>
-          <span
-            className={`px-2 py-1 rounded-md text-xs font-medium ${
-              difficultyStyles[problem.difficulty]
-            }`}
+          <Badge
+            variant="secondary"
+            className={cn(
+              "text-xs font-medium text-green-600",
+              difficultyStyles[problem.difficulty],
+            )}
           >
             {difficultyLabels[problem.difficulty]}
-          </span>
-        </div>
+          </Badge>
+        </CardTitle>
 
-        {/* Tags / Meta */}
-        <div className="flex flex-wrap gap-2 text-xs text-muted-foreground w-f mb-2 w-full">
-          <div className="flex items-center gap-4">
+        <CardDescription className="truncate whitespace-nowrap max-w-full">
+          {problem.description}
+        </CardDescription>
+      </CardHeader>
+
+      {/* Content */}
+      <CardContent className="flex flex-col gap-3">
+        {/* Meta */}
+        <div className="flex flex-wrap items-center gap-4 text-xs 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>
 
           {problem.language && (
-            <span className="px-2 py-1 rounded-md bg-secondary">
-              <Code className="w-3 h-3 inline-block mr-1" /> {problem.language}
-            </span>
+            <Badge variant="secondary" className="flex items-center gap-1">
+              <Code className="h-3 w-3" />
+              {problem.language}
+            </Badge>
           )}
         </div>
+      </CardContent>
 
-        {/* Description */}
-        <p className="text-sm text-muted-foreground truncate overflow-hidden whitespace-nowrap max-w-full">
-          {problem.description}
-        </p>
-
-        <div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
-          <Button size="p2">
+      {/* Footer */}
+      <CardFooter className="absolute bottom-4 right-4 p-0 opacity-0 group-hover:opacity-100 transition-all">
+        <Button size="icon">
           <Zap className="h-4 w-4" />
         </Button>
-        </div>
-      </div>
-    </div>
+      </CardFooter>
+    </Card>
   );
 };
 

src/app/problems/page.tsx

@@ -32,24 +32,13 @@ export default function Problems() {
         </div>
 
         {/* Filters */}
-        <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
+        <div className="flex flex-row flex-wrap gap-4 items-start lg:items-center">
           {/* Search */}
           <div className="relative flex-1 max-w-md">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input placeholder="Search problems..." className="pl-9" />
           </div>
 
-          {/* Category Filter */}
-          <div className="flex flex-wrap gap-2">
-            <ToggleGroup variant="outline" type="multiple">
-              {["Arrays", "Trees", "Graphs", "DP", "Strings"].map((f) => (
-                <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
-                  {f}
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-          </div>
-
           {/* Difficulty Filter */}
           <div className="flex flex-wrap gap-2">
             <ToggleGroup variant="outline" type="multiple">
@@ -63,7 +52,9 @@ export default function Problems() {
 
           {/* View Toggle */}
           <ToggleGroup
+            className="hidden md:block"
             type="single"
+            variant="outline"
             value={viewMode}
             onValueChange={(v) => v && setViewMode(v as "grid" | "list")}
           >

src/components/app/Footer.tsx

@@ -34,7 +34,7 @@ const Footer = () => {
           <div>
             <h4 className="font-semibold text-foreground mb-4">Quick Links</h4>
             <ul className="space-y-2">
-              {["Problems", "Leaderboards", "Categories", "Rules"].map(
+              {["Problems", "Leaderboard", "Categories", "Rules"].map(
                 (link) => (
                   <li key={link}>
                     <a

src/components/app/Navbar.tsx

@@ -13,9 +13,9 @@ const navs = [
     name: "Problems",
   },
   {
-    link: "/leaderboards",
+    link: "/leaderboard",
     icon: Trophy,
-    name: "Leaderboards",
+    name: "Leaderboard",
   },
   {
     link: "/runs",

src/components/app/Rank.tsx

@@ -2,16 +2,22 @@ import { Trophy } from "lucide-react";
 
 export default function Rank({ rank }: { rank: number }) {
   const getRankStyle = (rank: number) => {
-    if (rank === 1) return "rank-gold";
-    if (rank === 2) return "rank-silver";
-    if (rank === 3) return "rank-bronze";
+    if (rank === 1)
+      return "bg-linear-to-r from-yellow-500 to-amber-400 text-black";
+    if (rank === 2)
+      return "bg-linear-to-r from-gray-300 to-gray-400 text-black";
+    if (rank === 3)
+      return "bg-linear-to-r from-orange-600 to-amber-700 text-white";
     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";
+    if (rank === 1)
+      return "shadow-[0_0_20px_color-mix(in_oklch,oklch(82.8%_0.189_84.429)_70%,transparent)]";
+    if (rank === 2)
+      return "shadow-[0_0_20px_color-mix(in_oklch,var(--foreground)_60%,transparent)]";
+    if (rank === 3)
+      return "shadow-[0_0_20px_color-mix(in_oklch,oklch(55.5%_0.163_48.998)_60%,transparent)]";
     return "";
   };