Act as an expert frontend developer and UX/UI designer. I need you to build a premium, high-performance landing page for a sports nutrition brand named "JUICED".
Product Context:
JUICED makes premium workout sour strips. The core formula swaps Haribo's glucose syrup and gelatine for dextrose and rice syrup (identical glycemic index, cleaner label) plus fruit pectin instead of gelatine (making it vegan, same chew texture). Colour comes from natural extracts, not Red 40. Every 50g single-serve pouch delivers exactly 30g of fast-digesting carbs for precise, measurable fueling.
Tech Stack:
- React (Functional components)
- Tailwind CSS
- framer-motion (for scroll animations and infinite marquees)
- lucide-react (for iconography)
Design System & Aesthetic (Immersive UI):
- Background & Theme: Entire page should use a deep dark background (
#080808).
- Accent Color: Use a high-contrast 'Sour Neon Yellow' (
#DFFF00).
- Typography: Use
Helvetica Neue (or Inter) with tight tracking for display/headings, and a monospace font (like Courier New or JetBrains Mono) for data, labels, and small subheadings.
- Component Styling (Glassmorphism & Darkness): Use dark translucent backgrounds (
rgba(255, 255, 255, 0.03)) with very faint white borders (rgba(255, 255, 255, 0.1)) for cards. Overlaying badges should use heavy styling (e.g., bg-black/60 and backdrop-blur-[10px]) mixed with sharp neon yellow accents.
- Image Treatment: Any imagery should have a slight contrast boost (
contrast-[1.1]) and brightness reduction (brightness-[0.9]) to sink into the dark background naturally. Do not use gradients to fade out the image.
Section-by-Section Requirements:
- Navigation:
Fixed at the top with
mix-blend-difference. Include a bold logo ("JUICED"), center links (The Science, Macros, Shop), and a hollow neon-yellow "Order Now" button.
- Hero Section (Split Layout):
- Left side: Monospace subhead ("Premium Workout Sour Strips"), massive bold main headline ("All The Pump. None of the Junk." - with the second half in the neon accent color), paragraph description, and two CTA buttons (one neon outline, one subtle gray outline). Include subtle Framer Motion entrance animations.
- Right side: Include this specific hero image:
https://i.ibb.co/v4h1BWVB/Half-Baked-Newsletter-April-16th-1.jpg. Give it a 4/5 aspect ratio. Floating on the corners of the image, overlap two glassmorphic "Data Badges":
- Bottom-left frosted badge: "Serving Size" (12px Mono) / "50G" (48px Sans)
- Top-right solid neon badge: "Fast Carbs" (10px Mono) / "30G" (24px Sans)
- Infinite Marquee:
Use Framer Motion to create a seamless infinite scrolling bar. Background should be faint translucent gray. Text should alternate between "The Formula of Champions" and "Precision Macros" separated by Lucide icons (
Activity, Zap).
- The Math (Macros Section):
- Left: Massive typography reading "The Math", explaining that carb intake needs to be precise. Include large 50g and 30g callout numbers with left-aligned border accents.
- Right: A frosted card that looks like a high-tech nutrition panel. Show three progress bars for macros:
- Carbohydrates (30g) - An animated neon yellow bar filling up to 100%, with a glowing drop shadow.
- Fat (0g) - Empty gray bar.
- Protein (0g) - Empty gray bar.
- The Formula (Bento Grid):
A grid of 3 translucent cards showcasing the value props. Each card needs a Lucide icon inside a dark frosted square, a bold title, a paragraph, and a bottom monospace tag.
- Card 1 (Identical Glycemic Response): Icon
Zap, tag "Dextrose + Rice Syrup".
- Card 2 (100% Vegan Chew): Icon
Leaf, tag "Fruit Pectin".
- Card 3 (No Chemistry Set): Icon
ShieldBan, tag "Natural Extracts Only".
- Footer / Bottom CTA:
Centered layout with immense typography ("Get Juiced."), a short paragraph, and a large neon-outlined CTA button. End with a simple copyright/legal footer at the very bottom.