diff --git a/app/i18n.ts b/app/i18n.ts
index 44fa179..87871b7 100644
--- a/app/i18n.ts
+++ b/app/i18n.ts
@@ -8,6 +8,8 @@ import heroEN from "../public/locales/en/hero.json";
 import heroES from "../public/locales/es/hero.json";
 import featuresEN from "../public/locales/en/features.json";
 import featuresES from "../public/locales/es/features.json";
+import showcaseEN from "../public/locales/en/showcase.json";
+import showcaseES from "../public/locales/es/showcase.json";
 import downloadEN from "../public/locales/en/download.json";
 import downloadES from "../public/locales/es/download.json";
 import communityEN from "../public/locales/en/community.json";
@@ -28,6 +30,7 @@ i18n
         hero: heroEN,
         supportedBy: supportedByEN,
         features: featuresEN,
+        showcase: showcaseEN,
         download: downloadEN,
         community: communityEN,
         contact: contactEN,
@@ -38,6 +41,7 @@ i18n
         hero: heroES,
         supportedBy: supportedByES,
         features: featuresES,
+        showcase: showcaseES,
         download: downloadES,
         community: communityES,
         contact: contactES,
diff --git a/components/download-section.tsx b/components/download-section.tsx
index 020f36c..911756b 100644
--- a/components/download-section.tsx
+++ b/components/download-section.tsx
@@ -39,8 +39,7 @@ function CopyButton({ text }: { text: string }) {
 }
 
 export function DownloadSection() {
-  const { i18n } = useTranslation()
-  const lang = i18n.language?.startsWith("es") ? "es" : "en"
+  const { t } = useTranslation("download")
   const [exes, setExes] = useState<ExeEntry[]>(FALLBACK)
   const [releaseTag, setReleaseTag] = useState("v0.9.3-alpha")
 
@@ -76,7 +75,7 @@ export function DownloadSection() {
         <div>
           <div className="font-mono text-xs tracking-[.1em] uppercase text-primary">
             <span className="block w-12 h-[3px] mb-[18px] bg-primary" />
-            [ 04 ] {lang === "es" ? "Descarga" : "Download"}
+            [ 04 ] {t("sectionLabel")}
           </div>
         </div>
         <div>
@@ -84,13 +83,13 @@ export function DownloadSection() {
             className="font-medium leading-[.96] text-foreground mb-4"
             style={{ fontSize: "clamp(48px,7vw,96px)", letterSpacing: "-.04em" }}
           >
-            {lang === "es" ? <><em className="not-italic text-[#A7C7FF]">Descargá</em> dashAI.</> : <><em className="not-italic text-[#A7C7FF]">Download</em> dashAI.</>}
+            <em className="not-italic text-[#A7C7FF]">{t("heading")}</em> dashAI.
           </h2>
           <div className="font-mono text-xs text-muted-foreground tracking-[.08em] flex flex-wrap gap-x-3 gap-y-1">
             <strong className="text-foreground font-medium">{releaseTag}</strong>
             <span>·</span><span>MIT License</span>
             <span>·</span><span>Linux · macOS · Windows</span>
-            <span>·</span><span>{lang === "es" ? "Mayo 2026" : "May 2026"}</span>
+            <span>·</span><span>{t("releaseMonth")}</span>
           </div>
         </div>
       </div>
@@ -110,13 +109,11 @@ export function DownloadSection() {
         <div className="flex flex-col p-7 min-h-[280px]" style={{ background: "var(--card)" }}>
           <div className="flex items-center gap-2.5 font-mono text-[11px] uppercase tracking-[.12em] text-muted-foreground mb-3.5">
             <span className="bg-primary text-primary-foreground font-semibold text-[10px] px-[7px] py-[2px] rounded">01</span>
-            {lang === "es" ? "Ejecutables (recomendado)" : "Executables (recommended)"}
+            {t("executables.badge")}
           </div>
-          <h3 className="text-2xl font-semibold tracking-tight mb-2.5">{lang === "es" ? "Instalador nativo" : "Native installer"}</h3>
+          <h3 className="text-2xl font-semibold tracking-tight mb-2.5">{t("executables.title")}</h3>
           <p className="text-sm text-muted-foreground leading-[1.5] mb-4">
-            {lang === "es"
-              ? "Sin Python ni configuración. Descargá el ejecutable de tu sistema operativo desde GitHub Releases."
-              : "No Python, no setup. Download the executable for your OS from GitHub Releases."}
+            {t("executables.description")}
           </p>
           <div className="flex flex-col border border-border rounded-md overflow-hidden mb-4">
             {exes.map((e, i) => (
@@ -155,7 +152,7 @@ export function DownloadSection() {
             rel="noopener"
             className="mt-auto font-mono text-xs text-[#A7C7FF] flex items-center gap-1.5 hover:gap-2.5 transition-all duration-200"
           >
-            {lang === "es" ? "Ver releases" : "View releases"} →
+            {t("executables.viewReleases")} →
           </a>
         </div>
 
@@ -165,18 +162,16 @@ export function DownloadSection() {
             <span className="bg-primary text-primary-foreground font-semibold text-[10px] px-[7px] py-[2px] rounded">02</span>
             PyPI
           </div>
-          <h3 className="text-2xl font-semibold tracking-tight mb-2.5">{lang === "es" ? "Instalación con pip" : "Install with pip"}</h3>
+          <h3 className="text-2xl font-semibold tracking-tight mb-2.5">{t("pip.title")}</h3>
           <p className="text-sm text-muted-foreground leading-[1.5] mb-4">
-            {lang === "es"
-              ? <><code className="font-mono text-xs">dashai</code> levanta el servidor y abre el navegador en <code className="font-mono text-xs">localhost:8000</code>.</>
-              : <><code className="font-mono text-xs">dashai</code> starts the server and opens the browser at <code className="font-mono text-xs">localhost:8000</code>.</>}
+            <code className="font-mono text-xs">dashai</code> {t("pip.descriptionMiddle")} <code className="font-mono text-xs">localhost:8000</code>.
           </p>
           <div className="relative border border-border rounded-md p-4 font-mono text-sm leading-[1.7] mb-4" style={{ background: "var(--ink-deep)" }}>
             <CopyButton text={pipCmd} />
             <div><span className="text-[#A7C7FF]">$</span> pip install dashai</div>
             <div><span className="text-[#A7C7FF]">$</span> dashai</div>
             <div className="text-muted-foreground mt-1 text-xs italic">
-              # {lang === "es" ? "http://localhost:8000/ — El navegador abre solo." : "http://localhost:8000/ — Browser opens on its own."}
+              # {t("pip.comment")}
             </div>
           </div>
           <a
@@ -185,7 +180,7 @@ export function DownloadSection() {
             rel="noopener"
             className="mt-auto font-mono text-xs text-[#A7C7FF] flex items-center gap-1.5 hover:gap-2.5 transition-all duration-200"
           >
-            {lang === "es" ? "Ver en PyPI" : "View on PyPI"} →
+            {t("pip.viewOnPyPI")} →
           </a>
         </div>
 
@@ -193,14 +188,14 @@ export function DownloadSection() {
         <div className="flex flex-col p-7 min-h-[280px]" style={{ background: "var(--card)" }}>
           <div className="flex items-center gap-2.5 font-mono text-[11px] uppercase tracking-[.12em] text-muted-foreground mb-3.5">
             <span className="font-semibold text-[10px] px-[7px] py-[2px] rounded border border-border">⊳</span>
-            {lang === "es" ? "Requisitos" : "Requirements"}
+            {t("requirements.badge")}
           </div>
-          <h3 className="text-xl font-semibold tracking-tight mb-4">{lang === "es" ? "Lo que necesitás" : "What you need"}</h3>
+          <h3 className="text-xl font-semibold tracking-tight mb-4">{t("requirements.title")}</h3>
           <ul className="flex flex-col gap-3.5 flex-1">
             {[
-              { k: "Python", v: "≥ 3.10",  note: lang === "es" ? "Solo para instalación pip" : "Only for pip install" },
-              { k: "RAM",    v: "8 GB",    note: lang === "es" ? "16 GB para LLMs locales"   : "16 GB for local LLMs" },
-              { k: "OS",     v: "Linux · macOS · Windows", note: lang === "es" ? "Ejecutables nativos disponibles" : "Native executables available" },
+              { k: "Python", v: "≥ 3.10",                  note: t("requirements.items.python.note") },
+              { k: "RAM",    v: "8 GB",                     note: t("requirements.items.ram.note") },
+              { k: "OS",     v: "Linux · macOS · Windows",  note: t("requirements.items.os.note") },
             ].map(r => (
               <li key={r.k} className="grid gap-3.5 pb-3.5 border-b border-dashed border-border last:border-b-0 last:pb-0" style={{ gridTemplateColumns: "80px 1fr" }}>
                 <span className="font-mono text-[10.5px] uppercase tracking-[.1em] text-muted-foreground pt-0.5">{r.k}</span>
@@ -217,7 +212,7 @@ export function DownloadSection() {
       {/* Footer row */}
       <div className="relative z-10 mt-10 pt-6 border-t border-border flex flex-wrap items-center justify-between gap-4 font-mono text-xs text-muted-foreground">
         <div className="flex items-center gap-2 flex-wrap">
-          <span>{lang === "es" ? "¿Querés modificar el núcleo? Cloná el repo:" : "Want to modify the core? Clone the repo:"}</span>
+          <span>{t("footer.cloneText")}</span>
           <code className="bg-background border border-border rounded px-2 py-0.5 text-foreground ml-1.5">
             git clone github.com/DashAISoftware/DashAI
           </code>
diff --git a/components/showcase-section.tsx b/components/showcase-section.tsx
index 1645254..766f5cf 100644
--- a/components/showcase-section.tsx
+++ b/components/showcase-section.tsx
@@ -3,8 +3,8 @@
 import { useTranslation } from "react-i18next"
 
 export function ShowcaseSection() {
-  const { i18n } = useTranslation()
-  const lang = i18n.language?.startsWith("es") ? "es" : "en"
+  const { t } = useTranslation("showcase")
+  const callouts = t("callouts", { returnObjects: true }) as Array<{ title: string; body: string }>
 
   return (
     <section
@@ -21,7 +21,7 @@ export function ShowcaseSection() {
         <div>
           <div className="font-mono text-xs tracking-[.1em] uppercase pt-2 relative text-primary">
             <span className="block w-12 h-[3px] mb-[18px] bg-primary" />
-            [ 02 ] {lang === "es" ? "La aplicación" : "The application"}
+            [ 02 ] {t("sectionLabel")}
           </div>
         </div>
         <div>
@@ -34,12 +34,10 @@ export function ShowcaseSection() {
             className="font-medium leading-[1.02] text-foreground mb-6"
             style={{ fontSize: "clamp(36px,5.4vw,72px)", letterSpacing: "-.03em", maxWidth: "18ch" }}
           >
-            {lang === "es" ? "La interfaz que emerge del schema." : "The interface that emerges from the schema."}
+            {t("heading")}
           </h2>
           <p className="text-muted-foreground leading-[1.5]" style={{ fontSize: "clamp(17px,1.3vw,20px)", maxWidth: "62ch" }}>
-            {lang === "es"
-              ? "Cuando registrás un componente, la UI no se programa: se genera. El servidor expone su schema Pydantic y el frontend renderiza el formulario sin conocerlo previamente."
-              : "When you register a component, the UI isn't programmed: it's generated. The server exposes its Pydantic schema and the React frontend renders the form without prior knowledge."}
+            {t("description")}
           </p>
         </div>
       </div>
@@ -77,17 +75,17 @@ export function ShowcaseSection() {
                 <img src="/images/dashai-logo.svg" alt="dash.AI" height={16} style={{ height: 16, width: "auto" }} />
               </div>
               {[
-                { label: lang === "es" ? "Workspace" : "Workspace", items: [
-                  { name: lang === "es" ? "Datasets"   : "Datasets",   badge: "12"    },
-                  { name: lang === "es" ? "Modelos"    : "Models",     badge: "28", active: true },
-                  { name: lang === "es" ? "Generativo" : "Generative", badge: "5"    },
-                  { name: lang === "es" ? "Plugins"    : "Plugins",    badge: "+"    },
+                { label: t("sidebar.workspaceLabel"), items: [
+                  { name: t("sidebar.datasets"),   badge: "12" },
+                  { name: t("sidebar.models"),     badge: "28", active: true },
+                  { name: t("sidebar.generative"), badge: "5" },
+                  { name: t("sidebar.plugins"),    badge: "+" },
                 ]},
-                { label: lang === "es" ? "Catálogo" : "Catalog", items: [
-                  { name: "Tabular",   badge: "30" },
-                  { name: "NLP",       badge: "15" },
-                  { name: lang === "es" ? "Traducción" : "Translation", badge: "9" },
-                  { name: lang === "es" ? "Visión" : "Vision", badge: "11" },
+                { label: t("sidebar.catalogLabel"), items: [
+                  { name: t("sidebar.tabular"),     badge: "30" },
+                  { name: t("sidebar.nlp"),         badge: "15" },
+                  { name: t("sidebar.translation"), badge: "9" },
+                  { name: t("sidebar.vision"),      badge: "11" },
                 ]},
               ].map(sec => (
                 <div key={sec.label} className="mb-[18px]">
@@ -115,21 +113,21 @@ export function ShowcaseSection() {
             {/* Main */}
             <div className="p-6 overflow-hidden">
               <div className="font-mono text-[11px] text-muted-foreground mb-2.5">
-                <span className="text-[#A7C7FF]">{lang === "es" ? "Modelos" : "Models"}</span> / Tabular / <span>{lang === "es" ? "Configurar" : "Configure"}</span>
+                <span className="text-[#A7C7FF]">{t("sidebar.models")}</span> / Tabular / <span>{t("main.configure")}</span>
               </div>
               <h3 className="text-2xl font-semibold tracking-tight mb-1">RandomForestClassifier</h3>
               <p className="text-sm text-muted-foreground mb-5">
-                {lang === "es" ? "Hiperparámetros generados desde" : "Hyperparameters generated from"}{" "}
+                {t("main.hyperparamsFrom")}{" "}
                 <code className="font-mono text-[#A7C7FF]">MyForestSchema</code>
               </p>
 
               {/* Form grid */}
               <div className="grid grid-cols-2 gap-px border border-border rounded overflow-hidden" style={{ background: "var(--border)" }}>
                 {[
-                  { label: "n_estimators", type: "int · 10–1000", name: "", input: <div className="relative h-9 overflow-hidden rounded"><div className="absolute inset-0" style={{ background: "linear-gradient(90deg, var(--primary) 0%, var(--primary) 35%, var(--ink-deep) 35%)" }}/><div className="relative flex items-center justify-between px-3 h-full text-foreground font-mono text-sm font-semibold"><span>350</span><span className="text-muted-foreground font-normal">1000</span></div></div>, help: lang === "es" ? "Número de árboles en el bosque." : "Number of trees in the forest." },
-                  { label: "max_depth", type: "int | None", name: "", input: <div className="flex items-center justify-between border border-border rounded px-3 py-2 font-mono text-sm bg-[var(--ink-deep)]"><span>None</span></div>, help: lang === "es" ? "Profundidad máxima del árbol." : "Maximum depth of the tree." },
-                  { label: "criterion", type: "enum", name: "", input: <div className="flex items-center justify-between border border-border rounded px-3 py-2 font-mono text-sm bg-[var(--ink-deep)]"><span>gini</span><span className="text-muted-foreground text-[10px]">▾</span></div>, help: lang === "es" ? "Función para medir la calidad del split." : "Function to measure split quality." },
-                  { label: "bootstrap", type: "bool", name: "", input: <div className="flex items-center justify-between border border-border rounded px-3 py-2 font-mono text-sm bg-[var(--ink-deep)]"><span>True</span><span className="bg-primary text-primary-foreground text-[9.5px] font-semibold px-1.5 py-0.5 rounded-full tracking-[.08em]">ON</span></div>, help: lang === "es" ? "Usar muestras bootstrap al construir cada árbol." : "Use bootstrap samples when building each tree." },
+                  { label: "n_estimators", type: "int · 10–1000", input: <div className="relative h-9 overflow-hidden rounded"><div className="absolute inset-0" style={{ background: "linear-gradient(90deg, var(--primary) 0%, var(--primary) 35%, var(--ink-deep) 35%)" }}/><div className="relative flex items-center justify-between px-3 h-full text-foreground font-mono text-sm font-semibold"><span>350</span><span className="text-muted-foreground font-normal">1000</span></div></div>, help: t("main.form.nEstimatorsHelp") },
+                  { label: "max_depth",    type: "int | None",    input: <div className="flex items-center justify-between border border-border rounded px-3 py-2 font-mono text-sm bg-[var(--ink-deep)]"><span>None</span></div>, help: t("main.form.maxDepthHelp") },
+                  { label: "criterion",    type: "enum",          input: <div className="flex items-center justify-between border border-border rounded px-3 py-2 font-mono text-sm bg-[var(--ink-deep)]"><span>gini</span><span className="text-muted-foreground text-[10px]">▾</span></div>, help: t("main.form.criterionHelp") },
+                  { label: "bootstrap",    type: "bool",          input: <div className="flex items-center justify-between border border-border rounded px-3 py-2 font-mono text-sm bg-[var(--ink-deep)]"><span>True</span><span className="bg-primary text-primary-foreground text-[9.5px] font-semibold px-1.5 py-0.5 rounded-full tracking-[.08em]">ON</span></div>, help: t("main.form.bootstrapHelp") },
                 ].map(f => (
                   <div key={f.label} className="p-3.5" style={{ background: "var(--background)" }}>
                     <div className="flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[.06em] text-muted-foreground mb-2">
@@ -146,12 +144,12 @@ export function ShowcaseSection() {
               <div className="flex items-center justify-between mt-5 pt-4 border-t border-border">
                 <div className="flex items-center gap-2 font-mono text-[11px] text-muted-foreground">
                   <span className="text-primary text-sm leading-none">●</span>
-                  {lang === "es" ? "Formulario auto-generado del schema" : "Form auto-generated from schema"}
+                  {t("main.formAutoGenerated")}
                   <span className="text-foreground">·</span>
-                  {lang === "es" ? "4 campos" : "4 fields"}
+                  {t("main.fields")}
                 </div>
                 <button className="bg-primary text-primary-foreground font-semibold text-[12.5px] px-4 py-2 rounded">
-                  {lang === "es" ? "Entrenar →" : "Train →"}
+                  {t("main.train")}
                 </button>
               </div>
             </div>
@@ -160,26 +158,7 @@ export function ShowcaseSection() {
 
         {/* Callouts */}
         <div className="flex flex-col gap-8 md:sticky md:top-24">
-          {[
-            {
-              title: lang === "es" ? "1. Schema → UI" : "1. Schema → UI",
-              body: lang === "es"
-                ? "Cada campo del formulario nace de una línea de Pydantic. Tipo, rango, default y descripción se renderizan automáticamente."
-                : "Each form field is born from a Pydantic line. Type, range, default and description render automatically.",
-            },
-            {
-              title: lang === "es" ? "2. Sin código de frontend" : "2. No frontend code",
-              body: lang === "es"
-                ? "El componente nuevo no toca un solo archivo React. La interfaz aparece sola cuando el backend lo registra."
-                : "The new component touches zero React files. The UI shows up on its own once the backend registers it.",
-            },
-            {
-              title: lang === "es" ? "3. Catálogo navegable" : "3. Browsable catalog",
-              body: lang === "es"
-                ? "Tabular, NLP, traducción, LLMs y visión generativa coexisten en una sola UI consistente — todos sobre las mismas doce abstracciones."
-                : "Tabular, NLP, translation, LLMs and generative vision coexist in one consistent UI — all on the same twelve abstractions.",
-            },
-          ].map(c => (
+          {callouts.map(c => (
             <div
               key={c.title}
               className="p-6 border border-border rounded-lg relative"
@@ -199,13 +178,20 @@ export function ShowcaseSection() {
         <div className="border border-border rounded-lg overflow-hidden" style={{ background: "var(--background)" }}>
           <div className="flex items-center gap-2 px-3 py-2 border-b border-border text-[10.5px] font-mono text-muted-foreground" style={{ background: "var(--ink-deep)" }}>
             <div className="flex gap-1"><span className="w-[7px] h-[7px] rounded-full bg-[#FF5F57]"/><span className="w-[7px] h-[7px] rounded-full bg-[#FEBC2E]"/><span className="w-[7px] h-[7px] rounded-full bg-[#28C840]"/></div>
-            <span className="ml-1.5">{lang === "es" ? "Catálogo / Modelos" : "Catalog / Models"}</span>
+            <span className="ml-1.5">{t("strip.card1.title")}</span>
           </div>
           <div className="p-[18px] min-h-[200px]">
             <div className="font-mono text-[10px] text-muted-foreground tracking-[.06em] mb-3">[ TABULAR · 30 ]</div>
-            <h5 className="text-sm font-semibold mb-3">{lang === "es" ? "Seleccionar un modelo" : "Pick a model"}</h5>
+            <h5 className="text-sm font-semibold mb-3">{t("strip.card1.heading")}</h5>
             <div className="grid grid-cols-2 gap-2">
-              {[["RandomForest", lang === "es" ? "Bosque aleatorio" : "Random forest", true],["XGBoost","Gradient boosting",false],["LightGBM","Microsoft GBM",false],["SVM","Support Vector",false],["MLPClassifier",lang === "es" ? "Red neuronal" : "Neural net",false],["KNN","k-Nearest",false]].map(([name, desc, sel]) => (
+              {[
+                ["RandomForest", t("strip.card1.randomForest"), true],
+                ["XGBoost",      "Gradient boosting",           false],
+                ["LightGBM",     "Microsoft GBM",               false],
+                ["SVM",          "Support Vector",              false],
+                ["MLPClassifier", t("strip.card1.neuralNet"),   false],
+                ["KNN",          "k-Nearest",                   false],
+              ].map(([name, desc, sel]) => (
                 <div key={name as string} className="p-2.5 rounded border" style={sel ? { borderColor: "var(--primary)", background: "color-mix(in oklab, var(--primary) 16%, var(--ink-deep))" } : { borderColor: "var(--border)", background: "var(--ink-deep)" }}>
                   <div className="font-mono text-[11px] mb-0.5" style={sel ? { color: "#A7C7FF" } : { color: "var(--foreground)" }}>{name}</div>
                   <div className="text-[10px] text-muted-foreground leading-[1.4]">{desc}</div>
@@ -219,11 +205,11 @@ export function ShowcaseSection() {
         <div className="border border-border rounded-lg overflow-hidden" style={{ background: "var(--background)" }}>
           <div className="flex items-center gap-2 px-3 py-2 border-b border-border text-[10.5px] font-mono text-muted-foreground" style={{ background: "var(--ink-deep)" }}>
             <div className="flex gap-1"><span className="w-[7px] h-[7px] rounded-full bg-[#FF5F57]"/><span className="w-[7px] h-[7px] rounded-full bg-[#FEBC2E]"/><span className="w-[7px] h-[7px] rounded-full bg-[#28C840]"/></div>
-            <span className="ml-1.5">{lang === "es" ? "Resultados / Job #218" : "Results / Job #218"}</span>
+            <span className="ml-1.5">{t("strip.card2.title")}</span>
           </div>
           <div className="p-[18px] min-h-[200px]">
-            <div className="font-mono text-[10px] text-muted-foreground tracking-[.06em] mb-3">[ {lang === "es" ? "COMPLETADO" : "COMPLETED"} · 2m 14s ]</div>
-            <h5 className="text-sm font-semibold mb-3">{lang === "es" ? "Métricas de validación" : "Validation metrics"}</h5>
+            <div className="font-mono text-[10px] text-muted-foreground tracking-[.06em] mb-3">[ {t("strip.card2.status")} · 2m 14s ]</div>
+            <h5 className="text-sm font-semibold mb-3">{t("strip.card2.heading")}</h5>
             {[["accuracy","0.9342","#90F1C4"],["f1_macro","0.9118","#90F1C4"],["precision","0.8987","#90F1C4"],["recall","0.8512","#FFA578"]].map(([k,v,c]) => (
               <div key={k} className="flex justify-between items-center py-2 border-b border-dashed border-border font-mono text-[11px] last:border-b-0">
                 <span className="text-muted-foreground">{k}</span>
@@ -243,16 +229,16 @@ export function ShowcaseSection() {
         <div className="border border-border rounded-lg overflow-hidden" style={{ background: "var(--background)" }}>
           <div className="flex items-center gap-2 px-3 py-2 border-b border-border text-[10.5px] font-mono text-muted-foreground" style={{ background: "var(--ink-deep)" }}>
             <div className="flex gap-1"><span className="w-[7px] h-[7px] rounded-full bg-[#FF5F57]"/><span className="w-[7px] h-[7px] rounded-full bg-[#FEBC2E]"/><span className="w-[7px] h-[7px] rounded-full bg-[#28C840]"/></div>
-            <span className="ml-1.5">Jobs · {lang === "es" ? "Cola" : "Queue"}</span>
+            <span className="ml-1.5">Jobs · {t("strip.card3.queueLabel")}</span>
           </div>
           <div className="p-[18px] min-h-[200px]">
-            <div className="font-mono text-[10px] text-muted-foreground tracking-[.06em] mb-3">[ 8 BaseJob · 2 {lang === "es" ? "activos" : "running"} ]</div>
-            <h5 className="text-sm font-semibold mb-3">{lang === "es" ? "Orquestación" : "Orchestration"}</h5>
+            <div className="font-mono text-[10px] text-muted-foreground tracking-[.06em] mb-3">[ 8 BaseJob · 2 {t("strip.card3.runningCount")} ]</div>
+            <h5 className="text-sm font-semibold mb-3">{t("strip.card3.heading")}</h5>
             {[
-              { pill: lang === "es" ? "Activo" : "Running", pillStyle: { background: "color-mix(in oklab, #90F1C4 25%, var(--ink-deep))", color: "#90F1C4", border: "1px solid color-mix(in oklab, #90F1C4 40%, transparent)" }, name: "train_rf_v2",  meta: "68%" },
-              { pill: lang === "es" ? "Activo" : "Running", pillStyle: { background: "color-mix(in oklab, #90F1C4 25%, var(--ink-deep))", color: "#90F1C4", border: "1px solid color-mix(in oklab, #90F1C4 40%, transparent)" }, name: "explain_shap", meta: "12s" },
-              { pill: lang === "es" ? "Listo"  : "Done",    pillStyle: { background: "color-mix(in oklab, var(--primary) 22%, var(--ink-deep))", color: "#A7C7FF", border: "1px solid color-mix(in oklab, var(--primary) 40%, transparent)" }, name: "predict_test", meta: "1m 4s" },
-              { pill: lang === "es" ? "Cola"   : "Queued",  pillStyle: { background: "var(--background)", color: "var(--muted-foreground)", border: "1px solid var(--border)" }, name: "optimize_hpo", meta: "—" },
+              { pill: t("strip.card3.pills.running"), pillStyle: { background: "color-mix(in oklab, #90F1C4 25%, var(--ink-deep))", color: "#90F1C4", border: "1px solid color-mix(in oklab, #90F1C4 40%, transparent)" }, name: "train_rf_v2",  meta: "68%" },
+              { pill: t("strip.card3.pills.running"), pillStyle: { background: "color-mix(in oklab, #90F1C4 25%, var(--ink-deep))", color: "#90F1C4", border: "1px solid color-mix(in oklab, #90F1C4 40%, transparent)" }, name: "explain_shap", meta: "12s" },
+              { pill: t("strip.card3.pills.done"),    pillStyle: { background: "color-mix(in oklab, var(--primary) 22%, var(--ink-deep))", color: "#A7C7FF", border: "1px solid color-mix(in oklab, var(--primary) 40%, transparent)" }, name: "predict_test", meta: "1m 4s" },
+              { pill: t("strip.card3.pills.queued"),  pillStyle: { background: "var(--background)", color: "var(--muted-foreground)", border: "1px solid var(--border)" }, name: "optimize_hpo", meta: "—" },
             ].map(j => (
               <div key={j.name} className="flex items-center gap-2.5 py-2 border-b border-dashed border-border text-xs last:border-b-0">
                 <span className="font-mono text-[9.5px] px-[7px] py-[2px] rounded-full uppercase tracking-[.06em] whitespace-nowrap" style={j.pillStyle}>{j.pill}</span>
diff --git a/public/locales/en/download.json b/public/locales/en/download.json
index a634b17..02ad6d8 100644
--- a/public/locales/en/download.json
+++ b/public/locales/en/download.json
@@ -1,25 +1,29 @@
 {
-  "title": "Download DashAI",
-  "badge": "Beta Version",
-  "description": "This early version lets you explore DashAI’s main features. We appreciate your feedback to help us improve before the official release.",
-  "button": "Download",
-  "cards": {
-    "macIntel": {
-      "platform": "macOS Intel processors",
-      "format": "binary"
-    },
-    "macArm": {
-      "platform": "macOS ARM processors",
-      "format": "binary"
-    },
-    "windows": {
-      "platform": "Windows",
-      "format": ".exe"
-    }
+  "sectionLabel": "Download",
+  "heading": "Download",
+  "releaseMonth": "May 2026",
+  "executables": {
+    "badge": "Executables (recommended)",
+    "title": "Native installer",
+    "description": "No Python, no setup. Download the executable for your OS from GitHub Releases.",
+    "viewReleases": "View releases"
   },
   "pip": {
-    "title": "Install via pip",
-    "subtitle": "For developers who prefer command-line installation",
-    "command": "pip install dashai"
+    "title": "Install with pip",
+    "descriptionMiddle": "starts the server and opens the browser at",
+    "comment": "http://localhost:8000/ — Browser opens on its own.",
+    "viewOnPyPI": "View on PyPI"
+  },
+  "requirements": {
+    "badge": "Requirements",
+    "title": "What you need",
+    "items": {
+      "python": { "note": "Only for pip install" },
+      "ram": { "note": "16 GB for local LLMs" },
+      "os": { "note": "Native executables available" }
+    }
+  },
+  "footer": {
+    "cloneText": "Want to modify the core? Clone the repo:"
   }
 }
diff --git a/public/locales/en/showcase.json b/public/locales/en/showcase.json
new file mode 100644
index 0000000..4565c09
--- /dev/null
+++ b/public/locales/en/showcase.json
@@ -0,0 +1,67 @@
+{
+  "sectionLabel": "The application",
+  "heading": "The interface that emerges from the schema.",
+  "description": "When you register a component, the UI isn't programmed: it's generated. The server exposes its Pydantic schema and the React frontend renders the form without prior knowledge.",
+  "sidebar": {
+    "workspaceLabel": "Workspace",
+    "datasets": "Datasets",
+    "models": "Models",
+    "generative": "Generative",
+    "plugins": "Plugins",
+    "catalogLabel": "Catalog",
+    "tabular": "Tabular",
+    "nlp": "NLP",
+    "translation": "Translation",
+    "vision": "Vision"
+  },
+  "main": {
+    "configure": "Configure",
+    "hyperparamsFrom": "Hyperparameters generated from",
+    "form": {
+      "nEstimatorsHelp": "Number of trees in the forest.",
+      "maxDepthHelp": "Maximum depth of the tree.",
+      "criterionHelp": "Function to measure split quality.",
+      "bootstrapHelp": "Use bootstrap samples when building each tree."
+    },
+    "formAutoGenerated": "Form auto-generated from schema",
+    "fields": "4 fields",
+    "train": "Train →"
+  },
+  "callouts": [
+    {
+      "title": "1. Schema → UI",
+      "body": "Each form field is born from a Pydantic line. Type, range, default and description render automatically."
+    },
+    {
+      "title": "2. No frontend code",
+      "body": "The new component touches zero React files. The UI shows up on its own once the backend registers it."
+    },
+    {
+      "title": "3. Browsable catalog",
+      "body": "Tabular, NLP, translation, LLMs and generative vision coexist in one consistent UI — all on the same twelve abstractions."
+    }
+  ],
+  "strip": {
+    "card1": {
+      "title": "Catalog / Models",
+      "heading": "Pick a model",
+      "randomForest": "Random forest",
+      "neuralNet": "Neural net"
+    },
+    "card2": {
+      "title": "Results / Job #218",
+      "status": "COMPLETED",
+      "heading": "Validation metrics"
+    },
+    "card3": {
+      "queueLabel": "Queue",
+      "runningCount": "running",
+      "heading": "Orchestration",
+      "pills": {
+        "running": "Running",
+        "done": "Done",
+        "queued": "Queued"
+      }
+    }
+  }
+}
diff --git a/public/locales/es/download.json b/public/locales/es/download.json
index 9665881..5e8528b 100644
--- a/public/locales/es/download.json
+++ b/public/locales/es/download.json
@@ -1,25 +1,29 @@
 {
-  "title": "Descarga DashAI",
-  "badge": "Versión Beta",
-  "description": "Esta versión temprana te permite explorar las principales funciones de DashAI. Agradecemos tus comentarios para ayudarnos a mejorar antes del lanzamiento oficial.",
-  "button": "Descargar",
-  "cards": {
-    "macIntel": {
-      "platform": "macOS con Intel",
-      "format": "binario"
-    },
-    "macArm": {
-      "platform": "macOS con ARM",
-      "format": "binario"
-    },
-    "windows": {
-      "platform": "Windows",
-      "format": ".exe"
-    }
+  "sectionLabel": "Descarga",
+  "heading": "Descarga",
+  "releaseMonth": "Mayo 2026",
+  "executables": {
+    "badge": "Ejecutables (recomendado)",
+    "title": "Instalador nativo",
+    "description": "Sin Python ni configuración. Descarga el ejecutable de tu sistema operativo desde GitHub Releases.",
+    "viewReleases": "Ver releases"
   },
   "pip": {
-    "title": "Instala con pip",
-    "subtitle": "Para desarrolladores que prefieren la instalación por línea de comandos",
-    "command": "pip install dashai"
+    "title": "Instalación con pip",
+    "descriptionMiddle": "levanta el servidor y abre el navegador en",
+    "comment": "http://localhost:8000/ — El navegador abre solo.",
+    "viewOnPyPI": "Ver en PyPI"
+  },
+  "requirements": {
+    "badge": "Requisitos",
+    "title": "Lo que necesitas",
+    "items": {
+      "python": { "note": "Solo para instalación pip" },
+      "ram": { "note": "16 GB para LLMs locales" },
+      "os": { "note": "Ejecutables nativos disponibles" }
+    }
+  },
+  "footer": {
+    "cloneText": "¿Quieres modificar el núcleo? Clona el repo:"
   }
 }
diff --git a/public/locales/es/showcase.json b/public/locales/es/showcase.json
new file mode 100644
index 0000000..dfb243d
--- /dev/null
+++ b/public/locales/es/showcase.json
@@ -0,0 +1,67 @@
+{
+  "sectionLabel": "La aplicación",
+  "heading": "La interfaz que emerge del schema.",
+  "description": "Cuando registras un componente, la UI no se programa: se genera. El servidor expone su schema Pydantic y el frontend renderiza el formulario sin conocerlo previamente.",
+  "sidebar": {
+    "workspaceLabel": "Workspace",
+    "datasets": "Datasets",
+    "models": "Modelos",
+    "generative": "Generativo",
+    "plugins": "Plugins",
+    "catalogLabel": "Catálogo",
+    "tabular": "Tabular",
+    "nlp": "NLP",
+    "translation": "Traducción",
+    "vision": "Visión"
+  },
+  "main": {
+    "configure": "Configurar",
+    "hyperparamsFrom": "Hiperparámetros generados desde",
+    "form": {
+      "nEstimatorsHelp": "Número de árboles en el bosque.",
+      "maxDepthHelp": "Profundidad máxima del árbol.",
+      "criterionHelp": "Función para medir la calidad del split.",
+      "bootstrapHelp": "Usar muestras bootstrap al construir cada árbol."
+    },
+    "formAutoGenerated": "Formulario auto-generado del schema",
+    "fields": "4 campos",
+    "train": "Entrenar →"
+  },
+  "callouts": [
+    {
+      "title": "1. Schema → UI",
+      "body": "Cada campo del formulario nace de una línea de Pydantic. Tipo, rango, default y descripción se renderizan automáticamente."
+    },
+    {
+      "title": "2. Sin código de frontend",
+      "body": "El componente nuevo no toca un solo archivo React. La interfaz aparece sola cuando el backend lo registra."
+    },
+    {
+      "title": "3. Catálogo navegable",
+      "body": "Tabular, NLP, traducción, LLMs y visión generativa coexisten en una sola UI consistente — todos sobre las mismas doce abstracciones."
+    }
+  ],
+  "strip": {
+    "card1": {
+      "title": "Catálogo / Modelos",
+      "heading": "Seleccionar un modelo",
+      "randomForest": "Bosque aleatorio",
+      "neuralNet": "Red neuronal"
+    },
+    "card2": {
+      "title": "Resultados / Job #218",
+      "status": "COMPLETADO",
+      "heading": "Métricas de validación"
+    },
+    "card3": {
+      "queueLabel": "Cola",
+      "runningCount": "activos",
+      "heading": "Orquestación",
+      "pills": {
+        "running": "Activo",
+        "done": "Listo",
+        "queued": "Cola"
+      }
+    }
+  }
+}