chore(web): remove heavyweight homepage dependencies

apps/web/app/page.tsx

@@ -2,12 +2,9 @@ import { HeadlessMark } from "@/components/headless-mark";
 import { BenchmarkChart } from "@/components/benchmark-chart";
 import { EfficiencyChart } from "@/components/efficiency-chart";
 import { BeamsBackground } from "@/components/ui/beams-background";
-import { PixelBlast } from "@/components/ui/pixel-blast";
 import { ScanFrame } from "@/components/scan-frame";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { LinkGlyph } from "@/components/link-glyph";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
 import { loadBenchmarkContent } from "@/lib/repository-content.mjs";
 import { ArrowDownIcon, ArrowUpRightIcon } from "lucide-react";
 
@@ -48,22 +45,6 @@ export default function Home() {
       <section className="hero">
         <div className="hero-beams" aria-hidden="true">
           <BeamsBackground className="hero-beams-static" />
-          <PixelBlast
-            className="hero-pixel-blast"
-            variant="circle"
-            pixelSize={5}
-            color="#FFB020"
-            patternScale={3}
-            patternDensity={1.1}
-            pixelSizeJitter={0.35}
-            enableRipples
-            rippleSpeed={0.35}
-            rippleThickness={0.1}
-            rippleIntensityScale={1.1}
-            speed={0.45}
-            edgeFade={0.3}
-            transparent
-          />
         </div>
 
         <nav className="nav container" aria-label="Main navigation">
@@ -99,10 +80,7 @@ export default function Home() {
             <div className="hero-actions">
               <a
                 href="#workflow"
-                className={cn(
-                  buttonVariants({ variant: "default", size: "cta" }),
-                  "hover:-translate-y-0.5",
-                )}
+                className="cta-link"
               >
                 See the workflow
                 <ArrowDownIcon
@@ -113,7 +91,7 @@ export default function Home() {
               </a>
               <a
                 href="/docs"
-                className={buttonVariants({ variant: "quiet", size: "cta" })}
+                className="cta-link cta-link-quiet"
               >
                 Read the docs
                 <ArrowUpRightIcon
@@ -323,24 +301,6 @@ export default function Home() {
       </section>
 
       <section className="section closing">
-        <div className="closing-blast" aria-hidden="true">
-          <PixelBlast
-            className="closing-pixel-blast"
-            variant="circle"
-            pixelSize={5}
-            color="#FFB020"
-            patternScale={3}
-            patternDensity={1.05}
-            pixelSizeJitter={0.3}
-            enableRipples
-            rippleSpeed={0.35}
-            rippleThickness={0.1}
-            rippleIntensityScale={1}
-            speed={0.4}
-            edgeFade={0.45}
-            transparent
-          />
-        </div>
         <div className="container closing-inner">
           <div className="closing-panel">
             <div>
@@ -358,10 +318,7 @@ export default function Home() {
               </p>
               <a
                 href="https://github.com/LockInTime/headless/releases"
-                className={cn(
-                  buttonVariants({ variant: "default", size: "cta" }),
-                  "mt-6 hover:-translate-y-0.5",
-                )}
+                className="cta-link mt-6"
               >
                 Open Headless
                 <ArrowUpRightIcon

apps/web/components/benchmark-chart.tsx

@@ -1,108 +1,36 @@
-"use client";
-
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  LabelList,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-
 type Workflow = {
   workflow: string;
   surface: number;
   color: string;
 };
 
-const formatRatio = (value: number) => `${value.toFixed(value === 1 ? 0 : 2)}×`;
-
-function BenchmarkTooltip({
-  active,
-  payload,
-}: {
-  active?: boolean;
-  payload?: ReadonlyArray<{ payload?: unknown }>;
-}) {
-  if (!active || !payload?.length) return null;
-  const workflow = payload[0]?.payload as Workflow | undefined;
-  if (!workflow) return null;
-
-  return (
-    <div className="chart-tooltip">
-      <b style={{ color: workflow.color }}>{workflow.workflow}</b>
-      <span>
-        {formatRatio(workflow.surface)} Headless warm&apos;s estimated tokens
-      </span>
-    </div>
-  );
-}
+const formatRatio = (value: number) => `${value.toFixed(value === 1 ? 0 : 2)}x`;
 
 export function BenchmarkChart({ data }: { data: Workflow[] }) {
-  const ariaLabel = `Estimated agent tokens relative to Headless warm: ${data
+  const maximum = Math.max(1, ...data.map((workflow) => workflow.surface));
+  const description = `Estimated agent tokens relative to Headless warm: ${data
     .map((workflow) => `${workflow.workflow} ${formatRatio(workflow.surface)}`)
     .join(", ")}. Lower is better.`;
-  const maximum = Math.max(...data.map((workflow) => workflow.surface));
 
   return (
-    <div className="benchmark-chart" role="img" aria-label={ariaLabel}>
-      <ResponsiveContainer width="100%" height="100%">
-        <BarChart
-          data={data}
-          layout="vertical"
-          margin={{ top: 6, right: 40, bottom: 8, left: 0 }}
-        >
-          <CartesianGrid
-            horizontal={false}
-            stroke="var(--line)"
-            strokeDasharray="3 3"
-          />
-          <XAxis
-            type="number"
-            domain={[0, Math.ceil(maximum * 1.1)]}
-            allowDecimals={false}
-            tickFormatter={(value) => `${value}×`}
-            axisLine={{ stroke: "var(--line)" }}
-            tickLine={false}
-          />
-          <YAxis
-            type="category"
-            dataKey="workflow"
-            width={120}
-            axisLine={false}
-            tickLine={false}
-          />
-          <Tooltip
-            content={BenchmarkTooltip}
-            cursor={{ fill: "rgba(var(--ink-rgb), .04)" }}
-          />
-          <Bar
-            dataKey="surface"
-            radius={[0, 3, 3, 0]}
-            barSize={24}
-            isAnimationActive={false}
-          >
-            {data.map((workflow) => (
-              <Cell key={workflow.workflow} fill={workflow.color} />
-            ))}
-            <LabelList
-              dataKey="surface"
-              position="right"
-              formatter={(value) =>
-                typeof value === "number"
-                  ? formatRatio(value)
-                  : String(value ?? "")
-              }
-              fill="var(--ink-soft)"
-              fontFamily="var(--font-mono), monospace"
-              fontSize={10}
+    <div className="benchmark-bars" role="img" aria-label={description}>
+      {data.map((workflow) => (
+        <div className="benchmark-bar-row" key={workflow.workflow}>
+          <span className="benchmark-bar-label">{workflow.workflow}</span>
+          <span className="benchmark-bar-track" aria-hidden="true">
+            <span
+              className="benchmark-bar-fill"
+              style={{
+                backgroundColor: workflow.color,
+                width: `${(workflow.surface / maximum) * 100}%`,
+              }}
             />
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
+          </span>
+          <span className="benchmark-bar-value">
+            {formatRatio(workflow.surface)}
+          </span>
+        </div>
+      ))}
     </div>
   );
 }