redesign

components/Bars.tsx

@@ -36,7 +36,7 @@ function colorFor(
         if (action === "swap" || action === "shift" || action === "merge-write" || action === "overwrite") return stateColor.swap;
         return stateColor.compare;
     }
-    if (range && i >= range[0] && i <= range[1]) return "hsl(var(--state-range) / 0.55)";
+    if (range && i >= range[0] && i <= range[1]) return "hsl(var(--state-active-range) / 0.55)";
     return stateColor.idle;
 }
 

components/Narration.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
+import Panel from "@/components/Panel";
 
 interface NarrationProps {
     text: string;
@@ -10,7 +11,7 @@ interface NarrationProps {
 
 export default function Narration({ text, stepIndex, title }: NarrationProps) {
     return (
-        <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5">
+        <Panel>
             <p className="text-xs uppercase tracking-widest text-muted-foreground mb-2">{title}</p>
             <div className="min-h-[3.5rem]">
                 <AnimatePresence mode="wait">
@@ -26,6 +27,6 @@ export default function Narration({ text, stepIndex, title }: NarrationProps) {
                     </motion.p>
                 </AnimatePresence>
             </div>
-        </div>
+        </Panel>
     );
 }

components/Panel.tsx

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export default function Panel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn("rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5 md:p-6", className)}
+            {...props}
+        />
+    );
+}

components/PlaybackControls.tsx

@@ -3,6 +3,7 @@
 import { Play, Pause, Shuffle, RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
+import Panel from "@/components/Panel";
 
 export type Speed = "slow" | "normal" | "fast" | "turbo";
 
@@ -38,7 +39,7 @@ export default function PlaybackControls({
     };
 
     return (
-        <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5 space-y-5">
+        <Panel className="space-y-5">
             <div className="flex flex-wrap items-center gap-2">
                 <Button onClick={onTogglePlay} size="lg" className="gap-2 min-w-[112px]">
                     {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
@@ -95,6 +96,6 @@ export default function PlaybackControls({
                     disabled={disabled}
                 />
             </div>
-        </div>
+        </Panel>
     );
 }

components/SiteFooter.tsx

@@ -40,7 +40,7 @@ interface SiteFooterProps {
 export default function SiteFooter({ year, rightsLabel, licenseLabel, viewLicenseLabel, lang, onLangChange }: SiteFooterProps) {
     return (
         <footer className="border-t border-border bg-card/40 py-6 mt-16">
-            <div className="container mx-auto px-4 md:px-6 flex flex-wrap items-center justify-between gap-4">
+            <div className="container mx-auto max-w-6xl px-4 md:px-6 flex flex-wrap items-center justify-between gap-4">
                 <p className="text-sm text-muted-foreground">&copy; {year} Quintavalle Pietro. {rightsLabel}</p>
                 <nav className="flex items-center gap-4">
                     <LanguagePicker value={lang} onChange={onLangChange} />

components/StatsPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
+import Panel from "@/components/Panel";
 
 interface StatItemProps {
     label: string;
@@ -16,7 +17,7 @@ function StatItem({ label, value }: StatItemProps) {
                 initial={{ opacity: 0.4 }}
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.15 }}
-                className="text-2xl font-mono tabular-nums text-primary"
+                className="text-2xl font-mono tabular-nums font-semibold text-foreground"
             >
                 {value}
             </motion.span>
@@ -40,7 +41,7 @@ export default function StatsPanel({
     title, comparisons, writes, stepLabel, stepIndex, stepCount, sortedLabel, sortedCount, total,
 }: StatsPanelProps) {
     return (
-        <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5">
+        <Panel>
             <p className="text-xs uppercase tracking-widest text-muted-foreground mb-3">{title}</p>
             <div className="grid grid-cols-2 gap-4">
                 <StatItem label="Comparisons" value={comparisons} />
@@ -48,6 +49,6 @@ export default function StatsPanel({
                 <StatItem label={stepLabel} value={`${stepIndex} / ${stepCount}`} />
                 <StatItem label={sortedLabel} value={`${sortedCount} / ${total}`} />
             </div>
-        </div>
+        </Panel>
     );
 }

components/ui/card.tsx

@@ -1,79 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }