# Design Guidelines: فروشگاه آنلاین پرده و دکوراسیون

## Design Approach

**Reference-Based**: Inspired by pardehstore.com - clean minimalist e-commerce focusing on product clarity and simple navigation. Prioritizes visual product display with neutral aesthetic.

---

## Typography

**Primary Font**: Vazirmatn (Persian) via Google Fonts
- **Hero Headline**: text-5xl md:text-6xl font-bold
- **Section Headings**: text-3xl md:text-4xl font-semibold
- **Product Titles**: text-xl font-medium
- **Body Text**: text-base md:text-lg (highly readable)
- **Prices**: text-2xl md:text-3xl font-bold
- **Navigation**: text-base font-medium

---

## Layout System

**Spacing Units**: Tailwind units of 4, 6, 8, 12, 16 for consistent rhythm
- Sections: py-12 md:py-16
- Component gaps: gap-6 md:gap-8
- Container: max-w-7xl mx-auto px-4

**Grid System**:
- Product grids: grid-cols-2 md:grid-cols-3 lg:grid-cols-4
- Category showcases: grid-cols-1 md:grid-cols-3
- Content sections: Two-column splits where appropriate

---

## Component Library

### Navigation
- **Top Bar**: Sticky header with logo (right), main menu (center), cart/search icons (left)
- **Menu Items**: Simple horizontal list - محصولات, دسته‌بندی‌ها, درباره ما, تماس
- **Mega Menu** (on محصولات hover): Grid of categories with small thumbnail images
- Height: h-20, minimal shadow

### Hero Section
- **Large Hero Image**: High-quality lifestyle photo of living room with curtains (1920x900)
- **Height**: 75vh on desktop, 60vh mobile
- **Overlay Content**: Centered, minimal text + single CTA button
- **CTA Button**: Green or blue with backdrop-blur-md background, text-lg px-8 py-4

### Category Showcase
- **3-Column Grid**: Large category cards with images
- **Card Structure**: Full image background with category name overlay at bottom
- **Height**: 400px cards with aspect-ratio-square on mobile
- **Hover Effect**: Slight brightness overlay
- **Categories**: پرده‌ها, مبلمان, لوازم دکوراسیون

### Product Grid
- **Clean Card Design**: 
  - Product image (4:5 ratio)
  - Title (2 lines max, truncate)
  - Price (prominent)
  - Simple "افزودن به سبد" button (full width, green/blue)
- **Spacing**: gap-6 between cards
- **Hover**: Subtle shadow lift (shadow-sm to shadow-lg)

### Product Detail Page
- **Two-Column Layout** (60/40 split):
  - **Left**: Image gallery with main image + 4-5 thumbnails below
  - **Right**: Product info - title, price, short description, size/color selectors, quantity, add to cart
- **Sticky Sidebar** on desktop for product info
- **Specifications Table**: Below images on full width
- **Related Products**: 4-column grid at bottom

### Filters Sidebar (Category Pages)
- **Left Sidebar**: 280px width
- **Filter Groups**: Price range, color swatches, material, size
- **Collapsible Sections**: Each filter group expandable
- **Apply Button**: Green/blue at bottom

### Footer
- **4-Column Layout**:
  1. درباره فروشگاه (logo + brief text)
  2. دسترسی سریع (navigation links)
  3. تماس با ما (phone, email, address)
  4. شبکه‌های اجتماعی (icon links)
- **Newsletter Section** above columns: Email input + subscribe button (green/blue)
- **Trust Badges**: Payment methods, guarantee icons
- **Copyright Bar**: Bottom strip with simple text

### Additional Components
- **Search Bar**: Expandable from icon in header, full-width overlay when open
- **Shopping Cart Sidebar**: Slide-in from left with cart items
- **Breadcrumbs**: Simple text path on category/product pages
- **Product Quick View**: Modal with basic product info + image

---

## Images

Include high-quality photography throughout:

1. **Hero Image**: Elegant living room showcasing luxury curtains with natural light (1920x900)
2. **Category Cards**: Three lifestyle images for پرده‌ها, مبلمان, دکوراسیون (800x800 each)
3. **Product Images**: Professional product photography on white/cream backgrounds (1000x1250 ratio)
4. **About Section**: Showroom or workshop photo (1200x600)
5. **Instagram Feed Section**: 6 square lifestyle images (400x400)

---

## Key Constraints

- **RTL Layout**: All content right-aligned, navigation flows right-to-left
- **Minimal Animations**: No complex transitions, simple hover states only
- **White Space**: Generous padding, avoid cluttered layouts
- **Mobile-First**: Stack to single column on mobile, maintain readability
- **Accessibility**: Proper heading hierarchy, focus states with ring, ARIA labels
- **Loading States**: Skeleton screens for product grids
- **Empty States**: Simple text + icon for empty cart/search