Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase the "Primal Resistance" contract with a focus on engaging visual storytelling through interactive elements. The landing page will guide users through a sequence of scenes that highlight the contract's features and benefits, ultimately leading to a call-to-action for potential users.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a large visual representation of the Primal Resistance theme, featuring engaging animations that draw users in.
2. **Interactive Scene Transitions**: Smooth transitions between scenes triggered by user scrolling, providing an immersive experience that visually narrates the contract's story.
3. **Bioavailability Dial**: An interactive component showcasing nutrient absorption data, comparing synthetic vs. ancestral metrics, enhancing user engagement with informative visuals.
4. **Magnetic CTA Button**: A visually appealing call-to-action button that interacts with user movements, encouraging clicks and conversions.
5. **Responsive Design**: Optimized for various devices to ensure a seamless experience across desktops, tablets, and mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout will consist of a full-screen hero section, followed by distinct scroll-triggered scenes, each visually engaging and containing interactive components.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but can utilize Context API or Zustand if needed.

## IMPLEMENTATION STEPS
1. **Scaffold the Application**: Initialize a Next.js or Vite template with Tailwind CSS configured using the color tokens specified.
2. **Create Scene Structure**: Develop five sections in HTML, each representing a different scene, using the `min-h-screen` class to ensure full-screen height.
3. **Mount the WebGL Canvas**: Attach the `Experience.js` file to a full-screen canvas positioned behind the scrolling HTML markup.
4. **Bind the Scroll Timeline**: Use GSAP's ScrollTrigger to synchronize the camera movement with the scroll position, creating a seamless experience between scenes.
5. **Implement Interactive Components**: Integrate the `BioavailabilityDial` in Scene 3 and the `MagneticButton` in Scene 5 to encourage user interaction.
6. **Add Accessibility Features**: Include reduced-motion fallbacks to ensure accessibility for users with motion sensitivities.
7. **Test Responsiveness**: Ensure the landing page is responsive across various devices, with all elements functioning as intended.

## USER EXPERIENCE
Users will begin their journey on the landing page with an attention-grabbing hero section. As they scroll, they will experience a dynamic transition through various scenes that showcase the benefits of the Primal Resistance contract through engaging visuals and animations. The interactive Bioavailability Dial will provide users with valuable insights, while the Magnetic CTA will encourage them to take action, ensuring a delightful and informative experience throughout their visit.