create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/designs/passepartout/ui/cart/cart-nudges.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import type { CartNudge } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-
-interface CartNudgesProps {
-  nudges: CartNudge[];
-  className?: string;
-}
-
-export function CartNudges({ nudges, className }: CartNudgesProps) {
-  if (nudges.length === 0) return null;
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      {nudges.map((nudge) => (
-        <div
-          key={nudge.ruleId}
-          className="bg-primary/5 border-primary/20 flex items-start gap-3 rounded-none border px-4 py-3"
-        >
-          <svg
-            className="text-primary mt-0.5 h-5 w-5 flex-shrink-0"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <p className="text-foreground flex-1 text-sm">{nudge.text}</p>
-        </div>
-      ))}
-    </div>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/cart/cart-view.tsx

@@ -1,149 +0,0 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { useCartPage } from '@/core/hooks/use-cart-page';
-import { CartItem } from '@/ui/cart/cart-item';
-import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
-import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
-import { CartSummary } from '@/ui/cart/cart-summary';
-import { CouponInput } from '@/ui/cart/coupon-input';
-import { CartNudges } from '@/ui/cart/cart-nudges';
-import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
-import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
-import { CartRecommendationSection } from '@/ui/product/recommendation-section';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { useTranslations } from '@/core/lib/translations';
-
-export function CartView() {
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
-
-  if (cartLoading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  // Empty cart state
-  if (!cart || cart.items.length === 0) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <svg
-          className="text-muted-foreground mx-auto mb-4 h-16 w-16"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-          />
-        </svg>
-        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
-        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
-        <Link
-          href="/products"
-          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {tc('continueShopping')}
-        </Link>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-bold">
-        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-      </h1>
-
-      {/* Reservation countdown */}
-      {cart.reservation?.hasReservation && (
-        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
-      )}
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* Cart Items */}
-        <div className="lg:col-span-2">
-          {/* Nudges */}
-          {cart.nudges && cart.nudges.length > 0 && (
-            <CartNudges nudges={cart.nudges} className="mb-4" />
-          )}
-
-          {/* Cart items */}
-          <div>
-            {cart.items.map((item) => (
-              <div key={item.id}>
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                    className="mb-2 ms-24"
-                  />
-                )}
-              </div>
-            ))}
-          </div>
-
-          {/* Bundle offers */}
-          {bundles?.bundles && bundles.bundles.length > 0 && (
-            <div className="mt-6 space-y-3">
-              <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
-              {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard
-                  key={offer.id}
-                  offer={offer}
-                  cartId={cart.id}
-                  onAdd={refreshCart}
-                />
-              ))}
-            </div>
-          )}
-
-          {/* Coupon input */}
-          <div className="border-border mt-6 border-t pt-4">
-            <CouponInput cart={cart} onUpdate={refreshCart} />
-          </div>
-        </div>
-
-        {/* Summary sidebar */}
-        <div className="lg:col-span-1">
-          <div className="bg-muted/50 border-border sticky top-24 rounded-none border p-6">
-            <FreeShippingBar className="mb-4" />
-            <CartSummary />
-
-            <Link
-              href="/checkout"
-              className="bg-primary text-primary-foreground mt-6 inline-flex w-full items-center justify-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              {t('proceedToCheckout')}
-            </Link>
-
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
-            >
-              {tc('continueShopping')}
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection
-          title={t('youMightAlsoNeed')}
-          items={cartRecs.recommendations}
-          className="mt-10"
-        />
-      )}
-    </div>
-  );
-}

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

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