Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to showcase a product or service with a clean, simple interface. It aims to engage visitors through effective visual elements and clear calls-to-action, guiding them toward conversion.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area with a captivating headline and a brief description of the product or service, along with a primary call-to-action button.
2. **Features Section**: A concise overview of key features offered, displayed in a visually appealing layout to highlight benefits and functionality.
3. **Testimonials**: User feedback and success stories presented in a visually engaging format to build trust and credibility.
4. **Call to Action (CTA)**: A clear and compelling prompt for users to take action, such as signing up or contacting for more information.
5. **Contact Information**: A simple contact form allowing users to reach out easily, encouraging interaction and inquiries.
6. **Responsive Design**: Ensures that the landing page is optimized for all devices, providing a seamless experience across desktops, tablets, and mobile 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**: The layout consists of a top navigation bar, followed by the hero section, features section, testimonials, a prominent CTA area, and the contact form at the bottom. Each section should be clearly defined and visually distinct, utilizing ample white space for a clean appearance.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
   ```bash
   npx create-react-app my-landing-page --template typescript
   ```
2. **Install Tailwind CSS**: Follow Tailwind CSS installation guidelines to set it up in your React project.
   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```
3. **Configure Tailwind**: Update `tailwind.config.js` with the provided content and theme specifications.
4. **Create Components**: Build individual components for the hero section, features, testimonials, CTA, and contact form.
5. **Styling**: Apply Tailwind CSS classes according to the design specifications, ensuring adherence to the minimalist aesthetic.
6. **Deploy**: Use a hosting service like Vercel or Netlify to publish your landing page.

## USER EXPERIENCE
Users will arrive at the landing page and be greeted by the hero section, which contains a clear message and a call-to-action button. As they scroll down, they'll encounter the features section that highlights product benefits. Next, testimonials will reinforce credibility, followed by a strong CTA prompting users to engage further. Finally, the contact form will allow users to reach out easily, ensuring a smooth and inviting experience throughout their visit. The responsive design will adapt seamlessly to various screen sizes, maintaining usability and visual appeal.