Prompt:
Act as an expert frontend developer and UI/UX designer. Build a modern, premium Direct-to-Consumer (DTC) landing page for a product called Gütbar using React, Tailwind CSS, Framer Motion, and Lucide React icons.
Product Overview:
Gütbar is a functional fiber snack bar containing 15g of fiber (over 50% of the daily recommended intake). It uses a specific blend of natural fiber sources (psyllium husk, chicory root inulin, and resistant starch) to avoid digestive chaos. It is positioned as a delicious functional snack that competes with top protein bars, featuring clean labels and great macros.
Design System & Theme:
- Colors:
- Background: Warm cream (#FDFBF7)
- Text: Dark chocolate brown (#2D1B14)
- Accent: Natural leaf green (#4A8B51)
- Typography:
- Headings: 'Outfit' (Google Font) - use heavy weights (black/bold), tight tracking, and uppercase styling for a bold, modern look.
- Body: 'Inter' (Google Font) - clean and highly legible.
- Vibe: Premium, appetizing, trustworthy, and highly polished. Use rounded corners (rounded-3xl for cards, rounded-full for buttons) and subtle borders.
Page Structure & Requirements:
- Global Setup:
- Import the fonts from Google Fonts in the CSS.
- Set the global background to #FDFBF7 and text to #2D1B14.
- Set the text selection color to the green accent.
- Sticky Navigation:
- Glassmorphism effect (blurred background with slight transparency).
- Left: Logo "GÜTBAR" with a green period at the end.
- Center: Links (Benefits, The Blend, Flavors).
- Right: "Shop Now" button with a shopping bag icon.
- Hero Section:
- Split 50/50 layout.
- Left Side:
- A small pill-shaped badge reading "Over 50% Daily Fiber" with an Activity icon.
- Massive headline: "The Gut Bar." (make "Gut" green).
- Subheadline: "15g of fiber in one ridiculously delicious snack. Zero digestive chaos. Macros that don't embarrass you."
- CTA Button: "Claim Your Trial" with a right arrow.
- Social Proof: 5 green stars and text "10,000+ Happy Guts".
- Right Side:
- Infinite Marquee:
- A full-width dark brown (#2D1B14) strip with cream text.
- Use Framer Motion to infinitely scroll the text: "Clean Label • No Weird Fillers • Perfect Macros •".
- "The Blend" Section (Ingredients):
- White background.
- Centered header: "Because The Blend Matters." (make "Blend" green).
- A 3-column grid of cards with a cream background (#FDFBF7).
- Card 1: Psyllium Husk (The gold standard for soluble fiber...).
- Card 2: Chicory Root Inulin (A powerful prebiotic that feeds good bacteria...).
- Card 3: Resistant Starch (The secret weapon for steady energy...).
- Include a ShieldCheck icon on each card.
- Flavors Section:
- Dark brown background (#2D1B14) with cream text.
- Header: "Engineered to Compete." alongside a "Build Your Box" button.
- A 4-column grid of square cards for the flavors. Give each card a unique, appetizing background color:
- Chocolate Peanut Butter (Orange/Brown: bg-[#D97736])
- Salted Caramel Crunch (Caramel: bg-[#F2A65A])
- Lemon Poppy Seed (Yellow: bg-[#F4D068])
- Dark Chocolate Almond (Deep Brown: bg-[#4A2B23])
- Add hover effects where an arrow appears and the card lifts up slightly.
- Footer CTA:
- Large section with the green accent (#4A8B51) as the background.
- Use the product image (https://i.ibb.co/LqC6QCn/Gemini-Generated-Image-xyur0kxyur0kxyur.png) as a faint, low-opacity background overlay (mix-blend-overlay).
- Centered text: "Ready to fix your gut?" and "Join thousands of others who have made Gütbar their daily functional snack."
- Dark brown "Get Started Today" button.
- Simple Footer:
- Cream background.
- Logo, basic links (Privacy, Terms, Contact), and copyright text.
Animations:
Use framer-motion to add entrance animations (fade up, scale in) as the user scrolls down the page, and ensure the floating badge in the hero section bobs up and down smoothly.
