Prompt
Build a complete contact 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. PAGE GRID - Padding: side gutter, 24px top on phones and 64px from 768px. Gap 12px (16px from 768px). - 2 columns from 1024px; stacked below. 1. INTRO CARD (left) - Background #1e1e1e, white text, radius 28px, padding 24px (40px from 768px). Flex column, justify-between, 32px gap. - Top: - 12px uppercase label "Have some questions?". - h1 "Let's build" / "something together" at clamp(2.25rem, 5vw, 4rem), semibold, leading 1.02, tracking -0.04em. - A short line of white text at 60% opacity: 16px, 18px from 768px, max-width 24rem. - Bottom: "Follow us" label, then 48px round Instagram, LinkedIn and X icon buttons with a 10% white background. 2. FORM CARD (right) - The "Contact Form with Topic Pills" form, stretched to the same height as the intro card. The message box grows so "Send message" lines up with the bottom of the intro card. 3. EMAIL CARD (full width, spans both columns) - Background #d9d9dc, radius 28px, centered content. - Padding 48px × 20px on phones, 80px × 24px from 768px. - 12px uppercase label "Or drop us an email at". - The email address as a mailto link at clamp(1.5rem, 6vw, 5.5rem), semibold, leading 1, tracking -0.04em. Put a <wbr> after the "@" so it wraps cleanly on phones. - Two pills: - "Copy email": #f6f6f8, copy icon. Uses navigator.clipboard and shows a check icon with "Copied!" for 2 seconds. If the clipboard fails, fall back to window.prompt. - "Send email": black, diagonal arrow, mailto. - On phones they stack full-width at 56px tall. From 640px they sit side by side at 48px, min-width 160px. No hover color changes.