hamid zarghami
69 lines
2.3 KiB
Markdown
69 lines
2.3 KiB
Markdown
# 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
|