Improved UI and css stuff and problems shadcnified

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

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 === 1)
-    if (rank === 2) return "rank-silver";
+      return "bg-linear-to-r from-yellow-500 to-amber-400 text-black";
-    if (rank === 3) return "rank-bronze";
+    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 === 1)
-    if (rank === 2) return "glow-silver";
+      return "shadow-[0_0_20px_color-mix(in_oklch,oklch(82.8%_0.189_84.429)_70%,transparent)]";
-    if (rank === 3) return "glow-bronze";
+    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 "";
   };