Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page for "Bel Drip," a clothing brand that focuses on affordable apparel with high-quality products and fast shipping, featuring free product photos with every order. The landing page aims to attract customers by showcasing the brand's strengths and providing an easy navigation experience.

## CORE FEATURES
1. **Hero Section**: A prominent introductory section that highlights the brand name, tagline, and a compelling call-to-action (CTA) button to encourage purchases.
2. **Quality Assurance**: A dedicated area that emphasizes the quality of the clothing, including testimonials or reviews from satisfied customers.
3. **Fast Shipping Information**: A section detailing the shipping process and speed, reinforcing the brand's commitment to quick delivery.
4. **Product Showcase**: A visually appealing gallery of featured products with high-quality images and brief descriptions.
5. **Free Product Photos**: Information highlighting the unique feature of offering free product photos for customers.
6. **Contact Form**: A simple contact form for inquiries, allowing visitors to easily reach out for more 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 a vertical stack of sections including the hero, features, testimonials, and contact form, ensuring a smooth scroll experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive design and quick styling.
- **UI Components**: shadcn/ui for reusable UI components.
- **State Management**: Not specified; can use React's built-in state management for simplicity.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components for styling.
3. **Create Layout Structure**: Develop the main components for the hero, features, testimonials, and contact sections.
4. **Design Components**: Utilize Tailwind CSS to style components following the specified design guidelines.
5. **Integrate Typography**: Import Inter font from Google Fonts and apply it to the headings and body text.
6. **Implement Responsive Design**: Ensure the layout is responsive for different devices, focusing on mobile-friendliness.
7. **Test Functionality**: Review all sections, ensuring links and CTAs work as intended.

## USER EXPERIENCE
Key user interactions will revolve around navigating the landing page smoothly. Users will be greeted by an eye-catching hero section and can easily scroll down to learn about product quality and shipping benefits. The product showcase will allow users to click through to view more details, while the contact form will provide a straightforward way for visitors to engage with the brand. The overall experience will emphasize ease of use and quick access to important information to drive conversions.