product-launch

name	product-launch
description	Product launch page with countdown, feature reveals, teaser video placeholder, and early-access signup. Use for "launch", "product launch", "coming soon".
triggers	["product launch","launch page","coming soon","teaser","early access"]
df	{"mode":"prototype","platform":"desktop","scenario":"marketing","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true}}

Product Launch Skill

Produce a product launch / coming-soon page.

Sections

1. Hero: massive product name, tagline, countdown timer (CSS animation).
2. Teaser: gradient placeholder for video/screenshot with play button overlay.
3. Feature reveals: 3 cards that fade in on scroll (CSS animation-timeline).
4. Early access: email signup form (styled input + button).
5. Social proof: "Join X others" with avatar stack.
6. Footer: minimal links, copyright.

Rules

• Countdown: CSS-only, updates via JS interval.
• Avatar stack: overlapping circles with colored initials.
• Accent used for CTA and countdown numbers only.
• data-df-id on each section.

Output

Single index.html, inline CSS/JS.