UI Components

>_ Prompt

Build a transparent navbar with hover dropdowns made of pill buttons. 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. STRUCTURE - Header: flex, items centered, space-between. Padding 30px top/left/right (20px below 768px). position: relative, z-index 40. - Left: text logo with a superscript ™ (0.6em, margin-left 2px), 20px semibold. - Center nav: position absolute, left 50%, translateX(-50%). Links 14px medium, 32px gap. Hidden below 768px. - Right: account icon button, 40×40 hit area with a 28px icon. DROPDOWNS (CSS only — group-hover + group-focus-within) - Each nav item is a relative "group". Its panel is absolute at top: 100% with 12px top padding, so the pointer can cross the gap without closing it. - Center-nav panels are centered under their link. The account panel is right-aligned to the icon with 8px top padding. - Hidden state: opacity 0, visibility hidden, pointer-events none. Open state: opacity 1, visible, pointer-events auto. Transition all 200ms. - Card: 208px wide (192px for the account card), background #f6f6f8, 1px border #dcdde2, radius 28px, padding 8px, gap 6px, shadow-lg. - Pills: height 40px, fully rounded, text centered, 14px medium. The first or main pill is black (#1e1e1e, white text). The rest use #edeef2. MENU CONTENT - Products: View all (black), Landing Pages, UI Components, Web Templates, Animations, then a disabled "Agent Skills" pill that rolls to "Coming soon" on hover (see "Coming Soon Roll Pill"). - About: Studio (black), Your-site.com, Legals. - Contact: Form (black), then one row of three equal round pills with Instagram, LinkedIn and X icons. They open in a new tab and each has an aria-label. - Account: Create Account (black), Sign In. CLOSE AFTER NAVIGATION - After a route change, blur the focused element and add a data-suppress attribute on the header. That attribute forces every panel hidden. - Remove it on the first pointerover outside the nav groups, so a clicked dropdown doesn't stay open on the new page. No hover color changes on any link or pill.

>_ Prompt

Build a bento-grid footer. 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. CONTAINER - Footer padding 30px on all sides (20px on phones). - Grid gap 16px (12px on phones). - From 768px: 2 columns, rows minmax(260px, 1fr) twice. Below 768px: everything stacks. CARD 1 — left, spans both rows, background #1e1e1e, white text - Padding 40px (24px on phones), min-height 420px (380px on phones). - Content spread between top and bottom (flex column, justify-between). - Top: 12px medium uppercase label "Your Studio™ library". Then an h2 "Copy a prompt." / "Ship your website." at clamp(2.25rem, 4.5vw, 4rem), medium weight, leading 1.05, tracking -0.03em, 24px above, max-width 28rem. - Bottom: a split button with 16px radius, background #f6f6f8, dark text. - Left part: padding 24px × 12px, two lines — "Browse" (10px uppercase, #8a8a8f) and "All prompts" (16px semibold). - Right part: a 22px cart icon (1.5px stroke) with 24px side padding and a 1px #dcdde2 left border running the full height. - A working prompt card, 1024px and up only: 256px wide, bottom/right 40px, rotated -4deg, white at 10% opacity, radius 22px, padding 16px. - Top row: a 10px uppercase label "PROMPT · {prompt title}" at 60% white, and a small white "COPY" pill (10px semibold uppercase, padding 4px 12px, 11px copy icon). - The pill copies a real full prompt to the clipboard and shows a check with "COPIED!" for 2 seconds. If the clipboard fails, fall back to window.prompt. - Below: that prompt's text in 11px monospace at 80% white, clamped to 3 lines. CARD 2 — top right, background #d9d9dc - Padding 24px, min-height 260px (200px on phones). - Top row: 12px uppercase label "World of Your Studio", and a 22px diagonal arrow (path "M6 18 18 6M8 6h10v10", 1.5px stroke). - Bottom: "Visit yoursite.com" at clamp(1.75rem, 3vw, 2.5rem), medium, leading 1, tracking -0.03em. CARDS 3 & 4 — bottom right, a 2-column grid with the same gap, min-height 260px (200px on phones), padding 24px (20px on phones) - Purple #c084fc card, white text: label "Discover" / "our story" with the diagonal arrow, title "About us". - Lime #a3f207 card, dark text: label "Have some" / "questions?" with a paper-plane icon, title "Contact us". - Titles: clamp(1.5rem, 2.6vw, 2.5rem), medium, leading 1, tracking -0.03em. BOTTOM ROW - 24px below the grid. 12px #8a8a8f text, space-between. - "© {current year} Your Studio™" on the left and a "Legals" link on the right. Every card is a link. No hover color changes.

>_ Prompt

