Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
FONT MR2 is a minimalist e-commerce landing page designed to showcase a clothing store. The main purpose of this landing page is to attract customers with a large hero image, followed by product categories, and to provide a seamless shopping experience while maintaining a clean and visually appealing design.

## CORE FEATURES
1. **Hero Section**: A large, eye-catching image at the top of the page that represents the brand and sets the tone for the website.
2. **Product Categories**: Sections displaying various clothing categories, allowing users to easily navigate to their interests.
3. **Featured Products**: Showcase of selected items with images, brief descriptions, and prices to entice shoppers.
4. **Call to Action (CTA)**: Buttons encouraging users to explore collections or shop now, prominently displayed throughout the page.
5. **Responsive Design**: Ensures that the landing page looks great on all devices, from desktops to smartphones.
6. **Contact Information**: A simple footer section with contact details, creating a connection point for customer inquiries.

## 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 vertically structured layout beginning with a large hero image, followed by sections for product categories and individual products, maintaining consistent spacing and alignment throughout.

## 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 display.

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Tailwind CSS**: Follow the official Tailwind CSS installation guide to integrate it into the React project.
3. **Create the component structure**:
   - Develop the Hero component for the top section of the landing page.
   - Create a ProductCategories component to display different clothing categories.
   - Implement a FeaturedProducts component to showcase selected items.
   - Design a simple Footer component for contact information.
4. **Add styling with Tailwind CSS**: Ensure all components adhere to the specified design standards, using the primary color and typography settings.
5. **Test responsive design**: Use media queries and responsive utility classes from Tailwind CSS to ensure the layout functions well across different screen sizes.
6. **Deploy the landing page**: Use a service like Vercel or Netlify to host the completed landing page.

## USER EXPERIENCE
Users will land on the FONT MR2 website and immediately be greeted by a stunning hero image that captures the essence of the clothing brand. They can easily navigate through the product categories to find what they are looking for. Clear CTAs will guide them toward featured products, and the minimalistic design will provide a stress-free browsing experience. The contact information in the footer will ensure users can reach out for any inquiries, enhancing overall customer satisfaction.