Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to promote a product effectively. The primary goal is to showcase the product's features and benefits while guiding visitors towards a clear call to action (CTA). The minimalist design will ensure a clean and focused user experience, maximizing engagement and conversion rates.

## CORE FEATURES
1. **Hero Section**: A striking introductory area that highlights the product with an attention-grabbing headline, an engaging image, and a prominent CTA button.
2. **Features Overview**: A section dedicated to detailing the key features of the product, presented in a concise format with illustrative icons or images.
3. **Testimonials**: A section that includes customer testimonials to build credibility and trust, showcasing positive experiences with the product.
4. **Call to Action**: Clear and compelling CTA buttons throughout the page to encourage users to take the next step, whether it’s signing up, purchasing, or learning more.
5. **Contact Information**: A section providing users with ways to get in touch for inquiries or support, ensuring accessibility and responsiveness.

## 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 should be structured into clear sections: Hero, Features, Testimonials, CTA, and Contact, with a single-column format that stacks content vertically for easy readability on all devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page, but can utilize React's built-in state for any interactive elements.

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for UI components.
3. **Configure Tailwind CSS**: Set up Tailwind CSS in the project by creating a configuration file and including it in the CSS entry point.
4. **Create Component Structure**: Build the main components: Hero, Features, Testimonials, Call to Action, and Contact.
5. **Implement Responsive Design**: Use Tailwind's utility classes to ensure all sections are responsive and visually appealing on different screen sizes.
6. **Add Inter Font**: Import Inter font from Google Fonts and apply it to the appropriate text elements.
7. **Style Components**: Use Tailwind CSS to apply the specified primary color, border radius, and layout structure to all components.
8. **Finalize and Test**: Review the page layout, test responsiveness, and ensure all links and CTAs function correctly before deployment.

## USER EXPERIENCE
Users will be greeted with a clean hero section that immediately captures their attention. As they scroll down, they will encounter well-organized sections that succinctly present product features, accompanied by visuals to enhance understanding. Testimonials will provide social proof, and clear CTAs will guide users to take desired actions. The minimalist design will ensure that users can navigate the page effortlessly, focusing on the product without distractions.