Now let me create this fun, energetic Fanta-inspired landing page with animated splash effects, bold typography, and playful interactions.

Now let me create the splash animation component and the main page:

Now let me create the main page that brings it all together:

I've built you a fun, energetic Fanta-inspired landing page with:

1. Animated Splash Explosion - A central orange with dynamic droplets that explode outward on load, floating bubbles, and sparkle effects
2. Bold Typography - Using Bangers font for display headings ("TASTE THE FUN") and Fredoka for body text
3. Playful Color Scheme - Vibrant orange primary, green secondary for the "Explore Flavors" CTA, and warm accent tones
4. Interactive CTAs - "PLAY NOW" with a bouncing gamepad icon and "EXPLORE FLAVORS" with a tilting glass icon, both with hover scale effects
5. Scroll Indicator - Bouncing "Scroll for chaos" text pointing down
6. Chaos Section - A flavor grid with hovering cards for Orange, Grape, Strawberry, and Pineapple

The design captures that youthful, fizzy energy with animated elements throughout - from the pulsing title to the floating bubbles in the splash animation.

Good, I have full context. Now let me build the bubble-tapping mini game component and add it to the page between the hero and flavors sections.

Now let me add it to the page between the hero and the chaos/flavors section:

I've added a full interactive Tap the Bubbles mini game section between the hero and the flavors grid. The game features a 20-second countdown timer, colorful bubbles that float down the play area with varying point values (+1, +2, +3), a combo multiplier system that rewards rapid tapping (3+ pops in quick succession), and pop particle effects on each tap. The idle screen shows a "Win discounts & unlock flavors!" teaser with decorative floating bubbles, and the end screen reveals a "mystery flavor unlocked" reward if the player scores 30+ points, plus a high score tracker that persists across rounds.

The diagnostics show hydration mismatches in the SplashAnimation component because Math.random() is called inline during render, producing different values on server vs client. Let me fix this.

I have the full content in context already. The issue is Math.random() used inline in JSX for texture dots and sparkles positions. I need to pre-generate these values in a useEffect or useState to avoid server/client mismatch.

The hydration mismatch was caused by Math.random() being called inline in JSX during render -- producing different values on the server vs the client. I moved all random value generation (texture dots, sparkles, droplet distances/scales) into useEffect so they're only computed client-side, and added a mounted guard that returns an empty placeholder during SSR to avoid any mismatch.