Lovable Prompt Creator - AI Prompt Generator

- ## APPLICATION OVERVIEW
This project is a landing page for "U K Mens Wear," a streetwear shop located in Melker, Bantwal - D.K. The landing page will showcase the shop's offerings such as t-shirts, hoodies, baggy jeans, and linen shirts, with a focus on engaging animations and a minimalist design. The goal is to attract customers and drive conversions through a visually appealing and user-friendly interface.

## CORE FEATURES
1. **Hero Section**: A captivating hero section featuring an animated video background showcasing various clothing items and a strong call-to-action button.
2. **Product Categories**: Sections for different product categories (hoodies, t-shirts, etc.) that link to respective pages with detailed views of each product.
3. **Featured Products**: Highlight a selection of best-selling items with images and quick links to view more details.
4. **Contact Information**: A dedicated section for contact methods, including links to Instagram, WhatsApp, and an email form.
5. **Animated Transitions**: Smooth animations for category transitions and hover effects to enhance user engagement.

## 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**: The layout will consist of a full-width hero section at the top, followed by product categories in a grid format, a featured products section, and a contact information section at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified as the landing page does not require complex state management.

## IMPLEMENTATION STEPS
1. **Set Up React Environment**: Initialize a new React project with TypeScript support.
2. **Install Tailwind CSS**: Configure Tailwind CSS for styling and ensure it integrates smoothly with the React setup.
3. **Create Components**: Develop reusable components for the hero section, product categories, featured products, and contact section.
4. **Implement Animations**: Use CSS animations or a library to add animated transitions between different sections of the page.
5. **Populate with Dummy Data**: Insert placeholder images and text for products, ensuring easy updates later.
6. **Test Responsiveness**: Ensure the layout is responsive across various devices and screen sizes.

## USER EXPERIENCE
Users will land on an animated hero section that immediately captures attention. They can navigate to product categories with smooth transitions, view detailed product pages, and quickly access contact information via social media links. The minimalist design ensures that users can easily focus on the products without distractions, enhancing the overall shopping experience.