# FABNAYA - Premium Indian Fashion Brand Website

## 1. Concept & Vision

Fabnaya is a premium Indian fashion brand that celebrates the rich heritage of Indian textiles while embracing contemporary design aesthetics. The website embodies **elegant luxury** with a **warm, celebratory Indian sensibility** - think festive grandeur meets modern minimalism. Every interaction should feel like stepping into a beautifully curated boutique where heritage meets haute couture.

## 2. Design Language

### Aesthetic Direction
**"Festive Elegance"** - A sophisticated blend of traditional Indian opulence with clean modern UI. Inspired by the intricate beauty of Banarasi silk, the warmth of Rajasthani block prints, and the contemporary elegance of Milanese fashion houses.

### Color Palette
```css
:root {
  /* Primary - Deep Royal Purple */
  --color-primary: #6B2D5C;
  --color-primary-light: #8B4D7C;
  --color-primary-dark: #4A1D3E;
  
  /* Secondary - Warm Gold */
  --color-secondary: #C9A84C;
  --color-secondary-light: #E5D089;
  --color-secondary-dark: #A68B2E;
  
  /* Accent - Rose Gold */
  --color-accent: #B76E79;
  --color-accent-light: #E8B4BC;
  
  /* Neutrals */
  --color-cream: #FFF8F0;
  --color-warm-white: #FFFBF7;
  --color-sand: #F5EDE4;
  --color-text: #2D2A26;
  --color-text-muted: #6B6560;
  --color-border: #E8E0D8;
  
  /* Status Colors */
  --color-success: #2E7D4A;
  --color-warning: #D4A017;
  --color-error: #C73E3E;
  --color-info: #3B7EA1;
}
```

### Typography
- **Display/Headings**: "Playfair Display" - Elegant serif with Indian print-inspired character
- **Body**: "Plus Jakarta Sans" - Modern, highly readable sans-serif
- **Accent/Price**: "Cormorant Garamond" - Luxurious serif for product prices and quotes
- **Scale**: 12, 14, 16, 18, 20, 24, 32, 40, 48, 64px

### Spatial System
- Base unit: 8px
- Section padding: 80px vertical (desktop), 48px (mobile)
- Card padding: 24px
- Grid gap: 24px
- Border radius: 4px (subtle), 8px (cards), 16px (modals), 50% (avatars)

### Motion Philosophy
- **Page transitions**: Fade with subtle slide (300ms ease-out)
- **Hover effects**: Scale 1.02 with shadow elevation (200ms)
- **Micro-interactions**: Button press (scale 0.98), heart pulse, cart bounce
- **Loading states**: Shimmer skeleton with warm gradient
- **Scroll animations**: Staggered fade-up reveals (Intersection Observer)

### Visual Assets
- **Icons**: Phosphor Icons (thin weight for elegance)
- **Images**: High-fashion editorial photography, lifestyle shots
- **Decorative**: Subtle mandala patterns, paisley borders, ornate dividers
- **Textures**: Linen paper background, subtle noise overlay

## 3. Layout & Structure

### Information Architecture
```
├── Public Website
│   ├── Home (Hero, New Arrivals, Trending, Categories, Blog, etc.)
│   ├── Products (Category, Filter, Grid/List, Pagination)
│   ├── Product Detail (Gallery, Size Chart, Reviews, FAQ)
│   ├── Cart (Items, Coupons, Summary)
│   ├── Checkout (Address, Payment, Confirmation)
│   ├── Account (Dashboard, Orders, Wishlist, Rewards, Profile)
│   ├── Blog (Articles, Categories)
│   ├── Static Pages (About, Contact, FAQ, Policies)
│   └── Search (Advanced, Voice, Suggestions)
│
├── Admin Panel (/admin)
│   ├── Dashboard (Analytics, Stats, Activity)
│   ├── Products (CRUD, Inventory, Bulk Upload)
│   ├── Categories & Brands
│   ├── Orders (Manage, Status, Returns, Exchanges)
│   ├── Customers (List, Wallets, Rewards)
│   ├── Marketing (Banners, Coupons, Campaigns)
│   ├── CMS (Pages, Blog, Homepage Builder)
│   ├── Reports (Sales, Inventory, Tax)
│   ├── Settings (General, Payments, Shipping)
│   └── Users & Roles
```

