docs: implementation plan for landing additions (+ short header CTA in spec)

This commit is contained in:
erikgh committed 2026-07-21 15:37:51 -06:00
1 parent 4f73312526
commit 50f62bdf28
2 files changed
+467 -1

No files matched your search

@@ -52,7 +52,7 @@ app/page.tsx # compose Header + ComoEmpezar + Footer
- `<header>` with `sticky top-0 z-50`, light background (`bg-base/80` or `bg-pure/80`) + `backdrop-blur` + a subtle bottom border (`border-b border-ink/10`). The light bar stays legible while scrolling over both light and dark sections.
- A `Container`-width inner row, `flex items-center justify-between`, vertical padding ~`py-3`/`py-4`.
- **Left:** `<Wordmark size="base" />` wrapped in an `<a href="#top">` (or the page top) — the wordmark ink color is the default (dark on the light bar).
- **Right:** the `CTA` primitive, `variant="light"`, label from `cierre.cta` (`"Define tu siguiente movimiento"` + `→`), `href="#contacto"`. On small screens the CTA stays but may use a slightly smaller padding/label; the wordmark + CTA layout is identical on mobile (no menu, no hamburger).
- **Right:** the `CTA` primitive, `variant="light"`, with a **short** label from a new `header.cta` content key (`"Hablemos"`, `→` appended by the primitive), `href="#contacto"`. Rationale: the full-length "Define tu siguiente movimiento" would overflow next to the wordmark on ~375px screens; a compact nav CTA fits mobile and desktop, and the full CTA still appears in the Hero and Cierre. Layout is identical on mobile (no menu, no hamburger).
- Semantic `<header>`; wrap the CTA link region in `<nav aria-label="Principal">`. No animation (nothing to gate on reduced motion).
**A11y:** the sticky header must not obscure anchor targets — ensure `#contacto` still scrolls into view (the closing section has ample padding; acceptable without extra scroll-margin, but `scroll-mt` on anchor targets may be added if visual testing shows clipping).
@@ -94,6 +94,10 @@ app/page.tsx # compose Header + ComoEmpezar + Footer
## Content additions (`lib/content.ts`)
```ts
export const header = {
cta: 'Hablemos', // short nav CTA → #contacto (full CTA lives in Hero/Cierre)
};
export const comoEmpezar = {
eyebrow: 'cómo empezar',
title: 'Tu siguiente movimiento empieza con una conversación.', // Georgia-italic h2