feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

src/components/sections/Testimonials.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils";
+
+import { SectionReveal } from "./SectionReveal";
+import { TestimonialCard } from "./TestimonialCard";
+
+export interface TestimonialsProps {
+  className?: string;
+}
+
+const TESTIMONIAL_INDICES = [0, 1, 2, 3, 4, 5] as const;
+
+export function Testimonials({ className }: TestimonialsProps) {
+  const t = useTranslations("testimonials");
+
+  const testimonials = TESTIMONIAL_INDICES.map((i) => ({
+    id: `item${i}`,
+    name: t(`item${i}Name` as Parameters<typeof t>[0]),
+    role: t(`item${i}Role` as Parameters<typeof t>[0]),
+    company: t(`item${i}Company` as Parameters<typeof t>[0]),
+    quote: t(`item${i}Quote` as Parameters<typeof t>[0]),
+    initials: t(`item${i}Initials` as Parameters<typeof t>[0]),
+  }));
+
+  return (
+    <section className={cn("w-full bg-neutral-50 py-20 sm:py-28", className)}>
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <SectionReveal>
+          <h2 className="text-center font-heading text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl">
+            {t("heading")}
+          </h2>
+        </SectionReveal>
+
+        <SectionReveal className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {testimonials.map((testimonial) => (
+            <TestimonialCard key={testimonial.id} testimonial={testimonial} />
+          ))}
+        </SectionReveal>
+      </div>
+    </section>
+  );
+}