### Page Rhythm
- **Home**: Hero (full viewport) → Quick categories → New Arrivals → Flash Sale → Trending → Categories → Blog → Newsletter
- **Product Grid**: Filters sidebar + responsive 4/3/2/1 column grid
- **Product Detail**: Sticky gallery + scrollable details + fixed add-to-cart
- **Checkout**: Multi-step with progress indicator

## 4. Features & Interactions

### Public Website Features

#### Home Page
- [ ] Hero Slider (3-5 slides, auto-rotate 5s, touch/swipe)
- [ ] New Arrival Section (8 products, "View All" link)
- [ ] Trending Section (horizontal scroll on mobile)
- [ ] Best Sellers (with sales count badges)
- [ ] Limited Edition (countdown timer, exclusive tags)
- [ ] Flash Sale (countdown, animated urgency)
- [ ] Category Cards (icon + name + count)
- [ ] Featured Collection (large editorial layout)
- [ ] Shop By Category/Occasion/Color/Size tabs
- [ ] Men's/Women's Collections showcase
- [ ] Fashion Blog (3 latest articles)
- [ ] Customer Reviews carousel
- [ ] Instagram Feed (8 images, hover effect)
- [ ] Newsletter with popup option
- [ ] Offer Banner (sticky on scroll)
- [ ] Brand Story section
- [ ] Shipping/Trust badges
- [ ] Recently Viewed carousel
- [ ] Recommended Products

#### Product Page
- [ ] Image Gallery (main + thumbnails, zoom on hover)
- [ ] Fullscreen gallery mode
- [ ] Video support
- [ ] 360° image view placeholder
- [ ] Size selector with visual chart
- [ ] Fabric details accordion
- [ ] Care instructions accordion
- [ ] Stock status indicator
- [ ] Pincode delivery check
- [ ] COD availability
- [ ] Add to Wishlist/Compare
- [ ] Share buttons (WhatsApp, FB, Instagram)
- [ ] Estimated delivery date
- [ ] Related/Similar products
- [ ] Customer reviews with photos
- [ ] FAQ accordion
- [ ] Recently viewed

#### Search System
- [ ] Advanced search with filters
- [ ] Live search suggestions (debounced 300ms)
- [ ] Trending searches
- [ ] Recent searches (localStorage)
- [ ] Popular searches
- [ ] Voice search ready
- [ ] Image search ready (UI only)

#### Category Page
- [ ] Filter sidebar (collapsible on mobile)
- [ ] Price range slider
- [ ] Brand multi-select
- [ ] Color visual swatches
- [ ] Size chips
- [ ] Material tags
- [ ] Rating filter
- [ ] Discount filter
- [ ] Sort dropdown
- [ ] Grid/List toggle
- [ ] Pagination
- [ ] Active filter tags

#### User Account
- [ ] Dashboard overview
- [ ] Order history (tabs: All/Pending/Confirmed/etc.)
- [ ] Order tracking with timeline
- [ ] Wishlist with move-to-cart
- [ ] Share wishlist
- [ ] Address management (CRUD)
- [ ] Wallet balance & history
- [ ] Reward points history
- [ ] Coupon wallet
- [ ] Review & rating submission
- [ ] Notification preferences
- [ ] Profile edit
- [ ] Password change
- [ ] Delete account
- [ ] Referral program
- [ ] Download invoices
- [ ] Support tickets
- [ ] Returns/Exchange requests

#### Checkout
- [ ] Cart review
- [ ] Apply coupon
- [ ] Gift card
- [ ] Wallet balance
- [ ] Reward points redemption
- [ ] Address selection/add
- [ ] Shipping options
- [ ] Payment methods:
  - Cashfree (UPI, Cards, Net Banking, EMI)
  - COD
- [ ] GST invoice toggle
- [ ] Order notes
- [ ] Order confirmation

### Authentication
- [ ] Email/Password login
- [ ] Phone + OTP login
- [ ] Google OAuth
- [ ] Facebook OAuth
- [ ] Apple OAuth (UI ready)
- [ ] Guest checkout
- [ ] Forgot password (email/phone)
- [ ] 2FA setup
- [ ] Social link accounts

### Customer Support
- [ ] Live chat widget
- [ ] WhatsApp chat button
- [ ] Ticket submission
- [ ] FAQ accordion
- [ ] Contact form
- [ ] Order-specific support

