diff --git a/README.md b/README.md index e215bc4..72fd62f 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,36 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# creeer -## Getting Started +Landing page one-page para **creeer**, marca personal de una estratega de crecimiento. Next.js 14 (App Router) + TypeScript + Tailwind CSS + Framer Motion, exportada como sitio estático. -First, run the development server: +## Requisitos + +- Node.js 20+ +- pnpm 11+ (`corepack enable`) + +## Comandos ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +pnpm install # instalar dependencias +pnpm dev # servidor de desarrollo (http://localhost:3000) +pnpm build # build estático → out/ +pnpm test # tests (Vitest) +pnpm lint # ESLint ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +## Estructura -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +``` +app/ # App Router (layout, page, globals.css) +components/ + primitives/ # Wordmark, Container, CTA (reutilizables) + sections/ # Hero, FraseAncla, ParaQuien, Mecanismo, Disciplinas, Estratega, Cierre, ComoEmpezar + layout/ # Header, Footer +lib/ + content.ts # todo el copy (source of truth) + motion.ts # variantes Framer Motion + reduced-motion +docs/ # spec, plan, directrices de marca +``` -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +## Decisiones de diseño -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +Ver `docs/dueña-directrices.md` (directrices de marca) y `docs/superpowers/specs/2026-07-20-creeer-landing-design.md` (spec completo). diff --git a/app/fonts/GeistMonoVF.woff b/app/fonts/GeistMonoVF.woff deleted file mode 100644 index f2ae185..0000000 Binary files a/app/fonts/GeistMonoVF.woff and /dev/null differ diff --git a/app/fonts/GeistVF.woff b/app/fonts/GeistVF.woff deleted file mode 100644 index 1b62daa..0000000 Binary files a/app/fonts/GeistVF.woff and /dev/null differ diff --git a/components/sections/Cierre.tsx b/components/sections/Cierre.tsx index 9bf3c05..bb197a5 100644 --- a/components/sections/Cierre.tsx +++ b/components/sections/Cierre.tsx @@ -22,13 +22,15 @@ export function Cierre() { - -
  • {whatsapp.label}
    • - -
  • {email.label}
    • - -
  • {linkedin.label}
    • -     + + + diff --git a/components/sections/ComoEmpezar.tsx b/components/sections/ComoEmpezar.tsx index 6a90974..da016e7 100644 --- a/components/sections/ComoEmpezar.tsx +++ b/components/sections/ComoEmpezar.tsx @@ -13,7 +13,7 @@ export function ComoEmpezar() {
    {comoEmpezar.eyebrow} + className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-deep">{comoEmpezar.eyebrow} {comoEmpezar.title} {disciplinas.eyebrow} + className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-deep">{disciplinas.eyebrow} {disciplinas.title} {disciplinas.lead} - + {disciplinas.items.map((item) => ( - +

    {item.name}

    {item.desc}

    -     + ))} -     +
    ); diff --git a/components/sections/Estratega.tsx b/components/sections/Estratega.tsx index e9d2207..718e558 100644 --- a/components/sections/Estratega.tsx +++ b/components/sections/Estratega.tsx @@ -13,13 +13,12 @@ export function Estratega() { className="grid gap-12 md:grid-cols-[auto_1fr] md:items-center"> {/* Portrait — placeholder gradient until dueña provides a photo */}
    - {estratega.eyebrow} + {estratega.eyebrow} {estratega.title} {estratega.bio} diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx index e496ad9..5b6bbf9 100644 --- a/components/sections/Hero.tsx +++ b/components/sections/Hero.tsx @@ -22,7 +22,7 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) { - + {hero.eyebrow} diff --git a/components/sections/__tests__/Cierre.test.tsx b/components/sections/__tests__/Cierre.test.tsx index e77b5fc..2001cbd 100644 --- a/components/sections/__tests__/Cierre.test.tsx +++ b/components/sections/__tests__/Cierre.test.tsx @@ -16,4 +16,8 @@ describe('', () => { expect(mail.getAttribute('href')).toMatch(/^mailto:/); expect(li.getAttribute('href')).toMatch(/^https:\/\/(www\.)?linkedin\./); }); + it('wraps contact links in a nav with aria-label="Contacto"', () => { + render(); + expect(screen.getByRole('navigation', { name: /contacto/i })).toBeInTheDocument(); + }); }); diff --git a/components/sections/__tests__/Disciplinas.test.tsx b/components/sections/__tests__/Disciplinas.test.tsx index 12628be..b5b29af 100644 --- a/components/sections/__tests__/Disciplinas.test.tsx +++ b/components/sections/__tests__/Disciplinas.test.tsx @@ -9,4 +9,11 @@ describe('', () => { expect(screen.getByText('Digital')).toBeInTheDocument(); expect(screen.getByText('Experiencias')).toBeInTheDocument(); }); + it('renders disciplines in a semantic list (ul/li) for a11y', () => { + const { container } = render(); + const list = container.querySelector('ul'); + expect(list).not.toBeNull(); + const items = list?.querySelectorAll('li'); + expect(items?.length).toBe(3); + }); }); diff --git a/tailwind.config.ts b/tailwind.config.ts index 0bdaf76..0c2c251 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,7 +11,8 @@ const config: Config = { ink: '#0A1F44', // texto principal cream: '#F5EBD0', // texto sobre oscuro (marfil) gold: { - DEFAULT: '#B8901f', // dorado tostado (sobre claro) + DEFAULT: '#B8901f', // dorado tostado (sobre claro) — usar solo en texto grande/decorativo + deep: '#7A5F15', // dorado profundo (AA 4.5:1 sobre claro para texto pequeño) bright: '#D4AF37', // dorado (sobre oscuro) }, muted: '#5a5168',