Build a minimal one-page landing site using HTML, CSS and vanilla JavaScript. Style is editorial: heavy use of serif headings, generous whitespace, monochrome palette.
STRUCTURE (in order)
1. NAV — fixed, transparent, max-width 1200px centered. Logo on left (text wordmark), 4 nav links on right (Features, Pricing, Docs, Login). On scroll past 80px, nav background becomes a glass effect (backdrop-filter blur).
2. HERO — full viewport. Single column, left-aligned content, max-width 720px.
- Eyebrow: small uppercase label
- H1: serif font, 5xl-7xl, normal weight, tight tracking
- One paragraph (18px, line-height 1.6, max-w-prose)
- One primary CTA button + one secondary text link with arrow
3. FEATURES — three column grid (1 col mobile). Each card:
- Number (01, 02, 03) in large serif italic
- Title (h3, 24px)
- 2-line description
- Optional small icon top-right
4. SOCIAL PROOF — 4 testimonial quotes in a 2x2 grid. Each: opening quote mark, italic serif quote, dash + name + role below.
5. PRICING — single row of 3 cards. Middle card is highlighted (slight scale up, accent border). Each card: plan name, price (huge serif), feature list (5 bullets), CTA button.
6. CTA SECTION — full-width band with darker background. Center-aligned heading + email input + button.
7. FOOTER — 4 columns of links + copyright bar.
DESIGN
- Color palette: bg #fafaf9, text #18181b, accent #7c3aed, muted #71717a.
- Typography: Inter for body, Source Serif Pro (or similar) for headings.
- Spacing scale: 8px base. Sections 96px vertical padding desktop, 64px mobile.
- Border radius: 8px standard, 9999px for pills and buttons.
- No drop shadows except on the highlighted pricing card.
INTERACTIONS
- Nav links underline on hover (line grows from left to right)
- Cards have a subtle lift on hover (-2px translate, slight shadow)
- Buttons: solid black bg with white text, hover inverts (white bg with black text and 1px black border).