### Reviews
- [ ] Photo uploads
- [ ] Video reviews
- [ ] Star rating
- [ ] Verified purchase badge
- [ ] Like helpful
- [ ] Report review
- [ ] Admin approve/reject
- [ ] Featured reviews
- [ ] Reply to reviews

### Blog
- [ ] Article listing with pagination
- [ ] Category filtering
- [ ] Search articles
- [ ] Article detail with sidebar
- [ ] Author profiles
- [ ] Related posts
- [ ] Share buttons
- [ ] Comments (admin moderated)

### Marketing
- [ ] Popup manager (time-based, exit-intent)
- [ ] Announcement bar
- [ ] Email newsletter
- [ ] WhatsApp campaigns (integration ready)
- [ ] SMS campaigns (integration ready)
- [ ] Referral program
- [ ] Affiliate program
- [ ] Loyalty tiers

## 5. Admin Panel Features

### Dashboard
- [ ] Today's/Weekly/Monthly/Yearly sales cards
- [ ] Visitor analytics
- [ ] Order stats
- [ ] Revenue charts
- [ ] Top products
- [ ] Low stock alerts
- [ ] Recent orders
- [ ] Recent customers
- [ ] Activity feed

### Product Management
- [ ] Product CRUD with rich editor
- [ ] Bulk upload (CSV)
- [ ] CSV export
- [ ] Attribute management
- [ ] Color/S size variants
- [ ] Inventory tracking
- [ ] Stock alerts
- [ ] Barcode/SKU generation
- [ ] Image gallery management
- [ ] Video upload
- [ ] SEO meta fields
- [ ] Bulk actions

### Category & Brand Management
- [ ] Nested categories
- [ ] Brand CRUD
- [ ] Featured brands

### Order Management
- [ ] Order list with filters
- [ ] Order detail view
- [ ] Status update
- [ ] Print invoice
- [ ] Shipping label
- [ ] Return approval
- [ ] Exchange approval
- [ ] Refund processing
- [ ] COD reconciliation
- [ ] Tracking number entry
- [ ] Courier selection

### Customer Management
- [ ] Customer list with search
- [ ] Customer profile
- [ ] Address management
- [ ] Order history
- [ ] Wallet management
- [ ] Reward points adjustment
- [ ] Coupon assignment
- [ ] Activity logs
- [ ] Block/unblock

### Inventory
- [ ] Warehouse management
- [ ] Stock levels
- [ ] Damaged stock
- [ ] Return processing
- [ ] Purchase entries
- [ ] Supplier management
- [ ] Low stock alerts
- [ ] Stock adjustments
- [ ] Stock history

### Coupon Engine
- [ ] Percentage discount
- [ ] Flat discount
- [ ] Category-specific
- [ ] Product-specific
- [ ] User-specific
- [ ] Expiry settings
- [ ] Usage limits
- [ ] Min order value

### Marketing Tools
- [ ] Banner management
- [ ] Slider management
- [ ] Popup campaigns
- [ ] Announcement manager
- [ ] Newsletter subscribers
- [ ] Email campaigns (UI)
- [ ] WhatsApp templates (UI)
- [ ] SMS templates (UI)

### CMS
- [ ] Homepage builder (drag-drop)
- [ ] Menu builder
- [ ] Footer builder
- [ ] Header builder
- [ ] About page editor
- [ ] Contact page
- [ ] FAQ management
- [ ] Policy pages
- [ ] Career page
- [ ] Blog management
- [ ] Page templates

### Blog CMS
- [ ] Post CRUD
- [ ] Category management
- [ ] Author management
- [ ] Tag management
- [ ] SEO fields
- [ ] Comment moderation

### Users & Staff
- [ ] Admin users
- [ ] Roles (Admin, Manager, Editor, Support, Warehouse, Delivery, Accountant)
- [ ] Role permissions
- [ ] Activity logs
- [ ] Login logs

### Reports
- [ ] Sales report
- [ ] Profit report
- [ ] Customer report
- [ ] Product report
- [ ] Category report
- [ ] Coupon report
- [ ] Inventory report
- [ ] Tax report
- [ ] Export PDF
- [ ] Export Excel

