Fizzpop Soda Landing
# FizzPop Soda
- **ID:** `fizzpop-soda-landing`
- **Category:** Consumer Brand
- **Type:** landing
- **Profile:** `playful`
---
Build a single-page DTC landing page for "FizzPop" — a craft soda brand that refuses to be quiet. Loud color, bouncy springs, sticker energy; the maximalist counterpart to cinematic's hush. Use React + Vite + Tailwind CSS + TypeScript + lucide-react. Default Tailwind config, no other UI libraries.
FONTS (Google Fonts, load via `<link>` in index.html)
- Display: Bricolage Grotesque (700/800) — headlines, flavor names
- Body: Space Grotesk (400/500/700) — everything else
COLORS (CSS variables on :root — candy family; decorative color IS the identity here)
- --cream: #FFF8F0 (background) · --ink: #1A1A2E (foreground)
- Accents (all four earn their keep): --pink: #FF5C8A · --violet: #7C3AED · --cyan: #22D3EE · --lemon: #FACC15
- Hard-shadow trick: solid offset shadows in ink (`shadow-[0_6px_0_#1A1A2E]`), never soft blurs — shadows stay neutral so the four accents stay exactly four
GLOBAL CSS (paste verbatim)when to use it
Community prompt sourced from the open-source GitHub repo olbboy/motion-site-builder (MIT). A "Fizzpop Soda Landing" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.
tags
codingcommunitydeveloper
source
olbboy/motion-site-builder · MIT
more in Coding
Coding✓ tested
Senior code review (strict mode)
senior staff engineer running a merciless but fair review
Coding✓ tested
Debug by hypothesis, not by guessing
debugging partner who forms theories before touching code
Coding✓ tested
Generate tests from described behavior
test engineer who writes tests that would actually catch regressions