A premium, motion-driven frontend luxury e-commerce UI/UX concept store. Built using Next.js (App Router), Tailwind CSS, and Framer Motion, this project serves as a modern design showcase featuring high-end layouts, smooth transitions, and responsive visual interfaces.
- Live Frontend Demo: https://cabex.vercel.app/
- Repository: https://github.com/AbdulhadiDeveloper/cabex.git
- Framer Motion Integration: Uses smooth, hardware-accelerated transitions, fade-in orchestrations, and hover-state transformations to mimic the experience of browsing a physical high-end boutique.
- Scroll-Triggered Layouts: Incorporates subtle reveal animations on product listings and image grids to draw focus without impacting browsing performance.
- Bento Grid Architecture: Clean, modular bento-style product blocks that organize collections, limited drops, and product cards into balanced, visually appealing configurations.
- Responsive Fluidity: Designed with a mobile-first approach, adapting flawlessly to high-DPI desktop screens, tablets, and mobile devices.
- Modular Codebase: Highly decoupled component structure (e.g.,
ProductCard,BentoTile, UI wrappers) designed for easy future integration with a backend CMS or headless commerce API (like Shopify or Sanity).
- Core Framework: Next.js (App Router, React)
- Styling: Tailwind CSS (configured with dark-mode support and custom luxury-brand color palettes)
- Animations: Framer Motion
- Icons: Lucide React
Since this is a dedicated frontend presentation, no database setup or third-party API configuration is required to run the interface locally.
git clone https://github.com/AbdulhadiDeveloper/cabex.git
cd cabex