Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page that aims to replicate the aesthetic and functionality of Wondergut while incorporating a distinct color palette and minimalist design principles. The primary goal is to showcase the brand's offerings, highlight limited edition products, and drive user engagement through effective call-to-action elements.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a headline, subheadline, and a prominent call-to-action button inviting users to explore the limited edition products.
2. **Product Showcase**: An area dedicated to displaying featured products with images, descriptions, and "Limited Edition" badges to create urgency.
3. **Testimonials Section**: A section featuring quotes from satisfied customers to build trust and credibility.
4. **Call-to-Action (CTA)**: Multiple strategically placed buttons throughout the page to encourage users to take action, such as "Shop Now" or "Learn More."
5. **Contact Information**: A footer or dedicated contact section allowing users to reach out for inquiries or support.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design with ample white space, ensuring a focus on the content and typography.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability and visual comfort.
- **Layout**: Single-page layout with sections stacked vertically, including a full-width hero at the top, followed by product showcases, testimonials, CTAs, and contact information.
- **Typography**: Utilize a modern sans-serif font for headings and body text to maintain clarity and consistency, ensuring a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and scalable component development.
- **Styling**: Tailwind CSS for utility-first styling that allows for rapid design adjustments.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: React's built-in state management or a lightweight library like Zustand if needed for handling user interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**: Develop reusable components for the hero section, product showcase, testimonials, and footer.
3. **Implement Styling**: Apply Tailwind CSS classes to achieve the desired minimalist look, utilizing the specified color palette.
4. **Add Content**: Populate the components with relevant text, images, and product data, ensuring alignment with the brand identity.
5. **Set Up Responsive Design**: Ensure the layout and components are responsive for various screen sizes using Tailwind's responsive utilities.
6. **Testing**: Conduct thorough testing for functionality and user experience, making adjustments as necessary.

## USER EXPERIENCE
Key user interactions include engaging with the hero section through the main CTA button, exploring featured products with "Limited Edition" badges, reading customer testimonials for social proof, and easily accessing contact information for support. The design prioritizes simplicity and clarity, guiding users seamlessly through the landing page to encourage conversions.