redesign

app/globals.css

@@ -4,38 +4,37 @@
 
 @layer base {
   :root {
-    /* 3blue1brown-inspired dark palette: deep space blue background,
-       a warm gold accent for emphasis, and a small, deliberate set of
-       "state" colors used consistently across every visualization. */
-    --background: 222 47% 7%;
-    --foreground: 210 40% 96%;
+    /* Monochrome chrome: the shell carries no color of its own, so the
+       five algorithm-state colors below are the only color on the page. */
+    --background: 224 15% 6%;
+    --foreground: 210 20% 95%;
 
-    --primary: 199 89% 64%;          /* 3b1b sky blue */
-    --primary-foreground: 222 47% 7%;
-    --secondary: 222 30% 16%;
-    --secondary-foreground: 210 40% 90%;
-    --accent: 43 96% 62%;            /* warm gold, used sparingly */
-    --accent-foreground: 222 47% 7%;
-    --destructive: 358 75% 59%;
-    --destructive-foreground: 210 40% 96%;
-    --muted: 222 25% 14%;
-    --muted-foreground: 215 20% 65%;
-    --card: 222 40% 10%;
-    --card-foreground: 210 40% 96%;
-    --popover: 222 44% 9%;
-    --popover-foreground: 210 40% 96%;
-    --border: 222 25% 20%;
-    --input: 222 25% 20%;
-    --ring: 199 89% 64%;
+    --primary: 210 25% 96%;          /* near-white, inverted CTA fill */
+    --primary-foreground: 224 20% 9%;
+    --secondary: 224 12% 15%;
+    --secondary-foreground: 210 15% 90%;
+    --accent: 224 12% 17%;           /* neutral hover surface, not a brand color */
+    --accent-foreground: 210 20% 95%;
+    --destructive: 358 65% 55%;
+    --destructive-foreground: 210 20% 96%;
+    --muted: 224 12% 13%;
+    --muted-foreground: 216 10% 62%;
+    --card: 224 14% 9%;
+    --card-foreground: 210 20% 95%;
+    --popover: 224 16% 8%;
+    --popover-foreground: 210 20% 95%;
+    --border: 224 12% 18%;
+    --input: 224 12% 18%;
+    --ring: 205 90% 62%;             /* the one deliberate accent: focus only */
     --radius: 0.75rem;
 
     /* Algorithm state colors — one meaning each, used everywhere. */
-    --state-idle: 199 60% 55%;
-    --state-compare: 43 96% 62%;
+    --state-idle: 205 40% 50%;
+    --state-compare: 43 90% 60%;
     --state-swap: 358 75% 59%;
-    --state-sorted: 152 60% 50%;
-    --state-pivot: 271 76% 68%;
-    --state-active-range: 199 89% 64%;
+    --state-sorted: 152 55% 48%;
+    --state-pivot: 271 70% 66%;
+    --state-active-range: 205 60% 55%;
   }
 }
 
