feat: hero "la mesa de trabajo a la hora dorada"

SurivZ · SurivZ · commit 62580cd24863 · 2026-07-11T12:10:45.000-05:00
- Rehacer el hero de la home como primera carta de presentación, con
  composición asimétrica sobre una rejilla de 12 columnas: titular fragmentado
  en tres voces y sangrías, y una ventana de código desfasada en diagonal.
- Escribir el snippet en vivo (resaltado de sintaxis hecho en build, sin JS de
  librerías) y "compilar" al terminar: el sol tras la ventana se enciende, la
  luz de estado vira a turquesa y la salida reporta 200 OK.
- Sembrar decoradores de mesa de trabajo (sello giratorio, stickers torcidos,
  coordenadas al margen, línea de horizonte) y microinteracciones con propósito
  con entrada escalonada; todo respeta prefers-reduced-motion.
- Ampliar el hero en el esquema i18n y ambos idiomas (snippet, título
  segmentado, estados de compilación, salida y chips).
- Actualizar CHANGELOG.md; elevar la versión a 0.10.0.

Corrige el responsive del hero: se saca de u-grid y se acota con su propio
contenedor, de modo que la ventana de código ya no desborda en móvil (scroll
horizontal contenido dentro de la ventana); el titular en gradiente deja de
recortar los descendentes.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -205,4 +205,15 @@ Todos los cambios notables en este proyecto serán documentados en este archivo
 
 ### Corregido
 
-- **CI**: dependencia `libasound` ajustada para compatibilidad con la imagen reciente de Ubuntu en el runner de despliegue.
+- **CI**: dependencia `libasound` ajustada para compatibilidad con la imagen reciente de Ubuntu en el runner de despliegue.
+
+## [0.10.0] - 2026-07-11
+
+### Añadido
+
+- **Hero de la home «la mesa de trabajo a la hora dorada»** (`src/components/pages/Home.astro` + `src/styles/home.css`): la primera cara del sitio, con composición asimétrica sobre una rejilla de 12 columnas. Titular fragmentado en tres voces y tres sangrías (mono → display en gradiente → remate con cursor que respira) y una ventana de código desfasada en diagonal donde un snippet TypeScript se escribe en vivo (resaltado de sintaxis hecho en build, sin JS de librerías) y, al terminar, «compila»: el sol tras la ventana se enciende, la luz de estado vira a turquesa y la salida reporta `200 OK`. Decoradores de mesa de trabajo — sello circular giratorio, stickers de código pegados torcidos, coordenadas de Cartagena al margen y línea de horizonte —, microinteracciones con propósito y entrada escalonada; todo respeta `prefers-reduced-motion`.
+- **`src/data/i18n.ts`** y **`src/data/locales/{es,en}.ts`**: el `hero` crece con el snippet de código, el título segmentado, los estados de compilación, la salida del build y los chips.
+
+### Corregido
+
+- **Responsive del hero**: se saca el hero de `u-grid` y se acota con su propio contenedor, de modo que la ventana de código ya no desborda en móvil (su scroll horizontal queda contenido dentro de la ventana). El titular en gradiente deja de recortar los descendentes (la «g» de «digital»).
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ctg-code",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "dependencies": {
     "@astrojs/partytown": "^2.1.7",
     "@fontsource-variable/inter": "^5.2.8",
diff --git a/src/components/pages/Home.astro b/src/components/pages/Home.astro
@@ -5,6 +5,9 @@
  * Los archivos de ruta (pages/es/index.astro, pages/en/index.astro) solo
  * eligen el idioma; toda la estructura, textos (vía locales) y estilos viven
  * aquí una sola vez.
+ *
+ * HERO — "compilar el atardecer": un snippet se escribe en vivo en la ventana
+ * de código y, al terminar, el sol tras ella se enciende (data-compiled).
  */
 import Layout from "../../layouts/Layout.astro";
 import Navbar from "../global/Navbar.astro";
