Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW  
The "Mood Thrift Archive" is a modern e-commerce web application designed for Gen Z consumers, specializing in curated vintage and streetwear thrift fashion. This platform allows users to explore clothing items that embody various moods and aesthetic vibes, providing a shopping experience that feels personal and emotionally resonant.

## BRAND IDENTITY
Add a strong brand identity section with logo, tagline, and a short “about the brand” description explaining Mood Thrift Archive as a curated Gen Z fashion archive.

## CORE FEATURES  
1. **Product Grid:** A visually appealing layout showcasing fashion items with aesthetic images, names, mood tags, prices, and short emotional descriptions. Ensure all product names follow a consistent aesthetic naming style and feel like part of one cohesive curated collection (Gen Z thrift fashion naming style, lowercase, emotional, aesthetic).
2. **Add to Cart Functionality:** Users can easily add or remove items from their cart, with a live total price calculation displayed.
3. **Mood and Style Filters:** Customers can filter products by mood (e.g., nostalgic, chill, sad, happy, energetic) and style (e.g., vintage, streetwear, preloved).
4. **Product Story Popups:** Optional popups that provide short emotional thrift stories for each item, enhancing the user connection to the product. Ensure the product dataset is large and diverse, including clothing, shoes, and accessories such as hoodies, t-shirts, jackets, jeans, sneakers, boots, caps, beanies, bags, and minimal jewelry.

Each product must include a short emotional “story popup” written in a Gen Z aesthetic tone, making the item feel personal, nostalgic, and connected to mood-based experiences. The story should feel like a TikTok/Instagram caption with casual, emotional, lowercase writing and relatable expressions.
5. **Customer Reviews Section:** A casual, relatable section featuring Gen Z styled reviews complete with emojis and slang to engage users.
6. **Responsive Design:** A mobile-first approach that ensures all features are accessible and visually appealing on any device.
7. **Clickable Instagram Link:** Add a clickable Instagram button or footer link that redirects users to https://instagram.com/moodthriftarchive when clicked. The link should be clearly visible and styled as a social media call-to-action. Style the Instagram link as a modern social button with hover effects and icon, placed in the footer and also optionally in the header.

## 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 clean homepage featuring a header, subtitle, product grid, testimonials section, and a cart sidebar that slides in smoothly. The design will include glassmorphism cards with subtle blur effects and a dark aesthetic theme with soft neon and muted vintage tones.

## TECHNICAL REQUIREMENTS  
- **Framework:** React with TypeScript  
- **Styling:** Tailwind CSS  
- **UI Components:** shadcn/ui  
- **State Management:** Use React’s built-in state management or consider Zustand for global state if needed.

## IMPLEMENTATION STEPS  
1. **Setup Project:** Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling and UI components.
2. **Create Layout Components:** Develop the main layout structure including the header, footer, and product grid components.
3. **Implement Product Grid:** Fetch and display products using the predefined dataset. Ensure each product card includes the required elements (image, name, mood tag, price, description, and button).
4. **Add Filtering Functionality:** Implement filtering options for mood and style, allowing users to easily navigate through the product offerings.
5. **Cart Functionality:** Create the cart sidebar that allows users to add or remove items, with a live total price calculation.
6. **Integrate Customer Reviews:** Design and implement the testimonials section using casual, Gen Z language and emojis to resonate with the target audience.
7. **Responsive Design:** Test the application on various screen sizes to ensure a seamless user experience, adapting the layout and navigation accordingly.
8. **Polish and Optimize:** Add animations for transitions, hover effects, and ensure the overall experience is smooth and aesthetically pleasing.

## USER EXPERIENCE  
Users will be greeted with a clean homepage displaying the brand's ethos through emotional and aesthetic visuals. The navigation will be intuitive, allowing users to filter products and view details easily. The cart drawer will slide in smoothly, providing a seamless checkout experience. Customer reviews will foster community and emotional connection, while each product's story enhances the shopping experience, making it feel like a curated journey through a thrift fashion archive. 

This application will not only serve as an e-commerce platform but also as a vibrant space for self-expression through fashion.