Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to serve as a high-converting sales page. Its main purpose is to effectively showcase products or services while emphasizing clean design and user-friendly navigation to maximize conversions.

## CORE FEATURES
1. **Hero Section**: A prominent, eye-catching hero section at the top featuring a compelling headline, subheadline, and a clear call-to-action button.
2. **Product/Service Showcase**: A dedicated area to highlight the key features and benefits of the product or service with minimal text and high-quality visuals.
3. **Testimonials Section**: A section for user testimonials that builds trust and credibility, presented in a clean layout with ample white space.
4. **FAQ Section**: A straightforward FAQ area to address common questions, enhancing user confidence and reducing hesitation.
5. **Contact Form**: A simple contact form for inquiries, designed for easy accessibility and quick submissions.
6. **Footer Navigation**: A minimalist footer with essential links and social media icons, maintaining the clean aesthetic.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design prioritizes a clean, simple aesthetic with abundant white space, focusing on clear typography and minimal distractions.
- **Color Mode**: Light theme featuring dark text on light backgrounds, ensuring high readability and a fresh look.
- **Layout**: The layout follows a single-column structure for mobile responsiveness, with sections stacked vertically. Key sections include the hero area, product showcase, testimonials, FAQ, contact form, and footer.
- **Typography**: Use modern sans-serif fonts like Inter or Helvetica for headings and body text. Headings should be bold and prominent, while body text remains legible with adequate spacing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust application structure and type safety.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design changes while maintaining a clean look.
- **UI Components**: Utilize shadcn/ui for ready-made components that fit the minimalist aesthetic.
- **State Management**: Integrate Zustand or React Context for managing application state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with Create React App and TypeScript. Install Tailwind CSS and shadcn/ui components.
2. **Create Component Structure**: Set up the main components for each section (Hero, Product Showcase, Testimonials, FAQ, Contact Form, Footer).
3. **Design Layout**: Implement the layout using Tailwind CSS classes for spacing, alignment, and typography to achieve a minimalist design.
4. **Integrate State Management**: If applicable, set up Zustand or React Context for managing the state of components like the contact form.
5. **Add Functionality**: Implement the logic for the contact form, ensuring it captures user inputs and validates them.
6. **Test Responsiveness**: Use media queries and Tailwind's responsive utilities to ensure the design looks great on all devices.
7. **Optimize for SEO**: Add meta tags and optimize headings to enhance search engine visibility.

## USER EXPERIENCE
Users will encounter a seamless experience starting from the hero section that captures attention with a strong call to action. As they scroll down, they will encounter well-structured content with clear sections that guide them through the product features, testimonials, and FAQs. The contact form will be easily accessible for inquiries, ensuring quick and straightforward communication. The minimalist design and light theme will create a pleasant browsing experience, encouraging conversions.