---

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.