Build a full-screen mobile menu, shown only below 768px. 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. TOGGLE BUTTON - 40px round, background #1e1e1e, white icon. position relative, z-index 70, so it stays above the overlay. Add touch-action: manipulation. - Icon: two 2px bars, 18px wide and 10px apart, inside a 12px-tall box. - Open: both bars move to the middle and rotate +45° and -45° to form an ✕. Animate transform only, 300ms. - aria-label switches between "Open menu" and "Close menu". Add aria-expanded and aria-controls. OVERLAY - position fixed, inset 0, z-index 60, background #edeef2, padding 20px (24px at the bottom). Flex column, overflow-y auto, overscroll-behavior contain. - Fade with opacity only, 300ms. When closed: pointer-events none and the inert attribute. - While open: set overflow: hidden on <html>. Close on Escape, on any link click, and when the viewport reaches 768px. CONTENT - Top: the text logo with superscript ™, in a 40px-tall row aligned with the toggle. - 32px below: three link rows — Products, About, Contact. Each row: - 64px tall, radius 28px, background #f6f6f8, padding 0 24px. - Text 30px semibold, tracking -0.03em, with a 22px diagonal arrow on the right. 8px gap between rows. - Then wrapped chips: Landing Pages, UI Components, Web Templates, Animations — 36px tall, 1px #dcdde2 border, 14px medium. Last comes a disabled "Agent Skills" chip with a dashed border and a small lime "SOON" tag (see "Coming Soon Roll Pill"). - Pushed to the bottom (margin-top auto): - A 2-column row: "Create Account" (black pill) and "Sign In" (#f6f6f8 pill), both 56px tall. - A row of three equal 56px pills with Instagram, LinkedIn and X icons. - 12px #8a8a8f text: "© {year} Your Studio™" on the left, "Your-site.com" and "Legals" on the right. STAGGERED ENTRANCE - Each block animates opacity 0→1 and translateY 12px→0, 300ms ease-out. - When opening, block i gets transition-delay 80ms + i×40ms. When closing, delay is 0 so everything leaves together. - Only animate opacity and transform, so it never lags.

>_ Prompt

Build a contact form with topic pills and server-side validation. Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4. Use a Server Action with React useActionState. 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. CARD - <form> with background #f6f6f8, radius 28px, padding 12px (16px from 768px). Flex column, 12px gap. - It should stretch to the height of its grid row. TOPIC PILLS - A fieldset with legend "I'm interested in" (12px uppercase, #8a8a8f, 12px below). - Radio options, styled as pills: Products, Custom prompt, Custom website/app, Collaboration, Other. - Each is a visually hidden radio plus a span: 44px tall on phones (40px from 768px), padding 0 16px, 1px #dcdde2 border, 14px medium. - Checked: background and border #1e1e1e, white text. Focus-visible: a 2px #1e1e1e ring. The first option is checked by default. FIELDS - Name and Email sit side by side from 768px. - Both: 56px tall, fully rounded, background #edeef2, padding 0 20px (24px from 768px), 16px text, #8a8a8f placeholder. - No outline; a 2px #1e1e1e ring on focus. Use autocomplete name/email and add aria-labels. - Message: textarea, 5 rows, min-height 160px, radius 24px, same styling, resize none. - Put it in a flex-1 wrapper so it grows and keeps the submit button at the bottom of the card. SUBMIT - Full-width 56px black pill: "Send message" with a paper-plane icon. - Shows "Sending…" and 60% opacity while pending. VALIDATION (on the server) - Name required. Email must match a basic email pattern. Message at least 10 characters. - Return { ok, errors } and show each error under its field: 12px, red, padding 0 24px. SUCCESS STATE - Replace the form with a #f6f6f8 card (radius 28px, min-height 360px; 420px from 768px), centered. - Inside: a 56px lime #a3f207 circle with a check icon, "Message received" (30px semibold), and a muted thank-you line.

>_ Prompt

Build an email call-to-action card. 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. WRAPPER - A section with the side gutter (30px; 20px on phones) and the same top padding. - Inside, a card: background lime #a3f207, text #1e1e1e (fixed, so it works on light and dark pages), radius 40px (28px on phones). - Flex column, centered, text centered. Padding 96px × 40px from 768px, 56px × 20px on phones. Gap 32px (24px on phones). 1. ONE SMALL LINE (not a heading) - A <p>, max-width 36rem, 20px (18px on phones), leading relaxed: "Need something custom? Fill up the [contact form ↗]". - [contact form ↗] is an inline link pill to /contact: 36px tall, padding 0 16px, black background, white 16px medium text, a 14px diagonal arrow, vertical-align middle, 2px side margin. - Then a <br> and "or drop us an email at" at 60% opacity. 2. THE EMAIL — the only big text - A mailto link: clamp(1.5rem, 6vw, 5.5rem), semibold, leading 1, tracking -0.04em, max-width 100%, break-words. - Write it as name@<wbr>domain.com, so on phones it wraps after the @ and never splits mid-word. 3. BUTTONS - "Copy email": #f6f6f8 pill with a copy icon. Uses navigator.clipboard.writeText. On success, shows a check icon and "Copied!" for 2 seconds (aria-live polite). If the clipboard fails, fall back to window.prompt. - "Send email": black pill with white text, a diagonal arrow, and a mailto link. - On phones: stacked, full width, 56px tall. From 640px: side by side, 48px tall, min-width 160px, 14px medium text. No section title or label above it. No hover color changes.

>_ Prompt

