# Mehraein Reference

## Shared Components (`app/components/`)

| Component | Purpose | Key props |
|-----------|---------|-----------|
| `Button` | Primary/outline CTA | `variant: "primary" \| "outline"` |
| `Input` | Text/search input | `variant: "primary" \| "search"` |
| `Carousel` | Embla image slider | — |
| `GridWrapper` | Responsive grid layout | — |
| `Select` | Dropdown select | — |
| `Seprator` | Visual divider | — |

## Layout Shell (`app/shared/`)

| File | Role |
|------|------|
| `Header.tsx` | Top bar, logo, search, nav, cart |
| `Footer.tsx` | Footer sections |
| `components/HeaderMenu.tsx` | Navigation menu |
| `components/AllProductsMenu.tsx` | Products mega-menu |
| `components/Footer*.tsx` | Footer sub-sections |

## Feature Routes

| Route | Entry | Root component |
|-------|-------|----------------|
| `/` | `app/page.tsx` | `app/home/Home.tsx` |
| `/category` | `app/category/page.tsx` | inline in page |
| `/product/[id]` | `app/product/[id]/page.tsx` | `ProductDetail` |

## Home Sections (`app/home/components/`)

`BannerSection`, `StepSection`, `CategorySection`, `ProductSection`, `OrderByApplication`, `BestSellerCategories`, `OrderRegistrationSteps`, `BlogsSection`, `ContactCtaSection`, `ProductCard`, `CategoryCard`, `BlogCard`

## Product Sections (`app/product/components/`)

`ProductDetail`, `ProductGallery`, `ProductPurchaseOptions`, `ProductOrderActions`, `ProductTabs`, `ProductRelated`, `ProductBreadcrumb`

## Category Sections (`app/category/components/`)

`CategoryHero`, `CategoryToolbar`, `CategoryFilters`, `CategoryProducts`

## Color Palette (beyond theme tokens)

| Hex | Typical use |
|-----|-------------|
| `#194873` | Body accent text |
| `#2A3950` | Card titles |
| `#3A4147` | Header/promo text |
| `#6C7680` | Secondary nav icons |
| `#D00003` | Strikethrough price |
| `#E9EEF2` | Card borders |
| `#004A9005` | Tinted info box background |

## Responsive Breakpoints

Follow Tailwind defaults (`sm`, `md`, `lg`). Common layout shifts:

- Mobile: stacked columns, compact padding
- `lg`: side-by-side layouts, wider padding (`lg:px-[120px]` or `lg:px-30`)
- Header: mobile cart/actions vs desktop full nav

## Docker Build Notes

- Multi-stage build with Liara npm mirror
- Standalone Next.js output
- Runs as non-root `appuser` on port 3000