### Settings
- [ ] General (name, logo, favicon)
- [ ] Theme customization
- [ ] Email SMTP
- [ ] SMS API
- [ ] WhatsApp API
- [ ] Payment settings (Cashfree)
- [ ] Shipping settings
- [ ] GST settings
- [ ] Tax rules
- [ ] Currency
- [ ] Social links
- [ ] OAuth credentials
- [ ] Backup
- [ ] Cron jobs
- [ ] Logs
- [ ] Cache management
- [ ] Maintenance mode

## 6. Component Inventory

### Buttons
- Primary (filled, hover glow, press scale)
- Secondary (outlined, hover fill)
- Ghost (text only, hover underline)
- Icon button (circle, subtle bg)
- States: default, hover, active, disabled, loading

### Cards
- Product card (image, title, price, rating, actions)
- Category card (icon, name, count)
- Blog card (image, date, title, excerpt)
- Review card (avatar, rating stars, text)
- Stat card (icon, number, label, trend)

### Forms
- Text input (floating label, validation states)
- Select dropdown (custom styled)
- Checkbox/Radio (custom styled)
- Range slider
- File upload (drag-drop)
- OTP input (auto-focus next)
- Search input (icon, suggestions dropdown)

### Navigation
- Header (sticky, transparent on hero)
- Mega menu (categories, featured)
- Mobile drawer
- Bottom nav (mobile)
- Breadcrumbs
- Pagination
- Tabs

### Feedback
- Toast notifications
- Modal (centered, slide-up on mobile)
- Loading spinner
- Skeleton loaders
- Progress bar
- Empty states

### E-commerce
- Cart drawer
- Quick view modal
- Size guide modal
- Compare table
- Filter panel
- Sort dropdown

## 7. Technical Approach

### Architecture: MVC Pattern
```
/appnaya
├── /app
│   ├── /Config          # Configuration files
│   ├── /Controllers     # Request handlers
│   ├── /Models          # Database operations
│   ├── /Views           # Presentation layer
│   ├── /Core            # Framework core
│   │   ├── Router.php
│   │   ├── Database.php
│   │   ├── Session.php
│   │   ├── Auth.php
│   │   └── Helper.php
│   ├── /Helpers         # Utility functions
│   ├── /Middleware      # Request middleware
│   └── /Traits          # Reusable traits
├── /public
│   ├── /assets
│   │   ├── /css
│   │   ├── /js
│   │   ├── /images
│   │   └── /icons
│   ├── /uploads         # User uploads
│   └── index.php        # Entry point
├── /admin               # Admin panel
│   ├── /controllers
│   ├── /views
│   └── /assets
├── /database
│   ├── /migrations
│   └── /seeders
├── /routes
│   └── web.php
├── composer.json
└── .env
```

### Database: ~50 Tables
Core tables: users, products, categories, orders, order_items, payments, coupons, reviews, wishlists, cart, addresses, notifications, banners, blogs, pages, roles, permissions, settings, logs, returns, exchanges, wallet, reward_points, support_tickets, shipping, taxes, media, newsletters, suppliers, warehouses, audit_logs, etc.

### Security
- PDO Prepared Statements
- CSRF tokens on all forms
- XSS sanitization
- SQL Injection prevention
- Rate limiting
- Google reCAPTCHA
- Secure session handling
- 2FA support

### Performance
- Lazy loading images
- Minified assets
- Redis cache ready
- CDN ready
- WebP images
- Database optimization
- Lazy load below-fold content

### SEO
- Semantic HTML
- Meta tags per page
- Open Graph
- Twitter Cards
- Schema.org markup
- XML sitemap
- Robots.txt
- Canonical URLs
- Redirect manager

### API Ready
- RESTful endpoints
- JWT ready
- Webhook support

## 8. Pages (30-35 Total)

### Public (15 pages)
1. Home
2. Category Listing
3. Product Detail
4. Cart
5. Checkout
6. Order Confirmation
7. Login/Register
8. My Account (with tabs)
9. Wishlist
10. Search Results
11. Blog Listing
12. Blog Article
13. About Us
14. Contact
15. Policy Pages (Privacy, Terms, Shipping, Returns)

### Admin (15-20 pages)
1. Dashboard
2. Products List
3. Product Add/Edit
4. Categories
5. Brands
6. Orders List
7. Order Detail
8. Customers
9. Customer Detail
10. Inventory
11. Coupons
12. Marketing (Banners/Sliders)
13. CMS Pages
14. Blog Manager
15. Reports
16. Media Library
17. Staff & Roles
18. Settings
19. Cache & Logs