erikghandClaude Opus 5
20a41c6d1a
SimboloTresLineas se quedó sin consumidores cuando SecuenciaClaridad ocupó sus dos sitios (hero y FraseAncla). Sólo lo usaba su propio test. La geometría del ≡ ya vive en lib/simbolo.ts, así que no se pierde nada. Los cinco comentarios de código que quedaban en español pasan a inglés, como pide CLAUDE.md. Los créditos de foto se quedan en español: son atribución, y el footer que los recoge está en español. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
63 lines
3.3 KiB
TypeScript
63 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Wordmark } from '@/components/primitives/Wordmark';
|
|
import { CTA } from '@/components/primitives/CTA';
|
|
import { Container } from '@/components/primitives/Container';
|
|
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
|
|
import { SecuenciaClaridad } from '@/components/primitives/SecuenciaClaridad';
|
|
import { TextoDesenfoque } from '@/components/primitives/TextoDesenfoque';
|
|
import { hero } from '@/lib/content';
|
|
import { fadeInUp, staggerContainer, usePrefersReducedMotion, motionProps } from '@/lib/motion';
|
|
|
|
type Variant = 'hormozi' | 'editorial';
|
|
|
|
export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
|
|
const reduced = usePrefersReducedMotion();
|
|
const isHormozi = variant === 'hormozi';
|
|
const headlineBase = isHormozi
|
|
? 'font-sans font-black uppercase tracking-tight'
|
|
: 'font-sans font-bold';
|
|
const headlineSize = 'text-5xl md:text-7xl leading-[0.98] tracking-tight';
|
|
const clarityBorder = isHormozi ? 'border-b-[5px] border-dorado pb-0.5' : 'border-b-[3px] border-dorado pb-0.5';
|
|
|
|
return (
|
|
<section className="bg-white relative overflow-hidden">
|
|
<FondoPuntos className="top-24 -right-16 w-72 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-[88vh] flex items-center py-24">
|
|
<div className="grid 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 /></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-azul-profundo`}>
|
|
<TextoDesenfoque
|
|
as="span"
|
|
segments={[
|
|
{ text: hero.headline.line1 },
|
|
{ text: hero.headline.effort, className: 'text-dorado' },
|
|
{ text: hero.headline.line3 },
|
|
{ text: hero.headline.clarity, className: clarityBorder },
|
|
]}
|
|
/>
|
|
</motion.h1>
|
|
<motion.div variants={fadeInUp} className="mt-10 flex flex-col md:flex-row items-center gap-4">
|
|
<CTA href="#contacto" label={hero.cta} variant="light" className="md:whitespace-nowrap" />
|
|
<CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghost" className="md:whitespace-nowrap" />
|
|
</motion.div>
|
|
</motion.div>
|
|
{/* Complexity → focus, left unresolved: the hero poses the tension
|
|
and FraseAncla pays it off by resolving into the ≡. */}
|
|
<motion.div variants={fadeInUp} initial="hidden" animate="visible" {...motionProps(reduced)}
|
|
className="hidden lg:block min-w-0">
|
|
<SecuenciaClaridad variant="hero" className="w-full max-w-md mx-auto text-azul-profundo" />
|
|
</motion.div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|