Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a stunning 3D animated e-commerce website for Grads Store, specializing in luxurious academic dress, medical attire, law dress, and accessories. The primary goal is to create an engaging online shopping experience that captivates users through interactive product presentations and a unique parallax scrolling layout.

## CORE FEATURES
1. **3D Product Display**: Showcase products with interactive 3D animations that allow users to view items from various angles, enhancing the shopping experience.
2. **Parallax Scrolling**: Implement a parallax effect to create depth as users scroll, making the browsing experience visually appealing and immersive.
3. **Hidden Navigation**: Utilize a hidden navigation style that reveals options upon user interaction, maintaining a clean interface while enhancing discoverability.
4. **Category Showcase**: Highlight various product categories (academic, medical, law) with distinct sections that guide users through the offerings.
5. **Add to Cart Functionality**: Enable users to easily add items to their cart, with a smooth transition that maintains the 3D effect.
6. **Responsive Design**: Ensure a seamless experience across devices, adapting the layout and interactive elements for both desktop and mobile users.

## 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 main layout will feature a full-width hero section, followed by parallax scrolling sections for each product category, and a footer with contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or a simple state management library like Zustand.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a React project with TypeScript, install Tailwind CSS, and configure shadcn/ui for UI components.
2. **Design Layout**: Create the main layout with a hero section at the top, followed by parallax sections for each product category.
3. **Implement 3D Product Display**: Use a library like React Three Fiber to integrate 3D models for the products.
4. **Develop Interactive Features**: Implement the hidden navigation and add to cart functionality ensuring smooth animations.
5. **Style Components**: Use Tailwind CSS to apply the minimalist design specifications, including the primary color and typography.
6. **Test Responsiveness**: Ensure the design adapts seamlessly across various devices, adjusting the interactive elements as necessary.

## USER EXPERIENCE
Users will be greeted by a visually striking hero section that captures their attention immediately. As they scroll, the parallax effect will guide them through different product categories, with each product displayed using 3D animations that enhance engagement. The hidden navigation will allow users to explore categories without cluttering the interface, while the smooth add-to-cart functionality will facilitate easy shopping. The overall design will focus on simplicity and clarity, ensuring an enjoyable browsing experience that encourages discovery and conversion.