Bento Footer

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.