Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to showcase a specific product or service. The main purpose is to attract visitors with clean design and engaging motion elements, enhancing user interaction while maintaining a focus on simplicity and conversion.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction with a captivating headline, subheadline, and a prominent call-to-action button that encourages users to engage immediately.
2. **Features Showcase**: A section dedicated to highlighting key features or benefits of the product/service with brief descriptions and engaging visuals to maintain user interest.
3. **Testimonials**: A segment featuring user reviews or testimonials that build trust and credibility, presented in a visually engaging format.
4. **Call-to-Action (CTA)**: Multiple strategically placed CTA buttons throughout the page to encourage user sign-ups or inquiries.
5. **Contact Information**: A simple and clear contact section with a form for inquiries or a direct contact method, ensuring easy communication for potential customers.

## 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 features a single-column structure with a fixed header, followed by the hero section, features showcase, testimonials, CTA, and contact information. Elements should be spaced evenly to promote readability and focus.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Structure**: Implement the main layout using a single-column structure, ensuring that each section is clearly defined.
3. **Develop Hero Section**: Design the hero section with a large headline, subheadline, and a prominent CTA button styled with the primary color.
4. **Build Features Showcase**: Create a grid or list layout to display the key features, ensuring each feature is visually distinct and easy to read.
5. **Add Testimonials Section**: Implement a slider or grid display for testimonials, incorporating motion effects for transitions.
6. **Implement CTA and Contact Section**: Design multiple CTA buttons and a contact form at the bottom of the page, ensuring accessibility and responsiveness.
7. **Integrate Motion Effects**: Add subtle animations to sections as they enter the viewport to enhance user engagement and provide a dynamic feel.
8. **Test and Optimize**: Ensure the landing page is responsive across different devices and browsers, optimizing performance and load times.

## USER EXPERIENCE
Users will first encounter a clean and engaging hero section, prompting them to explore further. They will scroll down to discover features and testimonials, with clear navigation and CTAs that guide them toward taking action. The minimalist design ensures that users are not overwhelmed, and the motion elements draw attention without being distracting, creating a seamless and enjoyable experience.