Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project revolves around creating a landing page designed to increase traffic and sales for a business. The site will showcase key offerings, highlight benefits, and provide clear calls to action to convert visitors into customers. The focus will be on a clean and minimalist aesthetic that enhances user experience and engagement.

## CORE FEATURES
1. **Hero Section**: A visually captivating introduction that clearly states the business's value proposition with a prominent call-to-action button.
2. **Features Overview**: A section highlighting the main services or products offered, presented in an easily digestible format with icons or images.
3. **Testimonials**: A section displaying customer reviews to build trust and credibility, enhancing the persuasive power of the landing page.
4. **Call to Action (CTA)**: Strategically placed CTAs throughout the page to encourage visitors to take action, such as signing up or making a purchase.
5. **Contact Form**: A simple contact form allowing visitors to reach out for more information or inquiries, enhancing engagement and lead generation.
6. **Analytics Integration**: Basic setup for tracking visitor behavior and conversions using tools like Google Analytics to measure the effectiveness of the landing 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-page layout with a fixed navigation bar at the top, smooth scrolling to sections, and a mobile-responsive design that adapts to different screen sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for pre-built UI components that ensure consistency and speed up development.
- **State Management**: Not required for a simple landing page, but consider local state management for handling form submissions.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create the layout**: Implement the main layout structure with a fixed navigation bar. Set up smooth scrolling to each section.
3. **Develop the Hero Section**: Design the hero section with a compelling headline, subheadline, and a primary CTA button styled with the primary color.
4. **Add Features Overview**: Create a features section that includes icons or images with brief descriptions, utilizing Tailwind CSS for styling.
5. **Implement Testimonials**: Design a testimonials section with customer quotes, ensuring it is visually distinct and engaging.
6. **Set up the Contact Form**: Create a contact form with input fields styled according to the design specifications, ensuring proper validation.
7. **Integrate Analytics**: Add Google Analytics tracking to monitor visitor interactions and conversions.

## USER EXPERIENCE
The landing page should provide a seamless user experience through intuitive navigation and clear calls to action. Visitors should easily understand the value proposition and be encouraged to interact with the page. The design will prioritize readability and responsiveness, ensuring that all elements are accessible on various devices, with smooth transitions and quick load times to maintain user engagement.