Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a responsive landing page designed specifically for mobile and tablet users, ensuring a seamless experience across all devices. The focus will be on a clean, minimalist aesthetic that emphasizes usability and accessibility.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that captures attention, featuring a concise headline, a subheading, and a call-to-action (CTA) button.
2. **Features Showcase**: A section highlighting key features of the service or product, presented in a simple and engaging format with icons and brief descriptions.
3. **Testimonials**: A dedicated area for user reviews or testimonials, enhancing credibility and trust with potential users.
4. **Contact Form**: An easy-to-use contact form for inquiries, with fields for name, email, and message, designed for quick submissions.
5. **Responsive Design**: Optimized layout that adapts fluidly to different screen sizes, ensuring a great user experience on mobile, tablet, and desktop devices.

## 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 vertical scroll featuring distinct sections: Hero, Features, Testimonials, and Contact. Each section will be clearly separated with ample white space for clarity.

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

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize a new React application using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Structure**: Set up the main App component and create separate components for Hero, Features, Testimonials, and Contact.
4. **Implement Hero Section**: Design the Hero section with a catchy headline, subheading, and CTA button styled with the primary color.
5. **Develop Features Section**: Create a grid or list layout to display the features, ensuring each feature has an icon and a brief description.
6. **Add Testimonials Section**: Implement a simple carousel or grid to showcase user testimonials, styled appropriately.
7. **Build Contact Form**: Create a form component that includes input fields for user name, email, and message, ensuring it is easy to submit.
8. **Optimize for Mobile**: Use Tailwind CSS utilities to ensure all components are responsive and adapt to different screen sizes.

## USER EXPERIENCE
The landing page will provide users with a straightforward journey from the moment they land on the site. The Hero section will immediately grab attention, followed by a clear presentation of features that illustrate the value proposition. Testimonials will build trust, while the contact form offers an easy way for users to engage further. The overall experience will be smooth and intuitive, with fast load times and easy navigation, ensuring users can access the information they need effortlessly on any device.