Premium B2B E-commerce

Nazim Wholesale

🎯 Problem Solved: Premium wholesale platform with modern UI/UX that elevates brand perception through advanced animations. 💡 Technical Challenges: GSAP scroll-triggered animations create engaging micro-interactions. Glassmorphism design with backdrop blur and vibrant gradients. Dark/light theming via CSS custom properties for consistent brand colors. Type-safe component variants using Class Variance Authority (CVA). React 19 with latest concurrent features. 📈 Business Impact: Premium brand perception through modern animations, improved user engagement with smooth transitions, scalable component architecture for rapid feature development.

Vite 7 React 19 GSAP TailwindCSS React Router v7 Class Variance Authority CSS Custom Properties
🎯 The Problem

Wholesale business needed a premium digital presence that converts visitors through engaging design.

💡 The Solution

GSAP scroll-triggered animations with glassmorphism design. Dark/light theming via CSS custom properties. Type-safe component variants using Class Variance Authority.

📈 The Impact

Premium brand perception through modern animations. Improved user engagement with smooth transitions. Scalable component architecture.

💡 Technical Challenges Solved
  • 1

    GSAP scroll-triggered animations with stagger effects and smooth reveals

  • 2

    Glassmorphism design with backdrop-blur and gradient borders

  • 3

    Dark/light theme toggle with CSS custom properties and persistent state

  • 4

    Class Variance Authority for type-safe component variants

  • 5

    React Router v7 with loader patterns for data fetching

  • 6

    SVG brand icons with hover animations

  • 7

    Mobile-first responsive breakpoints

Technical Architecture

Frontend Stack

  • Vite 7 bundler
  • React 19
  • React Router v7
  • TailwindCSS
  • GSAP animations

Backend & Database

  • Static site (no backend)
  • JSON data files
  • Client-side state

Infrastructure

  • Vercel deployment
  • GitHub Actions
  • Asset optimization

📸 Screenshots

Hero with GSAP
Hero with GSAP 🖥️
Mobile View
Mobile View 📱
Shop Page
Shop Page 🖥️
Mobile Shop
Mobile Shop 📱
Dark Mode
Dark Mode 🖥️
Light Mode
Light Mode 🖥️

🚀 Use the buttons above to explore: Full Technical Details