mehraein-front/.cursor/skills/mehraein/reference.md

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