voguenest

byVaibhav Patel

Create a modern, premium, fully responsive **clothing e-commerce website** called **“VogueNest”**. ### Overall Design * Clean, modern fashion-brand aesthetic * Premium look similar to modern fashion e-commerce websites * Minimal UI with plenty of whitespace * Use a sophisticated color palette: black, white, beige, and subtle gray * High-quality fashion/product imagery * Smooth hover effects and subtle animations * Mobile-first responsive design * Make the website look production-ready, not like a template ### Pages #### 1. Home Page Create: * Sticky navigation bar * Logo: VogueNest * Navigation links: * Home * Men * Women * Kids * New Arrivals * Sale * Search icon * Wishlist icon * Shopping cart icon * User/account icon Hero section: * Large fashion banner * Headline: “Style That Defines You” * Subtitle: “Discover the latest trends in fashion.” * Buttons: * Shop Men * Shop Women Add sections: * New Arrivals * Trending Products * Best Sellers * Men's Collection * Women's Collection * Limited Time Sale * Customer Reviews * Newsletter subscription * Footer #### 2. Product Listing Page Create a professional product catalog. Features: * Product grid * Product image * Product name * Brand * Rating * Price * Discounted price * Discount percentage * Wishlist button * Quick View button * Add to Cart button Filters: * Category * Gender * Size * Color * Price range * Brand * Rating Sorting: * Recommended * Newest * Price: Low to High * Price: High to Low * Top Rated Include pagination or infinite scrolling. #### 3. Product Details Page Create a detailed product page containing: * Large product image gallery * Multiple product images * Product name * Brand * Star rating * Number of reviews * Original price * Discounted price * Discount percentage * Product description * Available colors * Available sizes: XS, S, M, L, XL, XXL * Size guide * Quantity selector * Add to Cart * Buy Now * Add to Wishlist Also include: * Product specifications * Material information * Shipping information * Return policy * Customer reviews * Related products * Recently viewed products #### 4. Shopping Cart Create a complete cart page with: * Product image * Product name * Selected size * Selected color * Quantity controls * Product price * Remove item * Wishlist/move to wishlist * Subtotal * Discount * Shipping * Tax * Final total Buttons: * Continue Shopping * Proceed to Checkout #### 5. Checkout Page Create a clean multi-step checkout: Step 1: Shipping Address * Full name * Phone number * Address * City * State * ZIP/PIN code * Country Step 2: Delivery Method * Standard Delivery * Express Delivery Step 3: Payment * Credit/Debit Card * UPI * Cash on Delivery * Wallet Step 4: Order Review Show: * Products * Address * Delivery method * Payment method * Order total Add a prominent “Place Order” button. #### 6. Login / Signup Create authentication screens. Login: * Email * Password * Remember me * Forgot password * Login button Signup: * Name * Email * Phone * Password * Confirm password * Create Account Also include: * Google login * Password visibility toggle #### 7. User Profile Create a customer dashboard with: * Profile information * Edit profile * My Orders * Wishlist * Saved Addresses * Payment Methods * Change Password * Logout #### 8. Orders Page Display: * Order ID * Order date * Products * Total amount * Payment status * Order status Order tracking timeline: Order Placed → Confirmed → Shipped → Out for Delivery → Delivered #### 9. Wishlist Allow users to: * View saved products * Remove products * Move products to cart * View product details ### Admin Dashboard Create a separate admin dashboard. Dashboard should include: * Total Sales * Total Orders * Total Customers * Total Products * Revenue chart * Recent orders * Top-selling products Admin features: * Add product * Edit product * Delete product * Manage inventory * Manage categories * Manage orders * Manage customers * Manage discounts/coupons Product creation form: * Product name * Description * Category * Gender * Brand * Price * Discount * Stock * Sizes * Colors * Product images ### Important E-Commerce Features Implement realistic e-commerce behavior: * Add to cart * Remove from cart * Update quantity * Wishlist * Product search * Product filtering * Product sorting * Product reviews * Ratings * Coupon codes * Stock availability * Out-of-stock handling * Order creation * Order tracking * Responsive navigation * Toast notifications * Loading states * Empty states * Error states ### UI/UX Use: * Modern cards * Rounded buttons * Clean typography * Fashion-focused imagery * Smooth transitions * Hover animations * Skeleton loaders * Responsive layouts On mobile: * Hamburger menu * Bottom-friendly cart/wishlist interactions * Two-column product grid * Responsive checkout * Touch-friendly buttons ### Technical Requirements Build the website using a modern component-based architecture. Prefer: * React * TypeScript * Tailwind CSS * Reusable components * Clean folder structure * Responsive design * Proper state management * API-ready architecture Use mock product data initially, but structure the code so a real backend/API can easily be connected later. Create reusable components for: * Navbar * Footer * ProductCard * ProductGrid * ProductFilters * ProductGallery * CartItem * CheckoutForm * ReviewCard * Modal * Button * Input * Loading states ### Product Data Populate the website with at least **20 realistic clothing products**, including: * T-shirts * Shirts * Jeans * Hoodies * Jackets * Dresses * Tops * Trousers * Sneakers * Accessories Use realistic names, prices, ratings, sizes, colors, and descriptions. ### Final Requirement The final website should feel like a real commercial fashion e-commerce platform and should be visually polished, responsive, intuitive, and ready to connect to a backend and payment gateway later.