Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a mobile-first, high-converting DTC e-commerce store designed specifically for ZARRIS Hair Fiber Powder, targeting men and women experiencing hair thinning. The store will feature a clean, minimalist design to enhance user experience and drive conversions, optimized for traffic from social media platforms like TikTok and Instagram.

## CORE FEATURES
1. **Hero Section**: Featuring a compelling headline (“Instantly Transform Thinning Hair”) and subheadline that highlights the product’s benefits.
2. **Product Page**: Includes a before/after slider, UGC video section, customer reviews, color selector, and bundle pricing options.
3. **Conversion Features**: Sticky add-to-cart bar, live purchase notifications, review carousel, and transformation section to boost engagement and sales.
4. **Checkout Optimization**: Integration of express checkout options (Apple Pay, Google Pay, Shop Pay) alongside standard payment methods for a seamless checkout experience.
5. **FAQ and Contact**: Dedicated sections for customer inquiries and support to enhance user trust and satisfaction.
6. **Social Proof**: Displays customer ratings and testimonials to establish credibility and encourage purchasing decisions.

## 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**: A single-page layout with a hero section at the top, followed by product details, customer reviews, FAQ, and contact information, ensuring a straightforward flow for users.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API (if needed for state management).

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Design Layout**: Create the main structure of the landing page using Tailwind CSS for styling. Ensure the layout aligns with the minimalist design principles.
3. **Implement Hero Section**: Add the hero section with the headline and subheadline, styled according to the design specifications.
4. **Create Product Page**: Develop the product details section incorporating the before/after slider, UGC video, and customer reviews.
5. **Add Conversion Features**: Implement sticky add-to-cart functionality, live notifications, and review carousel.
6. **Optimize Checkout**: Set up payment options and ensure a smooth checkout process, integrating express checkout buttons.
7. **Build FAQ and Contact Sections**: Add sections for customer support and frequently asked questions to enhance user experience.
8. **Test and Deploy**: Conduct thorough testing for responsiveness and user interaction before deploying the application.

## USER EXPERIENCE
Users will interact with the site by first being drawn in by the hero section, encouraging them to explore the product offerings. The product page will allow them to view details, watch videos, read reviews, and select color options. The streamlined checkout process will facilitate quick purchases, while the FAQ and contact sections will provide reassurance and support, enhancing overall customer satisfaction. A focus on social proof will help build trust and increase conversion rates.