Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to promote a service that offers free credits or benefits to users. The main purpose of the landing page is to attract potential customers through clear messaging and a straightforward user experience, encouraging them to take action, such as signing up or learning more about the credits offered.

## CORE FEATURES
1. **Hero Section**: A captivating hero section with a headline, subheadline, and a prominent call-to-action (CTA) button that invites users to learn more or sign up for free credits.
2. **Features Overview**: A section that highlights the key benefits of the service, using concise descriptions and icons to visually represent each feature.
3. **Testimonials**: An area for user testimonials that builds trust and credibility, showcasing positive experiences from existing users.
4. **FAQ Section**: A frequently asked questions section that addresses common inquiries about the service, enhancing user understanding and reducing barriers to sign-up.
5. **Contact Form**: A simple contact form for users to reach out for more information or support, ensuring easy communication.
6. **Footer**: A footer with links to privacy policy, terms of service, and social media channels to provide users with additional resources and connections.

## 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, maintaining generous spacing between elements for clarity and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (if needed for managing global state)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui for UI components.
2. **Create the Hero Section**: Build the hero section with a catchy headline and a CTA button styled with the primary color and border radius.
3. **Develop the Features Overview**: Create a section for features, using Tailwind CSS to style each feature card with appropriate spacing and typography.
4. **Add Testimonials**: Implement a testimonials section, utilizing card components to display user feedback effectively.
5. **Include the FAQ Section**: Set up an FAQ section with collapsible answers for better user engagement.
6. **Build the Contact Form**: Create a contact form that captures user information and inquiries, styled to match the minimalist design.
7. **Design the Footer**: Add a footer with relevant links and social media icons.
8. **Ensure Responsiveness**: Use Tailwind CSS utilities to ensure the layout is responsive across different devices.
9. **Test and Optimize**: Conduct thorough testing for usability and performance, making adjustments as necessary.

## USER EXPERIENCE
Users will land on a clean and inviting page that instantly communicates the benefits of the service. The straightforward navigation allows them to quickly explore features, read testimonials, and find answers to their questions without feeling overwhelmed. The prominent CTA encourages users to engage further, whether by signing up or contacting for more information. The responsive design ensures a seamless experience across all devices, making it easy for users to access information and take action.