update

2026-08-01 15:15:34 +04:00
parent 87b518cf4e
commit 9697c98999
50 changed files with 2619 additions and 1 deletions
@@ -0,0 +1,82 @@
+'use client';
+
+import { Button, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { useDispatch } from 'react-redux';
+import { addToCart } from '@/store/cartSlice';
+import { useLanguage } from '@/app/context/LanguageContext';
+
+function toLocaleNumber(n, locale) {
+  return n.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US');
+}
+
+export default function CatalogSection() {
+  const { t, locale } = useLanguage();
+  const dispatch = useDispatch();
+  const currencySuffix = locale === 'fa' ? ' ریال' : ' Rials';
+
+  const handleAdd = (item) => {
+    dispatch(
+      addToCart({
+        id: `catalog-${item.id}`,
+        name: item.name,
+        priceNumeric: item.priceNumeric,
+        priceLabel: `${toLocaleNumber(item.priceNumeric, locale)}${currencySuffix}`,
+        image: item.image,
+      })
+    );
+    message.success(t.catalog.addToast(item.name));
+  };
+
+  return (
+    <section id="catalog" className="relative px-6 md:px-16 py-20 md:py-28 bg-elevated border-t border-subtle">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-4">
+          <span className="text-brand-400 text-sm font-semibold tracking-wide">{t.catalog.eyebrow}</span>
+          <h2 className="text-2xl md:text-4xl font-extrabold brand-gradient-text mt-3">{t.catalog.title}</h2>
+        </div>
+        <p className="text-secondary text-sm md:text-base text-center max-w-2xl mx-auto mb-12">
+          {t.catalog.subtitle}
+        </p>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {t.catalog.items.map((item) => (
+            <div
+              key={item.id}
+              className="bg-surface border border-subtle rounded-2xl p-5 flex flex-col hover:border-brand-500/60 transition-colors"
+            >
+              <div className="flex items-center gap-4 mb-4">
+                <img src={item.image} alt={item.name} className="w-16 h-16 object-contain shrink-0" />
+                <div className="min-w-0">
+                  <span className="text-[11px] text-brand-400 font-semibold">{item.category}</span>
+                  <h3 className="text-primary font-bold text-sm leading-6">{item.name}</h3>
+                </div>
+              </div>
+
+              <div className="mt-auto flex items-end justify-between gap-2">
+                <div>
+                  <p className="text-xs text-secondary line-through opacity-70">
+                    {toLocaleNumber(item.originalPriceNumeric, locale)}
+                    {currencySuffix}
+                  </p>
+                  <p className="text-base font-bold text-primary">
+                    {toLocaleNumber(item.priceNumeric, locale)}
+                    {currencySuffix}
+                  </p>
+                </div>
+                <Button
+                  type="primary"
+                  size="middle"
+                  icon={<PlusOutlined />}
+                  onClick={() => handleAdd(item)}
+                >
+                  {t.catalog.addToOrder}
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}