Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project aims to create a vibrant landing page for "The Bronzeville Blend," a new business concept that focuses on offering 100% organic, tech-optimized fruit smoothies. This landing page will primarily serve to collect data on flavor preferences and price points from potential customers in the Bronzeville neighborhood, all while presenting a sophisticated urban-tech vibe.

## CORE FEATURES
1. **Hero Section**: A prominent headline with a subheadline to engage visitors, introducing the concept and inviting their input.
2. **Product Visual**: A designated area for a high-quality mockup image of the 'Signature Bronzeville Green Smoothie' in an eco-friendly bottle to visually attract users.
3. **Interactive Survey**: A three-question survey designed to gather insights on customer preferences regarding smoothie timing, must-have ingredients, and pricing.
4. **Validation Form**: A section for users to join the Early-Bird Founder’s List, offering a free smoothie to the first 50 sign-ups, enhancing user engagement and data collection.
5. **Mobile Responsiveness**: The layout will be fully responsive, ensuring a seamless user experience across devices.

## 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 layout will consist of a clear Hero Section at the top, followed by the Product Visual, the Lab Survey Section, and the Validation Form. Each section will be visually distinct yet cohesive, ensuring easy navigation and clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management or Context API for handling survey responses and form submissions.

## IMPLEMENTATION STEPS
1. **Set up React Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling components. Set up Tailwind by configuring `tailwind.config.js` and including it in your CSS.
3. **Create Components**: Build reusable components for the Hero Section, Product Visual, Survey, and Validation Form.
4. **Implement Survey Logic**: Create state variables to handle the survey responses and use controlled components for form inputs.
5. **Styling**: Apply Tailwind classes to each component, ensuring adherence to the design specifications.
6. **Responsive Design**: Use Tailwind's responsive utilities to ensure all components look great on both desktop and mobile devices.
7. **Testing**: Test the application thoroughly for usability and responsiveness.
8. **Deploy**: Deploy the landing page using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
The key user interactions will involve navigating through the Hero Section to learn about the smoothie concept, engaging with the interactive survey to provide feedback, and signing up via the Validation Form. The clean, minimalist design will ensure users can easily focus on each section without distractions, leading to higher engagement and participation in the survey. The mobile-responsive design will enhance accessibility, allowing users to interact with the page comfortably on any device.