Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Design a premium Shopify homepage for a one-product fashion brand named Adorella, showcasing the Adorella™ Mid-Low Rise Stretch Wide-Leg BBL Jeans. The primary purpose is to create a high-end, visually striking landing page that effectively tells the product's story, engages visitors, and drives conversions while embodying a modern direct-to-consumer fashion brand aesthetic.

## CORE FEATURES
1. **Hero Section**: Full-width lifestyle image or video with a bold headline and a subheadline highlighting the product's key benefit. Includes a primary CTA button ("Shop the Viral BBL Jeans") and trust elements like star ratings.
2. **Social Proof**: A minimal section displaying customer testimonials with review stars and photos, enhancing credibility and engagement.
3. **Viral/User-Generated Content (UGC) Section**: A grid layout featuring vertical style videos of real customers wearing the jeans, promoting authenticity and relatability.
4. **Before/After Comparison**: A visual side-by-side comparison demonstrating the fit improvement of Adorella jeans over typical jeans, enhancing the product's appeal.
5. **Product Benefits**: A section highlighting the key features of the jeans with concise statements, focusing on typography and minimal iconography.
6. **Customer Reviews**: User-generated content showcasing testimonials and photos in clean review cards, fostering a sense of community and trust.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a soft neutral palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds (white, off-white, light gray).
- **Layout**: Utilize a modern 12-column grid with large vertical spacing between sections, wide margins, and generous breathing room to create a structured and balanced appearance.
- **Typography**:
  - Heading font: **Helvetica Neue** (Large, bold for H1)
  - Body font: **Inter** (Clean, readable with comfortable line height)
  - Buttons: Minimal, rectangular with strong contrast.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a static landing page

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Develop reusable components for the hero section, social proof, UGC, product comparison, benefits, reviews, and FAQs.
3. **Implement Grid System**: Apply a 12-column grid layout using Tailwind CSS to ensure responsive design across devices.
4. **Add Typography**: Integrate the specified fonts and establish a hierarchy for headings and body text.
5. **Design Visual Elements**: Use high-quality lifestyle photography and videos, ensuring minimal iconography and a clean aesthetic.
6. **Add CTA Buttons**: Implement prominent, minimal buttons with clear calls to action throughout the page.
7. **Test Responsiveness**: Ensure mobile-first design principles are adhered to and that all elements scale appropriately on different screen sizes.
8. **Optimize for Performance**: Minimize image sizes and ensure fast loading times to enhance user experience.

## USER EXPERIENCE
The key user interactions include engaging with the hero section's CTA to shop the jeans, viewing social proof and UGC for authenticity, and easily navigating through product benefits and reviews. The accordion-style FAQ section allows users to quickly find answers to common queries, while the final CTA encourages users to make a purchase decision. The overall experience should feel seamless and visually appealing, with a focus on storytelling and minimal distractions.