Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to promote a service or product with a focus on conversion and user engagement. It features a clean, minimalist aesthetic that emphasizes typography and user-friendly navigation, ensuring that visitors can easily understand the offering and take action.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction that captures the visitor's attention with a compelling headline, a brief description, and a prominent call-to-action (CTA) button.
2. **Features Showcase**: A section that highlights the key benefits or features of the service/product, presented in a visually appealing format that encourages scrolling.
3. **Testimonials**: A dedicated area for customer testimonials to build trust and credibility, featuring real feedback from users.
4. **Call-to-Action (CTA)**: A strategically placed CTA that prompts users to take the next step, such as signing up, contacting, or purchasing.
5. **Contact Information**: A simple contact form or details to allow potential customers to reach out easily.
6. **Footer**: Includes links to social media, privacy policy, and terms of service, enhancing the overall credibility of the page.

## 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 for a straightforward navigation experience, ensuring all essential information is accessible without overwhelming the user.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this static landing page, but can use React Context if needed for form handling.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Tailwind CSS**: Set up Tailwind CSS in your project by creating the necessary configuration files and including it in your main CSS file.
3. **Create Components**:
   - Develop a `Hero` component with a headline, description, and CTA button.
   - Build a `Features` component that visually displays the key features of the service/product.
   - Implement a `Testimonials` component to showcase user experiences.
   - Create a `Contact` form component to gather user inquiries.
   - Design a `Footer` component with relevant links.
4. **Style Components**: Apply Tailwind CSS classes to style each component according to the design specifications, ensuring to use the specified primary color and typography.
5. **Testing**: Conduct usability testing to ensure the page is intuitive and that all links and forms work correctly.
6. **Deployment**: Deploy the landing page to a hosting service (like Vercel or Netlify) for public access.

## USER EXPERIENCE
Users will arrive at the landing page and immediately be drawn to the hero section, where they can quickly grasp the value proposition. Scrolling down, they will encounter the features and testimonials, which provide further information and build trust. The clear CTA encourages users to engage, and the contact form facilitates easy communication. The minimalist design ensures that users are not distracted, keeping their focus on the content and actions available to them. The responsive design allows for an optimal experience across devices, ensuring accessibility and usability.