Step into the studio of Alex, a visionary developer who transforms lines of code into a breathtaking 3D digital showroom. This story captures the intersection of high-end luxury and cutting-edge technology as a new world of immersive shopping is born.
You are a senior full-stack developer and advanced UI/UX designer specializing in 3D immersive web experiences, spatial interfaces, and modern aesthetic design (claymorphism + glassmorphism + WebGL). Build a COMPLETE, production-ready 3D immersive eCommerce website inspired by a premium beauty brand (similar in structure to sharahair.co.za, but NOT a copy). The experience must feel interactive, futuristic, and visually rich, as if the user is navigating a 3D digital showroom. 🔧 TECH STACK REQUIREMENTS: HTML5 CSS3 (claymorphism + glassmorphism + depth layering) JavaScript: Vanilla JS Three.js (REQUIRED for 3D scenes and interactions) GSAP (for smooth animations and transitions) Bootstrap 5 (layout + responsiveness) PHP (modular structure) MySQL (database) 🌐 CORE EXPERIENCE (3D IMMERSIVE DESIGN): Transform the website into a 3D interactive environment, not just a flat page Use Three.js to create: Floating product cards in 3D space Interactive camera movement (orbit, scroll-based navigation) Depth-based UI layers Sections should feel like rooms or zones in a virtual store: Hero = entrance scene Products = showroom/gallery Testimonials = floating cards in space Add parallax + perspective effects for depth realism Include subtle particle systems or floating elements for atmosphere 🎨 DESIGN STYLE: Hybrid of: Claymorphism (soft UI elements) Glassmorphism (transparency + blur) 3D spatial design Soft luxury palette: Nude, beige, blush, white Gold highlights Strong emphasis on: Lighting (simulate light sources in 3D) Shadows and depth Smooth transitions between sections 🧩 STRUCTURE REQUIREMENTS: 1. HEADER (PHP include) Transparent/glass navbar Logo + navigation (Home, Shop, Collections, Blog, Contact) Cart icon (floating or minimal) Sticky with blur + animation on scroll 2. HERO SECTION (3D SCENE) Fullscreen Three.js scene Floating beauty products or abstract shapes Animated headline (GSAP) CTA button (Shop Now) Camera subtly moves with mouse or scroll 3. PRODUCT SHOWROOM (3D GRID / SPACE) Products displayed as: Floating cards OR 3D panels Hover interaction: Rotate / zoom / glow Data pulled dynamically from database Add-to-cart (PHP session-based) 4. SPECIAL OFFERS ZONE 3D banners or rotating panels Animated discount cards Highlight promotions visually 5. TESTIMONIALS (FLOATING CAROUSEL) Cards floating in 3D space Auto-rotating or draggable Smooth GSAP transitions 6. BLOG SECTION Cards arranged in layered depth Pulled from database 7. FOOTER (PHP include) Glass-style footer Contact info Social icons Newsletter form 🧠 BACKEND REQUIREMENTS: MySQL database with: products categories users orders blog_posts PHP OOP structure: Database class Product class (CRUD) User authentication (basic, student-level) Cart system (session-based) ⚙️ ADMIN DASHBOARD (IMPORTANT ADDITION): Create a clean, modern admin dashboard with: FEATURES: Admin login system Dashboard overview (stats: products, orders, users) Product management: Add / Edit / Delete products Category management Order management Blog post management DESIGN: Minimal + glassmorphism UI Sidebar navigation Cards for stats Tables for data Smooth transitions 🎞️ ANIMATION REQUIREMENTS: GSAP animations: Scroll-triggered reveals Smooth section transitions 3D animations: Floating objects Rotation on hover Micro-interactions: Buttons (scale, glow) Cards (lift, tilt) 🎨 CLAYMORPHISM + 3D CSS REQUIREMENTS: Soft multi-layer shadows Rounded corners (20px+) Subtle gradients Depth illusion using: transform: translateZ perspective Consistent light source simulation 📱 RESPONSIVENESS: Fully responsive: Mobile (simplified 3D or fallback to 2D) Tablet Desktop (full 3D experience) Use Bootstrap grid + custom CSS 📁 FILE STRUCTURE: /assets /css /js /images /3d (models, textures) /includes header.php footer.php db.php /classes /pages /admin index.php style.css script.js 📦 OUTPUT FORMAT: Full file structure Database SQL schema Complete code for each file Clear frontend/backend separation ⚠️ IMPORTANT: Do NOT copy any existing website Build a unique 3D immersive experience Focus heavily on visual depth + interaction Code must be: Clean Modular Student-level but impressive 🎯 FINAL GOAL: A 3D immersive, interactive beauty eCommerce website with: Spatial UI (Three.js-powered) Smooth animations (GSAP) Claymorphism + glassmorphism styling Functional PHP backend + MySQL database Full admin dashboard
