Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page dedicated to showcasing a selection of athletic shoes. The main purpose is to attract potential customers with a minimalist design that highlights the products, features, and brand values, ultimately driving conversions through a clear call to action.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a prominent image of the featured athletic shoes, accompanied by a catchy tagline and a call-to-action button.
2. **Product Features**: A section showcasing key attributes of the shoes, such as comfort, performance, and style, presented with high-quality images and brief descriptions.
3. **Testimonials**: A section featuring customer reviews to build trust and credibility, with quotes and ratings to highlight positive experiences.
4. **Promotional Offers**: Highlight any ongoing promotions or special offers to entice visitors to make a purchase.
5. **Contact Information**: A simple contact form allowing users to reach out for queries, with essential fields like name, email, and message.
6. **Footer**: A comprehensive footer that includes links to social media, legal information, and other relevant pages.

## 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 a full-width hero image, followed by sections stacked vertically for features, testimonials, and a contact form, ensuring a smooth scrolling experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a landing page

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components to manage styles and UI elements.
3. **Create Components**: 
   - Build the Hero component with an image, tagline, and call-to-action button.
   - Develop the Features component to display product attributes with images.
   - Create the Testimonials component to showcase customer reviews.
   - Implement the Contact component with a form for user inquiries.
   - Design the Footer component for social media links and additional information.
4. **Style Components**: Use Tailwind CSS to apply styles, ensuring the primary color and typography specifications are followed.
5. **Optimize for Responsiveness**: Ensure that all components are responsive and look great on various screen sizes.
6. **Testing**: Test the landing page on multiple devices and browsers to ensure functionality and design integrity.
7. **Deployment**: Deploy the landing page using a service like Vercel or Netlify for easy hosting.

## USER EXPERIENCE
The user experience focuses on a smooth navigation flow where visitors can quickly access product information, read testimonials, and easily contact the business. The minimalist design ensures that users are not overwhelmed with information, making it easy for them to digest content and take action, such as clicking on promotional offers or filling out the contact form. The responsive design enhances usability across devices, providing a seamless experience whether on mobile or desktop.