diff --git a/app/page.tsx b/app/page.tsx index 433c8aa..d43a5de 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,101 +1,9 @@ -import Image from "next/image"; +import { Hero } from '@/components/sections/Hero'; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+
+ +
); } diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx new file mode 100644 index 0000000..260841f --- /dev/null +++ b/components/sections/Hero.tsx @@ -0,0 +1,42 @@ +'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 { hero } from '@/lib/content'; +import { easeOutExpo, fadeInUp, staggerContainer } from '@/lib/motion'; + +type Variant = 'hormozi' | 'editorial'; + +export function Hero({ variant = 'editorial' }: { variant?: Variant }) { + const isHormozi = variant === 'hormozi'; + const headlineBase = isHormozi + ? 'font-sans font-black uppercase tracking-tight' + : 'font-serif italic font-bold'; + const headlineSize = 'text-4xl md:text-6xl leading-[1.1]'; + + return ( +
+ + + + + {hero.eyebrow} + + + {hero.headline.line1}{' '} + {hero.headline.effort}{' '} + {hero.headline.line3}{' '} + + {hero.headline.clarity} + + + + + + + +
+ ); +} diff --git a/components/sections/__tests__/Hero.test.tsx b/components/sections/__tests__/Hero.test.tsx new file mode 100644 index 0000000..540cb9c --- /dev/null +++ b/components/sections/__tests__/Hero.test.tsx @@ -0,0 +1,24 @@ +import { render, screen } from '@testing-library/react'; +import { describe, it, expect } from 'vitest'; +import { Hero } from '../Hero'; + +describe('', () => { + it('renders the eyebrow', () => { + render(); + expect(screen.getByText(/tu estratega de crecimiento/i)).toBeInTheDocument(); + }); + it('renders the headline copy', () => { + render(); + expect(screen.getByText(/Tu negocio/i)).toBeInTheDocument(); + expect(screen.getByText(/más esfuerzo/i)).toBeInTheDocument(); + expect(screen.getByText(/más claridad/i)).toBeInTheDocument(); + }); + it('renders the CTA', () => { + render(); + expect(screen.getByRole('link', { name: /define tu siguiente movimiento/i })).toBeInTheDocument(); + }); + it('does NOT render scarcity (cupos/cohorte)', () => { + const { container } = render(); + expect(container.textContent).not.toMatch(/cupos|cohorte|generación fundadora/i); + }); +});