- {slides.map((s, i) => (
-
- {/* لایهی نیمهشفاف پشت متن، برای خوانایی روی هر عکسی */}
-
+ {/* ------------------------------------------------------------------ */}
+ {/* اسلایدهای عکس — همه اسلایدها روی هم قرار دارند و فقط با opacity */}
+ {/* محو/نمایان میشوند (transition نرم بهجای پرش ناگهانی) */}
+ {/* ------------------------------------------------------------------ */}
+
- 
+ {/* ------------------------------------------------------------------ */}
+ {/* شکل مورب تزئینی سمت راست/چپ — نسخه سبز برند بهجای قرمز Sielaff */}
+ {/* ------------------------------------------------------------------ */}
+
-
- ))}
-
+ {slides.map((s, i) => (
+
- {/* ------------------------------------------------------------------ */}
- {/* متن روی اسلاید: کیکر کوچک + عنوان بزرگ دو خطی + توضیح + دکمه CTA */}
- {/* ------------------------------------------------------------------ */}
-
+
+
+ ))}
+
-
- {/* ------------------------------------------------------------------ */}
- {/* فلشهای ناوبری دستی (قبلی / بعدی) — شبیه سایت Sielaff، وسط دو طرف */}
- {/* ------------------------------------------------------------------ */}
-
-
+ {/* ------------------------------------------------------------------ */}
+ {/* فلشهای ناوبری دستی (قبلی / بعدی) — وسط دو طرف */}
+ {/* ------------------------------------------------------------------ */}
+
+
- {/* نقطههای شمارشگر اسلاید پایین صفحه — کلیک روی هرکدام مستقیم به همان اسلاید میرود */}
-
-
- {slide.kicker}
-
-
- {slide.titleLines.map((line, i) => (
-
+ {/* لایهی نیمهشفاف پشت متن، برای خوانایی روی هر عکسی */}
+
+
+ {/* ------------------------------------------------------------------ */}
+ {/* متن روی اسلاید: کیکر کوچک + عنوان بزرگ دو خطی + توضیح + دکمه CTA */}
+ {/* ------------------------------------------------------------------ */}
+
+
+
- {slide.titleLines.map((line, i) => (
-
+ {/* لایهی نیمهشفاف پشت متن، برای خوانایی روی هر عکسی */}
+
+
+ {/* ------------------------------------------------------------------ */}
+ {/* متن روی اسلاید: کیکر کوچک + عنوان بزرگ دو خطی + توضیح + دکمه CTA */}
+ {/* ------------------------------------------------------------------ */}
+
+
+
+ {slide.kicker}
+
+
+ {slide.titleLines.map((line, i) => (
+
{line}
- ))}
-
- {slide.sub}
-
- {t.hero.cta}
-
-
-
+ ))}
+
+
+
+ {slide.kicker}
+
+
- + {slide.titleLines.map((line, i) => ( + {line} - ))} -
-{slide.sub}
- - {t.hero.cta} - -{slide.sub}
+ + {t.hero.cta} + +
- {slides.map((s, i) => (
-
-
+ {slides.map((s, i) => (
+
+
+ );
}
diff --git a/components/TrustedBySection.jsx b/components/TrustedBySection.jsx
new file mode 100644
index 0000000..7bc6743
--- /dev/null
+++ b/components/TrustedBySection.jsx
@@ -0,0 +1,56 @@
+'use client';
+
+/**
+ * سکشن «مشتریانی که به ما اعتماد کردهاند» — یک نوار لوگوی بیپایان (marquee)
+ * که بهآرامی و پیوسته حرکت میکند. برای ساخت افکت حلقهی بیپایان، لیست
+ * لوگوها را دو بار پشتسرهم رندر میکنیم و با انیمیشن CSS آن را جابهجا میکنیم.
+ *
+ * نکته فنی: مسیر (track) همیشه جهت LTR دارد، چون منطق «حرکت به چپ» انیمیشن
+ * فرض بر همین جهت است — دقیقاً همان مشکلی که در اسکرول افقی محصولات داشتیم و
+ * حلش کردیم. اینجا هم برای جلوگیری از همان باگ، جهت را ثابت نگه داشتیم.
+ */
+
+import { useLanguage } from '@/app/context/LanguageContext';
+
+export default function TrustedBySection() {
+ const { t } = useLanguage();
+ const clients = t.trustedBy.clients;
+ // لیست لوگوها را دو برابر میکنیم تا وقتی نیمه اول با انیمیشن رد شد،
+ // نیمه دوم دقیقاً از همانجا ادامه بدهد و چشم متوجه پرش/شکاف نشود.
+ const doubledClients = [...clients, ...clients];
+
+ return (
+
+
+
+ {/* یک محو تدریجی (fade mask) دو طرف نوار، تا لبههای لوگوها بریده بهنظر نرسد */}
+
+ {t.trustedBy.eyebrow}
+
+ {t.trustedBy.title}
+
+
+
+ {doubledClients.map((client, i) => (
+
+
+ 
+
+ ))}
+
+