Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to showcase a brand or service. Its primary purpose is to engage visitors with a clean, simple design while providing essential information and clear calls to action.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a strong headline, subheadline, and a prominent call-to-action button to encourage user interaction.
2. **Features Section**: Highlight key features or offerings in a visually appealing format, using icons and brief descriptions to convey value.
3. **Testimonials**: A section to showcase customer testimonials or feedback, enhancing credibility and trust.
4. **Call to Action (CTA)**: A strategically placed CTA encouraging users to take the next step, such as signing up or contacting the business.
5. **Contact Form**: A simple contact form allowing users to easily reach out for inquiries or support.

## 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**: The main layout structure includes a full-width hero section at the top, followed by a grid layout for features, a dedicated testimonials area, a prominent CTA section, and a contact form at the bottom.

## 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 Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Folder Structure**: Organize components into a structured folder layout (e.g., `components`, `pages`, `styles`).
4. **Build the Hero Section**: Create a `Hero` component with a headline, subheadline, and CTA button styled with Tailwind CSS.
5. **Develop Features Section**: Create a `Features` component displaying features in a grid format, utilizing icons and brief descriptions.
6. **Implement Testimonials**: Create a `Testimonials` component to display customer feedback, using a simple carousel or grid layout.
7. **Add CTA Section**: Design a clear and engaging `CTA` component that stands out visually.
8. **Create Contact Form**: Develop a `ContactForm` component with fields for user input and a submit button.
9. **Style the Application**: Use Tailwind CSS to apply the defined visual styles throughout the application, ensuring responsiveness.
10. **Test and Optimize**: Ensure the landing page functions smoothly across different devices and browsers, optimizing load times and performance.

## USER EXPERIENCE
The landing page is designed for intuitive navigation and interaction. Users will be greeted by a visually appealing hero section that invites them to explore further. As they scroll down, they will encounter clearly defined sections highlighting features and testimonials, culminating in a straightforward contact form. Each element is designed to guide the user toward the CTA, ensuring a seamless and engaging experience.