NASSAJ E-COMMERCE UI DESIGN PROMPT
===================================

Modern luxury e-commerce website design for premium socks and textiles brand, Arabic/RTL interface:

COLOR PALETTE:
- Primary Gold: #CCBF79 with gradient to #a89958
- Deep Purple accent: #8b4789 to #6b3568
- Sale Red: #e53e3e to #c53030
- Dark mode background: #1a1a1a
- White cards with subtle shadows

PRODUCT CARD DESIGN:
- Square product image (1:1 ratio)
- Rounded corners (16px border-radius)
- Gradient badge in top-right corner ("خصم 12%" or "جديد")
- Three circular action buttons (eye, chart, heart) appear on hover over image center
- White circular buttons (46px diameter) with shadows
- Product info section: brand name (13px), product title (16px bold), 5-star rating
- Price display: old price strikethrough, new price in large bold
- Full-width gradient gold button at bottom with icon

LAYOUT:
- 4 products per row on desktop
- 1.25 products visible on mobile (showing next product preview)
- Product image scales to 110% on hover
- Card lifts up 6px with enhanced shadow on hover

DESIGN STYLE:
- Clean, modern, minimal with luxury touches
- Smooth animations (0.4s cubic-bezier transitions)
- Backdrop blur effects on modals and overlays
- Gradient buttons with depth
- Arabic typography (Cairo, Noto Kufi Arabic fonts)
- RTL (right-to-left) layout
- Dark mode support with smooth transitions

INTERACTIVE ELEMENTS:
- Quick View modal: 2-column layout (product image + details)
- Cart drawer: slides from right, shows items, coupons, progress bar for free shipping
- Wishlist drawer: similar to cart, list view with add-to-cart buttons
- Toast notifications: slide from top with success/error icons

MOBILE OPTIMIZATIONS:
- Action buttons always visible (not on hover)
- Larger touch targets (44px minimum)
- Bottom navigation bar
- Simplified layout
- Full-screen modals

ANIMATIONS:
- fadeInUp for page elements
- scaleIn for modals
- smooth slide for drawers
- pulse effect for notifications
- image zoom on hover (scale 1.1 with 0.6s transition)

SHADOWS & DEPTH:
- Light: 0 2px 8px rgba(0,0,0,0.1)
- Medium: 0 4px 12px rgba(0,0,0,0.15)
- Large: 0 12px 40px rgba(0,0,0,0.15)
- Gold button: 0 4px 12px rgba(204,191,121,0.3)

TYPOGRAPHY:
- Headers: 52px hero, 36px sections, font-weight 700-900
- Body: 14px, font-weight 400
- Card titles: 16px, font-weight 700
- Small text: 12-13px

SPECIAL FEATURES:
- Carousel with dots and arrow navigation
- Progress bar showing path to free shipping with percentage
- Coupon section with expandable list
- Badge system (sale, new, hot, customizable)
- Empty states with icons and friendly messages

OVERALL AESTHETIC:
Luxury meets modern minimalism with Iraqi/Arabic cultural touches, gold accents suggesting premium quality, smooth user experience with delightful micro-interactions, professional yet approachable, elegant typography and generous white space.

Target: High-end textile/socks e-commerce store with sophisticated Arabic-speaking clientele.

Style references: Combination of Apple Store's clean aesthetic + luxury brand elegance + traditional Arabic design motifs.
