Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive e-commerce web application for a premium Indian spice brand, designed to provide a highly interactive and visually stunning online shopping experience. The application showcases a rich blend of traditional Indian heritage and modern web design trends, targeting customers who appreciate quality spices and a premium shopping experience.

## CORE FEATURES
1. **Home Page**: Featuring a hero banner with a parallax effect, a "Bestsellers" horizontal scrolling marquee, and a "Heritage/Source" story section using glassmorphism overlays, along with a dynamic footer.
2. **Shop Page**: A masonry or precise CSS grid layout displaying all products. Each product card includes high-quality images and accurate descriptions with descriptive alt tags.
3. **Product Detail Page (PDP)**: A split-screen layout showcasing the selected spice with a pinned image on one side and scrollable details, including accordion menus for "Origin," "Flavor Profile," and "Usage," on the other.
4. **Floating Cart/Checkout**: A glassmorphism slide-out drawer from the right, allowing for smooth addition and removal of items with animations using Framer Motion.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless user experience across various devices.
6. **Animations and Transitions**: Incorporating elegant animations using GSAP and Framer Motion for scroll effects, page transitions, and interactive elements.

## 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, followed by a grid system for the shop page, and a split layout for the product detail page. Elements will utilize glassmorphism effects to enhance visual depth and engagement.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context or a state management library like Redux if complex state management is necessary.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new Next.js project with TypeScript and Tailwind CSS configured.
2. **Install Dependencies**: Add necessary libraries, including Framer Motion for animations, GSAP for scroll effects, and Lucide React for icons.
3. **Design Components**: Start building modular React components for the header, footer, product cards, and other UI elements, ensuring they adhere to the design specifications.
4. **Implement Routing**: Set up routing for the home, shop, and product detail pages using Next.js.
5. **Add Animations**: Integrate Framer Motion and GSAP for animations in the hero section, scrolling effects, and page transitions.
6. **Create the Shop Page**: Implement the grid layout for products, ensuring each card meets the specified image and alt tag requirements.
7. **Develop the Product Detail Page**: Create the split-screen design with pinned images and accordion menus for product details.
8. **Implement the Floating Cart**: Build the slide-out cart with smooth animations for adding and removing items.
9. **Test Responsiveness**: Ensure the application works smoothly across different devices and resolutions.
10. **Deploy the Application**: Prepare the application for deployment on a platform like Vercel or Netlify.

## USER EXPERIENCE
The user journey starts at the home page with an engaging hero section that draws users in with animation and visuals. Users can easily navigate to the shop page, where they interact with a visually appealing grid of products. On clicking a product, they are taken to the product detail page, where they can learn more about the spice and add it to their cart. The checkout process is seamless with the floating cart feature, maintaining a consistent and delightful experience throughout their shopping journey.