@@ -20,20 +23,149 @@ interface Props {
 const { lang } = Astro.props;
 const t = locales[lang];
 const title = `CTG Code — ${t.hero.title}`;
+
+/**
+ * Mini-resaltador de sintaxis (build-time, cero JS en cliente).
+ * El código "atardece": keywords coral, strings ámbar, números turquesa.
+ */
+type Token = { t: "kw" | "cls" | "fn" | "str" | "num" | "com" | "pl"; v: string };
+
+const SPLIT =
+  /("[^"]*"|\/\/.*$|\.\w+(?=\()|-?\d+\.\d+|-?\d+|\b(?:import|from|const|new|export|true|false)\b|\bCTGCode\b)/;
+
+function tokenize(line: string): Token[] {
+  return line
+    .split(SPLIT)
+    .filter((s) => s !== undefined && s !== "")
+    .map((s): Token => {
+      if (s.startsWith('"')) return { t: "str", v: s };
+      if (s.startsWith("//")) return { t: "com", v: s };
+      if (s.startsWith(".")) return { t: "fn", v: s };
+      if (/^-?\d/.test(s)) return { t: "num", v: s };
+      if (s === "CTGCode") return { t: "cls", v: s };
+      if (/^(import|from|const|new|export|true|false)$/.test(s))
+        return { t: "kw", v: s };
+      return { t: "pl", v: s };
+    });
+}
+
+const codeLines = t.hero.code.map((line) => tokenize(line));
 ---
 
 <Layout title={title} description={t.hero.description} pageName="home">
   <Navbar lang={lang} />
 
   <main>
-    <section class="hero section u-grid" data-tone="night">
-      <div class="hero-body">
-        <p class="eyebrow">{t.hero.eyebrow}</p>
-        <h1>{t.hero.title}</h1>
-        <p class="hero-lead">{t.hero.description}</p>
-        <div class="cluster">
-          <CTA href="#contact">{t.nav.cta}</CTA>
+    <section class="hero" data-tone="night">
+      <div class="hero-stage">
+        <!-- El mensaje: titular fragmentado en tres voces -->
+        <div class="hero-copy">
+          <p class="eyebrow hero-eyebrow">{t.hero.eyebrow}</p>
+          <h1 class="hero-title">
+            <span class="hero-t1">{t.hero.titlePre}</span>
+            <span class="hero-t2 text-sunset">{t.hero.titleMark}</span>
+            <span class="hero-t3"
+              >{t.hero.titlePost}<span
+                class="hero-title-caret"
+                aria-hidden="true">_</span
+              ></span
+            >
+          </h1>
+          <p class="hero-lead">{t.hero.description}</p>
+
+          <div class="hero-actions">
+            <CTA href="#contact">{t.nav.cta}</CTA>
+            <a class="hero-more" href="#services">{t.hero.secondary}</a>
+          </div>
         </div>
+
+        <!-- Sticker suelto sobre la mesa -->
+        <span class="hero-chip hero-chip--a" aria-hidden="true"
+          >{t.hero.chipA}</span
+        >
+
+        <!-- La fragua: el código que compila el atardecer (decorativo) -->
+        <div class="hero-forge" aria-hidden="true">
+          <span class="hero-sun">
+            <svg viewBox="46 46 108 108" xmlns="http://www.w3.org/2000/svg">
+              <g fill="currentColor">
+                <path d="M100 50 L107 66 L93 66 Z" />
+                <path d="M100 50 L107 66 L93 66 Z" transform="rotate(45 100 100)" />
+                <path d="M100 50 L107 66 L93 66 Z" transform="rotate(90 100 100)" />
+                <path d="M100 50 L107 66 L93 66 Z" transform="rotate(135 100 100)" />
+                <path d="M100 50 L107 66 L93 66 Z" transform="rotate(180 100 100)" />
+                <path d="M100 50 L107 66 L93 66 Z" transform="rotate(225 100 100)" />
+                <path d="M100 50 L107 66 L93 66 Z" transform="rotate(270 100 100)" />
+                <path d="M100 50 L107 66 L93 66 Z" transform="rotate(315 100 100)" />
+              </g>
+              <circle cx="100" cy="100" r="22" fill="none" stroke="currentColor" stroke-width="8" />
+            </svg>
+          </span>
+
+          <div class="hero-window">
+            <div class="hero-window-head">
+              <span><span class="hero-braces">&#123; &#125;</span> {t.hero.file}</span>
+              <span class="hero-status">
+                <span class="hero-dot"></span>
+                <span class="hero-status-building">{t.hero.statusBuilding}</span>
+                <span class="hero-status-ready">{t.hero.statusReady}</span>
+              </span>
+            </div>
+
+            <pre class="hero-code" data-hero-code><code>{codeLines.map((tokens) => (
+              <span class="hero-line">{tokens.map((tok) => (
+                <span class={`tk-${tok.t}`}>{tok.v}</span>
+              ))}</span>
+            ))}</code></pre>
+
+            <span class="hero-output">{t.hero.output}</span>
+          </div>
+
+          <!-- Sticker pegado al marco de la ventana -->
+          <span class="hero-chip hero-chip--b">{t.hero.chipB}</span>
+        </div>
+
+        <!-- El sello del estudio: gira sin prisa, se detiene a saludar -->
+        <div class="hero-stamp" aria-hidden="true">
+          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <path
+                id="hero-stamp-arc"
+                d="M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0"
+              ></path>
+            </defs>
+            <circle
+              class="hero-stamp-ring"
+              cx="50"
+              cy="50"
+              r="46"
+              fill="none"
+              stroke-width="1"></circle>
+            <text class="hero-stamp-text">
+              <textPath href="#hero-stamp-arc">
+                CTG CODE · CARTAGENA · 10.42° N · 75.55° W ·
+              </textPath>
+            </text>
+            <circle
+              class="hero-stamp-sun"
+              cx="50"
+              cy="50"
+              r="9"
+              fill="none"
+              stroke-width="3.5"></circle>
+            <circle class="hero-stamp-core" cx="50" cy="50" r="2.4"></circle>
+          </svg>
+        </div>
+
+        <p class="hero-scroll">
+          {t.hero.scroll}
+          <span class="hero-scroll-arrow" aria-hidden="true">↓</span>
+        </p>
+
+        <!-- Coordenadas al margen, como en una carta náutica -->
+        <span class="hero-coords" aria-hidden="true"
+          >10.4236° N — 75.5518° W</span
+        >
       </div>
     </section>
 
@@ -54,3 +186,61 @@ const title = `CTG Code — ${t.hero.title}`;
 
   <Footer lang={lang} />
 </Layout>
+
+<script>
+  /**
+   * El código se escribe en vivo, con ritmo humano (pausas al final de línea),
+   * y al terminar la sección "compila": el sol se enciende, la luz de estado
+   * vira a turquesa y la salida reporta 200 OK. Con prefers-reduced-motion no
+   * se teclea nada: el hero aparece ya compilado.
+   */
+  const hero = document.querySelector<HTMLElement>(".hero");
+  const code = hero?.querySelector<HTMLElement>("[data-hero-code] code");
+
+  if (hero && code) {
+    const compile = () => hero.setAttribute("data-compiled", "");
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      compile();
+    } else {
+      // Recolecta los nodos de texto del código y vacíalos para teclearlos.
+      const walker = document.createTreeWalker(code, NodeFilter.SHOW_TEXT);
+      const nodes: Text[] = [];
+      while (walker.nextNode()) nodes.push(walker.currentNode as Text);
+      const texts = nodes.map((n) => n.nodeValue ?? "");
+      nodes.forEach((n) => (n.nodeValue = ""));
+
+      const caret = document.createElement("span");
+      caret.className = "hero-caret";
+      caret.setAttribute("aria-hidden", "true");
+
+      let i = 0;
+      let j = 0;
+
+      const step = () => {
+        if (i >= nodes.length) {
+          caret.remove();
+          compile();
+          return;
+        }
+
+        const node = nodes[i];
+        const text = texts[i];
+        j++;
+        node.nodeValue = text.slice(0, j);
+        node.parentNode?.insertBefore(caret, node.nextSibling);
+
+        let delay = 12 + Math.random() * 26;
+        if (j >= text.length) {
+          // Pausa breve al cerrar cada tramo: el ritmo de quien piensa.
+          if (text.length > 1) delay += 90;
+          i++;
+          j = 0;
+        }
+        setTimeout(step, delay);
+      };
+
+      setTimeout(step, 600);
+    }
+  }
+</script>
diff --git a/src/data/i18n.ts b/src/data/i18n.ts
@@ -13,7 +13,19 @@ export type LocaleSchema = {
     hero: {
         eyebrow: string;
         title: string;
+        titlePre: string;
+        titleMark: string;
+        titlePost: string;
         description: string;
+        file: string;
+        code: string[];
+        statusBuilding: string;
+        statusReady: string;
+        output: string;
+        secondary: string;
+        scroll: string;
+        chipA: string;
+        chipB: string;
     };
     notFound: {
         status: string;
diff --git a/src/data/locales/en.ts b/src/data/locales/en.ts
@@ -12,7 +12,31 @@ const en: LocaleSchema = {
     hero: {
         eyebrow: 'Software studio · Cartagena',
         title: 'Building the digital future from the Caribbean',
+        titlePre: 'Building ',
+        titleMark: 'the digital future ',
+        titlePost: 'from the Caribbean',
         description: 'Custom software development and high-performance web solutions, from Cartagena to the world.',
+        file: 'future.ts',
+        code: [
+            'import { sun, sea } from "@caribbean/cartagena";',
+            '',
+            'const studio = new CTGCode({',
+            '  origin: [10.4236, -75.5518],',
+            '  goldenHour: true,',
+            '});',
+            '',
+            'export const future = studio',
+            '  .design({ handcrafted: true })',
+            '  .build({ tailorMade: true })',
+            '  .deploy("→ to the world");',
+        ],
+        statusBuilding: 'compiling…',
+        statusReady: 'live',
+        output: '→ 200 OK · future deployed in 47ms',
+        secondary: 'see services',
+        scroll: '$ scroll --seaward',
+        chipA: 'goldenHour: true',
+        chipB: '// handcrafted, tailor-made',
     },
     notFound: {
         status: 'error 404 · route not found',
diff --git a/src/data/locales/es.ts b/src/data/locales/es.ts
@@ -12,7 +12,31 @@ const es: LocaleSchema = {
     hero: {
         eyebrow: 'Estudio de software · Cartagena',
         title: 'Construyendo el futuro digital desde el Caribe',
+        titlePre: 'Construyendo ',
+        titleMark: 'el futuro digital ',
+        titlePost: 'desde el Caribe',
         description: 'Desarrollo de software a la medida y soluciones web de alto rendimiento desde Cartagena para el mundo.',
+        file: 'futuro.ts',
+        code: [
+            'import { sol, mar } from "@caribe/cartagena";',
+            '',
+            'const estudio = new CTGCode({',
+            '  origen: [10.4236, -75.5518],',
+            '  horaDorada: true,',
+            '});',
+            '',
+            'export const futuro = estudio',
+            '  .diseñar({ aMano: true })',
+            '  .construir({ aMedida: true })',
+            '  .desplegar("→ para el mundo");',
+        ],
+        statusBuilding: 'compilando…',
+        statusReady: 'en línea',
+        output: '→ 200 OK · futuro desplegado en 47ms',
+        secondary: 'ver servicios',
+        scroll: '$ scroll --hacia-el-mar',
+        chipA: 'horaDorada: true',
+        chipB: '// a mano, a medida',
     },
     notFound: {
         status: 'error 404 · ruta no encontrada',
diff --git a/src/styles/home.css b/src/styles/home.css

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ctg-code",`
`3`		`- "version": "0.9.0",`
	`3`	`+ "version": "0.10.0",`
`4`	`4`	`"dependencies": {`
`5`	`5`	`"@astrojs/partytown": "^2.1.7",`
`6`	`6`	`"@fontsource-variable/inter": "^5.2.8",`