Mozing - Premium Artisanal Chocolate Landing Page

A beautiful, modern landing page for Mozing, India's Premier European Style Bean to Bar Chocolate Experience. Built with Next.js, TypeScript, Tailwind CSS, and Framer Motion for stunning animations.

🍫 Features

• Responsive Design: Fully responsive across all devices
• Beautiful Animations: Smooth scroll animations and hover effects using Framer Motion
• Modern UI: Clean, elegant design with chocolate-themed color palette
• SEO Optimized: Proper meta tags, Open Graph, and structured data
• Performance: Optimized for fast loading and smooth interactions
• Accessibility: WCAG compliant with proper semantic HTML

🎨 Design Sections

1. Header Navigation: Fixed header with logo, navigation links, and action icons
2. Hero Section: Eye-catching hero with animated chocolate imagery
3. Brand Story: Company story with cocoa bean imagery
4. Chocolate Tempering: Art of chocolate making showcase
5. Collections: Product categories (Bars/Barks, New Arrivals, Gift Collection)
6. Product Categories: Interactive list of chocolate products
7. Social Media: Instagram integration and press mentions
8. Press Coverage: Media outlet logos and recognition
9. Footer: Contact information, links, and social media

🚀 Getting Started

Prerequisites

• Node.js 18.17.0 or higher
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <repository-url>
cd mozimo

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Build for Production

npm run build
npm start

🛠️ Tech Stack

• Framework: Next.js 15.4.4
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Fonts: Inter (Google Fonts)

📁 Project Structure

src/
├── app/
│   ├── globals.css          # Global styles and custom animations
│   ├── layout.tsx           # Root layout with metadata
│   └── page.tsx             # Main landing page
├── components/
│   ├── Button.tsx           # Reusable button component
│   ├── Footer.tsx           # Footer component
│   ├── Header.tsx           # Header navigation component
│   └── Section.tsx          # Section wrapper component

🎨 Color Palette

The design uses a warm chocolate-themed color palette:

• Dark Chocolate: #3C2A21
• Medium Chocolate: #8B4513
• Light Chocolate: #D2691E
• Chocolate Cream: #F5E6D3
• Chocolate Gold: #DAA520
• Chocolate Copper: #CD7F32

🔧 Customization

Adding Real Images

Replace the placeholder emoji elements with actual images:

1. Add your images to the public/ directory
2. Import and use Next.js Image component
3. Replace emoji placeholders with actual image components

Updating Content

• Edit text content in the respective component files
• Update contact information in Footer.tsx
• Modify brand colors in globals.css

Adding New Sections

1. Create new components in src/components/
2. Import and use the Section component for consistent styling
3. Add animations using Framer Motion

📱 Responsive Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• DigitalOcean App Platform
• Railway

📄 License

This project is created for Mozing Chocolate. All rights reserved.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📞 Contact

For questions or support, contact Mozing Chocolate:

• Phone: 0172-4054514
• Address: SCO 8, Inner Market, 9.D. Sector 9, Chandigarh, 160009