create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/designs/atelier/ui/home/category-tiles.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+/**
+ * Category tiles derived from the live catalog. Uses product categories when
+ * present; otherwise derives collections from Hebrew product-name prefixes
+ * (טבעת / שרשרת / עגילי / צמיד) so the section is never empty on stores that
+ * haven't seeded category data. Each tile shows a real catalog photo.
+ */
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { useTranslations } from '@/core/lib/translations';
+import { IconArrowEnd } from '@/ui/shared/icons';
+
+const PREFIX_GROUPS = [
+  { prefixes: ['טבעת', 'טבעות', 'ring'], labelKey: 'catRings' },
+  { prefixes: ['שרשרת', 'שרשראות', 'necklace'], labelKey: 'catNecklaces' },
+  { prefixes: ['עגיל', 'earring'], labelKey: 'catEarrings' },
+  { prefixes: ['צמיד', 'bracelet'], labelKey: 'catBracelets' },
+] as const;
+
+interface Tile {
+  key: string;
+  label: string;
+  imageUrl: string;
+  imageAlt: string;
+  href: string;
+  count: number;
+}
+
+export function CategoryTiles({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  const tiles: Tile[] = [];
+
+  // Prefer real category data when the catalog has it.
+  const byCategory = new Map<string, { name: string; items: Product[] }>();
+  for (const p of products) {
+    for (const cat of p.categories ?? []) {
+      const entry = byCategory.get(cat.id) ?? { name: cat.name, items: [] };
+      entry.items.push(p);
+      byCategory.set(cat.id, entry);
+    }
+  }
+
+  // Tile photo: prefer the LAST matching product's image — the featured grid
+  // above leads with the first ones, so tiles avoid repeating the same shots.
+  const pickImage = (items: Product[]) =>
+    [...items].reverse().find((p) => p.images?.[0]?.url)?.images?.[0];
+
+  if (byCategory.size >= 2) {
+    for (const [id, { name, items }] of Array.from(byCategory.entries()).slice(0, 4)) {
+      const img = pickImage(items);
+      if (!img?.url) continue;
+      tiles.push({
+        key: id,
+        label: name,
+        imageUrl: img.url,
+        imageAlt: img.alt || name,
+        href: `/products?category=${encodeURIComponent(id)}`,
+        count: items.length,
+      });
+    }
+  } else {
+    // Derive from name prefixes — never hardcodes products, only groups them.
+    for (const group of PREFIX_GROUPS) {
+      const items = products.filter((p) =>
+        group.prefixes.some((prefix) => p.name?.toLowerCase().startsWith(prefix))
+      );
+      const img = pickImage(items);
+      if (!img?.url) continue;
+      tiles.push({
+        key: group.labelKey,
+        label: t(group.labelKey),
+        imageUrl: img.url,
+        imageAlt: img.alt || t(group.labelKey),
+        href: `/products?search=${encodeURIComponent(group.prefixes[0])}`,
+        count: items.length,
+      });
+    }
+  }
+
+  if (tiles.length === 0) return null;
+
+  return (
+    <section id="categories" className="section-pad wash-sand relative overflow-hidden">
+      <div aria-hidden="true" className="glow-blob -start-24 top-1/3 h-72 w-72 opacity-70" />
+      <div className="container-page relative">
+        <div className="mb-8 max-w-xl lg:mb-10">
+          <span className="eyebrow">{t('categoriesEyebrow')}</span>
+          <h2 className="text-4xl sm:text-5xl">{t('categoriesTitle')}</h2>
+          <p className="mt-3 text-muted-foreground">{t('categoriesSubtitle')}</p>
+        </div>
+
+        <ul
+          className={`grid grid-cols-2 gap-3 sm:gap-5 lg:gap-6 ${
+            tiles.length === 3 ? 'lg:grid-cols-3' : 'lg:grid-cols-4'
+          }`}
+        >
+          {tiles.map((tile, idx) => (
+            <li
+              key={tile.key}
+              className={
+                // Odd tile count: let the last tile span the full row on
+                // mobile so the 2-col grid never shows an orphan hole.
+                tiles.length % 2 === 1 && idx === tiles.length - 1
+                  ? 'col-span-2 lg:col-span-1'
+                  : undefined
+              }
+            >
+              <Link
+                href={tile.href}
+                className="group card card-hover block overflow-hidden"
+              >
+                <span className="relative block aspect-square overflow-hidden bg-secondary">
+                  <Image
+                    src={tile.imageUrl}
+                    alt={tile.imageAlt}
+                    fill
+                    sizes="(max-width: 640px) 50vw, 25vw"
+                    className="img-zoom object-cover"
+                  />
+                </span>
+                <span className="flex items-center justify-between gap-2 px-4 py-3.5">
+                  <span>
+                    <span className="block text-[15px] font-semibold text-foreground">
+                      {tile.label}
+                    </span>
+                    <span className="block text-xs text-muted-foreground">
+                      {tile.count} {tile.count === 1 ? tc('product') : tc('products')}
+                    </span>
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-secondary text-foreground transition-colors group-hover:bg-primary group-hover:text-primary-foreground"
+                  >
+                    <IconArrowEnd size={16} className="rtl-flip" />
+                  </span>
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/discount-banner-strip.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import type { DiscountBanner } from 'brainerce';
+import { IconTag } from '@/ui/shared/icons';
+
+/** Store-wide discount banner strip shown at the very top of the homepage. */
+export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
+  if (banners.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Promotions" className="border-b bg-secondary">
+      <ul className="container-page flex flex-wrap items-center justify-center gap-x-8 gap-y-1 py-2.5">
+        {banners.map((banner) => (
+          <li
+            key={banner.ruleId}
+            className="inline-flex items-center gap-2 text-[13px] font-semibold text-foreground"
+          >
+            <span aria-hidden="true" className="text-primary">
+              <IconTag size={16} />
+            </span>
+            {banner.text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/editorial-band.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+/**
+ * Editorial "our studio" band — lifestyle photography (Pexels hotlinks,
+ * HEAD-verified) + brand-story copy from translation keys. Purely template
+ * marketing content; no catalog data is hardcoded here.
+ */
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { IconArrowEnd } from '@/ui/shared/icons';
+
+// Verified free-stock imagery (images.pexels.com allows hotlinking).
+const IMG_MODEL =
+  'https://images.pexels.com/photos/1454171/pexels-photo-1454171.jpeg?auto=compress&cs=tinysrgb&w=1200';
+const IMG_DETAIL =
+  'https://images.pexels.com/photos/1191531/pexels-photo-1191531.jpeg?auto=compress&cs=tinysrgb&w=800';
+
+export function EditorialBand() {
+  const t = useTranslations('home');
+
+  return (
+    <section className="section-pad">
+      <div className="container-page grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
+        {/* Image pair */}
+        <div className="grid grid-cols-12 gap-4">
+          <figure className="col-span-8 -rotate-2 overflow-hidden rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.35)]">
+            {/* eslint-disable-next-line @next/next/no-img-element -- editorial stock hotlink, host not in next remotePatterns */}
+            <img
+              src={IMG_MODEL}
+              alt={t('storyTitle')}
+              loading="lazy"
+              className="aspect-[4/5] h-full w-full object-cover"
+            />
+          </figure>
+          <figure className="col-span-4 -mb-8 self-end rotate-3 overflow-hidden rounded-3xl border-4 border-background shadow-[0_24px_50px_-20px_hsl(var(--primary)/0.35)]">
+            {/* eslint-disable-next-line @next/next/no-img-element -- editorial stock hotlink, host not in next remotePatterns */}
+            <img
+              src={IMG_DETAIL}
+              alt={t('storyStat1Value')}
+              loading="lazy"
+              className="aspect-[3/4] h-full w-full object-cover"
+            />
+          </figure>
+        </div>
+
+        {/* Copy */}
+        <div className="max-w-xl">
+          <span className="eyebrow">{t('storyEyebrow')}</span>
+          <h2 className="text-4xl sm:text-5xl">{t('storyTitle')}</h2>
+          <p className="mt-5 leading-8 text-muted-foreground">{t('storyP1')}</p>
+          <p className="mt-4 leading-8 text-muted-foreground">{t('storyP2')}</p>
+
+          {/* Craft highlights */}
+          <dl className="mt-8 grid grid-cols-2 gap-6 border-t pt-8">
+            <div>
+              <dt className="font-display text-2xl text-foreground">{t('storyStat1Value')}</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">{t('storyStat1Label')}</dd>
+            </div>
+            <div>
+              <dt className="font-display text-2xl text-foreground">{t('storyStat2Value')}</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">{t('storyStat2Label')}</dd>
+            </div>
+          </dl>
+
+          <Link href="/products" className="btn-outline btn-md mt-8">
+            {t('storyCta')}
+            <IconArrowEnd size={18} className="rtl-flip" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/featured-products-section.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductGrid } from '@/ui/product/product-grid';
+import { IconArrowEnd } from '@/ui/shared/icons';
+
+/** Homepage featured-products grid with a section header + view-all link. */
+export function FeaturedProductsSection({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="section-pad">
+      <div className="container-page">
+        <div className="mb-8 flex flex-wrap items-end justify-between gap-4 lg:mb-10">
+          <div className="max-w-xl">
+            <span className="eyebrow">{t('featuredEyebrow')}</span>
+            <h2 className="text-4xl sm:text-5xl">{t('featuredProducts')}</h2>
+            <p className="mt-3 text-muted-foreground">{t('featuredSubtitle')}</p>
+          </div>
+          <Link
+            href="/products"
+            className="group inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:underline"
+          >
+            {tc('viewAll')}
+            <IconArrowEnd size={16} className="rtl-flip" />
+          </Link>
+        </div>
+
+        <ProductGrid products={products.slice(0, 8)} />
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/hero-section.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { useTranslations } from '@/core/lib/translations';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { getProductPriceInfo } from 'brainerce';
+import { IconArrowEnd, IconStar, IconSparkle } from '@/ui/shared/icons';
+
+/**
+ * Homepage hero — grid-breaking composition: oversized serif headline over a
+ * soft forest/sand radial wash, live-catalog photography as overlapping,
+ * slightly rotated floating cards with a glassy price chip. All imagery comes
+ * from useHomeData() in the parent; motion is reduced-motion guarded.
+ */
+export function HeroSection({
+  storeName,
+  products = [],
+}: {
+  storeName?: string | null;
+  products?: Product[];
+}) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  const heroProduct = products[0];
+  const sideProduct = products[1];
+  const heroImage = heroProduct?.images?.[0]?.url;
+  const sideImage = sideProduct?.images?.[0]?.url;
+
+  return (
+    <section className="wash-hero relative overflow-hidden">
+      {/* Drifting glow blob behind the collage */}
+      <div aria-hidden="true" className="glow-blob blob-drift end-[8%] top-[18%] h-80 w-80" />
+
+      <div className="container-page relative grid items-center gap-12 pb-20 pt-12 lg:grid-cols-12 lg:gap-8 lg:pb-28 lg:pt-20">
+        {/* Copy */}
+        <div className="reveal relative z-10 max-w-2xl lg:col-span-6">
+          <span className="glass inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-semibold text-primary">
+            <IconSparkle size={16} />
+            {t('heroEyebrow')}
+          </span>
+          <h1 className="mt-6 text-[clamp(2.75rem,6.5vw,5.5rem)] leading-[1.04]">
+            {t('heroTitle')}
+          </h1>
+          <p className="mt-6 max-w-lg text-lg leading-8 text-muted-foreground">{t('heroLead')}</p>
+
+          <div className="mt-9 flex flex-wrap items-center gap-3">
+            <Link href="/products" className="btn-primary btn-lg">
+              {tc('shopNow')}
+              <IconArrowEnd size={20} className="rtl-flip" />
+            </Link>
+            <a href="#categories" className="btn-outline btn-lg bg-background/60 backdrop-blur-sm">
+              {t('heroCtaSecondary')}
+            </a>
+          </div>
+
+          {/* Soft social proof */}
+          <p className="mt-9 inline-flex items-center gap-2 text-sm text-muted-foreground">
+            <span className="inline-flex text-primary" aria-hidden="true">
+              {[1, 2, 3, 4, 5].map((n) => (
+                <IconStar key={n} size={16} filled />
+              ))}
+            </span>
+            {t('heroTrust')}
+          </p>
+        </div>
+
+        {/* Overlapping floating collage — real catalog photography */}
+        {heroImage && (
+          <div className="reveal reveal-delay-1 relative mx-auto h-[26rem] w-full max-w-md sm:h-[30rem] lg:col-span-6 lg:h-[34rem] lg:max-w-none">
+            {/* Main card — tilted, floating */}
+            <Link
+              href={`/products/${heroProduct.slug || heroProduct.id}`}
+              className="group float-slow absolute inset-y-0 start-[4%] block w-[72%] -rotate-2 overflow-hidden rounded-3xl border-4 border-background shadow-[0_36px_80px_-30px_hsl(var(--primary)/0.45)]"
+              style={{ '--float-rotate': '-2deg' } as React.CSSProperties}
+            >
+              <Image
+                src={heroImage}
+                alt={heroProduct.images?.[0]?.alt || heroProduct.name}
+                fill
+                priority
+                sizes="(max-width: 1024px) 80vw, 36vw"
+                className="img-zoom object-cover"
+              />
+              {/* Glassy shop-this chip */}
+              <span className="glass absolute bottom-5 end-5 start-5 flex items-center justify-between gap-3 px-4 py-3 sm:end-auto sm:min-w-[15rem]">
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-semibold text-foreground">
+                    {heroProduct.name}
+                  </span>
+                  <HeroPrice product={heroProduct} />
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-[0_8px_20px_-6px_hsl(var(--primary)/0.6)]"
+                >
+                  <IconArrowEnd size={18} className="rtl-flip" />
+                </span>
+              </span>
+            </Link>
+
+            {/* Secondary card — overlaps the main one, counter-tilted */}
+            {sideImage && (
+              <Link
+                href={`/products/${sideProduct.slug || sideProduct.id}`}
+                className="group float-slower absolute -end-2 top-[54%] block aspect-[3/4] w-[38%] rotate-3 overflow-hidden rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.4)] sm:end-0"
+                style={{ '--float-rotate': '3deg' } as React.CSSProperties}
+              >
+                <Image
+                  src={sideImage}
+                  alt={sideProduct.images?.[0]?.alt || sideProduct.name}
+                  fill
+                  sizes="(max-width: 1024px) 40vw, 16vw"
+                  className="img-zoom object-cover"
+                />
+                <span className="sr-only">{sideProduct.name}</span>
+              </Link>
+            )}
+
+            {/* Floating accent chip */}
+            <span
+              aria-hidden="true"
+              className="glass float-slower absolute -start-2 top-[12%] hidden -rotate-[4deg] items-center gap-2 px-4 py-2 text-sm font-semibold text-primary sm:inline-flex"
+              style={{ '--float-rotate': '-4deg' } as React.CSSProperties}
+            >
+              <IconSparkle size={18} />
+              {t('storyStat1Value')}
+            </span>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function HeroPrice({ product }: { product: Product }) {
+  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
+  return (
+    <PriceDisplay
+      price={originalPrice}
+      salePrice={isOnSale ? price : undefined}
+      size="sm"
+      className="mt-0.5"
+    />
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/home-client.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Reveal } from '@/ui/shared/reveal';
+import { DiscountBannerStrip } from './discount-banner-strip';
+import { HeroSection } from './hero-section';
+import { BenefitsBand } from './benefits-band';
+import { FeaturedProductsSection } from './featured-products-section';
+import { CategoryTiles } from './category-tiles';
+import { EditorialBand } from './editorial-band';
+import { TestimonialsBand } from './testimonials-band';
+import { NewsletterSection } from './newsletter-section';
+
+/**
+ * Homepage composition — data via useHomeData() and useStoreInfo():
+ * banners → hero (floating collage) → tilted values marquee → trust band →
+ * featured grid → category tiles → studio story → testimonials → newsletter.
+ * Sections fade up on scroll via <Reveal> (reduced-motion safe).
+ */
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, banners, loading } = useHomeData();
+
+  if (storeLoading || loading) {
+    return <LoadingSpinner size="lg" className="min-h-[70vh]" />;
+  }
+
+  return (
+    <div className="overflow-x-clip">
+      <DiscountBannerStrip banners={banners} />
+      <HeroSection storeName={storeInfo?.name} products={products} />
+      <Reveal>
+        <BenefitsBand />
+      </Reveal>
+      <Reveal>
+        <FeaturedProductsSection products={products} />
+      </Reveal>
+      <Reveal>
+        <CategoryTiles products={products} />
+      </Reveal>
+      <Reveal>
+        <EditorialBand />
+      </Reveal>
+      <Reveal>
+        <TestimonialsBand />
+      </Reveal>
+      <Reveal>
+        <NewsletterSection />
+      </Reveal>
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/newsletter-section.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+/**
+ * Newsletter signup band — forest brand block with an inline email form.
+ * Client-side success state (template default; wire a provider later).
+ */
+import * as React from 'react';
+import { useTranslations } from '@/core/lib/translations';
+import { IconMail, IconCheck } from '@/ui/shared/icons';
+
+export function NewsletterSection() {
+  const t = useTranslations('home');
+  const [email, setEmail] = React.useState('');
+  const [done, setDone] = React.useState(false);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim()) return;
+    setDone(true);
+  }
+
+  return (
+    <section className="section-pad">
+      <div className="container-page">
+        <div className="wash-forest relative overflow-hidden rounded-3xl px-6 py-12 text-primary-foreground shadow-[0_30px_70px_-28px_hsl(var(--primary)/0.55)] sm:px-12 lg:px-20 lg:py-16">
+          <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
+            <span
+              aria-hidden="true"
+              className="mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-primary-foreground/10"
+            >
+              <IconMail size={24} />
+            </span>
+            <h2 className="text-4xl text-primary-foreground sm:text-5xl">{t('newsletterTitle')}</h2>
+            <p className="mt-3 max-w-lg text-primary-foreground/75">{t('newsletterSubtitle')}</p>
+
+            {done ? (
+              <p
+                role="status"
+                className="mt-8 inline-flex items-center gap-2 rounded-full bg-primary-foreground/10 px-5 py-3 text-sm font-semibold"
+              >
+                <IconCheck size={18} />
+                {t('newsletterSuccess')}
+              </p>
+            ) : (
+              <form
+                onSubmit={handleSubmit}
+                className="mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row"
+              >
+                <label className="sr-only" htmlFor="newsletter-email">
+                  {t('newsletterPlaceholder')}
+                </label>
+                <input
+                  id="newsletter-email"
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder={t('newsletterPlaceholder')}
+                  className="input h-12 flex-1 border-transparent bg-background text-foreground"
+                />
+                <button
+                  type="submit"
+                  className="btn h-12 shrink-0 bg-background px-7 text-foreground hover:bg-background/90"
+                >
+                  {t('newsletterCta')}
+                </button>
+              </form>
+            )}
+
+            {!done && (
+              <p className="mt-3 text-xs text-primary-foreground/60">{t('newsletterPrivacy')}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/testimonials-band.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+/** Testimonials band — three quote cards, copy from translation keys. */
+import { useTranslations } from '@/core/lib/translations';
+import { IconStar, IconQuote } from '@/ui/shared/icons';
+
+const TESTIMONIALS = [1, 2, 3] as const;
+
+export function TestimonialsBand() {
+  const t = useTranslations('home');
+
+  return (
+    <section className="section-pad wash-sand">
+      <div className="container-page">
+        <div className="mb-8 max-w-xl lg:mb-10">
+          <span className="eyebrow">{t('testimonialsEyebrow')}</span>
+          <h2 className="text-4xl sm:text-5xl">{t('testimonialsTitle')}</h2>
+        </div>
+
+        <ul className="grid gap-4 sm:gap-6 lg:grid-cols-3">
+          {TESTIMONIALS.map((n) => (
+            <li key={n}>
+              <figure className={`card card-hover flex h-full flex-col gap-4 p-6 ${n === 2 ? 'lg:rotate-1' : 'lg:-rotate-1'} lg:hover:rotate-0`}>
+                <span className="text-primary/30" aria-hidden="true">
+                  <IconQuote size={28} />
+                </span>
+                <span className="inline-flex text-primary" aria-label="5/5">
+                  {[1, 2, 3, 4, 5].map((s) => (
+                    <IconStar key={s} size={16} filled />
+                  ))}
+                </span>
+                <blockquote className="flex-1 leading-7 text-foreground">
+                  “{t(`testimonial${n}Quote`)}”
+                </blockquote>
+                <figcaption className="border-t pt-4 text-sm">
+                  <span className="font-semibold text-foreground">{t(`testimonial${n}Name`)}</span>
+                  <span className="text-muted-foreground"> · {t(`testimonial${n}Meta`)}</span>
+                </figcaption>
+              </figure>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}