create-brainerce-store 1.50.5 → 1.51.0

package/templates/nextjs/designs/passepartout/ui/cart/free-shipping-bar.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo, useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface FreeShippingBarProps {
+  className?: string;
+}
+
+export function FreeShippingBar({ className }: FreeShippingBarProps) {
+  // Hooks must be called unconditionally and in the same order on every
+  // render — keep all of them above any early `return null` branch.
+  const t = useTranslations('cart');
+  const { storeInfo } = useStoreInfo();
+  const { totals } = useCart();
+  const currency = useCurrency();
+
+  const upsell = storeInfo?.upsell;
+  const threshold = upsell?.freeShippingThreshold;
+  const enabled = upsell?.freeShippingBarEnabled !== false;
+
+  // Don't render if disabled or no threshold configured
+  if (!enabled || !threshold || threshold <= 0) return null;
+
+  const subtotal = totals.subtotal;
+  const remaining = Math.max(0, threshold - subtotal);
+  const progress = Math.min(100, (subtotal / threshold) * 100);
+  const qualified = remaining <= 0;
+
+  // Don't show if already qualified
+  if (qualified) {
+    return (
+      <div className={cn('rounded-none border border-green-200 bg-green-50 p-3', className)}>
+        <div className="flex items-center gap-2 text-sm font-medium text-green-700">
+          <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          {t('freeShippingQualified')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('rounded-none border border-amber-200 bg-amber-50 p-3', className)}>
+      <p className="mb-2 text-sm text-amber-800">
+        {t('freeShippingRemaining', {
+          amount: formatPrice(remaining, { currency }) as string,
+        })}
+      </p>
+      <div className="h-2 w-full overflow-hidden rounded-full bg-amber-200">
+        <div
+          className="h-full rounded-full bg-amber-500 transition-all duration-500 ease-out"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/designs/passepartout/ui/cart/reservation-countdown.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+export function ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
+  const t = useTranslations('reservation');
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+
+  const calculateRemaining = useCallback(() => {
+    if (!reservation.expiresAt) return 0;
+    const expiresAtMs = new Date(reservation.expiresAt).getTime();
+    const nowMs = Date.now();
+    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
+  }, [reservation.expiresAt]);
+
+  useEffect(() => {
+    setRemainingSeconds(calculateRemaining());
+
+    const interval = setInterval(() => {
+      const remaining = calculateRemaining();
+      setRemainingSeconds(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRemaining]);
+
+  if (!reservation.hasReservation) return null;
+
+  const minutes = Math.floor(remainingSeconds / 60);
+  const seconds = remainingSeconds % 60;
+  const isExpired = remainingSeconds <= 0;
+  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
+
+  const displayMessage = reservation.countdownMessage
+    ? reservation.countdownMessage.replace(
+        '{time}',
+        `${minutes}:${seconds.toString().padStart(2, '0')}`
+      )
+    : null;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-none px-4 py-3 text-sm',
+        isExpired
+          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
+          : isUrgent
+            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
+            : 'bg-primary/5 border-primary/20 text-foreground border',
+        className
+      )}
+    >
+      <svg
+        className={cn(
+          'h-5 w-5 flex-shrink-0',
+          isExpired
+            ? 'text-destructive'
+            : isUrgent
+              ? 'text-orange-600 dark:text-orange-400'
+              : 'text-primary'
+        )}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+
+      <div className="flex-1">
+        {isExpired ? (
+          <p className="font-medium">{t('expired')}</p>
+        ) : displayMessage ? (
+          <p>{displayMessage}</p>
+        ) : (
+          <p>
+            {isUrgent ? `${t('hurry')} ` : ''}
+            {t('reservedFor')}{' '}
+            <span className="font-semibold tabular-nums">
+              {minutes}:{seconds.toString().padStart(2, '0')}
+            </span>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,401 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { ProductGrid } from '@/ui/product/product-grid';
+import { ProductCard } from '@/ui/product/product-card';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+import { TrustIcons } from '@/ui/layout/trust-icons';
+
+/** Adds `revealed` to every [data-reveal] element as it enters the viewport. */
+function useScrollReveal(ready: boolean) {
+  useEffect(() => {
+    if (!ready || typeof IntersectionObserver === 'undefined') return;
+    const els = document.querySelectorAll('[data-reveal]');
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('revealed');
+            io.unobserve(entry.target);
+          }
+        }
+      },
+      { threshold: 0.12 }
+    );
+    els.forEach((el) => io.observe(el));
+    return () => io.disconnect();
+  }, [ready]);
+}
+
+/** Catalog-numbered section header — the exhibition idiom. */
+function SectionHeader({
+  kicker,
+  title,
+  end,
+}: {
+  kicker: string;
+  title: string;
+  end?: React.ReactNode;
+}) {
+  return (
+    <>
+      <div className="flex items-baseline justify-between">
+        <div>
+          <p className="placard tabular">{kicker}</p>
+          <h2 className="text-foreground mt-1 font-serif text-2xl font-normal">{title}</h2>
+        </div>
+        {end}
+      </div>
+      <div className="border-border mt-6 border-b" />
+    </>
+  );
+}
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, banners, loading } = useHomeData();
+  const [joined, setJoined] = useState(false);
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  const storeName = storeInfo?.name || process.env.NEXT_PUBLIC_STORE_NAME || '';
+
+  const ready = !storeLoading && !loading;
+  useScrollReveal(ready);
+
+  // One tile per category, dressed with the first product photo we have for
+  // it. When the channel exposes no category data, the wall simply skips
+  // this section — never invent catalog content.
+  const categoryTiles = useMemo(() => {
+    const map = new Map<string, { name: string; image: string | null; href: string }>();
+    for (const p of products) {
+      for (const c of p.categories ?? []) {
+        if (!map.has(c.id)) {
+          map.set(c.id, {
+            name: c.name,
+            image: p.images?.[0]?.url ?? null,
+            href: `/products?category=${c.id}`,
+          });
+        }
+      }
+    }
+    return [...map.values()].filter((c) => c.image).slice(0, 4);
+  }, [products]);
+
+  // "On the wall now" — sale pieces first, newest fill the rest.
+  const wallStrip = useMemo(() => {
+    const sale = products.filter((p) => p.salePrice);
+    const rest = products.filter((p) => !p.salePrice);
+    return [...sale, ...rest].slice(0, 6);
+  }, [products]);
+
+  const heroA = products[0]?.images?.[0]?.url ?? null;
+  const heroB = products[2]?.images?.[0]?.url ?? null;
+  const storyImage =
+    products.find((p) => (p.images?.length ?? 0) > 2)?.images?.[1]?.url ??
+    products[1]?.images?.[0]?.url ??
+    null;
+
+  if (!ready) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  const marqueeItems = [
+    t('marqueeHandmade'),
+    t('trustShipping'),
+    t('trustWarranty'),
+    t('trustGift'),
+    t('marqueeOneOff'),
+  ];
+
+  return (
+    <div>
+      {/* Discount banners — a quiet vernissage line, not a promo slab */}
+      {banners.length > 0 && (
+        <div className="bg-background border-border border-b">
+          <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-3 gap-y-1 px-4 py-2.5 sm:px-6 lg:px-8">
+            {banners.map((banner, idx) => (
+              <span
+                key={banner.ruleId}
+                className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]"
+              >
+                {idx > 0 ? (
+                  <span aria-hidden="true" className="text-accent me-3">
+                    ·
+                  </span>
+                ) : null}
+                {banner.text}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Hero — editorial split: statement wall + hung collage */}
+      <section className="relative overflow-hidden">
+        <div aria-hidden="true">
+          <div className="wash wash-sand -top-40 start-[-12%] h-[36rem] w-[36rem]" />
+          <div className="wash wash-blush bottom-[-8rem] end-[-10%] h-[30rem] w-[30rem]" />
+          {/* The ghost word — the store's own name, printed into the wall */}
+          {storeName && (
+            <span className="text-foreground/[0.045] pointer-events-none absolute -bottom-16 start-2 select-none font-serif text-[clamp(7rem,20vw,17rem)] font-light leading-none">
+              {storeName}
+            </span>
+          )}
+        </div>
+        <div className="relative mx-auto grid max-w-7xl grid-cols-12 items-center gap-y-12 px-4 py-16 sm:px-6 md:min-h-[78vh] md:py-20 lg:px-8">
+          <div className="col-span-12 text-start md:col-span-5">
+            <p className="placard">{t('heroOverline')}</p>
+            <h1 className="text-foreground mt-5 font-serif text-[clamp(2.5rem,6.5vw,4.25rem)] font-light leading-[1.12]">
+              {storeName}
+            </h1>
+            <p className="text-foreground/70 mt-5 max-w-md font-serif text-lg font-light leading-relaxed">
+              {t('heroSubtitle')}
+            </p>
+            <div className="brass-rule mt-8 w-24" />
+            <div className="mt-10 flex flex-wrap items-center gap-4">
+              <Link
+                href="/products"
+                className="bg-primary text-primary-foreground inline-flex items-center px-8 py-3.5 text-[0.8125rem] font-semibold"
+              >
+                {tc('shopNow')}
+              </Link>
+              <Link href="/contact" className="text-foreground text-xs">
+                {t('ctaStory')} ←
+              </Link>
+            </div>
+          </div>
+
+          {/* The hung collage — two framed works, offset like a gallery wall */}
+          <div className="relative col-span-12 h-[46vh] md:col-span-7 md:h-[62vh]">
+            {heroA && (
+              <div className="bg-surface border-border hung absolute top-0 h-[78%] w-[68%] overflow-hidden border md:end-10">
+                <Image
+                  src={heroA}
+                  alt={products[0]?.name ?? ''}
+                  fill
+                  sizes="(max-width: 768px) 70vw, 40vw"
+                  className="object-cover"
+                  priority
+                />
+              </div>
+            )}
+            {heroB && (
+              <div className="bg-surface border-border hung absolute bottom-0 start-0 h-[52%] w-[44%] overflow-hidden border md:start-6">
+                <Image
+                  src={heroB}
+                  alt={products[2]?.name ?? ''}
+                  fill
+                  sizes="(max-width: 768px) 45vw, 25vw"
+                  className="object-cover"
+                />
+              </div>
+            )}
+            <div className="brass-rule absolute -bottom-6 end-16 hidden w-24 md:block" />
+          </div>
+        </div>
+      </section>
+
+      {/* Marquee — the engraved drifting band */}
+      <div className="marquee border-border border-y py-3" aria-hidden="true">
+        <div className="marquee-track">
+          {[0, 1].map((half) => (
+            <span key={half} className="inline-flex">
+              {marqueeItems.map((item, i) => (
+                <span
+                  key={`${half}-${i}`}
+                  className="text-muted-foreground mx-6 inline-flex items-center gap-6 text-[0.6875rem] tracking-[0.14em]"
+                >
+                  {item}
+                  <span className="text-accent">◆</span>
+                </span>
+              ))}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* No. 01 — Collections */}
+      {categoryTiles.length > 0 && (
+        <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8" data-reveal>
+          <SectionHeader kicker={t('collectionsKicker')} title={t('collections')} />
+          <div className="mt-10 grid grid-cols-2 gap-x-4 gap-y-10 lg:grid-cols-4 lg:gap-x-6">
+            {categoryTiles.map((cat) => (
+              <Link key={cat.name} href={cat.href} className="group block">
+                <div className="bg-surface border-border hung relative aspect-[4/5] overflow-hidden border">
+                  <Image
+                    src={cat.image as string}
+                    alt={cat.name}
+                    fill
+                    sizes="(max-width: 1024px) 50vw, 25vw"
+                    className="object-cover transition-transform duration-700 group-hover:scale-[1.04]"
+                  />
+                  <div className="bg-surface/95 border-border absolute inset-x-0 bottom-0 border-t py-2.5 text-center">
+                    <span className="text-foreground font-serif text-sm">{cat.name}</span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <div className="hairline-fade" />
+
+      {/* No. 02 — Selected pieces */}
+      <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8" data-reveal>
+        <SectionHeader
+          kicker={t('featuredKicker')}
+          title={t('featuredProducts')}
+          end={
+            <Link href="/products" className="text-foreground text-xs">
+              {t('viewExhibition')} ←
+            </Link>
+          }
+        />
+        <div className="mt-10">
+          <ProductGrid products={products.slice(0, 8)} />
+        </div>
+      </section>
+
+      {/* The story — editorial band on the mat */}
+      <section className="bg-surface border-border border-y" data-reveal>
+        <div className="mx-auto grid max-w-7xl grid-cols-12 items-center gap-y-10 px-4 py-16 sm:px-6 md:py-24 lg:px-8">
+          <div className="col-span-12 md:col-span-5">
+            <p className="placard">{t('storyOverline')}</p>
+            <h2 className="text-foreground mt-4 font-serif text-[clamp(1.75rem,4vw,2.75rem)] font-light leading-[1.2]">
+              {t('storyTitle')}
+            </h2>
+            <p className="text-foreground/75 mt-6 max-w-md font-serif text-[1.0625rem] font-light leading-[1.9]">
+              {t('storyBody')}
+            </p>
+            <div className="brass-rule mt-8 w-16" />
+            <Link href="/products" className="text-foreground mt-8 inline-block text-xs">
+              {t('storyCta')} ←
+            </Link>
+          </div>
+          <div className="col-span-12 md:col-span-6 md:col-start-7">
+            {storyImage && (
+              <div className="bg-background border-border hung relative aspect-[4/3] overflow-hidden border">
+                <Image
+                  src={storyImage}
+                  alt={t('storyOverline')}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  className="object-cover"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* No. 03 — On the wall now: horizontal snap strip */}
+      {wallStrip.length > 0 && (
+        <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8" data-reveal>
+          <SectionHeader kicker={t('onWallKicker')} title={t('onWall')} />
+          <div className="-mx-4 mt-10 flex snap-x snap-mandatory gap-5 overflow-x-auto px-4 pb-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+            {wallStrip.map((p) => (
+              <div key={p.id} className="w-[70vw] flex-shrink-0 snap-start sm:w-[40vw] lg:w-[23%]">
+                <ProductCard product={p} />
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <div className="hairline-fade" />
+
+      {/* No. 04 — Kind words: quotes as placards */}
+      <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8" data-reveal>
+        <SectionHeader kicker={t('voicesKicker')} title={t('voices')} />
+        <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-3">
+          {[1, 2, 3].map((n) => (
+            <figure key={n} className="bg-surface border-border hung border p-8">
+              <div className="text-accent text-lg" aria-hidden="true">
+                ★★★★★
+              </div>
+              <blockquote className="text-foreground/85 mt-4 font-serif text-[1.0625rem] font-light leading-[1.8]">
+                {t(`quote${n}` as 'quote1')}
+              </blockquote>
+              <figcaption className="placard mt-6">{t(`name${n}` as 'name1')}</figcaption>
+            </figure>
+          ))}
+        </div>
+      </section>
+
+      {/* Visit band — the closing wall */}
+      <section className="border-border relative overflow-hidden border-t" data-reveal>
+        <div aria-hidden="true">
+          <div className="wash wash-sand -top-24 end-[15%] h-[26rem] w-[26rem]" />
+        </div>
+        <div className="relative mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 md:py-28 lg:px-8">
+          <p className="placard">{t('heroOverline')}</p>
+          <h2 className="text-foreground mt-4 font-serif text-[clamp(1.75rem,4.5vw,3rem)] font-light">
+            {t('visitTitle')}
+          </h2>
+          <p className="text-muted-foreground tabular mt-4 text-[0.8125rem] tracking-[0.08em]">
+            {t('visitSub')}
+          </p>
+          <div className="brass-rule mx-auto mt-8 w-24" />
+          <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
+            <Link
+              href="/contact"
+              className="bg-primary text-primary-foreground inline-flex items-center px-8 py-3.5 text-[0.8125rem] font-semibold"
+            >
+              {t('visitCta')}
+            </Link>
+            <Link href="/products" className="text-foreground text-xs">
+              {t('viewExhibition')} ←
+            </Link>
+          </div>
+
+          {/* Newsletter — the guest book */}
+          <div className="mx-auto mt-14 max-w-md">
+            {joined ? (
+              <p className="border-border bg-surface text-foreground border py-4 text-center text-sm tracking-[0.04em]">
+                {t('newsletterSuccess')}
+              </p>
+            ) : (
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  setJoined(true);
+                }}
+                className="flex items-stretch"
+              >
+                <input
+                  type="email"
+                  required
+                  placeholder={t('newsletterPlaceholder')}
+                  className="border-border bg-surface min-w-0 flex-1 border px-4 py-3 text-sm focus:outline-none"
+                />
+                <button
+                  type="submit"
+                  className="bg-primary text-primary-foreground border-primary border px-6 text-[0.8125rem] font-semibold"
+                >
+                  {t('newsletterCta')}
+                </button>
+              </form>
+            )}
+            {!joined && <p className="placard mt-3 text-center">{t('newsletterHook')}</p>}
+          </div>
+
+          {/* Trust icons — the promise row */}
+          <div className="mt-16">
+            <TrustIcons />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}