Project Title: Hotspots - Gen Z SPF Patch E-commerce Site

Style: Neo-Brutalism / High-Contrast Pop

Framework: React, Tailwind CSS, Lucide Icons, Google Gemini SDK

1. Project Overview

Create a single-page React application for a trendy sun-care brand called "Hotspots". The product is a star-shaped, zinc-oxide infused sun patch that changes color from yellow to purple when UV exposure is high. The vibe is "Gen Z," "Playful," and "Neo-Brutalist."

2. Design System & Aesthetics

• Color Palette:
  • Primary Background: Hot Yellow (#FFEA00)
  • Accent Purple: Hot Purple (#4D1DDE)
  • Accent Pink: Hot Pink (#FF00CC)
  • Text/Borders: Jet Black (#121212)
  • Card Backgrounds: White
• Typography:
  • Headings: 'Space Grotesk' (Bold, Uppercase, Tight tracking).
  • Body: 'Inter'.
• Styling Rules (Neo-Brutalism):
  • Borders: All containers, buttons, and images must have thick black borders (border-4 border-black).
  • Shadows: Use hard, non-blurred shadows (box-shadow: 4px 4px 0px 0px #000000).
  • Interactivity: On hover, buttons should translate slightly and shadows should shift.
  • Corners: Use a mix of fully rounded (rounded-full) and large radius (rounded-3xl) corners.

3. Page Structure & Sections

• Navbar: Fixed to top, floating pill shape. Contains logo "Hotspots.", links (How it works, Reviews, FAQ), and a "Shop Now" button.
• Hero Section:
  • Large, massive headline: "Don't get Burnt Bestie."
  • Subtext explaining the color-changing tech.
  • Interactive Element: A large custom SVG of the sun patch. When clicked, it should toggle colors from Yellow to Purple to demonstrate the UV tech.
  • "Shop The Pack" primary button.
• Marquee Strip: A scrolling infinite horizontal loop of text (black background, yellow text) reading: "SPF 50+ PROTECTION ★ ZINC OXIDE INFUSED ★ CUTE AF".
• Features Grid: 3-column layout. Cards with white backgrounds, thick borders, and hard shadows. Icons: Shield (Physical Block), Sun (Smart Ink), Droplets (Waterproof).
• "How It Works" Split Section:
  • Background: Hot Pink. Text: White.
  • Left side: Large photo frame with a model image.
  • Right side: Steps 01, 02, 03 (Peel, Stick, Play). Large typography.
• Reviews: 3-column grid of user testimonials. Include star ratings and social handles (e.g., "@chloeglows").
• Footer / CTA:
  • Black background, Yellow text.
  • Huge typography: "HOTSPOTS PACK".
  • Large "Add to Cart - $18" button.
  • Social links at the bottom.

4. Key Functionalities

• Gemini AI Chatbot ("Hotbot"):
  • Implement a floating chat widget in the bottom right.
  • Use the @google/genai SDK.
  • Persona: A helpful, slang-using Gen-Z assistant.
  • System Instruction: "You are Hotbot. Promote Hotspots patches. Use terms like 'slay', 'bestie', 'no cap'. Educate on UV safety."
  • UI: The chat window must match the brutalist aesthetic (thick borders, sharp shadows).
• Interactive Sun Patch Component: Create a React component rendering an SVG star/sun shape that accepts an onClick to change fill color.