A fully responsive bakery website with a complete shopping experience

---

Tech Stack

---

Features

Product Catalog 15 handcrafted cakes across 5 categories Category filtering with animated tab switching Product cards with tags, descriptions & pricing Staggered entrance animations on filter change Shopping Cart Slide-in sidebar with overlay backdrop Add / remove items with quantity controls Clear Cart button Animated badge with item count Persistent via localStorage	Multi-Step Checkout 4-step wizard — Summary → Delivery → Payment → Success In-page modal and standalone page Demo payment with auto-formatting Visual step indicator with progress states Order Confirmation Email — Gmail mailto: with full order details WhatsApp — Pre-filled wa.me message PDF Receipt — Branded download via jsPDF
Order History All past orders saved to localStorage Order cards with thumbnails & status badges View Details modal with full breakdown Re-order — one-click cart restoration Download PDF for any past order	Animations & Effects Blob morphing hero background Floating emoji decorations Swiper 3D creative transitions Scroll-reveal via IntersectionObserver Cart item slide-out removal Glassmorphism sticky header

---

Project Structure

Cake-Website-Demo/
├── 📄 index.html           → Main landing page & shop
├── 📄 checkout.html        → Standalone checkout page
├── 📄 orders.html          → Order history page
│
├── 📁 css/
│   ├── 🎨 styles.css       → Main styles (hero, sections, cart, nav)
│   ├── 🎨 checkout.css     → Checkout & confirmation styles
│   └── 🎨 orders.css       → Order history page styles
│
├── 📁 js/
│   ├── ⚡ main.js           → Homepage (products, cart, modal checkout)
│   ├── ⚡ checkout.js       → Checkout page logic + PDF generation
│   └── ⚡ orders.js         → Order history + PDF generation
│
└── 📁 assets/
    ├── 🖼️ common/           → Favicon, logos, blobs, stickers
    ├── 🖼️ home/             → Hero images, balloons, carousel
    ├── 🖼️ about/            → About section images
    ├── 🖼️ products/         → 15 cake product images
    └── 🖼️ new-cakes/        → New creations carousel images

---

Responsive Design

Breakpoint	Layout
< 500px	Single column, hamburger nav
500px	2-column product grid
860px	3-column product grid
960px	Hero + About side-by-side
1100px+	Auto-fill product grid, full nav

Mobile-First  ·  clamp() Typography  ·  100dvh Heights  ·  CSS Custom Properties

---

Getting Started

# 1. Clone the repository
git clone https://github.com/ayushnandi718-dev/Cake-Website-Demo.git

# 2. Open in browser
cd Cake-Website-Demo
start index.html      # Windows
# open index.html     # macOS

No build tools, no server, no dependencies required. Just open index.html.

---

Upcoming Updates

Priority	Feature	Description
🔴	Backend Integration	Node.js/Express API with MongoDB for real order management
🔴	User Authentication	Sign up / login with email or social accounts
🔴	Payment Gateway	Stripe / Razorpay integration for real payments
🟠	Admin Dashboard	Manage products, view orders, update status
🟠	Order Tracking	Real-time delivery status updates
🟠	Email Notifications	Automated order confirmation & delivery emails
🟡	Wishlist	Save favorite cakes for later
🟡	Search & Sort	Name/category search with price & popularity sort
🟡	Product Reviews	Customer ratings and feedback
🟡	Coupon System	Promo codes at checkout
🟢	Image Lightbox	Full-screen product image gallery
🟢	Multi-language	Hindi and English toggle
🟢	PWA Support	Offline access & installable app
🟢	Performance	Lazy loading, code splitting, optimization
🟢	Unit Tests	Jest tests for cart & checkout logic

---

Color Palette

---

Made with by Ayush Nandi