Add fixed categories dock and specials-driven home carousels.

Dock links use the six API category slugs so storefront navigation stays connected to catalog filters. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-23 15:44:53 +03:30
parent 35939e6ee4
commit 6c060e222c
24 changed files with 1131 additions and 92 deletions
@@ -0,0 +1,70 @@
+import { Link } from 'react-router-dom'
+import './CategoriesDock.css'
+
+/**
+ * Fixed glossy dock — images and labels are hardcoded.
+ * Each item links to `/products/:slug` matching the API category slug.
+ */
+const DOCK_CATEGORIES = [
+  {
+    nameFa: 'کیک',
+    nameEn: 'Cake',
+    image: '/categories/Cake.png',
+    slug: 'cake',
+  },
+  {
+    nameFa: 'شیرینی',
+    nameEn: 'Pastry',
+    image: '/categories/pastry.png',
+    slug: 'pastry',
+  },
+  {
+    nameFa: 'سوهان',
+    nameEn: 'Sohan',
+    image: '/categories/sohan.png',
+    slug: 'sohan',
+  },
+  {
+    nameFa: 'دسر',
+    nameEn: 'Dessert',
+    image: '/categories/desert.png',
+    slug: 'desert',
+  },
+  {
+    nameFa: 'شکلات',
+    nameEn: 'Chocolate',
+    image: '/categories/Choclate.png',
+    slug: 'chocolate',
+  },
+  {
+    nameFa: 'باقلوا',
+    nameEn: 'Baklava',
+    image: '/categories/baghlava.png',
+    slug: 'baklava',
+  },
+] as const
+
+export default function CategoriesDock() {
+  return (
+    <nav className="categories-dock" aria-label="دسته‌بندی محصولات">
+      <ul className="categories-dock__list">
+        {DOCK_CATEGORIES.map((category) => (
+          <li key={category.slug} className="categories-dock__item">
+            <Link
+              to={`/products/${category.slug}`}
+              className="categories-dock__link"
+            >
+              <span className="categories-dock__image-wrap">
+                <img src={category.image} alt="" className="categories-dock__image" />
+              </span>
+              <span className="categories-dock__names">
+                <span className="categories-dock__name-fa">{category.nameFa}</span>
+                <span className="categories-dock__name-en">{category.nameEn}</span>
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}