cistack 6.1.0 → 6.2.0

package/product-site/components/HomeClient.tsx

@@ -1,23 +1,34 @@
 "use client";
 
 import Link from "next/link";
-import {
-  ArrowUpRight,
-  Box,
-  Check,
-  Globe,
-  Package,
-  Shield,
-  Terminal,
-} from "lucide-react";
+import { useReducedMotion } from "framer-motion";
+import { Globe, Package, Terminal } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import CopyButton from "@/components/CopyButton";
 import InstallToggle from "@/components/InstallToggle";
 import TerminalCard from "@/components/TerminalCard";
-import { Badge } from "@/components/ui/badge";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  HeroStagger,
+  HeroStaggerItem,
+  MotionHeader,
+  MotionTagList,
+  Reveal,
+  SiteMotionRoot,
+  StaggerItem,
+  StaggerList,
+  m,
+  scrollViewport,
+  SITE_EASE,
+} from "@/components/site-motion";
+import { Separator } from "@/components/ui/separator";
 import type { Dictionary } from "@/lib/dictionary-types";
-import { motion } from "framer-motion";
 
 interface GithubIconProps {
   size?: number;
@@ -42,158 +53,6 @@ const localeOptions = [
   { code: "cn", label: "简体中文" },
 ] as const;
 
-const detectionPanels = [
-  {
-    id: "p1",
-    idx: "S_01",
-    name: "Firebase",
-    signal: "firebase.json, firebase-tools dep",
-    description:
-      "Automatic Firebase Hosting detection with automated multi-project branch logic.",
-    Icon: Package,
-  },
-  {
-    id: "p2",
-    idx: "S_02",
-    name: "Vercel",
-    signal: "vercel.json, .vercel dir, vercel dep",
-    description:
-      "Vercel deploy-gate generation with branch-aware environment provisioning.",
-    Icon: Shield,
-  },
-  {
-    id: "p3",
-    idx: "S_03",
-    name: "Netlify",
-    signal: "netlify.toml, _redirects, netlify-cli dep",
-    description:
-      "Netlify edge detection with custom header and redirect validation.",
-    Icon: Terminal,
-  },
-  {
-    id: "p4",
-    idx: "S_04",
-    name: "GitHub Pages",
-    signal: "gh-pages dep, github.io package.json",
-    description:
-      "Static site hosting recognition for the native GitHub Pages deployment service.",
-    Icon: Globe,
-  },
-  {
-    id: "p5",
-    idx: "S_05",
-    name: "AWS Cloud",
-    signal: "serverless.yml, appspec.yml, cdk.json, aws-sdk dep",
-    description:
-      "Infrastructure-as-Code (IaC) recognition for AWS CDK, EC2, and Serverless.",
-    Icon: Box,
-  },
-  {
-    id: "p6",
-    idx: "S_06",
-    name: "GCP App Engine",
-    signal: "app.yaml",
-    description:
-      "Automated deployment scanning for Google Cloud Platform App Engine targets.",
-    Icon: Globe,
-  },
-  {
-    id: "p7",
-    idx: "S_07",
-    name: "Azure",
-    signal: "azure/pipelines.yml, @azure/* deps",
-    description:
-      "Azure App Service and native Azure pipeline definition identification.",
-    Icon: Package,
-  },
-  {
-    id: "p8",
-    idx: "S_08",
-    name: "Heroku",
-    signal: "Procfile, heroku.yml",
-    description:
-      "Classic PaaS deployment via Heroku registry and git push logic.",
-    Icon: Box,
-  },
-  {
-    id: "p9",
-    idx: "S_09",
-    name: "Render / Railway",
-    signal: "render.yaml, railway.json, railway.toml",
-    description:
-      "Modern PaaS detection utilizing automated app service descriptors.",
-    Icon: Terminal,
-  },
-  {
-    id: "p10",
-    idx: "S_10",
-    name: "Docker",
-    signal: "Dockerfile, docker-compose.yml",
-    description:
-      "Containerization recognition with Buildx layer caching and GHCR authentication.",
-    Icon: Box,
-  },
-] as const;
-
-const frameworkCoverage = [
-  "Next.js",
-  "Nuxt",
-  "SvelteKit",
-  "Remix",
-  "Astro",
-  "Vite",
-  "React",
-  "Vue",
-  "Angular",
-  "Svelte",
-  "Gatsby",
-  "Express",
-  "Fastify",
-  "NestJS",
-  "Hono",
-  "Koa",
-  "tRPC",
-  "Django",
-  "Flask",
-  "FastAPI",
-  "Ruby on Rails",
-  "Spring Boot",
-  "Laravel",
-  "Go (gin)",
-  "Rust (Cargo)",
-] as const;
-
-const testingTools = [
-  "Jest",
-  "Vitest",
-  "Mocha",
-  "Cypress",
-  "Playwright",
-  "Pytest",
-  "RSpec",
-  "Go Test",
-  "Cargo Test",
-  "PHPUnit",
-  "JUnit/Maven",
-  "Storybook",
-] as const;
-
-const exampleStacks = [
-  {
-    name: "Next.js + Vercel",
-    description: "ci.yml (lint, test, build), deploy.yml (vercel deploy), security.yml",
-  },
-  {
-    name: "React + Firebase",
-    description:
-      "ci.yml, deploy.yml (firebase deploy --only hosting), security.yml",
-  },
-  {
-    name: "Node.js API + Docker",
-    description: "ci.yml, docker.yml (GHCR push), security.yml",
-  },
-] as const;
-
 const GithubIcon = ({ size = 24, className = "" }: GithubIconProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -211,6 +70,114 @@ const GithubIcon = ({ size = 24, className = "" }: GithubIconProps) => (
   </svg>
 );
 
+function SectionKicker({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-zinc-400">{children}</p>
+  );
+}
+
+function SectionTitle({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return (
+    <h2 className={`mt-1.5 text-xl font-semibold tracking-tight text-zinc-950 sm:text-2xl ${className}`}>
+      {children}
+    </h2>
+  );
+}
+
+function SnippetStack({
+  snippets,
+  copyLabels,
+}: {
+  snippets: readonly string[];
+  copyLabels?: { idle: string; success: string };
+}) {
+  const reduce = useReducedMotion();
+  if (snippets.length === 0) return null;
+  const preClass =
+    "min-w-0 flex-1 overflow-x-auto p-2.5 font-mono text-[11px] leading-relaxed text-zinc-900 whitespace-pre-wrap sm:text-xs";
+
+  return (
+    <div className="border border-zinc-200 bg-white">
+      {snippets.map((line, i) => (
+        <div key={`${line.slice(0, 48)}-${i}`}>
+          {i > 0 && <Separator className="bg-zinc-200" />}
+          <div className="flex min-h-11 items-stretch">
+            {reduce ? (
+              <pre className={preClass}>
+                <code>{line}</code>
+              </pre>
+            ) : (
+              <m.pre
+                className={preClass}
+                initial={{ opacity: 0, y: 8 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={scrollViewport}
+                transition={{ duration: 0.38, ease: SITE_EASE, delay: i * 0.06 }}
+              >
+                <code>{line}</code>
+              </m.pre>
+            )}
+            {copyLabels ? (
+              <>
+                <Separator orientation="vertical" className="h-auto bg-zinc-200" />
+                <div className="flex shrink-0 items-center px-1">
+                  <CopyButton
+                    text={line}
+                    idleLabel={copyLabels.idle}
+                    successLabel={copyLabels.success}
+                  />
+                </div>
+              </>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function InstallCodeBlock({
+  command,
+  idleLabel,
+  successLabel,
+}: {
+  command: string;
+  idleLabel: string;
+  successLabel: string;
+}) {
+  const reduce = useReducedMotion();
+  const inner = (
+    <div className="flex min-h-12 items-stretch border border-zinc-200 bg-white">
+      <pre className="flex flex-1 items-center overflow-x-auto p-3 font-mono text-[13px] leading-snug text-zinc-900">
+        <code>{command}</code>
+      </pre>
+      <Separator orientation="vertical" className="bg-zinc-200" />
+      <div className="flex shrink-0 items-center px-3">
+        <CopyButton text={command} idleLabel={idleLabel} successLabel={successLabel} />
+      </div>
+    </div>
+  );
+  if (reduce) {
+    return inner;
+  }
+  return (
+    <m.div
+      initial={{ opacity: 0, scale: 0.985 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={scrollViewport}
+      transition={{ duration: 0.45, ease: SITE_EASE }}
+    >
+      {inner}
+    </m.div>
+  );
+}
+
+/** Bento rows: items-start prevents short columns (e.g. Detection) stretching to match a tall neighbor. */
+const pad = "p-5 sm:p-6 lg:px-8 lg:py-6";
+const bentoRow = "grid grid-cols-1 border-b border-zinc-200 lg:grid-cols-12 lg:items-start";
+const colLeft = `${pad} border-b border-zinc-200 lg:border-b-0 lg:border-e lg:border-zinc-200`;
+const colRight = pad;
+
 export default function HomeClient({
   dict,
   lang,
@@ -220,6 +187,7 @@ export default function HomeClient({
 }) {
   const [version, setVersion] = useState("3.0.0");
   const [downloads, setDownloads] = useState("2.4k");
+  const reduceMotion = useReducedMotion();
 
   useEffect(() => {
     let cancelled = false;
@@ -240,7 +208,9 @@ export default function HomeClient({
           const data = (await downloadsRes.json()) as DownloadStatsResponse;
           if (!cancelled && typeof data.downloads === "number") {
             const count = data.downloads;
-            setDownloads(count >= 1000 ? `${(count / 1000).toFixed(1)}k` : count.toLocaleString());
+            setDownloads(
+              count >= 1000 ? `${(count / 1000).toFixed(1)}k` : count.toLocaleString()
+            );
           }
         }
       } catch (e) {
@@ -249,12 +219,12 @@ export default function HomeClient({
     };
 
     void loadStats();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, []);
 
-  const now = new Date();
-  const manifestStamp = `${now.getFullYear()}_${(now.getMonth() + 1).toString().padStart(2, "0")}`;
-  const currentYear = now.getFullYear();
+  const currentYear = new Date().getFullYear();
 
   return (
     <>
@@ -274,114 +244,89 @@ export default function HomeClient({
               priceCurrency: "USD",
               availability: "https://schema.org/InStock",
             },
-            description: dict.hero.description,
+            description: `${dict.hero.tagline} ${dict.hero.intro}`,
             creator: {
               "@type": "Person",
               name: "Edwin Vakayil",
               url: "https://www.edwinvakayil.info/",
             },
-            featureList: Object.values(dict.docs.capabilities).map((capability) => capability.label),
-            keywords: "github actions, automation, ci/cd, devops, workflow generator, nextjs, docker, vercel, aws, firebase",
+            featureList: dict.why.items,
+            keywords:
+              "github actions, automation, ci/cd, devops, workflow generator, docker, vercel, aws, firebase",
           }),
         }}
       />
-      <div
-        className="page-root relative flex min-h-screen flex-col overflow-x-hidden bg-white text-zinc-900 selection:bg-black selection:text-white"
-        style={{
-          backgroundImage: "radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0)",
-          backgroundSize: "24px 24px",
-        }}
-      >
-        <motion.nav
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="relative z-50 mx-auto w-full max-w-[1400px] bg-white/80 backdrop-blur-md"
-        >
-          <div className="grid grid-cols-1 border-x border-b border-zinc-100 md:grid-cols-12">
-            <div className="flex items-center gap-3 border-b border-zinc-100 p-5 md:col-span-3 md:border-b-0 md:border-r md:p-6">
-              <div className="flex items-center gap-2 text-[20px] font-bold tracking-tighter text-zinc-950">
-                <Terminal size={18} className="text-zinc-500" />
-                cistack
-              </div>
-              <span className="rounded-sm border border-zinc-100 bg-zinc-50 px-1.5 py-0.5 font-mono text-[12px] font-bold text-zinc-500">
-                V{version}
+      <div className="min-h-screen bg-white text-zinc-900 antialiased selection:bg-zinc-900 selection:text-white">
+        <SiteMotionRoot>
+        <MotionHeader className="sticky top-0 z-50 border-b border-zinc-200 bg-white/95 backdrop-blur-sm">
+          <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6 lg:px-8">
+            <div className="flex flex-wrap items-center gap-3">
+              <Link
+                href={`/${lang}`}
+                className="flex items-center gap-2 text-lg font-semibold tracking-tight text-zinc-950"
+              >
+                <Terminal className="h-5 w-5 text-zinc-500" aria-hidden />
+                {dict.hero.product_name}
+              </Link>
+              <span className="border border-zinc-200 px-2 py-0.5 font-mono text-xs font-medium text-zinc-600">
+                {dict.navigation.version} {version}
+              </span>
+              <span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
+                {dict.navigation.status}
               </span>
             </div>
-
-            <div className="flex items-center justify-between border-b border-zinc-100 p-5 md:col-span-6 md:border-b-0 md:border-r md:p-6">
-              <div className="flex items-center gap-6">
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-[12px] font-black uppercase leading-none tracking-[0.2em] text-zinc-500">
-                    {dict.navigation.version}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
-                    <span className="text-[12px] font-bold uppercase tracking-tighter text-zinc-600">
-                      {dict.navigation.status}
-                    </span>
-                  </div>
-                </div>
-                <div className="mx-2 hidden h-6 w-px bg-zinc-100 lg:block" />
-                <div className="hidden items-center gap-6 text-[12px] font-bold text-zinc-500 lg:flex">
-                  <a
-                    href="https://github.com/edwinvakayil/cistack"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="group flex items-center gap-2 uppercase tracking-widest transition-colors hover:text-zinc-950"
-                  >
-                    <GithubIcon size={14} className="opacity-40 transition-opacity group-hover:opacity-100" />
-                    {dict.navigation.repository}
-                  </a>
-                  <a
-                    href="https://www.npmjs.com/package/cistack"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="group flex items-center gap-2 uppercase tracking-widest transition-colors hover:text-zinc-950"
-                  >
-                    <Package size={14} className="opacity-40 transition-opacity group-hover:opacity-100" />
-                    {dict.navigation.registry}
-                  </a>
-                </div>
-              </div>
-
-              <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+            <nav className="flex flex-wrap items-center gap-4 text-sm font-medium text-zinc-600">
+              <a
+                href="https://github.com/edwinvakayil/cistack"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 transition-colors hover:text-zinc-950"
+              >
+                <GithubIcon size={16} className="opacity-70" />
+                {dict.navigation.repository}
+              </a>
+              <a
+                href="https://www.npmjs.com/package/cistack"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 transition-colors hover:text-zinc-950"
+              >
+                <Package size={16} className="opacity-70" />
+                {dict.navigation.registry}
+              </a>
+              <a href="#reference" className="transition-colors hover:text-zinc-950">
+                {dict.navigation.reference}
+              </a>
+              <div className="flex items-center gap-2 border-s border-zinc-200 ps-4">
                 <Link
                   href="/en"
-                  className={`rounded-sm border px-1.5 py-0.5 text-[12px] font-bold uppercase tracking-widest transition-colors ${
+                  className={`border px-2 py-1 text-xs font-semibold uppercase tracking-wide transition-colors ${
                     lang === "en"
-                      ? "border-zinc-950 bg-zinc-950 text-white"
-                      : "border-transparent text-zinc-500 hover:border-zinc-100 hover:text-zinc-950"
+                      ? "border-zinc-900 bg-zinc-900 text-white"
+                      : "border-transparent text-zinc-500 hover:text-zinc-900"
                   }`}
                 >
                   EN
                 </Link>
                 {lang !== "en" && (
-                  <>
-                    <div className="mx-0.5 h-3 w-px bg-zinc-100" />
-                    <Link
-                      href={`/${lang}`}
-                      className="rounded-sm border border-zinc-950 bg-zinc-950 px-1.5 py-0.5 text-[12px] font-bold uppercase tracking-widest text-white"
-                    >
-                      {lang.toUpperCase()}
-                    </Link>
-                  </>
-                )}
-
-                <details className="group/lang relative ml-1 border-l border-zinc-100 pl-2">
-                  <summary
-                    aria-label="Change language"
-                    className="flex list-none cursor-pointer items-center gap-1 py-1 text-[12px] font-bold uppercase tracking-[0.14em] text-zinc-600 transition-colors hover:text-zinc-950 [&::-webkit-details-marker]:hidden"
+                  <Link
+                    href={`/${lang}`}
+                    className="border border-zinc-900 bg-zinc-900 px-2 py-1 text-xs font-semibold uppercase tracking-wide text-white"
                   >
-                    <Globe size={13} className="text-current" />
+                    {lang.toUpperCase()}
+                  </Link>
+                )}
+                <details className="relative">
+                  <summary className="flex cursor-pointer list-none items-center gap-1 py-1 text-xs font-semibold uppercase tracking-wide text-zinc-600 hover:text-zinc-950 [&::-webkit-details-marker]:hidden">
+                    <Globe size={14} aria-hidden />
                     Lang
                   </summary>
-                  <div className="absolute right-0 top-full z-[100] mt-2 flex w-32 flex-col gap-1 rounded-sm border border-zinc-200 bg-white p-1 shadow-xl">
+                  <div className="absolute inset-e-0 top-full z-100 mt-2 flex min-w-36 flex-col gap-0.5 border border-zinc-200 bg-white p-1 shadow-lg">
                     {localeOptions.map((locale) => (
                       <Link
                         key={locale.code}
                         href={`/${locale.code}`}
-                        className="rounded-sm p-2 text-[12px] font-bold uppercase tracking-[0.12em] text-zinc-700 transition-colors hover:bg-zinc-50 hover:text-zinc-950"
+                        className="px-3 py-2 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
                       >
                         {locale.label}
                       </Link>
@@ -389,596 +334,330 @@ export default function HomeClient({
                   </div>
                 </details>
               </div>
-            </div>
-
-            <div className="flex items-center justify-between gap-6 bg-zinc-50/20 p-5 md:col-span-3 md:justify-end md:p-6">
-              <span className="font-mono text-[12px] font-bold uppercase tracking-[0.2em] text-zinc-500">
-                {`${dict.navigation.core_manifest} // ${manifestStamp}`}
-              </span>
-              <a
-                href="#docs"
-                className="rounded-sm border border-zinc-900 px-4 py-2 text-[12px] font-black uppercase tracking-widest text-zinc-900 transition-all hover:bg-zinc-950 hover:text-white"
-              >
-                {dict.navigation.docs}
-              </a>
-            </div>
+            </nav>
           </div>
-        </motion.nav>
-
-        <main className="relative z-10 mx-auto w-full max-w-[1500px] px-4 pt-6 sm:px-6 md:px-8 lg:pt-12">
-          <div className="pointer-events-none absolute inset-x-0 top-0 -mt-40 h-[600px] bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] opacity-[0.35] [background-size:24px_24px] [mask-image:linear-gradient(to_bottom,black,transparent)]" />
-
-          <div className="relative grid grid-cols-1 border-l border-t border-zinc-100 bg-white/40 lg:grid-cols-12">
-            <div className="group/hero relative border-b border-r border-zinc-100 p-8 sm:p-12 lg:col-span-7 lg:p-16">
-              <motion.div
-                initial={{ opacity: 0, y: 15 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.6 }}
-                className="relative z-10 flex flex-col gap-8"
-              >
-                <div className="flex items-center gap-3">
-                  <Badge
-                    variant="outline"
-                    className="rounded-sm border-zinc-200 bg-white px-2 py-0.5 text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500"
-                  >
-                    VERSION_{version}
-                  </Badge>
-                  <div className="h-px w-12 bg-zinc-100" />
-                  <span className="font-mono text-[12px] font-bold uppercase tracking-widest text-zinc-500">
-                    {dict.hero.scan_identity}
-                  </span>
-                </div>
-
-                <div className="flex flex-col gap-8 md:gap-8">
-                  <div className="group/h1 flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-4">
-                    <span className="font-mono text-[12px] font-bold text-zinc-400 transition-colors sm:text-zinc-300 md:text-[12px] group-hover/h1:text-zinc-500">
-                      {dict.hero.s1_label}
-                    </span>
-                    <h1 className="break-words text-[2.2rem] font-[1000] leading-[0.9] tracking-tighter text-black min-[400px]:text-[2.5rem] sm:leading-none md:text-[3.8rem]">
-                      {dict.hero.s1_title}
-                    </h1>
-                  </div>
-
-                  <div className="group/h2 flex flex-col gap-1 sm:ml-6 sm:flex-row sm:items-baseline sm:gap-4 md:ml-12">
-                    <span className="font-mono text-[12px] font-bold text-zinc-400 transition-colors sm:text-zinc-300 md:text-[12px] group-hover/h2:text-zinc-500">
-                      {dict.hero.s2_label}
-                    </span>
-                    <h2 className="break-words text-[2.2rem] font-[1000] leading-[0.9] tracking-tighter text-black min-[400px]:text-[2.5rem] sm:leading-none md:text-[3.8rem]">
-                      {dict.hero.s2_title}
-                    </h2>
-                  </div>
-
-                  <div className="group/h3 flex flex-col gap-1 sm:ml-12 sm:flex-row sm:items-baseline sm:gap-4 md:ml-24">
-                    <span className="font-mono text-[12px] font-bold text-zinc-400 transition-colors sm:text-zinc-300 md:text-[12px] group-hover/h3:text-zinc-500">
-                      {dict.hero.s3_label}
-                    </span>
-                    <h2 className="break-words text-[2.2rem] font-[1000] leading-[0.9] tracking-tighter text-zinc-500 min-[400px]:text-[2.5rem] sm:leading-none sm:text-zinc-500 md:text-[3.8rem]">
-                      {dict.hero.s3_title}
-                    </h2>
-                  </div>
-                </div>
-
-                <p className="max-w-[540px] text-xs font-medium leading-relaxed text-zinc-500 sm:text-sm">
-                  {dict.hero.description}
-                </p>
-
-                <div className="mt-4 flex flex-wrap items-center gap-6">
-                  <CopyButton text={dict.hero.npx_command} variant="hero" />
-                  <div className="flex flex-col gap-1 border-l-2 border-zinc-100 px-2">
-                    <span className="text-[12px] font-black uppercase tracking-widest text-zinc-500">
-                      {dict.hero.active_installs}
-                    </span>
-                    <span className="text-[14px] font-bold tracking-tight text-zinc-900">
-                      {downloads} {dict.hero.per_week}
-                    </span>
-                  </div>
-                </div>
-              </motion.div>
-            </div>
-
-            <div className="flex flex-col border-b border-r border-zinc-100 lg:col-span-5">
-              <div className="group/runtime flex flex-1 items-center justify-center overflow-hidden bg-zinc-50/20 p-8 transition-colors duration-700 hover:bg-zinc-50/40 sm:p-12">
-                <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] opacity-[0.2] [background-size:16px_16px]" />
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.98 }}
-                  whileInView={{ opacity: 1, scale: 1 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.8, delay: 0.1 }}
-                  className="relative z-20 w-full overflow-hidden rounded-sm"
-                >
-                  <TerminalCard dict={dict.terminal} version={version} />
-                </motion.div>
-                <div className="absolute right-8 top-6 hidden items-center gap-2 sm:flex">
-                  <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
-                  <span className="font-mono text-[12px] font-black uppercase tracking-widest text-zinc-500">
-                    {dict.hero.realtime_synth}
-                  </span>
-                </div>
+        </MotionHeader>
+
+        <main className="mx-auto max-w-6xl px-4 pb-14 pt-8 sm:px-6 lg:px-8">
+          <div className="border border-zinc-200 bg-white">
+            {/* Hero + metrics */}
+            <Reveal className={bentoRow} y={22}>
+              <div className={`${colLeft} lg:col-span-8`}>
+                <HeroStagger>
+                  <HeroStaggerItem>
+                    <SectionKicker>{dict.hero.live_registry}</SectionKicker>
+                  </HeroStaggerItem>
+                  <HeroStaggerItem>
+                    <SectionTitle>{dict.hero.tagline}</SectionTitle>
+                  </HeroStaggerItem>
+                  <HeroStaggerItem>
+                    <Separator className="my-4 bg-zinc-200" />
+                  </HeroStaggerItem>
+                  <HeroStaggerItem>
+                    <p className="max-w-2xl text-pretty text-sm leading-relaxed text-zinc-600 sm:text-base">
+                      {dict.hero.intro}
+                    </p>
+                  </HeroStaggerItem>
+                </HeroStagger>
               </div>
-
-              <div className="grid grid-cols-2 border-t border-zinc-100 bg-white">
-                <div className="group/meta flex cursor-default flex-col gap-2 border-r border-zinc-100 p-8 transition-colors hover:bg-zinc-50/50">
-                  <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500 transition-colors group-hover/meta:text-zinc-700">
-                    {dict.hero.integrations}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-[20px] font-black leading-none text-zinc-900">30+</span>
-                    <span className="text-[12px] font-bold uppercase tracking-tighter text-zinc-500">
-                      {dict.hero.stack_aware}
-                    </span>
+              {reduceMotion ? (
+                <div className={`${colRight} lg:col-span-4`}>
+                  <SectionKicker>{dict.hero.weekly_downloads}</SectionKicker>
+                  <p className="mt-2 text-3xl font-semibold tracking-tight text-zinc-950">{downloads}</p>
+                  <p className="mt-0.5 text-sm text-zinc-500">{dict.hero.per_week}</p>
+                  <Separator className="my-4 bg-zinc-200" />
+                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-zinc-400">
+                    {dict.install.quick_command}
+                  </p>
+                  <div className="mt-2">
+                    <InstallCodeBlock
+                      command={dict.hero.npx_command}
+                      idleLabel={dict.copy_button.idle}
+                      successLabel={dict.copy_button.success}
+                    />
                   </div>
                 </div>
-                <div className="group/meta flex cursor-default flex-col gap-2 bg-zinc-50/30 p-8 transition-colors hover:bg-zinc-50/60">
-                  <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500 transition-colors group-hover/meta:text-zinc-700">
-                    {dict.hero.success_rate}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-[20px] font-black leading-none tracking-tighter text-emerald-600">99.9%</span>
-                    <Check size={14} className="text-emerald-500/50" />
+              ) : (
+                <m.div
+                  className={`${colRight} lg:col-span-4`}
+                  initial={{ opacity: 0, y: 26, x: 12 }}
+                  animate={{ opacity: 1, y: 0, x: 0 }}
+                  transition={{ duration: 0.58, ease: SITE_EASE, delay: 0.18 }}
+                >
+                  <SectionKicker>{dict.hero.weekly_downloads}</SectionKicker>
+                  <p className="mt-2 text-3xl font-semibold tracking-tight text-zinc-950">{downloads}</p>
+                  <p className="mt-0.5 text-sm text-zinc-500">{dict.hero.per_week}</p>
+                  <Separator className="my-4 bg-zinc-200" />
+                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-zinc-400">
+                    {dict.install.quick_command}
+                  </p>
+                  <div className="mt-2">
+                    <InstallCodeBlock
+                      command={dict.hero.npx_command}
+                      idleLabel={dict.copy_button.idle}
+                      successLabel={dict.copy_button.success}
+                    />
                   </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-
-        <section id="docs" className="relative z-10 mx-auto w-full max-w-[1400px] px-4 py-24 pb-40 sm:px-6 md:px-8">
-          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] opacity-[0.4] [background-size:32px_32px]" />
-
-          <div className="mb-16 flex max-w-[900px] flex-col gap-4">
-            <div className="flex items-center gap-3">
-              <Badge
-                variant="outline"
-                className="rounded-sm border-zinc-200 bg-white px-3 py-1 text-[12px] font-black uppercase tracking-[0.2em] text-zinc-700"
-              >
-                {dict.docs.badge}
-                {version}
-              </Badge>
-              <div className="h-px flex-1 bg-zinc-200/60" />
-            </div>
-            <h2 className="text-[36px] font-bold leading-[1.1] tracking-tight text-zinc-900 sm:text-[44px]">
-              {dict.docs.title_part1}
-              <br />
-              {dict.docs.title_part2}
-            </h2>
-            <p className="max-w-[760px] text-xs font-medium leading-relaxed text-zinc-500 sm:text-sm">
-              {dict.docs.description}
-            </p>
-          </div>
-
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="grid grid-cols-1 border-l border-t border-zinc-100 lg:grid-cols-12"
-          >
-            <div className="group/cell relative border-b border-r border-zinc-100 bg-zinc-50/20 p-8 transition-colors duration-500 hover:bg-zinc-50/40 lg:col-span-4 lg:p-12">
-              <div className="absolute right-4 top-4 font-mono text-[12px] font-bold text-zinc-500 transition-colors group-hover/cell:text-zinc-700">
-                {dict.docs.section1_id}
+                </m.div>
+              )}
+            </Reveal>
+
+            {/* Install + preview */}
+            <Reveal className={bentoRow} delay={0.04} y={20}>
+              <div className={`${colLeft} lg:col-span-5`}>
+                <SectionTitle className="mb-3">{dict.install.title}</SectionTitle>
+                <InstallToggle dict={dict} />
+                <Separator className="my-4 bg-zinc-200" />
+                <p className="text-sm leading-relaxed text-zinc-600">{dict.install.node_note}</p>
               </div>
-              <div className="flex flex-col gap-10">
-                <div className="flex flex-col gap-2">
-                  <span className="text-[12px] font-black uppercase tracking-[0.18em] text-zinc-500">
-                    {dict.docs.section1_num}
-                  </span>
-                  <h3 className="text-[18px] font-bold text-zinc-900">{dict.docs.section1_title}</h3>
+              <div className={`${colRight} lg:col-span-7`}>
+                <SectionTitle className="mb-1">{dict.preview.title}</SectionTitle>
+                <p className="text-sm text-zinc-500">{dict.preview.caption}</p>
+                <Separator className="my-4 bg-zinc-200" />
+                <div className="min-h-[260px] sm:min-h-[300px] lg:min-h-[320px]">
+                  <TerminalCard
+                    dict={dict.terminal}
+                    version={version}
+                    copyLabels={dict.copy_button}
+                  />
                 </div>
-                <div className="flex flex-col divide-y divide-zinc-200/40">
-                  {Object.values(dict.docs.capabilities).map((item) => (
-                    <div key={item.label} className="flex items-start gap-3 py-3.5 first:pt-0 last:pb-0">
-                      <span
-                        role="img"
-                        aria-label="Available feature"
-                        className="mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-zinc-200 bg-zinc-900 text-white"
-                      >
-                        <Check size={11} strokeWidth={3} />
-                      </span>
-                      <div className="flex flex-col">
-                        <span className="text-[14px] font-semibold leading-tight text-zinc-800">{item.label}</span>
-                        <span className="mt-0.5 text-[12px] leading-snug text-zinc-500">{item.sub}</span>
-                      </div>
-                    </div>
+              </div>
+            </Reveal>
+
+            {/* Why */}
+            <Reveal className={bentoRow} delay={0.06} y={20}>
+              <div id="reference" className={`${pad} scroll-mt-24 lg:col-span-12`}>
+                <SectionKicker>{dict.navigation.reference}</SectionKicker>
+                <SectionTitle>{dict.why.title}</SectionTitle>
+                <Separator className="my-4 bg-zinc-200" />
+                <StaggerList className="grid gap-2.5 text-sm leading-snug text-zinc-700 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-2">
+                  {dict.why.items.map((item) => (
+                    <StaggerItem key={item} className="flex gap-2.5">
+                      <span className="mt-1.5 h-1 w-1 shrink-0 bg-zinc-400" aria-hidden />
+                      <span>{item}</span>
+                    </StaggerItem>
                   ))}
-                </div>
+                </StaggerList>
               </div>
-            </div>
-
-            <div className="flex flex-col lg:col-span-8">
-              <div className="border-b border-r border-zinc-100 p-8 lg:p-12">
-                <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:gap-16">
-                  <div className="flex flex-col gap-6">
-                    <div className="flex flex-col gap-2">
-                      <span className="text-[12px] font-black uppercase tracking-[0.18em] text-zinc-500">
-                        {dict.docs.section2_num}
-                      </span>
-                      <h3 className="text-[18px] font-bold text-zinc-900">{dict.docs.section2_title}</h3>
-                    </div>
-                    <InstallToggle dict={dict} />
-
-                    <div className="mt-2 flex flex-col gap-3">
-                      <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                        {dict.docs.command_registry}
-                      </span>
-                      <div className="flex flex-col gap-2">
-                        {[
-                          { command: "audit", description: dict.docs.commands.audit },
-                          { command: "upgrade", description: dict.docs.commands.upgrade },
-                          { command: "init", description: dict.docs.commands.init },
-                        ].map((cmd) => (
-                          <div
-                            key={cmd.command}
-                            className="group flex items-center justify-between rounded-sm border border-zinc-100 bg-zinc-50/50 px-3 py-2 transition-colors hover:border-zinc-200"
-                          >
-                            <code className="text-[12px] font-extrabold text-zinc-800">
-                              npx cistack {cmd.command}
-                            </code>
-                            <span className="text-[12px] font-medium text-zinc-500">{cmd.description}</span>
-                          </div>
+            </Reveal>
+
+            {/* CLI + Generated */}
+            <Reveal className={bentoRow} delay={0.08} y={18}>
+              <div className={`${colLeft} lg:col-span-6`}>
+                <SectionTitle className="mb-3">{dict.cli.section_title}</SectionTitle>
+                <Accordion multiple className="w-full border-t border-zinc-200">
+                  {dict.cli.items.map((item, i) => (
+                    <AccordionItem key={item.title} value={`cli-${i}`} className="border-zinc-200">
+                      <AccordionTrigger className="py-3 text-left text-sm font-semibold text-zinc-900 hover:no-underline">
+                        {item.title}
+                      </AccordionTrigger>
+                      <AccordionContent className="space-y-3 pb-4 text-zinc-600">
+                        {item.paragraphs.map((p) => (
+                          <p key={p} className="text-sm leading-relaxed">
+                            {p}
+                          </p>
                         ))}
-                      </div>
-                    </div>
-                    <p className="text-[13px] italic text-zinc-400">{dict.docs.recommended_npx}</p>
-                  </div>
-                  <div className="mt-4 flex flex-col gap-4">
-                    <div className="flex items-center gap-3">
-                      <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                        {dict.docs.parameters_manifest}
-                      </span>
-                      <div className="h-px flex-1 bg-zinc-200 opacity-60" />
-                    </div>
-
-                    <div className="flex flex-col divide-y divide-zinc-100 border-y border-zinc-200 bg-white/40">
-                      {[
-                        { flag: "--explain", type: "boolean", description: dict.docs.flags.explain },
-                        { flag: "--path", type: "string", description: dict.docs.flags.path },
-                        { flag: "--output", type: "string", description: dict.docs.flags.output },
-                        { flag: "--dry-run", type: "boolean", description: dict.docs.flags.dry_run },
-                        { flag: "--no-prompt", type: "boolean", description: dict.docs.flags.no_prompt },
-                        { flag: "--verbose", type: "boolean", description: dict.docs.flags.verbose },
-                        { flag: "--force", type: "boolean", description: dict.docs.flags.force },
-                      ].map((flag) => (
-                        <div
-                          key={flag.flag}
-                          className="group flex flex-col px-2 py-3 transition-colors hover:bg-zinc-50/80 md:flex-row md:items-center"
-                        >
-                          <div className="flex shrink-0 items-center gap-3 md:w-[150px]">
-                            <div className="h-[12px] w-[3px] bg-zinc-200 transition-colors group-hover:bg-emerald-500" />
-                            <code className="font-mono text-[12px] font-bold tracking-tight text-zinc-800">
-                              {flag.flag}
-                            </code>
-                          </div>
-                          <div className="mt-2 flex flex-1 flex-row items-center gap-4 pl-[15px] md:mt-0 md:pl-0">
-                            <span className="rounded-sm bg-zinc-100 px-1.5 py-0.5 font-mono text-[12px] uppercase tracking-widest text-zinc-600">
-                              {flag.type}
-                            </span>
-                            <span className="text-[12px] font-medium text-zinc-600">{flag.description}</span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
+                        <SnippetStack snippets={item.snippets} copyLabels={dict.copy_button} />
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
               </div>
-
-              <div className="grid flex-1 grid-cols-1 border-b border-r border-zinc-100 md:grid-cols-2">
-                <div className="border-b border-zinc-100 p-8 md:border-b-0 md:border-r lg:p-12">
-                  <div className="flex flex-col gap-8">
-                    <div className="flex flex-col gap-2">
-                      <h4 className="text-[14px] font-bold uppercase tracking-widest text-zinc-900">
-                        {dict.docs.detection_logic_title}
-                      </h4>
-                      <p className="text-[13px] font-medium leading-relaxed text-zinc-400">
-                        {dict.docs.detection_logic_desc}
-                      </p>
-                    </div>
-
-                    <div className="max-h-[250px] w-full overflow-y-auto overflow-x-hidden pr-3 sm:max-h-[265px] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-200 hover:[&::-webkit-scrollbar-thumb]:bg-zinc-300 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1">
-                      <div className="w-full">
-                        {detectionPanels.map((panel) => (
-                          <details key={panel.id} className="group border-b border-zinc-100 last:border-0">
-                            <summary className="list-none cursor-pointer py-4 text-zinc-500 transition-colors hover:text-zinc-900 sm:py-5 [&::-webkit-details-marker]:hidden">
-                              <div className="flex min-w-0 flex-1 flex-col justify-center gap-1.5 overflow-hidden text-start sm:gap-2">
-                                <div className="flex shrink-0 items-center gap-3 sm:gap-4">
-                                  <span className="w-[24px] shrink-0 font-mono text-[12px] font-bold text-zinc-500 transition-colors group-hover:text-zinc-700">
-                                    {panel.idx}
-                                  </span>
-                                  <div className="flex items-center gap-2 sm:gap-3">
-                                    <panel.Icon
-                                      size={14}
-                                      className="shrink-0 text-zinc-600 transition-colors group-hover:text-zinc-900"
-                                    />
-                                    <span className="text-[15px] font-semibold whitespace-nowrap sm:text-[16px]">
-                                      {panel.name}
-                                    </span>
-                                  </div>
-                                  <span className="ml-auto text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                                    OPEN
-                                  </span>
-                                </div>
-                                <div className="flex w-full justify-start overflow-hidden ps-[36px] sm:ps-[44px]">
-                                  <Badge
-                                    variant="outline"
-                                    className="max-w-full truncate rounded-sm border-zinc-200 bg-zinc-50/50 text-[12px] font-mono font-normal tracking-tight opacity-80"
-                                  >
-                                    {panel.signal}
-                                  </Badge>
-                                </div>
-                              </div>
-                            </summary>
-                            <div className="border-s-2 border-zinc-200 pb-6 ps-6">
-                              <p className="max-w-[440px] text-[15px] leading-relaxed text-zinc-500">{panel.description}</p>
-                              <div className="mt-4 flex items-center gap-2">
-                                <span className="text-[12px] font-bold uppercase tracking-widest text-zinc-500">
-                                  {dict.docs.signal_source}
-                                </span>
-                                <code className="rounded-sm border border-zinc-100 bg-white px-2 py-0.5 font-mono text-[12px] text-zinc-600">
-                                  {panel.signal}
-                                </code>
-                              </div>
-                            </div>
-                          </details>
+              <div className={`${colRight} lg:col-span-6`}>
+                <SectionTitle className="mb-3">{dict.generated.section_title}</SectionTitle>
+                <Accordion multiple className="w-full border-t border-zinc-200">
+                  {dict.generated.items.map((item, i) => (
+                    <AccordionItem key={item.title} value={`gen-${i}`} className="border-zinc-200">
+                      <AccordionTrigger className="py-3 text-left text-sm font-semibold text-zinc-900 hover:no-underline">
+                        {item.title}
+                      </AccordionTrigger>
+                      <AccordionContent className="space-y-3 pb-4 text-zinc-600">
+                        {item.paragraphs.map((p) => (
+                          <p key={p} className="text-sm leading-relaxed">
+                            {p}
+                          </p>
                         ))}
+                        <SnippetStack snippets={item.snippets} copyLabels={dict.copy_button} />
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </div>
+            </Reveal>
+
+            {/* Detection + Configuration */}
+            <Reveal className={bentoRow} delay={0.1} y={18}>
+              <div className={`${colLeft} lg:col-span-6`}>
+                <SectionTitle className="mb-3">{dict.detection.section_title}</SectionTitle>
+                <Accordion multiple defaultValue={["hosting"]} className="w-full border-t border-zinc-200">
+                  <AccordionItem value="hosting" className="border-zinc-200">
+                    <AccordionTrigger className="py-3 text-left text-sm font-semibold text-zinc-900 hover:no-underline">
+                      {dict.detection.hosting_title}
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4 text-zinc-600">
+                      <MotionTagList tags={dict.detection.hosting_tags} />
+                      <Separator className="bg-zinc-200" />
+                      <div>
+                        <h3 className="text-sm font-semibold text-zinc-900">
+                          {dict.configuration.keys_title}
+                        </h3>
+                        <StaggerList className="mt-2 grid gap-1.5 sm:grid-cols-2">
+                          {dict.configuration.keys.map((key) => (
+                            <StaggerItem key={key} className="font-mono text-xs text-zinc-700">
+                              {key}
+                            </StaggerItem>
+                          ))}
+                        </StaggerList>
                       </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex flex-col gap-10 bg-zinc-50/20 p-8 lg:p-12">
-                  <div className="flex flex-col gap-6">
-                    <h4 className="text-[14px] font-bold uppercase tracking-wider text-zinc-900">
-                      {dict.docs.framework_coverage}
-                    </h4>
-                    <div className="flex flex-wrap gap-2">
-                      {frameworkCoverage.map((framework) => (
-                        <Badge
-                          key={framework}
-                          variant="outline"
-                          className="rounded-sm border-zinc-100 bg-white px-2 py-0.5 text-[12px] font-medium text-zinc-600"
-                        >
-                          {framework}
-                        </Badge>
-                      ))}
-                    </div>
-                  </div>
-                  <div className="flex flex-col gap-6">
-                    <h4 className="text-[14px] font-bold uppercase tracking-wider text-zinc-900">
-                      {dict.docs.testing_tools}
-                    </h4>
-                    <div className="flex flex-wrap gap-2">
-                      {testingTools.map((tool) => (
-                        <Badge
-                          key={tool}
-                          variant="secondary"
-                          className="rounded-sm border-transparent bg-zinc-100 px-2 py-0.5 text-[12px] font-bold text-zinc-600"
-                        >
-                          {tool}
-                        </Badge>
-                      ))}
+                      <Separator className="bg-zinc-200" />
+                      <div>
+                        <h3 className="text-sm font-semibold text-zinc-900">
+                          {dict.configuration.branches_title}
+                        </h3>
+                        <StaggerList className="mt-2 space-y-1.5 text-sm leading-snug text-zinc-600">
+                          {dict.configuration.branches.map((line) => (
+                            <StaggerItem key={line} className="flex gap-2">
+                              <span className="text-zinc-400" aria-hidden>
+                                —
+                              </span>
+                              {line}
+                            </StaggerItem>
+                          ))}
+                        </StaggerList>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                  <AccordionItem value="frameworks" className="border-zinc-200">
+                    <AccordionTrigger className="py-3 text-left text-sm font-semibold text-zinc-900 hover:no-underline">
+                      {dict.detection.frameworks_title}
+                    </AccordionTrigger>
+                    <AccordionContent className="pb-4">
+                      <MotionTagList tags={dict.detection.frameworks_tags} />
+                    </AccordionContent>
+                  </AccordionItem>
+                  <AccordionItem value="testing" className="border-zinc-200">
+                    <AccordionTrigger className="py-3 text-left text-sm font-semibold text-zinc-900 hover:no-underline">
+                      {dict.detection.testing_title}
+                    </AccordionTrigger>
+                    <AccordionContent className="pb-4">
+                      <MotionTagList tags={dict.detection.testing_tags} />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+              <div className={`${colRight} lg:col-span-6`}>
+                <SectionTitle className="mb-3">{dict.configuration.section_title}</SectionTitle>
+                <p className="text-sm leading-relaxed text-zinc-600">{dict.configuration.intro}</p>
+                <Separator className="my-4 bg-zinc-200" />
+                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-zinc-400">
+                  {dict.configuration.example_caption}
+                </p>
+                <div className="mt-1.5">
+                  <div className="flex min-h-12 items-stretch border border-zinc-200 bg-white">
+                    {reduceMotion ? (
+                      <pre className="min-w-0 flex-1 overflow-x-auto p-3 font-mono text-[11px] leading-snug text-zinc-900 whitespace-pre-wrap sm:text-xs">
+                        <code>{dict.configuration.config_snippet}</code>
+                      </pre>
+                    ) : (
+                      <m.pre
+                        className="min-w-0 flex-1 overflow-x-auto p-3 font-mono text-[11px] leading-snug text-zinc-900 whitespace-pre-wrap sm:text-xs"
+                        initial={{ opacity: 0, y: 14, scale: 0.99 }}
+                        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+                        viewport={scrollViewport}
+                        transition={{ duration: 0.55, ease: SITE_EASE }}
+                      >
+                        <code>{dict.configuration.config_snippet}</code>
+                      </m.pre>
+                    )}
+                    <Separator orientation="vertical" className="h-auto bg-zinc-200" />
+                    <div className="flex shrink-0 items-center px-1">
+                      <CopyButton
+                        text={dict.configuration.config_snippet}
+                        idleLabel={dict.copy_button.idle}
+                        successLabel={dict.copy_button.success}
+                      />
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </motion.div>
-
-          {/* Workflow Outputs */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8, delay: 0.1 }}
-            className="grid grid-cols-1 border-b border-e border-s border-zinc-100 lg:grid-cols-12"
-          >
-            <div className="group/artifacts border-e border-zinc-100 p-8 transition-colors duration-500 hover:bg-zinc-50/20 lg:col-span-8 lg:p-12">
-              <div className="flex flex-col gap-10">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center justify-between">
-                    <span className="text-[12px] font-black uppercase tracking-[0.18em] text-zinc-500">
-                      {dict.docs.section4_num}
-                    </span>
-                    <Terminal size={14} className="text-zinc-400 transition-colors group-hover/artifacts:text-zinc-500" />
-                  </div>
-                  <h3 className="text-[18px] font-bold text-zinc-900">{dict.docs.section3_title}</h3>
-                </div>
-                <div className="grid grid-cols-1 gap-x-16 gap-y-12 md:grid-cols-2">
-                  {[
-                    { f: "ci.yml", l: dict.docs.workflows.ci.label, d: dict.docs.workflows.ci.desc },
-                    { f: "deploy.yml", l: dict.docs.workflows.deploy.label, d: dict.docs.workflows.deploy.desc },
-                    { f: "docker.yml", l: dict.docs.workflows.docker.label, d: dict.docs.workflows.docker.desc },
-                    { f: "security.yml", l: dict.docs.workflows.security.label, d: dict.docs.workflows.security.desc },
-                  ].map((wf) => (
-                    <div key={wf.f} className="group/item flex flex-col gap-3">
-                      <div className="flex flex-col gap-1">
-                        <div className="flex items-center gap-3">
-                          <code className="rounded-sm border border-zinc-100 px-2.5 py-1 text-[14px] font-black leading-none text-zinc-800 transition-colors group-hover/item:border-zinc-200">
-                            {wf.f}
-                          </code>
-                          <div className="h-[1px] flex-1 bg-zinc-100 transition-colors group-hover/item:bg-zinc-200" />
+            </Reveal>
+
+            {/* Secrets + local checks (left) | Quality (right) */}
+            <Reveal className={`${bentoRow} border-b-0`} delay={0.12} y={16}>
+              <div className={`${colLeft} lg:col-span-6`}>
+                <SectionTitle className="mb-3">{dict.secrets.section_title}</SectionTitle>
+                <Separator className="mb-4 bg-zinc-200" />
+                <p className="text-sm leading-relaxed text-zinc-600">{dict.secrets.body}</p>
+                <Separator className="my-4 bg-zinc-200" />
+                <h3 className="text-sm font-semibold text-zinc-900">{dict.quality.commands_title}</h3>
+                <div className="mt-2 border border-zinc-200 bg-white">
+                  {dict.quality.commands.map((cmd, i) => (
+                    <div key={cmd}>
+                      {i > 0 && <Separator className="bg-zinc-200" />}
+                      <div className="flex min-h-11 items-stretch">
+                        <pre className="min-w-0 flex-1 overflow-x-auto p-2.5 font-mono text-[11px] text-zinc-800 sm:text-xs">
+                          <code>{cmd}</code>
+                        </pre>
+                        <Separator orientation="vertical" className="h-auto bg-zinc-200" />
+                        <div className="flex shrink-0 items-center px-1">
+                          <CopyButton
+                            text={cmd}
+                            idleLabel={dict.copy_button.idle}
+                            successLabel={dict.copy_button.success}
+                          />
                         </div>
-                        <span className="text-[12px] font-bold uppercase tracking-tight text-zinc-500">{wf.l}</span>
                       </div>
-                      <p className="text-[14px] text-zinc-500 transition-colors leading-relaxed group-hover/item:text-zinc-600">
-                        {wf.d}
-                      </p>
                     </div>
                   ))}
                 </div>
+                <p className="mt-3 text-sm leading-relaxed text-zinc-500">{dict.quality.repo_note}</p>
               </div>
-            </div>
-
-            <div className="flex flex-col lg:col-span-4">
-              <div className="group relative flex-1 overflow-hidden bg-zinc-950 p-8 text-white lg:p-12">
-                <div className="absolute end-0 top-0 -me-32 -mt-32 h-64 w-64 rounded-full bg-emerald-500/10 blur-[100px]" />
-                <div className="relative z-10 flex flex-col gap-8">
-                  <div className="flex flex-col gap-2">
-                    <span className="text-[12px] font-black uppercase tracking-[0.18em] text-zinc-500">
-                      {dict.docs.security_requirement}
-                    </span>
-                    <h4 className="text-[18px] font-bold">{dict.docs.encrypted_secrets}</h4>
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    {["VERCEL_TOKEN", "AWS_ACCESS_KEY", "FIREBASE_TOKEN", "GHCR_TOKEN"].map((token) => (
-                      <div
-                        key={token}
-                        className="group/token flex items-center justify-between border-b border-white/5 py-3 transition-colors last:border-0"
-                      >
-                        <code className="text-[13px] font-mono text-zinc-400 transition-colors group-hover/token:text-white">
-                          {token}
-                        </code>
-                        <Shield size={12} className="text-zinc-700 transition-colors group-hover/token:text-emerald-500" />
-                      </div>
-                    ))}
-                  </div>
-                  <div className="flex flex-col gap-3">
-                    <p className="border-l-2 border-emerald-500/30 py-2 pl-4 text-[13px] italic leading-relaxed text-zinc-500">
-                      {dict.docs.add_secrets_at} <br />
-                      <span className="font-bold not-italic tracking-tight text-zinc-300">
-                        Settings → Secrets and variables → Actions
+              <div className={`${colRight} lg:col-span-6`}>
+                <SectionTitle className="mb-3">{dict.quality.section_title}</SectionTitle>
+                <p className="text-sm leading-snug text-zinc-600">{dict.quality.intro}</p>
+                <Separator className="my-4 bg-zinc-200" />
+                <StaggerList className="space-y-1.5 text-sm leading-snug text-zinc-700">
+                  {dict.quality.items.map((item) => (
+                    <StaggerItem key={item} className="flex gap-2">
+                      <span className="text-zinc-400" aria-hidden>
+                        ·
                       </span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, scale: 0.995 }}
-            whileInView={{ opacity: 1, scale: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            className="grid grid-cols-1 border-b border-l border-r border-zinc-100 bg-zinc-50/10 lg:grid-cols-12"
-          >
-            <div className="p-8 lg:col-span-12 lg:p-12">
-              <div className="flex flex-col gap-8">
-                <div className="flex flex-col gap-2">
-                  <span className="text-[12px] font-black uppercase tracking-[0.18em] text-zinc-500">
-                    {dict.docs.section4_num}
-                  </span>
-                  <h3 className="text-[18px] font-bold text-zinc-900">{dict.docs.section4_title}</h3>
-                </div>
-                <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-                  {exampleStacks.map((example) => (
-                    <div
-                      key={example.name}
-                      className="flex cursor-default flex-col gap-3 rounded-sm border border-zinc-200/60 bg-white p-6 transition-all hover:shadow-xl hover:shadow-zinc-200/40"
-                    >
-                      <span className="text-[14px] font-black text-zinc-900">{example.name}</span>
-                      <p className="text-[13px] font-medium leading-relaxed text-zinc-500">{example.description}</p>
-                      <div className="mt-2 flex items-center gap-1.5">
-                        <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
-                        <span className="font-mono text-[12px] font-bold uppercase tracking-widest text-zinc-500">
-                          {dict.docs.validated_output}
-                        </span>
-                      </div>
-                    </div>
+                      {item}
+                    </StaggerItem>
                   ))}
-                </div>
+                </StaggerList>
               </div>
-            </div>
-          </motion.div>
-        </section>
-
-        <motion.footer
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ duration: 1.2 }}
-          className="relative z-20 border-t border-zinc-100 bg-white"
-        >
-          <div className="mx-auto max-w-[1400px] border-l border-r border-zinc-100">
-            <div className="grid grid-cols-1 md:grid-cols-12">
-              <div className="flex flex-col gap-6 border-b border-zinc-100 p-8 md:col-span-4 md:border-b-0 md:border-r">
-                <div className="flex flex-col gap-1">
-                  <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                    {dict.footer.project_origin}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-[18px] font-bold tracking-tighter text-zinc-900">cistack</span>
-                    <span className="rounded-sm border border-zinc-100 bg-zinc-50 px-1.5 py-0.5 font-mono text-[12px] font-bold text-zinc-500">
-                      {`V_${version} // PRODUCTION`}
-                    </span>
-                  </div>
-                </div>
-                <div className="flex flex-col gap-1">
-                  <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                    {dict.footer.architected_by}
-                  </span>
-                  <a
-                    href="https://www.edwinvakayil.info/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="group flex items-center gap-2 text-[14px] font-bold text-zinc-600 transition-colors hover:text-zinc-950"
-                  >
-                    Edwin Vakayil
-                    <ArrowUpRight size={12} className="text-zinc-400 transition-colors group-hover:text-zinc-950" />
-                  </a>
+            </Reveal>
+
+            {/* Footer */}
+            <Reveal className="border-t border-zinc-200" y={14} delay={0.02}>
+              <div className="grid gap-6 p-5 sm:p-6 lg:grid-cols-2 lg:gap-0 lg:px-8 lg:py-6">
+                <div className="lg:pe-8">
+                  <p className="text-sm font-semibold text-zinc-900">{dict.footer.license}</p>
+                  <p className="mt-1.5 max-w-md text-sm leading-relaxed text-zinc-500">{dict.footer.tagline}</p>
                 </div>
-              </div>
-
-              <div className="flex flex-col justify-between gap-8 border-b border-zinc-100 p-8 md:col-span-5 md:border-b-0 md:border-r">
-                <div className="flex flex-wrap gap-x-8 gap-y-4">
-                  <div className="flex flex-col gap-1">
-                    <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                      {dict.footer.status}
-                    </span>
-                    <div className="flex items-center gap-2">
-                      <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
-                      <span className="text-[12px] font-bold text-zinc-700">{dict.footer.operational}</span>
-                    </div>
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                      {dict.footer.license}
-                    </span>
-                    <span className="text-[12px] font-bold text-zinc-700 uppercase">{dict.footer.open_source}</span>
-                  </div>
+                <div className="lg:border-s lg:border-zinc-200 lg:ps-8">
+                  <p className="text-sm text-zinc-600">
+                    <span>{dict.footer.architect_credit} </span>
+                    <a
+                      href="https://www.edwinvakayil.info/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="font-medium text-zinc-950 underline-offset-4 hover:underline"
+                    >
+                      {dict.footer.architect_name}
+                    </a>
+                  </p>
                 </div>
-                <p className="text-[12px] font-medium leading-relaxed text-zinc-500">{dict.footer.footer_desc}</p>
               </div>
-
-              <div className="flex flex-col items-start justify-center gap-3 bg-zinc-50/30 p-8 md:col-span-3 md:items-end">
-                <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-500">
-                  {dict.footer.global_install}
-                </span>
-                <code className="cursor-default rounded-sm border border-zinc-100 bg-white px-3 py-1.5 font-mono text-[13px] font-bold text-zinc-800 transition-colors">
-                  npm install -g cistack
-                </code>
-              </div>
-            </div>
-
-            <div className="flex flex-col items-center justify-between gap-4 border-t border-zinc-100 p-4 px-8 sm:flex-row">
-              <span className="font-mono text-[12px] font-bold uppercase tracking-widest text-zinc-500">
-                {`© ${currentYear} ${dict.footer.copyright}`}
-              </span>
-              <div className="flex items-center gap-6">
-                <a
-                  href="https://github.com/edwinvakayil/cistack"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-[12px] font-black uppercase tracking-widest text-zinc-500 transition-colors hover:text-zinc-950"
-                >
-                  Github
-                </a>
-                <a
-                  href="https://www.npmjs.com/package/cistack"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-[12px] font-black uppercase tracking-widest text-zinc-500 transition-colors hover:text-zinc-950"
-                >
-                  Npm
-                </a>
-                <a
-                  href="#docs"
-                  className="text-[12px] font-black uppercase tracking-widest text-zinc-500 transition-colors hover:text-zinc-950"
-                >
-                  {dict.navigation.docs}
-                </a>
-              </div>
-            </div>
+              <Separator className="bg-zinc-200" />
+              <p className="px-5 py-3 text-center text-xs text-zinc-400 sm:px-8">
+                © {currentYear} {dict.footer.copyright_suffix}
+              </p>
+            </Reveal>
           </div>
-        </motion.footer>
+        </main>
+        </SiteMotionRoot>
       </div>
     </>
   );