Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to showcase a brand or service with a focus on clean aesthetics and user engagement. The primary goal of the landing page is to highlight core features, provide a clear call-to-action, and facilitate user contact, all while maintaining a simple and elegant design.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a captivating headline, subheading, and a prominent call-to-action button.
2. **Features Overview**: A section that highlights 3-4 key features of the service or product, using icons and brief descriptions for clarity.
3. **Testimonials**: A dedicated area for user testimonials to build trust and credibility, featuring quotes and user images.
4. **Call to Action (CTA)**: A clear and compelling CTA section encouraging visitors to sign up, learn more, or get in touch.
5. **Contact Form**: A simple contact form for inquiries, including fields for name, email, and message, ensuring easy communication with potential customers.

## 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-column layout with sections stacked vertically to maintain simplicity and ease of navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this landing page but can be implemented if dynamic behavior is needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Configure Tailwind CSS**: Set up Tailwind by creating a configuration file and importing styles in the main CSS file.
4. **Create Components**:
   - Develop the Hero Section component with headline, subheading, and CTA button.
   - Create a Features component that maps over an array of features to dynamically display them.
   - Build a Testimonials component that showcases quotes and user images.
   - Implement the CTA section with a call-to-action button that links to the contact form.
   - Design a Contact Form component that includes validation for user inputs.
5. **Style Components**: Use Tailwind CSS classes to ensure a consistent minimalist design across all components.
6. **Test Responsiveness**: Ensure that the landing page is fully responsive across various devices and screen sizes.

## USER EXPERIENCE
Key user interactions include smooth scrolling through sections, easy navigation with clear CTAs, and a straightforward contact form process. Users should feel engaged from the moment they land on the page, with intuitive prompts guiding them to learn more about the product or service offered. The minimalist design ensures that distractions are minimal, allowing users to focus on the content and their next actions.