159 lines
4.1 KiB
Markdown
159 lines
4.1 KiB
Markdown
# 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:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd mozimo
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Run the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. Open [http://localhost:3000](http://localhost:3000) in your browser
|
|
|
|
### Build for Production
|
|
|
|
```bash
|
|
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
|
|
|
|
---
|
|
|
|
Made with ❤️ for Mozing Chocolate
|