DataDave-Dev · DataDave-Dev · Jun 17, 2026 · Jun 17, 2026 · Jun 17, 2026 · Jun 17, 2026
diff --git a/src/app/[lang]/app/page.tsx b/src/app/[lang]/app/page.tsx
@@ -20,7 +20,7 @@ export default async function AppPage({
 
   return (
     <>
-      <Header lang={lang} />
+      <Header lang={lang} variant="light" />
       <CodeWorkspace
         languageLabel={t.languageLabel}
         analyzeLabel={t.analyze}

diff --git a/src/app/[lang]/docs/[slug]/page.tsx b/src/app/[lang]/docs/[slug]/page.tsx
@@ -40,23 +40,33 @@ export default async function DocPage({
     <article>
       <Content lang={lang} />
 
-      <nav className="mt-16 flex items-center justify-between gap-4 border-t border-white/[0.08] pt-6 text-sm">
+      <nav className="mt-16 grid grid-cols-2 gap-4 border-t border-[#e2e8f0] pt-8">
         {prev ? (
           <Link
             href={`/${lang}/docs/${prev.slug}`}
-            className="text-muted transition-colors hover:text-fg"
+            className="group rounded-xl border border-[#e2e8f0] bg-white p-4 transition-all hover:-translate-y-0.5 hover:border-[#c7d2fe] hover:shadow-[0_8px_24px_-12px_rgba(15,23,42,0.18)]"
           >
-            ← {prev.title[lang]}
+            <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-[#94a3b8]">
+              {lang === "es" ? "Anterior" : "Previous"}
+            </span>
+            <span className="mt-1 block font-medium text-[#0f172a] transition-colors group-hover:text-[#4f46e5]">
+              ← {prev.title[lang]}
+            </span>
           </Link>
         ) : (
           <span />
         )}
         {next ? (
           <Link
             href={`/${lang}/docs/${next.slug}`}
-            className="text-right font-medium text-[#e6e9ef] transition-colors hover:text-white"
+            className="group rounded-xl border border-[#e2e8f0] bg-white p-4 text-right transition-all hover:-translate-y-0.5 hover:border-[#c7d2fe] hover:shadow-[0_8px_24px_-12px_rgba(15,23,42,0.18)]"
           >
-            {next.title[lang]} →
+            <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-[#94a3b8]">
+              {lang === "es" ? "Siguiente" : "Next"}
+            </span>
+            <span className="mt-1 block font-medium text-[#0f172a] transition-colors group-hover:text-[#4f46e5]">
+              {next.title[lang]} →
+            </span>
           </Link>
         ) : (
           <span />

diff --git a/src/app/[lang]/docs/layout.tsx b/src/app/[lang]/docs/layout.tsx
@@ -20,14 +20,14 @@ export default async function DocsLayout({
 
   return (
     <>
-      <Header lang={lang as Locale} />
-      <div className="mx-auto grid max-w-[1200px] gap-10 px-6 py-10 lg:grid-cols-[220px_1fr] lg:gap-14 lg:py-16">
+      <Header lang={lang as Locale} variant="light" />
+      <div className="mx-auto grid max-w-[1180px] gap-10 px-6 py-12 lg:grid-cols-[240px_1fr] lg:gap-16 lg:py-20">
         <aside className="hidden lg:block">
-          <div className="sticky top-[92px]">
+          <div className="sticky top-[96px]">
             <DocsSidebar lang={lang as Locale} />
           </div>
         </aside>
-        <main className="min-w-0 max-w-[760px]">{children}</main>
+        <main className="min-w-0 max-w-[740px]">{children}</main>
       </div>
     </>
   );

diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -5,6 +5,11 @@ import Header from "@/components/layout/Header";
 import Hero from "@/components/sections/Hero";
 import HowItWorks from "@/components/sections/HowItWorks";
 import Features from "@/components/sections/Features";
+import Showcase from "@/components/sections/Showcase";
+import SupportedLanguages from "@/components/sections/SupportedLanguages";
+import UseCases from "@/components/sections/UseCases";
+import Faq from "@/components/sections/Faq";
+import CallToAction from "@/components/sections/CallToAction";
 import Footer from "@/components/layout/Footer";
 import ScrollReveal from "@/components/ui/ScrollReveal";
 
@@ -20,8 +25,9 @@ export default async function Home({
   return (
     <>
       <ScrollReveal />
-      <Header lang={lang} />
-      <Hero
+      <div className="relative isolate bg-[#f6f7f9] text-[#0f172a]">
+        <Header lang={lang} variant="light" />
+        <Hero
         badge={t.badge}
         phrase={t.hero}
         sub={t.tagline}
@@ -36,6 +42,30 @@ export default async function Home({
         features={t.features}
         moreLanguagesSoon={t.moreLanguagesSoon}
       />
+      <Showcase
+        title={t.showcaseTitle}
+        callTitle={t.showcaseCallTitle}
+        callDesc={t.showcaseCallDesc}
+        schemaTitle={t.showcaseSchemaTitle}
+        schemaDesc={t.showcaseSchemaDesc}
+      />
+      <SupportedLanguages
+        title={t.languagesTitle}
+        subtitle={t.languagesSubtitle}
+        rows={t.languageRows}
+      />
+      <UseCases title={t.useCasesTitle} items={t.useCases} />
+      <Faq title={t.faqTitle} items={t.faqs} />
+      <CallToAction
+        title={t.ctaTitle}
+        desc={t.ctaDesc}
+        getStarted={t.getStarted}
+        appHref={`/${lang}/app`}
+        ossTitle={t.ctaOssTitle}
+        ossDesc={t.ctaOssDesc}
+        star={t.ctaStar}
+        contribute={t.ctaContribute}
+      />
       <Footer
         lang={lang}
         tagline={t.tagline}
@@ -45,6 +75,7 @@ export default async function Home({
         resources={t.footerResources}
         footerNote={t.footerNote}
       />
+      </div>
     </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,17 +4,38 @@
   --color-fg: #e6e9ef;
   --color-muted: #94a3b8;
   --color-surface: #13151b;
+  /* Single semantic accent: "run / live" — used only for interactive and
+     execution-related cues, never for body text or headings. */
+  --color-accent: #34d399;
+  /* Light-theme landing tokens (scoped to the landing; app/docs stay dark). */
+  --color-brand: #4f46e5;
+  --color-ink: #0f172a;
+  --color-ink-soft: #475569;
+  --color-ink-faint: #64748b;
+  --color-paper: #f6f7f9;
+  --color-line: #e2e8f0;
 }
 
 @layer base {
   body {
     min-height: 100vh;
-    background: #000000;
-    color: var(--color-fg);
+    background: #f6f7f9;
+    color: var(--color-ink);
     font-family: "Lexend Variable", system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  /* Consistent, accessible focus ring across interactive elements. */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  /* Tabular figures for mono numerals so indices/counters don't jitter. */
+  .font-mono {
+    font-variant-numeric: tabular-nums;
+  }
 }
 
 /* ---- Metallic surfaces (silver gradient + diagonal sheen) ---- */
@@ -60,11 +81,27 @@
   z-index: -1;
   pointer-events: none;
   background-image:
-    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
   background-size: 44px 44px;
 }
 
+/* ---- Subtle grain overlay (used on the landing surface) ---- */
+.grain {
+  position: absolute;
+  inset: 0;
+  z-index: -10;
+  pointer-events: none;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .grain {
+    display: none;
+  }
+}
+
 /* ---- Spotlight card: silver glow follows the cursor (interior + border) ---- */
 .spotlight {
   position: relative;
@@ -121,7 +158,7 @@
 /* ---- Call-graph edges ---- */
 .edge-flow {
   fill: none;
-  stroke: rgba(255, 255, 255, 0.35);
+  stroke: color-mix(in oklab, var(--color-accent) 65%, transparent);
   stroke-width: 1.5;
   stroke-dasharray: 4 5;
   animation: flow 0.9s linear infinite;
@@ -141,22 +178,22 @@
   }
 }
 
-/* ---- React Flow dark theme overrides ---- */
+/* ---- React Flow light theme overrides ---- */
 .react-flow__controls-button {
-  background: #13151b;
-  border-color: rgba(255, 255, 255, 0.1);
-  color: #e6e9ef;
+  background: #ffffff;
+  border-color: #e2e8f0;
+  color: #475569;
 }
 
 .react-flow__controls-button:hover {
-  background: #1e212a;
+  background: #f1f5f9;
 }
 
 .react-flow__controls-button svg {
-  fill: #e6e9ef;
+  fill: #475569;
 }
 
 .react-flow__attribution {
   background: transparent;
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(15, 23, 42, 0.3);
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -54,7 +54,7 @@ export default function NotFound() {
           {/* Overhead light, mirroring the hero. */}
           <div
             aria-hidden="true"
-            className="absolute inset-x-0 top-0 h-[72%] pointer-events-none z-0 bg-[radial-gradient(62%_78%_at_50%_-8%,rgba(255,255,255,0.19),rgba(255,255,255,0.07)_44%,transparent_74%)]"
+            className="absolute inset-x-0 top-0 h-[72%] pointer-events-none z-0 bg-[radial-gradient(62%_78%_at_50%_-8%,rgba(79,70,229,0.12),rgba(79,70,229,0.05)_44%,transparent_74%)]"
           />
 
           <div className="relative z-10 flex flex-col items-center text-center max-w-[44ch]">
@@ -76,7 +76,7 @@ export default function NotFound() {
                   markerHeight="6"
                   orient="auto-start-reverse"
                 >
-                  <path d="M0 0 L10 5 L0 10 z" fill="rgba(255,255,255,0.5)" />
+                  <path d="M0 0 L10 5 L0 10 z" fill="#94a3b8" />
                 </marker>
               </defs>
 
@@ -95,13 +95,13 @@ export default function NotFound() {
               <path
                 className="js-edge"
                 d="M210 42 V 74"
-                stroke="rgba(255,255,255,0.28)"
+                stroke="#cbd5e1"
                 strokeWidth="1.5"
                 strokeDasharray="4 5"
               />
               <g
                 className="js-edge"
-                stroke="rgba(255,255,255,0.45)"
+                stroke="#94a3b8"
                 strokeWidth="1.6"
                 strokeLinecap="round"
               >
@@ -111,15 +111,15 @@ export default function NotFound() {
 
               <g className="js-node">
                 <rect
-                  className="fill-[#161b26] stroke-[rgba(255,255,255,0.5)]"
+                  className="fill-[#eef2ff] stroke-[#4f46e5]"
                   x="150"
                   y="6"
                   width="120"
                   height="34"
                   rx="9"
                 />
                 <text
-                  className="fill-[#e6e9ef] font-mono text-[13px]"
+                  className="fill-[#0f172a] font-mono text-[13px]"
                   x="210"
                   y="23"
                   textAnchor="middle"
@@ -130,15 +130,15 @@ export default function NotFound() {
               </g>
               <g className="js-node">
                 <rect
-                  className="fill-[#11141c] stroke-[rgba(255,255,255,0.22)]"
+                  className="fill-white stroke-[#cbd5e1]"
                   x="14"
                   y="86"
                   width="118"
                   height="34"
                   rx="9"
                 />
                 <text
-                  className="fill-[#e6e9ef] font-mono text-[13px]"
+                  className="fill-[#0f172a] font-mono text-[13px]"
                   x="73"
                   y="103"
                   textAnchor="middle"
@@ -149,15 +149,15 @@ export default function NotFound() {
               </g>
               <g className="js-node">
                 <rect
-                  className="fill-[#11141c] stroke-[rgba(255,255,255,0.22)]"
+                  className="fill-white stroke-[#cbd5e1]"
                   x="288"
                   y="86"
                   width="118"
                   height="34"
                   rx="9"
                 />
                 <text
-                  className="fill-[#e6e9ef] font-mono text-[13px]"
+                  className="fill-[#0f172a] font-mono text-[13px]"
                   x="347"
                   y="103"
                   textAnchor="middle"
@@ -168,28 +168,28 @@ export default function NotFound() {
               </g>
             </svg>
 
-            <p className="js-num metallic font-extrabold leading-[0.9] tracking-[-0.04em] text-[clamp(5rem,17vw,11rem)]">
+            <p className="js-num text-[#0f172a] font-extrabold leading-[0.9] tracking-[-0.04em] text-[clamp(5rem,17vw,11rem)]">
               404
             </p>
 
-            <h1 className="js-title mt-3 text-fg font-bold leading-tight tracking-[-0.02em] text-[clamp(1.5rem,3.2vw,2.25rem)]">
+            <h1 className="js-title mt-3 text-[#0f172a] font-bold leading-tight tracking-[-0.02em] text-[clamp(1.5rem,3.2vw,2.25rem)]">
               {t.notFoundTitle}
             </h1>
 
-            <p className="js-desc mt-3 text-[clamp(0.95rem,1.2vw,1.1rem)] leading-relaxed text-muted">
+            <p className="js-desc mt-3 text-[clamp(0.95rem,1.2vw,1.1rem)] leading-relaxed text-[#475569]">
               {t.notFoundDesc}
             </p>
 
             <div className="js-actions flex flex-wrap justify-center gap-4 mt-9">
               <Link
                 href={`/${lang}`}
-                className="metallic-fill rounded-full px-8 py-3.5 text-base font-semibold cursor-pointer transition hover:-translate-y-px focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]"
+                className="bg-[#4f46e5] text-white rounded-full px-8 py-3.5 text-base font-semibold cursor-pointer transition hover:-translate-y-px focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]"
               >
                 {t.notFoundHome}
               </Link>
               <Link
                 href={`/${lang}/app`}
-                className="rounded-full px-8 py-3.5 text-base font-semibold cursor-pointer transition border border-white/25 text-[#e6e9ef] hover:-translate-y-px hover:bg-white/[0.08] hover:border-white/45 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]"
+                className="rounded-full px-8 py-3.5 text-base font-semibold cursor-pointer transition border border-[#e2e8f0] bg-white text-[#0f172a] hover:-translate-y-px hover:bg-slate-50 hover:border-slate-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]"
               >
                 {t.notFoundApp}
               </Link>