Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is focused on creating a professional landing page for an app that showcases unique UI components while embracing a minimalist design approach. The main purpose of the landing page is to generate interest and drive conversions by highlighting the app's key features and benefits.

## CORE FEATURES
1. **Hero Section**: A visually engaging hero section that includes a brief tagline, a call-to-action button, and an eye-catching image or illustration to draw users in.
2. **Features Overview**: A section that outlines the app's main features using visually distinct cards or icons that succinctly describe each feature.
3. **Testimonials**: A section dedicated to user testimonials to build credibility and trust, showcasing quotes from satisfied users along with their names and images.
4. **Call-to-Action (CTA)**: Repeated CTAs throughout the page encouraging visitors to sign up or download the app, strategically placed for maximum visibility.
5. **Contact Information**: A simple contact form or section that allows users to reach out for more information or support.
6. **FAQ Section**: A section addressing common questions or concerns users may have about the app, enhancing user engagement and reducing friction.

## 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 a single-page scrolling design, with sections stacked vertically. The hero section should be at the top, followed by features, testimonials, CTA, and the contact section.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for pre-built components.
- **State Management**: Use React Context or Zustand if needed for managing global state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to your project.
3. **Create Components**: Develop reusable components for the hero section, features, testimonials, CTA, and contact form.
4. **Implement Routing**: If necessary, set up routing for potential future pages using React Router.
5. **Style Components**: Use Tailwind CSS classes to style each component according to the design specifications.
6. **Add Interactivity**: Implement any necessary interactive elements, such as the contact form submission.
7. **Optimize for Mobile**: Ensure the landing page is fully responsive and provides a seamless experience across devices.
8. **Test and Deploy**: Thoroughly test the landing page for bugs and usability, then deploy using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
The landing page should provide a smooth user experience with intuitive navigation. Users will be greeted by a striking hero section that encourages immediate action. As they scroll, they will encounter engaging visuals and clear information about the app's features, supported by testimonials that reinforce trust. The CTA will be strategically repeated, ensuring users can easily take the next steps towards engagement, such as signing up or reaching out for more information. The overall experience should feel cohesive, professional, and tailored to attract and retain user interest.