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
1 parent
e0ce0d3b22
commit
544c02ff1f
7 files changed
+132
-20
No files matched your search
@@ -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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<section className="bg-azul-profundo relative overflow-hidden">
|
||||
<section className="bg-white relative overflow-hidden">
|
||||
{/* 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. */}
|
||||
<FondoPuntos className="top-80 -right-20 w-56 md:top-24 md:-right-16 md:w-[28rem] text-white/10" interactivo />
|
||||
<FondoPuntos className="top-80 -right-20 w-56 md:top-24 md:-right-16 md:w-[28rem] text-azul-profundo/10" interactivo />
|
||||
<FondoPuntos className="bottom-16 -left-20 w-64 md:w-96 text-dorado/20" distance={28} rows={2} />
|
||||
<Container className="relative min-h-[80vh] lg:min-h-[88vh] flex items-center py-16 md:py-24">
|
||||
<div className="grid gap-8 lg:gap-14 lg:grid-cols-[1.1fr_0.9fr] lg:items-center w-full">
|
||||
<motion.div variants={staggerContainer} initial="hidden" animate="visible" {...motionProps(reduced)}
|
||||
className="min-w-0 flex flex-col items-center text-center lg:items-start lg:text-left">
|
||||
<motion.div variants={fadeInUp}><Wordmark size="xl" showTagline onDark /></motion.div>
|
||||
<motion.div variants={fadeInUp}><Wordmark size="xl" showTagline /></motion.div>
|
||||
<motion.p variants={fadeInUp} className="mt-6 text-xs md:text-sm tracking-[0.3em] uppercase font-black text-dorado">
|
||||
{hero.eyebrow}
|
||||
</motion.p>
|
||||
<motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-white`}>
|
||||
<motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-azul-profundo`}>
|
||||
<TextoDesenfoque
|
||||
as="span"
|
||||
segments={[
|
||||
@@ -51,8 +51,8 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
|
||||
came out ragged and unequal, which read as an accident rather
|
||||
than as hierarchy. */}
|
||||
<motion.div variants={fadeInUp} className="mt-10 w-full flex flex-col md:flex-row items-stretch md:items-center md:w-auto gap-4">
|
||||
<CTA href="#contacto" label={hero.cta} variant="dark" className="text-center md:whitespace-nowrap" />
|
||||
<CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghostDark" className="text-center md:whitespace-nowrap" />
|
||||
<CTA href="#contacto" label={hero.cta} variant="light" className="text-center md:whitespace-nowrap" />
|
||||
<CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghost" className="text-center md:whitespace-nowrap" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
{/* 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. */}
|
||||
<motion.div variants={fadeInUp} initial="hidden" animate="visible" {...motionProps(reduced)}
|
||||
className="min-w-0">
|
||||
<SecuenciaClaridad variant="hero" className="w-32 lg:w-full max-w-md mx-auto text-white/70" />
|
||||
<SecuenciaClaridad variant="hero" className="w-32 lg:w-full max-w-md mx-auto text-azul-profundo" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
Reference in new issue
Block a user