Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to sell a product while promoting various social media accounts. The primary goal is to create a visually appealing and user-friendly interface that guides visitors toward making a purchase and engaging with the brand on social media.

## CORE FEATURES
1. **Hero Section**: An engaging hero section with a strong call-to-action (CTA) for product purchase and links to social media accounts.
2. **Product Showcase**: A detailed section highlighting the product features, benefits, and high-quality images to attract potential customers.
3. **Social Media Links**: Prominent icons that link to the brand's social media profiles, encouraging visitors to connect and follow.
4. **Customer Testimonials**: A section featuring reviews or testimonials from satisfied customers to build trust and credibility.
5. **Contact Form**: An easy-to-use contact form for inquiries, allowing users to reach out with questions or feedback.
6. **Footer**: A consistent footer with navigation links, social media icons, and copyright information.

## 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 sections stacked vertically, including a hero section at the top, followed by product showcase, testimonials, social media links, and the contact form, all designed to flow seamlessly.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page, as it focuses on static content and form handling.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS following the official documentation.
2. **Create Components**: Develop separate components for the Hero, Product Showcase, Testimonials, Social Media Links, Contact Form, and Footer.
3. **Implement Layout**: Use CSS Grid or Flexbox to create a responsive layout that adapts to various screen sizes while maintaining the minimalist design.
4. **Style Components**: Apply Tailwind CSS classes to each component to ensure proper spacing, colors, and typography according to the design specifications.
5. **Add Functionality**: Implement the contact form functionality using React hooks to handle form submissions and integrate with a backend service if necessary.
6. **Test Responsiveness**: Ensure the landing page is fully responsive, testing on different devices to verify that all elements display correctly.

## USER EXPERIENCE
The landing page will provide a smooth and engaging experience, starting with a captivating hero section that draws users in. As visitors scroll, they will encounter a well-organized product showcase that clearly communicates the product's value. The layout will encourage exploration of social media profiles, with easy navigation to the contact form for inquiries. The minimalist design will enhance usability, ensuring that users can interact with the page without distractions, leading to higher conversion rates.