Build a product card for a prompt library. The whole card links to the product page, a video preview plays while it's on screen, a heart button saves favorites, and a Copy button copies the prompt without navigating. 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. - Accents: purple #c084fc and lime #a3f207, used only for small details. DATA: { slug, category, categoryTitle, title, description, tags: string[], prompt, video: "/previews/{slug}.mp4", poster: "/previews/{slug}.webp" } CARD (<article>) - position relative; flex column; gap 20px; radius 28px; background #f6f6f8 (#1c1c1e on dark sections); padding 12px, with 20px at the bottom (24px from 768px). 1. VIDEO PREVIEW (a relative wrapper) - A 16:10 box, radius 16px, overflow hidden, page background color. - Inside: <video src poster muted loop playsInline preload="none">, absolutely filling the box, object-fit cover, aligned to the top. - An IntersectionObserver (threshold 0.25) plays it when it scrolls into view and pauses it when it leaves, so a grid of cards stays light. - Badge in the top-left corner (10px from the top and left): "LIVE PREVIEW", 24px tall, padding 0 10px, lime background, #1e1e1e text, 10px semibold uppercase with wide tracking, an 8px play triangle (path "M2 1.2v7.6L8.6 5Z" in a 10×10 viewBox) and a 6px gap. pointer-events none. 2. Everything below sits in a flex column with a 20px gap and 8px side padding (12px from 768px). 3. TOP ROW (space-between, items at the start) - Left: an 8px round dot (purple for Landing Pages and Web Templates, lime for UI Components and Animations), 8px gap, then the category title (12px medium, uppercase, muted). - Right, 12px apart: a heart favorite button (22px; see "Heart Burst Favorite Button") and a 22px diagonal arrow (path "M6 18 18 6M8 6h10v10", 1.5px stroke). - The heart has position relative and z-index 10, so it sits above the stretched link, and -m-2 p-2 for a bigger tap area. Its click calls preventDefault and stopPropagation. 4. TITLE + DESCRIPTION - An h2 at 24px (28px from 768px), semibold, leading tight, tracking -0.03em. - Its link is a stretched link: put ::after on it with position absolute, inset 0 and a 28px radius, so the whole card is clickable without nesting interactive elements. - Below it, the description at 16px muted, 8px above. 5. PROMPT PREVIEW (pushed to the bottom with margin-top auto, so previews line up across a row) - A wrapper with a 20px radius, the page background color and 16px padding. - First, a label: ">_ PROMPT" in purple, 10px monospace, semibold, uppercase, wide tracking, 8px below it. - Then a <p> with line-clamp 4, 12px monospace, relaxed leading, 70% opacity. - IMPORTANT: put the padding on the wrapper, not on the clamped element. Otherwise the 5th line peeks through the bottom padding. 6. BOTTOM ROW (right under the preview, items aligned to the bottom, space-between) - Wrapped tags: 32px tall, 1px border, padding 0 12px, 12px medium. - A Copy button: position relative, z-index 10 so it sits above the stretched link. 40px tall, padding 0 16px, black pill with white 14px medium text (inverted on dark sections), a copy icon, and a 300ms color transition. - Clicking it copies the full prompt with navigator.clipboard, then shows a check icon and "Copied!" for 2 seconds, and the button turns lime with #1e1e1e text during that time. If the clipboard fails, fall back to window.prompt. - The lime is a state change only. No color changes on hover anywhere on the card. GRID: 1 column on phones, 2 from 768px, 3 from 1024px, 12px gap (16px from 768px). Cards stretch to equal height in each row.

>_ Prompt

Build a disabled "coming soon" pill. It looks like a normal link pill, but it can't be clicked, and on hover its label rolls up and is replaced by "Coming soon". 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. COMPONENT: ComingSoon({ label, className }) — a server component (CSS only). className sets the pill's look so it matches its neighbors, e.g. "flex h-10 items-center justify-center rounded-full bg-[#edeef2]". MARKUP - Outer <span>: role="link", aria-disabled="true", aria-label="{label} — coming soon", cursor not-allowed, user-select none. Make it a named group (group/soon). - It is a span, not an <a> or <button>, so it can't be focused or clicked. - Inside, an aria-hidden <span> that is a CSS grid with overflow hidden and line-height 1.2. - Two children stacked in the same grid cell (col 1 / row 1). The grid sizes itself to the wider of the two, so the pill's width never jumps. 1. The label, text centered: translateY 0, and translateY -100% on group hover. 2. "Coming soon", text centered: translateY 100%, and translateY 0 on group hover. - Both use transition-transform, 300ms, ease-out. TOUCH SCREENS - Touch screens can't hover, so inside the label add a small tag: margin-left 6px, fully rounded, lime #a3f207, text #1e1e1e, 10px semibold uppercase, padding 2px 6px, text "Soon". - It is hidden by default and shown only under @media (hover: none). USAGE - In a dropdown: the same class as the other pills (40px, #edeef2). - In a chip row or mobile menu: the same chip classes plus a dashed border, to hint that it's not available yet. Motion only — no color, background or opacity change on hover.