Prompt Product Card

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.