Juice-Website-3D 🍊🍋🍈

Animated 3D citrus storefront with scroll-driven transitions — Next.js 14 + React + Tailwind

Welcome to the future of juice storefronts. Experience the freshest 3D citrus sensations right in your browser. This project showcases smooth scroll-driven transitions, 3D interactive fruit modules, and modern web design techniques.

Features ✨

• 3D Scroll Animations: Seamless transitions powered by Framer Motion and CSS 3D transforms.
• Interactive Flavor Selector: Choose your citrus blast (Orange, Lime, Lemon) and watch the scene dynamically adapt.
• Vibrant Color Palette: A carefully curated citrus theme:
  • Citrus Orange: #FF7A00
  • Lime Green: #A8E063
  • Lemon Yellow: #FFD23F
  • Crisp White: #FFFFFF
• Responsive Design: Looks amazing on desktop and mobile.
• App Router Layout: Modern Next.js 14 routing with app/ structure.

Tech Stack 🛠️

• Framework: Next.js 14 (App Router)
• UI Library: React 18
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Language: TypeScript

Folder Structure 📂

Juice-Website-3D/
├── app/                  # Next.js 14 App Router 
│   ├── globals.css       # Global styles & 3D CSS utilities
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Landing page
├── components/           # React components
│   ├── Navbar.tsx        # Navigation bar
│   └── ProductShowcase.tsx # Main 3D interactive module
├── public/               # Static assets (3D fruit images)
├── lib/                  # Utilities (if any)
└── tailwind.config.ts    # Tailwind configuration

Setup & Installation 🚀

1. Clone the repository:

   git clone https://github.com/yourusername/Juice-Website-3D.git
   cd Juice-Website-3D

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:3000

License 📜

This project is licensed under the MIT License.