Prompts to Copy,
to Build Your Website

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.

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.

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.

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.

Build a reusable link component with a letter-by-letter "roll" hover effect using GSAP. Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4. Install gsap. COMPONENT: RollLink({ href, className, children: string }) — a client component wrapping next/link. MARKUP - Put aria-label={children} on the link. Inside, an aria-hidden flex span. - Split children into characters, turning spaces into non-breaking spaces. For each character: - Outer span: relative, inline-block, overflow hidden, line-height 1.2. - Inner span with data-char, display block, containing the character. - A second copy of the character, absolutely positioned at top: 100%, left 0, directly underneath. ANIMATION (onMouseEnter only) - gsap.to(all [data-char] in this link, { yPercent: -100, duration: 0.22, ease: "power2.inOut", stagger: 0.015 }). - Each letter slides up out of view while its twin slides into its place, left to right. - onComplete: gsap.set(chars, { yPercent: 0 }) to reset instantly, which looks identical. RULES - Keep a "playing" ref. Ignore new mouseenter events while playing, and don't reverse on mouseleave, so the roll always finishes even if the pointer leaves early. - No color, background or opacity change on hover — the motion is the only feedback. - The link's own className controls layout, so it works for plain nav text and for centered pill buttons (e.g. flex, 40px tall, fully rounded, centered).

Build a custom cursor: a rounded Figma-style arrow plus a ring of rotating text that follows with a lag. Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4. Use gsap. SETUP - A client component mounted once in the root layout. Only run when matchMedia("(pointer: fine)") matches. - Global CSS: - Inside @media (pointer: fine), set cursor: none !important on *, *::before and *::after. - Inside @media (pointer: coarse), hide the component. - Wrapper: aria-hidden, pointer-events none, position fixed, inset 0, z-index 9999, mix-blend-mode: difference. Everything inside is pure white (#fff), so it inverts whatever is underneath. - IMPORTANT: give <html> its own background color (the same as body). Otherwise the body background moves to the canvas, the difference blend has nothing to blend with, and the cursor shows plain white. ARROW - A 28×28 SVG with path "M6 5v17.5l5.2-5.2h7.8Z", drawn twice for rounded corners: - First with a 4px stroke, round line joins and paint-order stroke. - Then with a 1.2px stroke and round joins. - Translate it by (-6px, -5px) so the tip sits exactly on the pointer. - Follows the pointer with gsap.quickTo on x/y, duration 0.05. RING - A 124×124 SVG with a thin circle (r 38, 0.75px stroke). - Text on a circular path of r 48: "WELCOME • SCROLL DOWN •". - 8.5px, uppercase, letter-spacing 0.5. - Use textLength 301 (≈ 2π×48) with lengthAdjust="spacing" so the text fills the circle evenly. - Spins with a CSS keyframe rotate(360deg), 10s linear infinite. - Centered with xPercent/yPercent -50. Follows with gsap.quickTo, duration 0.45, ease "power3.out", offset (+4px, +8px) so it centers on the arrow's body. BEHAVIOR - On the first pointermove, fade both to opacity 1 (0.2s). On pointerleave of the document, fade both out. - When the pointer is over any a or button (check with closest), shrink the ring's inner wrapper to scale 0.5 and opacity 0 (0.25s, power2.out). - When it leaves, bring the ring back after a 0.5s delay. Use overwrite: true so hovering another link cancels a pending reveal.

Build a section that grows to touch the screen edges as you scroll, using GSAP ScrollTrigger with scrub. Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4. Use gsap and gsap/ScrollTrigger (call gsap.registerPlugin(ScrollTrigger)). COMPONENT: GrowSection({ className, children }) — a client component. - Markup: <section ref={outer}> wrapping <div ref={inner} className={className}>{children}</div>. - The section's starting CSS matches the animation's start state, so nothing jumps before hydration: - padding-left/right 80px and padding-top 80px from 768px; 32px each on phones. - The inner div has a 64px radius from 768px (40px on phones) and its own padding (16px; 12px on phones). ANIMATION — set up with gsap.matchMedia() - Run one setup for "(min-width: 768px) and (prefers-reduced-motion: no-preference)" with gutter 80 and radius 64. - Run another for "(max-width: 767px) and (prefers-reduced-motion: no-preference)" with gutter 32 and radius 40. - Reduced motion gets no animation. Call mm.revert() on unmount. - Read the inner div's computed padding-top once (padTop). 1) GROW IN — a timeline with scrollTrigger { trigger: section, start: "top 85%", end: "top 15%", scrub: 0.6 }: - Section: paddingLeft/Right from gutter to 0. - Inner: borderRadius from radius to 0. marginTop from 0 to -gutter. paddingTop from padTop to padTop + gutter. - Use ease "none" and position 0 for both tweens. - The negative margin pulls the top edge up while the matching extra padding keeps the content in place. Total height doesn't change, so the page below never shifts. 2) EASE BACK PARTWAY — a timeline with scrollTrigger { trigger: section, start: "bottom 85%", end: "bottom 15%", scrub: 0.6 }: - With SHRINK = 0.4: section paddingLeft/Right from 0 to gutter × SHRINK, and inner borderRadius from 0 to radius × SHRINK. - Use ease "none" and immediateRender: false on both, so they don't overwrite the grow state on load. - The top is left alone, since it's already off-screen. Everything inside the section (cards, grids) widens with it, because the layout really grows — it's not scaled.

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.

Build a product card for a prompt library. The whole card links to the product page, 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. DATA: { slug, category, categoryTitle, title, description, tags: string[], prompt } CARD (<article>) - position relative; flex column; gap 20px; radius 28px; background #f6f6f8 (#1c1c1e on dark sections); padding 20px (24px from 768px). 1. TOP ROW: the category title (12px medium, uppercase, muted) on the left, and a 22px diagonal arrow (path "M6 18 18 6M8 6h10v10", 1.5px stroke) on the right. 2. 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. 3. 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. Inside, 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. 4. 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), and a copy icon. - Clicking it copies the full prompt with navigator.clipboard, then shows a check icon and "Copied!" for 2 seconds. If the clipboard fails, fall back to window.prompt. GRID: 1 column on phones, 2 from 768px, 3 from 1024px, 12px gap (16px from 768px). Cards stretch to equal height in each row.