Improved run layout

src/app/problems/components/ProblemCard.tsx

@@ -32,16 +32,17 @@ 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`}
+      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"
       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="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
 
-      <div className="relative">
+      {/* 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">
@@ -66,25 +67,30 @@ const ProblemCard = ({
           ))}
         </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>
+        {/* Spacer */}
+        <div className="flex-1" />
 
-        {/* Quick run button - appears on hover */}
-        <div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
-          <Button size="p2">
-            <Zap className="h-4 w-4" />
-          </Button>
+        {/* Stats + Action */}
+        <div className="flex items-center justify-between mt-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-4">
+            {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 */}
+          <div className="opacity-0 group-hover:opacity-100 transition-all duration-300">
+            <Button size="p2">
+              <Zap className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
       </div>
     </div>

src/app/run/page.tsx

@@ -9,6 +9,7 @@ import Editor from "./components/Editor";
 import useAction from "@/hook/use-action";
 import { getLiveRun } from "@/modules/live-run/actions";
 import ProblemCard from "../problems/components/ProblemCard";
+import ProfileCard from "@/components/app/ProfileCard";
 
 export default function Run() {
   const [runInfo] = useAction(getLiveRun);
@@ -23,17 +24,17 @@ export default function Run() {
     <div className="h-svh px-20 pt-24 pb-12 flex gap-8">
       <div className="h-full w-full flex flex-col gap-4">
         <div className="w-full flex gap-5">
-          <div className="flex-1">
+          <div className="flex-1 animate-fade-in opacity-0 duration-1000">
+            <ProfileCard user={{ username: "selimaj", rank: 1 }} />
+          </div>
 
+          <div className="flex-1 animate-fade-in opacity-0 duration-1000">
+            {runInfo && <RunTimer runInfo={runInfo} />}
           </div>
 
           <div className="flex-1">
             <ProblemCard name="Idk" difficulty="hard" tags={[]} attempts={0} />
           </div>
-
-          <div className="flex-1">
-            {runInfo && <RunTimer runInfo={runInfo} />}
-          </div>
         </div>
 
         {/* Editor */}

src/components/app/ProfileCard.tsx

@@ -0,0 +1,37 @@
+import { Badge } from "../ui/badge";
+import { Card, CardContent } from "../ui/card";
+
+export default function ProfileCard({
+  user,
+}: {
+  user: { username: string; rank: number };
+}) {
+  return (
+    <Card className="relative w-full h-full overflow-hidden">
+      <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
+
+      <CardContent className="relative flex flex-col md:flex-row gap-6 w-full h-full">
+        {/* Avatar */}
+        <div className="relative shrink-0 w-full md:w-1/4 h-1/3 md:h-full flex items-center justify-center">
+          <img
+            src="http://github.com/selimaj-dev.png"
+            alt="Img"
+            className="rounded-2xl aspect-square max-h-full w-auto object-contain"
+          />
+
+          <div className="absolute -bottom-2 -right-2 w-12 h-12 md:w-8 md:h-8 rounded-lg rank-gold flex items-center justify-center text-sm md:text-xs font-bold glow-gold">
+            #{user.rank}
+          </div>
+        </div>
+
+        {/* User Info */}
+        <div className="flex-1 flex flex-col justify-center w-full">
+          <h1 className="text-4xl md:text-3xl font-bold mb-2">
+            {user.username}
+          </h1>
+          <Badge>World Record Holder</Badge>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}