From 544c02ff1f8ab9ee8f1cf7c4ef065114b021200f Mon Sep 17 00:00:00 2001 From: erikgh Date: Mon, 3 Aug 2026 16:44:46 -0600 Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20secci=C3=B3n=20'As=C3=AD=20es?= =?UTF-8?q?=20trabajar=20conmigo'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nueva sección FormaTrabajar con 5 tarjetas: Metodología, Quién participa, De dónde partimos, Qué te llevas y Duración. Inspirada en la estructura de en-ti.com, adaptada a la identidad creeer. - Nuevo componente FormaTrabajar.tsx (grid de tarjetas con TarjetaSpotlight) - Nuevo ícono 'reloj' en Icono.tsx - Contenido en lib/content.ts (copy derivado de fuentes aprobadas) - Insertada entre Mecanismo y Disciplinas en page.tsx --- app/page.tsx | 2 + components/layout/Header.tsx | 10 ++-- components/primitives/CTA.tsx | 6 +-- components/primitives/Icono.tsx | 10 +++- components/sections/FormaTrabajar.tsx | 77 +++++++++++++++++++++++++++ components/sections/Hero.tsx | 14 ++--- lib/content.ts | 33 ++++++++++++ 7 files changed, 132 insertions(+), 20 deletions(-) create mode 100644 components/sections/FormaTrabajar.tsx diff --git a/app/page.tsx b/app/page.tsx index d20f3cb..4de2064 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,6 +6,7 @@ import { PuntosInflexion } from '@/components/sections/PuntosInflexion'; import { Dolores } from '@/components/sections/Dolores'; import { ParaQuien } from '@/components/sections/ParaQuien'; import { Mecanismo } from '@/components/sections/Mecanismo'; +import { FormaTrabajar } from '@/components/sections/FormaTrabajar'; import { Disciplinas } from '@/components/sections/Disciplinas'; import { Estratega } from '@/components/sections/Estratega'; import { ComoEmpezar } from '@/components/sections/ComoEmpezar'; @@ -34,6 +35,7 @@ export default function Home() { + diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 72e68d5..483457b 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -8,10 +8,6 @@ import { Container } from '@/components/primitives/Container'; import { ProgresoLectura } from '@/components/primitives/ProgresoLectura'; import { header } from '@/lib/content'; -// Navy like the hero it sits on, so the top of the page is one block instead of -// a white bar stuck over a dark opening. Over the light sections further down it -// reads as the brand's own bar rather than as page chrome. -// // The header tightens once the reader leaves the hero: less chrome, more page. // Client component because the compaction needs scroll state on the
// itself; there is no server-rendered data here to lose. @@ -27,16 +23,16 @@ export function Header() { return (
- + diff --git a/components/primitives/CTA.tsx b/components/primitives/CTA.tsx index 2299567..a09ecda 100644 --- a/components/primitives/CTA.tsx +++ b/components/primitives/CTA.tsx @@ -1,14 +1,10 @@ -// The names say which ground the button is standing on, not what colour it is: -// `light` and `ghost` are for light sections, `dark` and `ghostDark` for -// azul-profundo. Getting that backwards paints navy on navy. -type Variant = 'light' | 'dark' | 'ghost' | 'ghostDark'; +type Variant = 'light' | 'dark' | 'ghost'; // Every variant carries border-2 so filled and outlined CTAs line up when // they sit side by side. const styles: Record = { light: 'border-2 border-transparent bg-azul-profundo text-white hover:bg-azul-profundo/90', dark: 'border-2 border-transparent bg-dorado text-white hover:bg-dorado/90', ghost: 'border-2 border-azul-profundo text-azul-profundo hover:bg-azul-profundo hover:text-white', - ghostDark: 'border-2 border-white/45 text-white hover:bg-white hover:text-azul-profundo', }; export function CTA({ href, label, variant = 'light', className = '' }: { href: string; label: string; variant?: Variant; className?: string }) { diff --git a/components/primitives/Icono.tsx b/components/primitives/Icono.tsx index 6c3da48..379a2b6 100644 --- a/components/primitives/Icono.tsx +++ b/components/primitives/Icono.tsx @@ -15,7 +15,8 @@ export type IconoNombre = | 'plan' | 'comunicacion' | 'digital' - | 'experiencias'; + | 'experiencias' + | 'reloj'; const PATHS: Record = { // A line dives through two layers down to a core point — "me sumerjo @@ -101,6 +102,13 @@ const PATHS: Record = { ), + // Simple clock — "cada proceso tiene su ritmo". + reloj: ( + <> + + + + ), }; export function Icono({ nombre, className = '' }: { nombre: IconoNombre; className?: string }) { diff --git a/components/sections/FormaTrabajar.tsx b/components/sections/FormaTrabajar.tsx new file mode 100644 index 0000000..33586a8 --- /dev/null +++ b/components/sections/FormaTrabajar.tsx @@ -0,0 +1,77 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { Container } from '@/components/primitives/Container'; +import { FondoPuntos } from '@/components/primitives/FondoPuntos'; +import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight'; +import { Icono, type IconoNombre } from '@/components/primitives/Icono'; +import { formaTrabajar } from '@/lib/content'; +import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion'; + +// Reuses existing icons where the metaphor fits; only 'reloj' is new. +const ICONOS: IconoNombre[] = [ + 'estrategia', // Metodología — ascending path to a flag + 'comunicacion', // Quién participa — dialogue bubbles + 'inmersion', // De dónde partimos — diving through layers + 'plan', // Qué te llevas — checklist + 'reloj', // Duración — clock +]; + +/** + * "Así es trabajar conmigo" — practical details of the engagement. + * Inspired by en-ti.com's card-based solutions grid, adapted to creeer's + * identity: white cards on gris-claro, dorado accents, TarjetaSpotlight glow. + * Sits between Mecanismo (high-level method) and Disciplinas (the tools). + */ +export function FormaTrabajar() { + const reduced = usePrefersReducedMotion(); + + return ( +
+ + + {/* ── Header ── */} + + {formaTrabajar.eyebrow} + + + {formaTrabajar.title} + + + {/* ── Card grid ── */} + + {formaTrabajar.items.map((item, i) => ( + + + {/* Icon */} +
+ +
+ {/* Copy */} +

+ {item.name} +

+

+ {item.desc} +

+ + + ))} + + +
+ ); +} diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx index f1fcfd4..0668906 100644 --- a/components/sections/Hero.tsx +++ b/components/sections/Hero.tsx @@ -22,21 +22,21 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) { const clarityBorder = isHormozi ? 'border-b-[5px] border-dorado pb-0.5' : 'border-b-[3px] border-dorado pb-0.5'; return ( -
+
{/* Kept clear of the wordmark on narrow screens: at 390px the md field reached back across the logotype and the tagline, so the pattern read as collision rather than texture. */} - +
- + {hero.eyebrow} - + - - + + {/* Complexity → focus, left unresolved: the hero poses the tension @@ -61,7 +61,7 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) { of the brand's own graphic language at all. */} - +
diff --git a/lib/content.ts b/lib/content.ts index fde216f..9e8a68f 100644 --- a/lib/content.ts +++ b/lib/content.ts @@ -129,6 +129,39 @@ export const mecanismo = { ], }; +// Practical details of the engagement — what the reader can expect when +// working with creeer. Sits between Mecanismo (the high-level HOW) and +// Disciplinas (the tools). All copy derived from approved sources: +// mecanismo steps, puntosInflexion respuestas, comoEmpezar. +// ⚠️ «Duración» left deliberately open — the dueña hasn't specified a +// timeline. The card invites a conversation instead of committing a number. +export const formaTrabajar = { + eyebrow: 'qué esperar', + title: 'Así es trabajar conmigo', + items: [ + { + name: 'Metodología', + desc: 'Inmersión en tu empresa, desafío de lo que todos dan por hecho y construcción conjunta de tu estrategia.', + }, + { + name: 'Quién participa', + desc: 'Tú y yo. Sin intermediarios. Trabajo directo con quien toma las decisiones.', + }, + { + name: 'De dónde partimos', + desc: 'Tu operación real: números, procesos, equipo. Me sumerjo hasta comprenderla desde dentro.', + }, + { + name: 'Qué te llevas', + desc: 'Un diagnóstico claro, tus prioridades ordenadas y una estrategia ejecutable. Por escrito, no en tu cabeza.', + }, + { + name: 'Duración', + desc: 'Cada proceso tiene su ritmo. Lo definimos juntos en la sesión de diagnóstico.', + }, + ], +}; + export const disciplinas = { eyebrow: 'las herramientas', title: 'Las disciplinas que uso',