erikgh
544c02ff1f
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
78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
'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 (
|
|
<section className="bg-gris-claro relative overflow-hidden">
|
|
<FondoPuntos className="-top-10 -left-12 w-72 md:w-[28rem] text-azul-profundo/[0.06]" distance={32} />
|
|
<Container className="relative py-16 md:py-24">
|
|
{/* ── Header ── */}
|
|
<motion.p
|
|
variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="text-xs tracking-[0.3em] uppercase font-black text-dorado"
|
|
>
|
|
{formaTrabajar.eyebrow}
|
|
</motion.p>
|
|
<motion.h2
|
|
variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="mt-4 font-sans font-black text-seccion text-azul-profundo"
|
|
>
|
|
{formaTrabajar.title}
|
|
</motion.h2>
|
|
|
|
{/* ── Card grid ── */}
|
|
<motion.ul
|
|
variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 list-none p-0"
|
|
>
|
|
{formaTrabajar.items.map((item, i) => (
|
|
<motion.li
|
|
key={item.name}
|
|
variants={fadeInUp}
|
|
className="transition-transform duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none"
|
|
>
|
|
<TarjetaSpotlight className="h-full rounded-2xl border border-white bg-white p-7 transition-[border-color,box-shadow] duration-300 hover:border-dorado/30 hover:shadow-[0_20px_50px_-20px_rgba(196,148,46,0.2)]">
|
|
{/* Icon */}
|
|
<div className="grid place-items-center w-14 h-14 rounded-full bg-azul-profundo">
|
|
<Icono nombre={ICONOS[i]} className="w-7 h-7 text-dorado" />
|
|
</div>
|
|
{/* Copy */}
|
|
<h3 className="mt-5 font-sans font-black text-xl text-azul-profundo">
|
|
{item.name}
|
|
</h3>
|
|
<p className="mt-3 text-gris-medio leading-relaxed text-sm">
|
|
{item.desc}
|
|
</p>
|
|
</TarjetaSpotlight>
|
|
</motion.li>
|
|
))}
|
|
</motion.ul>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|