Prompt · Monochrome Studio Landing Build a minimal, monochrome studio landing page.
Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4.
DESIGN SYSTEM (use exactly):
- Page background #edeef2. Surface (light cards, light pills) #f6f6f8. Muted (gray cards) #d9d9dc. Border #dcdde2.
- Ink #1e1e1e for text, dark cards and primary buttons. Muted text #8a8a8f. Text on dark: #ffffff.
- Accents: purple #c084fc, lime #a3f207.
- Font: Geist Sans. Headings semibold with tight tracking (-0.04em) and tight leading (0.95–1.05).
- Cards: 28px corner radius. Buttons and chips: fully rounded pills (9999px).
- When a card wraps pills, its radius = pill radius + card padding (e.g. 40px pills + 8px padding → 28px card).
- Side gutter: 30px from 768px up, 20px on phones.
- Links and buttons never change color, background or opacity on hover.
LAYOUT, top to bottom:
1. NAVBAR
- No background. Padding 30px top, left and right (20px on phones).
- Left: text logo "Your Studio" with a superscript ™ at 0.6em, semibold, 20px (18px on phones).
- Center (absolutely centered, hidden below 768px): links Products, About, Contact — 14px medium, 32px apart. Each opens a hover dropdown card (see "Pill Navbar with Hover Dropdowns"). Products also lists a disabled "Agent Skills" pill (see "Coming Soon Roll Pill").
- Right: a 28px account icon — a solid #1e1e1e circle with the head and shoulders cut out (transparent). Hover opens a right-aligned dropdown with "Create Account" (black pill) and "Sign In" (light pill).
- Below 768px, replace the center links and account icon with a 40px black round menu button that opens a full-screen menu.
2. HERO
- Flex column, centered, 20px gap, padding 32px top/bottom plus the side gutter.
- Min-height: max(320px, calc(40svh - 70px)) from 1024px. max(260px, calc(30svh - 70px)) from 768px. max(260px, calc(30svh - 60px)) on phones.
- Announcement pill: a link to /products. 32px tall, padding 0 14px, background #f6f6f8, 12px medium (14px from 768px), with an 8px lime #a3f207 dot, the text "{product count} new prompts, now with video previews", and a 12px diagonal arrow.
- One centered h1 on two lines: "Prompts to Copy," / "to Build Your Website", at clamp(1.75rem, 4.2vw, 3.75rem), semibold, leading 0.95, tracking -0.04em.
- Under it, the tech-stack marquee (see "Tech Stack Marquee").
3. FEATURED SECTION (dark, grows on scroll — see "Scroll-Grow Section")
- Dark tokens inside: background #111112, cards #1c1c1e, borders #2e2e32, text #f2f2f4, muted #8a8a8f.
- Starts 80px below the hero (32px on phones), inset 80px from the sides (32px), with 64px corners (40px). Inner padding 16px (12px on phones).
- Header row: 12px uppercase "Featured" label, h2 "Featured prompts" at clamp(2rem, 5vw, 4rem), semibold, and a short muted line. From 768px, a white "View all products ↗" pill (56px tall) sits on the right.
- A grid of 9 product cards (see "Prompt Product Card"): 3 columns from 1024px, 2 from 768px, 1 on phones, 16px gap (12px on phones).
- Below the grid: a full-width white "View all {count} products ↗" pill, 56px tall.
4. EMAIL CTA (see "Lime Email CTA Card")
- A lime card right after the featured section: one small line with an inline "contact form" pill, then a big email address with Copy and Send buttons.
5. FOOTER
- Bento grid of 4 cards (see "Bento Footer"), then a small row with "© {year} Your Studio™" on the left and a "Legals" link on the right.
GLOBAL DETAILS
- Text selection: background #a3f207, text #1e1e1e.
- Scrollbar: 12px wide, transparent track, #1e1e1e pill thumb with a 3px border in the page color.
- Fully responsive. No hover color changes anywhere.