banjarabangali

byRaktim Adak

Build a complete, production-ready React single-page e-commerce website for "BanjaraBangali" — a premium Indian t-shirt brand. The brand logo is a golden ornate monogram on a navy blue background (provided as an image asset). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 BRAND & DESIGN SYSTEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Color Palette (CSS variables): --navy: #0D1B2A (primary background) --gold: #C9A84C (primary accent) --gold-light: #E8C96A (hover states) --cream: #F5EDD6 (text on dark) --charcoal: #1E2D3D (card backgrounds) --white: #FFFFFF Typography: - Display/Headings: "Cinzel Decorative" (Google Fonts) — regal, serif - Body: "Cormorant Garamond" — elegant, editorial - UI labels: "Montserrat" — clean, modern Overall Aesthetic: Dark luxury — think Armani meets Indian craftsmanship. Navy backgrounds, gold accents, slow cinematic animations, generous whitespace, subtle grain texture overlay. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🏗️ PAGE SECTIONS (all in one React SPA) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. STICKY NAVBAR - BanjaraBangali logo (left) - Nav links: Home | Collection | About | Contact - Cart icon with item count badge (gold) - Hamburger menu for mobile - Glass-morphism effect with blur backdrop on scroll 2. HERO SECTION (3D animated) - Full-viewport dark navy background - A large 3D rotating/floating t-shirt mockup (use Three.js or CSS 3D transforms with a flat t-shirt SVG/image that subtly rotates and floats) - Animated golden particle/dust effect in background - Headline: "Wear the Culture" in Cinzel Decorative - Subheadline in Cormorant Garamond - Two CTAs: "Shop Now" (gold filled) | "Our Story" (gold outline) - Scroll indicator with animated chevron 3. MARQUEE STRIP - Infinite scrolling horizontal ticker: "FREE SHIPPING ABOVE ₹999 ✦ HANDCRAFTED IN INDIA ✦ PREMIUM COTTON ✦ LIMITED EDITION DROPS ✦" - Gold text on slightly lighter navy band 4. COLLECTION GRID ("The Collection") - 6–9 product cards in a responsive 3-column grid - Each card: • T-shirt image (placeholder from picsum or unsplash with overlay) • Product name (Cinzel), price in ₹ • Size selector (XS S M L XL XXL) as pill buttons • Color swatches (3–4 color dots) • "Add to Cart" button with hover animation • Wishlist heart icon • On hover: card lifts with gold border glow + 3D tilt effect (CSS perspective transform on mousemove) 5. PRODUCT SPOTLIGHT / FEATURED (3D Section) - Full-width dark section - Left: 3D rotating t-shirt using Three.js PlaneGeometry with t-shirt texture, slow auto-rotate, mouse-drag to spin - Right: Product details, USPs (100% cotton, GSM rating, wash care), size guide button, "Order Now" CTA - Gold accent lines and decorative corner elements 6. BRAND STORY ("About BanjaraBangali") - Split layout: left = brand story text, right = collage / pattern visual - Animated number counters: "500+ Happy Customers", "20+ Designs", "100% Pure Cotton", "Made in India" - Founder quote in styled blockquote 7. TESTIMONIALS - Horizontal scroll / carousel of review cards - Star ratings (gold stars), customer name, review text - Auto-play with pause on hover - Subtle card glow effect 8. NEWSLETTER SIGNUP STRIP - "Join the BanjaraBangali Tribe" - Email input + Subscribe button - Promise text: "No spam. Only new drops & exclusive offers." 9. ORDER MODAL (triggered on "Order Now" / "Add to Cart" checkout) - Elegant modal with navy/gold theme - Form fields (all required): • Full Name • Phone Number • Email Address • Delivery Address (textarea) • City, State, PIN Code • Selected Product(s) + Size + Color + Quantity (auto-filled) • Special Instructions (optional) - "Place Order" button - On submit: send order email via EmailJS (service_id, template_id, public_key as config constants) - Email template should include ALL customer details + order items - Show success toast: "🎉 Order Placed! We'll contact you soon." - Show error toast on failure 10. SHOPPING CART SIDEBAR - Slides in from right - Lists added items with image, name, size, qty, price - Quantity +/– controls - Remove item button - Subtotal + "Proceed to Order" button (opens Order Modal) - Smooth slide animation 11. FOOTER - Logo + tagline - Links: Collection | About | Contact | Returns Policy | Size Guide - Social icons: Instagram, Facebook, WhatsApp (gold icons) - WhatsApp floating button (bottom-right, always visible) - "© 2025 BanjaraBangali. All rights reserved." - Made with ❤️ in India ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚡ FEATURES & INTERACTIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ State Management: - useState for cart items, modal state, selected options - useContext for global cart state Animations: - Page load: staggered fade-in of hero elements - Scroll reveal: sections animate in as user scrolls (use Intersection Observer API) - 3D card tilt: CSS perspective + JS mousemove on product cards - Three.js t-shirt: auto-rotate + drag-to-spin on featured section - Smooth modal open/close transitions - Gold shimmer effect on CTAs (CSS keyframe animation) - Particle/floating dust in hero (canvas or CSS) Email (EmailJS): - Install: emailjs-com - On order submit, send email to brand's Gmail - Email includes: customer name, phone, email, address, PIN, ordered items (name + size + color + qty + price), total - Config at top of file: const EMAILJS_SERVICE_ID = "YOUR_SERVICE_ID"; const EMAILJS_TEMPLATE_ID = "YOUR_TEMPLATE_ID"; const EMAILJS_PUBLIC_KEY = "YOUR_PUBLIC_KEY"; Performance: - Lazy load images - Smooth scroll behavior - Responsive: mobile-first, works on 320px–1440px+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🛠️ TECH STACK ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - React 18 (functional components + hooks) - Three.js (for 3D t-shirt viewer) - EmailJS (order notification emails) - Tailwind CSS utility classes OR pure CSS-in-JS / styled JSX - Google Fonts: Cinzel Decorative, Cormorant Garamond, Montserrat - Lucide React (icons) - No backend required — fully client-side ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📦 PRODUCT DATA (mock, in a JS array) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Include 6+ products like: { id, name, price, originalPrice, image, sizes[], colors[], description, badge ("New" | "Bestseller" | "Limited") } Use placeholder images from: https://picsum.photos/seed/{id}/400/500 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 DELIVERABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Single self-contained React JSX file. All components in one file. CSS via <style> tag or Tailwind. Fully functional: cart, order modal, email dispatch, 3D viewer. Premium dark luxury look — like a high-fashion Indian brand website. Mobile responsive. No broken layouts. No placeholder "lorem ipsum" where real copy should be.