create-brainerce-store 1.62.0 → 1.63.0

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

@@ -1,174 +1,174 @@
-'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>
-        )}
-
-        {/* Empty catalog — the same floating composition as designed washes,
-            so a brand-new store still opens rich instead of half-blank. The
-            first two published products replace these automatically. */}
-        {!heroImage && (
-          <div
-            aria-hidden="true"
-            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"
-          >
-            <div
-              className="float-slow wash-forest absolute inset-y-0 start-[4%] flex w-[72%] -rotate-2 items-center justify-center 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}
-            >
-              <IconSparkle size={56} className="text-primary/25" />
-              <span className="glass absolute bottom-5 end-5 start-5 px-4 py-3 text-center text-sm font-medium text-muted-foreground">
-                {t('heroEmptyHint')}
-              </span>
-            </div>
-            <div
-              className="float-slower wash-sand absolute -end-2 top-[54%] flex aspect-[3/4] w-[38%] rotate-3 items-center justify-center 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}
-            >
-              <IconStar size={32} filled className="text-primary/20" />
-            </div>
-          </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"
-    />
-  );
-}
+'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>
+        )}
+
+        {/* Empty catalog — the same floating composition as designed washes,
+            so a brand-new store still opens rich instead of half-blank. The
+            first two published products replace these automatically. */}
+        {!heroImage && (
+          <div
+            aria-hidden="true"
+            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"
+          >
+            <div
+              className="float-slow wash-forest absolute inset-y-0 start-[4%] flex w-[72%] -rotate-2 items-center justify-center 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}
+            >
+              <IconSparkle size={56} className="text-primary/25" />
+              <span className="glass absolute bottom-5 end-5 start-5 px-4 py-3 text-center text-sm font-medium text-muted-foreground">
+                {t('heroEmptyHint')}
+              </span>
+            </div>
+            <div
+              className="float-slower wash-sand absolute -end-2 top-[54%] flex aspect-[3/4] w-[38%] rotate-3 items-center justify-center 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}
+            >
+              <IconStar size={32} filled className="text-primary/20" />
+            </div>
+          </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

@@ -1,54 +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>
-  );
-}
+'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

@@ -1,78 +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>
-  );
-}
+'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>
+  );
+}