>_ Prompt
Build a dark-themed product catalog for copy-ready prompts: a listing page, category pages and product pages.
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 (one typed file)
- categories: { slug, title, summary }[] — landing-pages, ui-components, web-templates, animations.
- products: { slug, category, title, description, tags, prompt }[].
- Helpers: getCategory, getProduct, productsIn.
ROUTES
- /products, /products/[category] and /products/[category]/[slug].
- Use generateStaticParams with dynamicParams = false, and generateMetadata for titles.
DARK THEME FOR THESE ROUTES ONLY
- app/products/layout.tsx renders a <style> that overrides the :root tokens:
- color-scheme dark; background #111112; surface #1c1c1e; muted #2a2a2d; border #2e2e32; foreground #f2f2f4; muted text #8a8a8f; inverse #111112.
- Because it's in the server HTML there's no flash, and it unmounts when you leave /products.
- In the same <style>, reset the footer to the light tokens and set color #1e1e1e, so the shared footer keeps its normal look.
LISTING / CATEGORY PAGE
- main: flex column, gap 12px (16px from 768px), the side gutter, 24px top padding (64px from 768px).
1. Header card
- Purple #c084fc, radius 28px, padding 24px (40px from 768px), dark #111112 text.
- From 768px it's a row: content on the left, the count on the right, aligned to the bottom.
- Left: 12px uppercase label, h1 at clamp(2rem, 5vw, 4rem), semibold, leading 1.02, tracking -0.04em, then the summary in WHITE (16px; 18px from 768px), max-width 36rem.
- Right: the product count, padded to 2 digits ("01", "13"), at clamp(4rem, 10vw, 9rem), semibold, leading 0.85, tracking -0.05em, with a 12px uppercase "PROMPTS" label below it ("PROMPT" for one). On phones the label sits beside the number.
2. Category chips
- "View all", each category, then a disabled "Agent Skills" (see "Coming Soon Roll Pill") with a dashed border.
- Chips: 44px tall, padding 0 20px, 1px border, 14px (16px from 768px) medium. The active one is filled with the foreground color and uses the inverse text color.
- On phones it's one sideways-scrolling row with a hidden scrollbar that bleeds to the screen edges. From 768px it wraps.
2b. Search box (a client component that also renders the grid, with the chips passed in as a prop)
- From 1280px: one row, chips on the left and the search box right-aligned (300px wide, 360px from 1536px), vertically centered. Below 1280px: the search box is full width above the chips.
- role="search" wrapper; <input type="search"> 44px tall, fully rounded, 1px border, surface background, 16px text, 48px padding on both sides, placeholder "Search prompts", aria-label "Search prompts". The border turns lime on focus. Hide the browser's own clear button.
- An 18px magnifier icon 20px from the left; when there's text, a 32px round clear button 8px from the right. Escape also clears.
- Filtering is instant and client-side: every word typed must appear in the title, description, tags, category name or the category's extra keywords (case-insensitive). A word ending in "s" also matches without it, so "templates" finds "template". On a category page it only searches that category.
- Extra keywords per category: Landing Pages "landing page homepage home page hero"; UI Components "ui component element widget"; Web Templates "web template website site page layout"; Animations "animation animated motion effect interaction". So "website" finds Web Templates.
- While searching, a small muted line shows "{n} prompts for “{query}”". With no matches: a card saying "No prompts match “{query}”.", a hint, and a lime "Clear search" button.
3. Product grid: see "Prompt Product Card". 1 column on phones, 2 from 768px, 3 from 1024px.
- Use grid-cols-1 (minmax(0, 1fr)) on phones so long content can't widen the page.
PRODUCT PAGE
- Purple header card (same size and padding). From 1024px it's a row with the button pinned to the bottom right.
- A 56px round back button: #111112 background, light 24px left arrow, aria-label "Back to {category}".
- Then the h1, the description in white, and tags (32px tall, padding 0 12px, white background, #1e1e1e text, 12px medium).
- "Copy prompt" button: 56px tall, padding 0 32px, #111112 background with light text, a copy icon. Shows "Copied!" for 2 seconds.
- Prompt card: #1c1c1e, radius 28px, padding 12px (16px from 768px). A 12px uppercase "PROMPT" label, then a relative wrapper:
- A <pre> with white-space pre-wrap, break-words, radius 20px, #111112 background, monospace 14px (16px from 768px), relaxed leading.
- Padding 20px with 72px at the bottom; 32px with 80px at the bottom from 768px.
- A "Copy" pill (40px tall, padding 0 16px, light background, dark text) absolutely placed at the bottom right (16px; 24px from 768px), inside the text box.
- "More in {category}": a heading at clamp(1.5rem, 2.6vw, 2.25rem), then cards (min-height 160px) for the other products in that category.
No hover color changes.