Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Decokicks is a dynamic e-commerce landing page designed for a sneaker brand, providing a visually appealing and engaging experience for users to explore and purchase sneakers. The focus is on simplicity, conversion, and a seamless user experience.

## CORE FEATURES
1. **Hero Section**: A captivating splash screen featuring a countdown timer and orbiting product cards to grab attention immediately.
2. **Product Showcase**: A full-bleed hero product section that highlights featured sneakers with engaging images and compelling copy.
3. **Catalog Grid**: A masonry-styled product catalog displaying various sneaker options, allowing users to scroll through and find their favorites effortlessly.
4. **Editorial Section**: A visually impactful editorial section that provides context and storytelling around the brand and its products.
5. **Carousel Feature**: An interactive horizontal carousel showcasing multiple sneaker designs, providing users with easy navigation and selection.
6. **Single Product Detail Page**: A detailed view of each sneaker, including images, descriptions, pricing, and an option to buy directly.

## 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 is structured as a single, vertically stacked scrollable page with distinct sections for the hero, product showcase, catalog, editorial content, carousel, and product details.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management with hooks (useState, useRef, useEffect)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Vite and TypeScript.
2. **Install Dependencies**: Install Tailwind CSS, Framer Motion for animations, and lucide-react for icons.
3. **Configure Tailwind CSS**: Set up Tailwind with the Inter font and configure custom styles for buttons, cards, and inputs.
4. **Create Components**: Build reusable components for the navbar, footer, hero section, product cards, and carousel.
5. **Implement State Management**: Set up state variables for managing active products, the current slide in the carousel, and splash screen visibility.
6. **Design Layout**: Structure the main layout with a vertical scroll using Tailwind's utility classes to ensure responsiveness.
7. **Add Animations**: Use Framer Motion to animate transitions between sections and enhance user interactions.
8. **Test Responsiveness**: Ensure the application is mobile-friendly by testing on various screen sizes and adjusting styles as needed.
9. **Deploy the Application**: Use a hosting service like Vercel or Netlify for deployment.

## USER EXPERIENCE
Users will be greeted by an engaging hero section that draws them into the sneaker collection. As they scroll through the page, they can easily navigate between sections, view product details, and interact with the carousel to explore different sneaker designs. The simple yet effective layout ensures that users can find what they're looking for quickly, with clear calls to action guiding them towards making a purchase. The overall experience is designed to be fluid and visually appealing, encouraging users to explore more and engage with the brand.