feat(secciones): puntos de inflexión y dolores, con gráfico en toda la página
Dos secciones nuevas tomadas del deck de la dueña, verbatim y sin reescribir: los 6 puntos de inflexión y los 4 dolores en primera persona. El resto de las secciones incorpora la capa gráfica: fondos de puntos, duotono sobre foto en Mecanismo y Cómo empezar, pantalla partida sí/no en Para quién, y pasos conectados con línea de progreso. Las fotos son CC BY-SA 4.0 y llevan crédito en el footer, como exige la licencia al haberlas modificado. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
erikghandClaude Opus 5 committed
1 parent
5b400cb161
commit
69b4069525
25 files changed
+592
-120
No files matched your search
@@ -4,7 +4,11 @@ import { motion } from 'framer-motion';
|
||||
import { Wordmark } from '@/components/primitives/Wordmark';
|
||||
import { CTA } from '@/components/primitives/CTA';
|
||||
import { Container } from '@/components/primitives/Container';
|
||||
import { hero } from '@/lib/content';
|
||||
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
|
||||
import { Carrusel } from '@/components/primitives/Carrusel';
|
||||
import { TextoDesenfoque } from '@/components/primitives/TextoDesenfoque';
|
||||
import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
|
||||
import { hero, dolores } from '@/lib/content';
|
||||
import { fadeInUp, staggerContainer, usePrefersReducedMotion, motionProps } from '@/lib/motion';
|
||||
|
||||
type Variant = 'hormozi' | 'editorial';
|
||||
@@ -15,28 +19,55 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
|
||||
const headlineBase = isHormozi
|
||||
? 'font-sans font-black uppercase tracking-tight'
|
||||
: 'font-sans font-bold';
|
||||
const headlineSize = 'text-4xl md:text-6xl leading-[1.1]';
|
||||
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">
|
||||
<Container className="min-h-[88vh] flex flex-col items-center justify-center text-center py-24">
|
||||
<motion.div variants={staggerContainer} initial="hidden" animate="visible" {...motionProps(reduced)} className="flex flex-col items-center">
|
||||
<motion.div variants={fadeInUp}><Wordmark size="xl" /></motion.div>
|
||||
<motion.p variants={fadeInUp} className="mt-6 text-xs md:text-sm tracking-[0.3em] uppercase font-semibold text-dorado">
|
||||
{hero.eyebrow}
|
||||
</motion.p>
|
||||
<motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-azul-profundo`}>
|
||||
{hero.headline.line1}{' '}
|
||||
<span className="text-dorado">{hero.headline.effort}</span>{' '}
|
||||
{hero.headline.line3}{' '}
|
||||
<span style={{ borderBottom: isHormozi ? '5px solid #C4942E' : '3px solid #C4942E', paddingBottom: 2 }}>
|
||||
{hero.headline.clarity}
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.div variants={fadeInUp} className="mt-10">
|
||||
<CTA href="#contacto" label={hero.cta} variant="light" />
|
||||
<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} interactivo />
|
||||
<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>
|
||||
</motion.div>
|
||||
{/* Rota las frases textuales de `dolores` — quien llega al hero se ve
|
||||
reflejado antes de haber bajado a leer la sección completa. */}
|
||||
<motion.div variants={fadeInUp} initial="hidden" animate="visible" {...motionProps(reduced)}
|
||||
className="hidden lg:block min-w-0">
|
||||
<Carrusel
|
||||
ariaLabel="Lo que sienten nuestros clientes"
|
||||
autoplayMs={4500}
|
||||
slides={dolores.quotes.map((quote) => (
|
||||
<TarjetaSpotlight key={quote} className="rounded-2xl border border-azul-profundo/10 bg-white shadow-xl shadow-azul-profundo/5 p-8 lg:p-10 min-h-[15rem] flex flex-col justify-center">
|
||||
<p className="text-xs uppercase tracking-[0.3em] font-semibold text-dorado">lo que escuchamos</p>
|
||||
<blockquote className="mt-4 font-sans italic text-xl lg:text-2xl leading-snug text-azul-profundo">
|
||||
<span className="text-dorado not-italic">“</span>{quote}<span className="text-dorado not-italic">”</span>
|
||||
</blockquote>
|
||||
</TarjetaSpotlight>
|
||||
))}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user