@@ -71,12 +70,6 @@
 }
 
 @layer utilities {
-  .glow-primary {
-    box-shadow: 0 0 24px hsl(var(--primary) / 0.35);
-  }
-  .glow-accent {
-    box-shadow: 0 0 24px hsl(var(--accent) / 0.35);
-  }
   .text-balance {
     text-wrap: balance;
   }

app/layout.tsx

@@ -1,22 +1,22 @@
 import { ReactNode } from 'react';
-import { Inter, JetBrains_Mono } from 'next/font/google';
+import { Geist, Geist_Mono } from 'next/font/google';
 import { cn } from '@/lib/utils';
 import './globals.css';
 
-const fontSans = Inter({
+const fontSans = Geist({
     subsets: ['latin'],
     display: 'swap',
     variable: '--font-sans',
 });
 
-const fontMono = JetBrains_Mono({
+const fontMono = Geist_Mono({
     subsets: ['latin'],
     display: 'swap',
     variable: '--font-mono',
 });
 
 export const metadata = {
-    title: 'Valgo — Watch how sorting actually works',
+    title: 'Valgo - Watch how sorting actually works',
     description: 'An animated, narrated visualizer for nine classic sorting algorithms.',
 };
 

app/page.tsx

@@ -14,7 +14,7 @@ import StatsPanel from "@/components/StatsPanel";
 import PlaybackControls, { Speed } from "@/components/PlaybackControls";
 import { AlgorithmPicker } from "@/components/Pickers";
 import SiteFooter from "@/components/SiteFooter";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Panel from "@/components/Panel";
 
 const SPEED_MS: Record<Speed, number> = { slow: 260, normal: 120, fast: 55, turbo: 18 };
 
@@ -22,11 +22,27 @@ function randomArray(size: number): number[] {
     return Array.from({ length: size }, () => Math.floor(Math.random() * 100) + 1);
 }
 
+// Deterministic so the server-rendered array matches the client's first
+// render; the real random array is generated client-side after mount.
+function seededArray(size: number): number[] {
+    return Array.from({ length: size }, (_, i) => ((i * 37) % 100) + 1);
+}
+
+function BrandMark(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 20 20" fill="none" {...props}>
+            <rect x="2" y="11" width="4" height="7" rx="1" fill="currentColor" opacity="0.5" />
+            <rect x="8" y="6" width="4" height="12" rx="1" fill="currentColor" opacity="0.75" />
+            <rect x="14" y="2" width="4" height="16" rx="1" fill="currentColor" />
+        </svg>
+    );
+}
+
 export default function Page() {
     const [algorithm, setAlgorithm] = useState<AlgorithmKey>("bubble");
     const [language, setLanguage] = useState<LanguageCode>("en");
     const [arraySize, setArraySize] = useState(24);
-    const [baseArray, setBaseArray] = useState<number[]>(() => randomArray(24));
+    const [baseArray, setBaseArray] = useState<number[]>(() => seededArray(24));
     const [steps, setSteps] = useState<Step[]>([]);
     const [stepIndex, setStepIndex] = useState(0);
     const [isPlaying, setIsPlaying] = useState(false);
@@ -34,6 +50,11 @@ export default function Page() {
 
     const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+    useEffect(() => {
+        setBaseArray(randomArray(arraySize));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     // (Re)compute the full step-by-step story whenever the algorithm or the
     // underlying data changes. Everything downstream just plays it back.
     useEffect(() => {
@@ -111,94 +132,95 @@ export default function Page() {
 
     return (
         <div className="min-h-screen flex flex-col">
-            <header className="border-b border-border bg-card/30 backdrop-blur-sm">
-                <div className="container mx-auto px-4 md:px-6 py-6 flex flex-wrap items-center justify-between gap-4">
-                    <div>
-                        <h1 className="text-2xl font-bold tracking-tight">
-                            <span className="text-primary">{t(language, "brand")}</span>
-                        </h1>
-                        <p className="text-sm text-muted-foreground">{t(language, "tagline")}</p>
+            <header className="sticky top-0 z-40 border-b border-border bg-background/85 backdrop-blur-md">
+                <div className="container mx-auto max-w-6xl px-4 md:px-6 h-16 flex items-center justify-between gap-4">
+                    <div className="flex items-center gap-2.5 min-w-0">
+                        <BrandMark className="h-5 w-5 shrink-0 text-foreground" />
+                        <h1 className="text-base font-semibold tracking-tight truncate">{t(language, "brand")}</h1>
+                        <span className="hidden md:inline text-sm text-muted-foreground ml-2 pl-3 border-l border-border truncate">
+                            {t(language, "tagline")}
+                        </span>
                     </div>
                     <AlgorithmPicker value={algorithm} onChange={setAlgorithm} triggerLabel={t(language, "pickAlgorithm")} />
                 </div>
             </header>
 
-            <main className="flex-1 container mx-auto px-4 md:px-6 py-10 space-y-8">
-                <motion.div
+            <main className="flex-1">
+                <motion.section
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.4 }}
-                    className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6"
+                    className="border-b border-border bg-card/30"
                 >
-                    <Bars
-                        values={currentStep?.array ?? baseArray}
-                        indices={currentStep?.indices ?? []}
-                        action={currentStep?.action}
-                        sorted={currentStep?.sorted ?? []}
-                        range={currentStep?.range}
-                        pivotIndex={pivotIndex}
-                        stepDurationMs={SPEED_MS[speed]}
-                    />
-                </motion.div>
-
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                    <div className="lg:col-span-2 space-y-6">
-                        <Narration text={narration} stepIndex={stepIndex} title={t(language, "narrationTitle")} />
-                        <PlaybackControls
-                            isPlaying={isPlaying}
-                            onTogglePlay={handleTogglePlay}
-                            onShuffle={handleShuffle}
-                            onReset={handleReset}
-                            arraySize={arraySize}
-                            onArraySizeChange={handleArraySizeChange}
-                            speed={speed}
-                            onSpeedChange={setSpeed}
-                            stepIndex={stepIndex}
-                            stepCount={Math.max(steps.length - 1, 0)}
-                            onScrub={handleScrub}
-                            labels={{
-                                play: t(language, "play"), pause: t(language, "pause"),
-                                shuffle: t(language, "shuffle"), reset: t(language, "reset"),
-                                arraySize: t(language, "arraySize"), elements: t(language, "elements"),
-                                speed: t(language, "speed"), speedSlow: t(language, "speedSlow"),
-                                speedNormal: t(language, "speedNormal"), speedFast: t(language, "speedFast"),
-                                speedTurbo: t(language, "speedTurbo"),
-                            }}
+                    <div className="container mx-auto max-w-6xl px-4 md:px-6 py-8 md:py-10">
+                        <Bars
+                            values={currentStep?.array ?? baseArray}
+                            indices={currentStep?.indices ?? []}
+                            action={currentStep?.action}
+                            sorted={currentStep?.sorted ?? []}
+                            range={currentStep?.range}
+                            pivotIndex={pivotIndex}
+                            stepDurationMs={SPEED_MS[speed]}
                         />
                     </div>
+                </motion.section>
 
-                    <div className="space-y-6">
-                        <StatsPanel
-                            title={t(language, "statsTitle")}
-                            comparisons={currentStep?.comparisons ?? 0}
-                            writes={currentStep?.writes ?? 0}
-                            stepLabel={t(language, "step")}
-                            stepIndex={stepIndex}
-                            stepCount={Math.max(steps.length - 1, 0)}
-                            sortedLabel={t(language, "sorted")}
-                            sortedCount={currentStep?.sorted.length ?? 0}
-                            total={baseArray.length}
-                        />
+                <div className="container mx-auto max-w-6xl px-4 md:px-6 py-8 md:py-10">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <div className="lg:col-span-2 space-y-6">
+                            <Narration text={narration} stepIndex={stepIndex} title={t(language, "narrationTitle")} />
+                            <PlaybackControls
+                                isPlaying={isPlaying}
+                                onTogglePlay={handleTogglePlay}
+                                onShuffle={handleShuffle}
+                                onReset={handleReset}
+                                arraySize={arraySize}
+                                onArraySizeChange={handleArraySizeChange}
+                                speed={speed}
+                                onSpeedChange={setSpeed}
+                                stepIndex={stepIndex}
+                                stepCount={Math.max(steps.length - 1, 0)}
+                                onScrub={handleScrub}
+                                labels={{
+                                    play: t(language, "play"), pause: t(language, "pause"),
+                                    shuffle: t(language, "shuffle"), reset: t(language, "reset"),
+                                    arraySize: t(language, "arraySize"), elements: t(language, "elements"),
+                                    speed: t(language, "speed"), speedSlow: t(language, "speedSlow"),
+                                    speedNormal: t(language, "speedNormal"), speedFast: t(language, "speedFast"),
+                                    speedTurbo: t(language, "speedTurbo"),
+                                }}
+                            />
+                        </div>
 
-                        {description && (
-                            <Card className="bg-card/60 backdrop-blur-sm">
-                                <CardHeader>
-                                    <CardTitle className="text-xl">{description.title}</CardTitle>
-                                    <CardDescription className="space-y-0.5">
-                                        <div className="font-mono text-xs">{description.timeComplexity}</div>
-                                        <div className="font-mono text-xs">{description.spaceComplexity}</div>
-                                    </CardDescription>
-                                </CardHeader>
-                                <CardContent>
-                                    <p className="text-sm text-muted-foreground leading-relaxed">{description.description}</p>
-                                </CardContent>
-                            </Card>
-                        )}
+                        <div className="space-y-6">
+                            <StatsPanel
+                                title={t(language, "statsTitle")}
+                                comparisons={currentStep?.comparisons ?? 0}
+                                writes={currentStep?.writes ?? 0}
+                                stepLabel={t(language, "step")}
+                                stepIndex={stepIndex}
+                                stepCount={Math.max(steps.length - 1, 0)}
+                                sortedLabel={t(language, "sorted")}
+                                sortedCount={currentStep?.sorted.length ?? 0}
+                                total={baseArray.length}
+                            />
 
-                        <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5">
-                            <p className="text-xs uppercase tracking-widest text-muted-foreground mb-1">{t(language, "growthTitle")}</p>
-                            <p className="text-xs text-muted-foreground mb-4">{t(language, "growthCaption")}</p>
-                            <GrowthChart active={cclass} n={arraySize} maxN={100} labels={growthLabels} />
+                            {description && (
+                                <Panel>
+                                    <h2 className="text-xl font-semibold tracking-tight">{description.title}</h2>
+                                    <div className="mt-1 space-y-0.5">
+                                        <div className="font-mono text-xs text-muted-foreground">{description.timeComplexity}</div>
+                                        <div className="font-mono text-xs text-muted-foreground">{description.spaceComplexity}</div>
+                                    </div>
+                                    <p className="mt-4 text-sm text-muted-foreground leading-relaxed">{description.description}</p>
+                                </Panel>
+                            )}
+
+                            <Panel>
+                                <p className="text-xs uppercase tracking-widest text-muted-foreground mb-1">{t(language, "growthTitle")}</p>
+                                <p className="text-xs text-muted-foreground mb-4">{t(language, "growthCaption")}</p>
+                                <GrowthChart active={cclass} n={arraySize} maxN={100} labels={growthLabels} />
+                            </Panel>
                         </div>
                     </div>
                 </div>