feat: agregar sección 'Así es trabajar conmigo'

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
This commit is contained in:
erikgh committed 2026-08-03 16:44:46 -06:00
1 parent e0ce0d3b22
commit 544c02ff1f
7 files changed
+132 -20

No files matched your search

+1 -5
View File
@@ -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<Variant, string> = {
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 }) {
+9 -1
View File
@@ -15,7 +15,8 @@ export type IconoNombre =
| 'plan'
| 'comunicacion'
| 'digital'
| 'experiencias';
| 'experiencias'
| 'reloj';
const PATHS: Record<IconoNombre, ReactNode> = {
// A line dives through two layers down to a core point — "me sumerjo
@@ -101,6 +102,13 @@ const PATHS: Record<IconoNombre, ReactNode> = {
<circle cx="12" cy="12" r="9" strokeOpacity={0.55} />
</>
),
// Simple clock — "cada proceso tiene su ritmo".
reloj: (
<>
<circle cx="12" cy="12" r="9" />
<path d="M12 7v5l3.5 3.5" />
</>
),
};
export function Icono({ nombre, className = '' }: { nombre: IconoNombre; className?: string }) {