A high-end, luxury e-commerce experience inspired by Avant Garde. This project features a sophisticated dark-themed aesthetic, premium typography, and fluid animations using React, Tailwind CSS v4, and Framer Motion.
- Premium UI/UX: Dark-themed luxury design with gold accents (#c9a96e).
- Smooth Animations: Parallax heroes, staggered reveals, and fluid page transitions powered by Framer Motion.
- Product Catalog: Comprehensive listing of Men's, Women's, and Leather Goods collections.
- Cash on Delivery (COD): Exclusively configured for COD payment methodology to suit local market requirements.
- Dynamic Cart Management: A sliding cart drawer with quantity controls and persistent storage.
- Responsive Design: Fully optimized for mobile, tablet, and desktop viewports.
- Context-driven Architecture: State management handled via React Context API.
- Frontend: React 19, TypeScript
- Styling: Tailwind CSS v4 (using
@tailwindcss/vite) - Animations: Framer Motion
- Routing: React Router DOM 7
- Icons: Lucide React
- Build Tool: Vite 7
- Node.js (v18 or higher)
- npm or pnpm
-
Clone the repository:
git clone https://github.com/umair-aziz025/avantgarde_clone.git
-
Navigate to the project directory:
cd avant-garde -
Install dependencies:
npm install
-
Start the development server:
npm run dev
src/components: Reusable UI elements (Navbar, Footer, ProductCard, etc.)src/pages: Main view components (Home, Collection, Product, Checkout)src/data: Product database and helper functions.src/context: Global state (Cart, Theme).src/index.css: Tailwind theme and custom animation variables.
This project is for educational and portfolio purposes. Initial design credits go to Avant Garde.
Crafted with ❤️ by umair-aziz025