create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/designs/passepartout/ui/layout/announcement-bar.tsx

@@ -1,139 +0,0 @@
-/**
- * Storefront announcement bar — fully driven by the merchant's dashboard.
- *
- * The merchant configures announcements in the Brainerce dashboard under
- *   Sell → Content → Announcement
- *
- * Everything below is generic rendering logic — it adapts automatically to
- * any announcement shape returned by the API, so **you should not hardcode
- * the message or severity here**.
- *
- * API contract:
- *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
- *   Empty array → renders nothing (page layout stays intact).
- *
- * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
- * timestamps. We filter client-side so the cached server response can be
- * shared across visitors regardless of the current time.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface AnnouncementBarProps {
-  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
-  announcements: Content<'ANNOUNCEMENT'>[];
-}
-
-/* Severity arrives as text tone, never as a colored slab — the bar reads
-   like a gallery's opening-hours line, not a promo shout. */
-const SEVERITY_STYLES: Record<'info' | 'warning' | 'success', string> = {
-  info: 'text-muted-foreground',
-  warning: 'text-destructive',
-  success: 'text-foreground',
-};
-
-const STORAGE_KEY = 'brainerce_dismissed_announcements';
-
-export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
-  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
-
-  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
-  React.useEffect(() => {
-    if (typeof window === 'undefined') return;
-    try {
-      const raw = window.localStorage.getItem(STORAGE_KEY);
-      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
-    } catch {
-      // ignore malformed storage
-    }
-  }, []);
-
-  const dismiss = (id: string) => {
-    setDismissed((prev) => {
-      const next = new Set(prev);
-      next.add(id);
-      if (typeof window !== 'undefined') {
-        try {
-          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
-        } catch {
-          // ignore quota errors
-        }
-      }
-      return next;
-    });
-  };
-
-  const now = Date.now();
-  const visible = announcements.filter((a) => {
-    if (dismissed.has(a.id)) return false;
-    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
-    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
-    return startOk && endOk;
-  });
-
-  if (visible.length === 0) return null;
-
-  return (
-    <div
-      role="region"
-      aria-label="Site announcements"
-      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">
-        {visible.map((announcement, idx) => {
-          const severity = announcement.data.severity;
-          const tone = SEVERITY_STYLES[severity] ?? SEVERITY_STYLES.info;
-          return (
-            <React.Fragment key={announcement.id}>
-              {idx > 0 ? (
-                <span aria-hidden="true" className="text-accent text-[0.6875rem]">
-                  ·
-                </span>
-              ) : null}
-              <span
-                className={`inline-flex items-center gap-2 text-center text-[0.6875rem] tracking-[0.08em] ${tone}`}
-              >
-                <span>
-                  {announcement.data.message}
-                  {announcement.data.ctaHref && announcement.data.ctaLabel ? (
-                    <>
-                      {' '}
-                      <a
-                        href={announcement.data.ctaHref}
-                        className="underline underline-offset-2"
-                      >
-                        {announcement.data.ctaLabel}
-                      </a>
-                    </>
-                  ) : null}
-                </span>
-                {announcement.data.dismissible ? (
-                  <button
-                    type="button"
-                    onClick={() => dismiss(announcement.id)}
-                    aria-label="Dismiss announcement"
-                    className="text-current opacity-60 transition-opacity hover:opacity-100"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      className="h-3 w-3"
-                      aria-hidden="true"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                ) : null}
-              </span>
-            </React.Fragment>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/cart-link.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useCart } from '@/core/providers/store-provider';
-
-const CartIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <circle cx="9" cy="21" r="1" />
-    <circle cx="20" cy="21" r="1" />
-    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
-  </svg>
-);
-
-/**
- * Header cart link with a live item-count badge. Also the landing pad for
- * the fly-to-cart animation (`#cart-anchor` + `.cart-bump`).
- */
-export function CartLink() {
-  const { itemCount } = useCart();
-
-  return (
-    <a
-      id="cart-anchor"
-      href="/cart"
-      aria-label="Cart"
-      className="text-muted-foreground hover:text-foreground relative inline-flex h-9 w-9 items-center justify-center transition-colors"
-    >
-      <CartIcon className="h-5 w-5" />
-      {itemCount > 0 && (
-        <span className="bg-primary text-primary-foreground tabular absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.625rem] font-semibold leading-none">
-          {itemCount}
-        </span>
-      )}
-    </a>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/faq-section.tsx

@@ -1,103 +0,0 @@
-/**
- * FAQ accordion — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Two render branches:
- *   1. `faq` has items → accordion of question/answer pairs
- *   2. `faq` is null OR has no items → friendly empty state with a contact
- *      CTA, so the /faq page never looks broken before the merchant seeds.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const t = useTranslations('content');
-  const [openIdx, setOpenIdx] = React.useState<number | null>(0);
-
-  const items = faq?.data?.items ?? [];
-  const heading = faq?.name || t('faqTitle');
-
-  // Empty state — runs when the merchant hasn't created a FAQ row yet,
-  // or the row exists but contains no items. Keep the page non-empty and
-  // give the visitor a path to contact instead of a blank screen.
-  if (!faq || items.length === 0) {
-    return (
-      <section className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground mb-3 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-        <p className="text-muted-foreground mb-6 text-sm sm:text-base">
-          <strong className="text-foreground">{t('faqEmptyTitle')}</strong>
-          <br />
-          {t('faqEmptyBody')}
-        </p>
-        <a
-          href="/contact"
-          className="bg-primary text-primary-foreground inline-flex items-center justify-center rounded-none px-4 py-2 text-sm font-medium transition-colors hover:opacity-90"
-        >
-          {t('faqContactCta')}
-        </a>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-      <ul className="border-border divide-border divide-y rounded-none border">
-        {items.map((item, idx) => {
-          const open = openIdx === idx;
-          return (
-            <li key={idx}>
-              <button
-                type="button"
-                onClick={() => setOpenIdx(open ? null : idx)}
-                aria-expanded={open}
-                className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 p-4 text-start transition-colors"
-              >
-                <span className="text-foreground text-sm font-medium sm:text-base">
-                  {item.question}
-                </span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className={`text-muted-foreground h-4 w-4 transition-transform ${
-                    open ? 'rotate-180' : ''
-                  }`}
-                  aria-hidden="true"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                </svg>
-              </button>
-              {open ? (
-                <div
-                  className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed"
-                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
-                />
-              ) : null}
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/site-footer.tsx

@@ -1,159 +0,0 @@
-/**
- * Storefront footer — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures the footer in the Brainerce dashboard under
- *   Sell → Content → Footer
- *
- * Renders a brand block (store-name + social icons), the merchant's link
- * columns, and a copyright bar. Social icons are inline SVGs so the
- * scaffold stays dependency-free; unknown platforms fall back to a
- * letter avatar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — we render a minimal fallback so the layout never
- *   crashes when the merchant hasn't seeded the footer yet.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface SiteFooterProps {
-  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
-  footer: Content<'FOOTER'> | null;
-  /** Store name shown in the brand block + fallback copyright. */
-  storeName?: string;
-}
-
-type SvgComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-const InstagramIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
-    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
-  </svg>
-);
-
-const FacebookIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
-    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-  </svg>
-);
-
-const XIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-  </svg>
-);
-
-const LinkedInIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" />
-  </svg>
-);
-
-const YouTubeIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-  </svg>
-);
-
-const TikTokIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z" />
-  </svg>
-);
-
-const SOCIAL_ICONS: Record<string, SvgComponent> = {
-  instagram: InstagramIcon,
-  facebook: FacebookIcon,
-  x: XIcon,
-  twitter: XIcon,
-  linkedin: LinkedInIcon,
-  youtube: YouTubeIcon,
-  tiktok: TikTokIcon,
-};
-
-export function SiteFooter({ footer, storeName }: SiteFooterProps) {
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
-    return (
-      <footer className="border-border bg-background text-muted-foreground mt-16 border-t py-8">
-        <div className="mx-auto max-w-7xl px-4 text-center text-[0.6875rem] tracking-[0.08em] sm:px-6 lg:px-8">
-          © {year} {brandLabel}. All rights reserved.
-        </div>
-      </footer>
-    );
-  }
-
-  return (
-    <footer className="border-border bg-background mt-16 border-t">
-      <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
-          <div className="md:col-span-4">
-            <a href="/" className="text-foreground font-serif text-lg font-normal">
-              {brandLabel}
-            </a>
-            {social.length > 0 ? (
-              <div className="mt-4 flex flex-wrap items-center gap-2">
-                {social.map((entry, idx) => {
-                  const key = entry.platform.toLowerCase();
-                  const Icon = SOCIAL_ICONS[key];
-                  return (
-                    <a
-                      key={`${entry.platform}-${idx}`}
-                      href={entry.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={entry.platform}
-                      className="border-border hover:border-foreground hover:text-foreground text-muted-foreground inline-flex h-9 w-9 items-center justify-center border transition-colors"
-                    >
-                      {Icon ? (
-                        <Icon className="h-4 w-4" strokeWidth={1.5} />
-                      ) : (
-                        <span className="text-xs font-medium uppercase">
-                          {entry.platform.charAt(0)}
-                        </span>
-                      )}
-                    </a>
-                  );
-                })}
-              </div>
-            ) : null}
-          </div>
-
-          {columns.length > 0 ? (
-            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
-              {columns.map((col, idx) => (
-                <div key={`${col.title}-${idx}`}>
-                  <h3 className="placard mb-4 font-sans">{col.title}</h3>
-                  <ul className="space-y-2">
-                    {col.links.map((link, linkIdx) => (
-                      <li key={`${link.url}-${linkIdx}`}>
-                        <a
-                          href={link.url}
-                          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                        >
-                          {link.label}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          ) : null}
-        </div>
-
-        <div className="border-border text-muted-foreground mt-12 flex flex-col items-center justify-between gap-2 border-t pt-6 text-[0.6875rem] tracking-[0.08em] sm:flex-row">
-          <span>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</span>
-        </div>
-      </div>
-    </footer>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/site-header.tsx.ejs

@@ -1,155 +0,0 @@
-/**
- * Merchant-controlled site header.
- *
- * The merchant configures the header in the Brainerce dashboard under
- *   Sell → Content → Header
- *
- * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
- * with a `<details>` mobile menu that works without client-side JS. Everything
- * is generic — do NOT hardcode nav labels or logo paths here; the merchant
- * edits them in the dashboard and the change propagates within ~5 minutes.
- *
- * If `header` is null (404 from the API, or the merchant deleted the row),
- * we render a minimal static fallback with just the brand label and cart link
- * so the layout never collapses. New stores ship with a seeded HEADER row
- * from the backend (StoresService.seedDefaultContent), so the populated
- * branch is the common case.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { HeaderAccount } from './header-account';
-import { CartLink } from '@/ui/layout/cart-link';
-<% if (i18nEnabled) { %>
-import { LanguageSwitcher } from '@/ui/layout/language-switcher';
-<% } %>
-
-interface SiteHeaderProps {
-  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
-  header: Content<'HEADER'> | null;
-  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
-  storeName?: string;
-}
-
-const MenuIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <line x1="4" y1="6" x2="20" y2="6" />
-    <line x1="4" y1="12" x2="20" y2="12" />
-    <line x1="4" y1="18" x2="20" y2="18" />
-  </svg>
-);
-
-export function SiteHeader({ header, storeName }: SiteHeaderProps) {
-  const data = header?.data;
-  const logo = data?.logo;
-  const navItems = data?.navItems ?? [];
-  const cta = data?.cta;
-  const brandLabel = logo?.alt || storeName || 'Store';
-
-  // Static fallback — runs when the Content API returned null (no HEADER row
-  // for this store yet, or fetch failed). Keep the brand + cart so the page
-  // always has a clickable home link and entry to checkout, but no nav since
-  // the merchant hasn't defined any items.
-  if (!header) {
-    return (
-      <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
-        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-          <a href="/" className="font-serif text-lg font-normal" aria-label={brandLabel}>
-            {brandLabel}
-          </a>
-          <div className="flex items-center gap-2">
-            <% if (i18nEnabled) { %>
-            <LanguageSwitcher />
-            <% } %>
-            <HeaderAccount />
-            <CartLink />
-          </div>
-        </div>
-      </header>
-    );
-  }
-
-  return (
-    <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
-      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-        <a
-          href="/"
-          className="flex items-center gap-2 font-serif font-normal"
-          aria-label={brandLabel}
-        >
-          {logo ? (
-            // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
-            <img src={logo.src} alt={logo.alt} className="h-7 w-auto" />
-          ) : (
-            <span className="text-lg">{brandLabel}</span>
-          )}
-        </a>
-
-        {navItems.length > 0 ? (
-          <nav className="hidden items-center gap-10 md:flex">
-            {navItems.map((item, idx) => (
-              <a
-                key={`${item.url}-${idx}`}
-                href={item.url}
-                className="text-muted-foreground hover:text-foreground group relative text-xs transition-colors"
-              >
-                {item.label}
-                <span className="bg-foreground absolute -bottom-0.5 start-0 end-0 h-px origin-right scale-x-0 transition-transform duration-200 group-hover:scale-x-100" />
-              </a>
-            ))}
-          </nav>
-        ) : null}
-
-        <div className="flex items-center gap-2">
-          {cta ? (
-            <a
-              href={cta.url}
-              className="bg-primary text-primary-foreground hidden items-center justify-center px-4 py-2 text-xs font-semibold transition-colors sm:inline-flex"
-            >
-              {cta.label}
-            </a>
-          ) : null}
-
-          <% if (i18nEnabled) { %>
-          <LanguageSwitcher />
-          <% } %>
-
-          <HeaderAccount />
-
-          <CartLink />
-
-          {navItems.length > 0 ? (
-            <details className="group relative md:hidden">
-              <summary className="text-muted-foreground hover:text-foreground inline-flex h-9 w-9 cursor-pointer list-none items-center justify-center transition-colors [&::-webkit-details-marker]:hidden">
-                <MenuIcon className="h-5 w-5" />
-                <span className="sr-only">Menu</span>
-              </summary>
-              <nav className="border-border bg-surface absolute end-0 top-full z-50 mt-2 w-56 overflow-hidden border">
-                <ul className="py-2">
-                  {navItems.map((item, idx) => (
-                    <li key={`m-${item.url}-${idx}`}>
-                      <a
-                        href={item.url}
-                        className="text-muted-foreground hover:text-foreground hover:bg-muted block px-4 py-3 text-sm transition-colors"
-                      >
-                        {item.label}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            </details>
-          ) : null}
-        </div>
-      </div>
-    </header>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/trust-icons.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useTranslations } from '@/core/lib/translations';
-
-const ICONS = {
-  truck: (
-    <path d="M1 8h11v8H1zM12 10h4l3 3v3h-7zM5.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM16.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
-  ),
-  shield: <path d="M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3z" />,
-  lock: (
-    <>
-      <rect x="5" y="11" width="14" height="9" />
-      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
-    </>
-  ),
-  gift: (
-    <>
-      <rect x="3" y="8" width="18" height="4" />
-      <path d="M5 12v8h14v-8M12 8v12M12 8s-4 0-5-2c-.7-1.4.5-3 2-3 2.5 0 3 5 3 5zM12 8s4 0 5-2c.7-1.4-.5-3-2-3-2.5 0-3 5-3 5z" />
-    </>
-  ),
-};
-
-/**
- * The Israeli trust row — four thin-stroke promises under the grid.
- * (משלוח מהיר · אחריות · תשלום מאובטח · אריזת מתנה)
- */
-export function TrustIcons() {
-  const t = useTranslations('home');
-  const items: Array<{ icon: keyof typeof ICONS; label: string }> = [
-    { icon: 'truck', label: t('trustShipping') },
-    { icon: 'shield', label: t('trustWarranty') },
-    { icon: 'lock', label: t('trustSecure') },
-    { icon: 'gift', label: t('trustGift') },
-  ];
-
-  return (
-    <div className="border-border grid grid-cols-2 gap-x-4 gap-y-8 border-y py-10 md:grid-cols-4">
-      {items.map((item) => (
-        <div key={item.icon} className="flex flex-col items-center gap-3 text-center">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={1.2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="text-accent h-7 w-7"
-            aria-hidden="true"
-          >
-            {ICONS[item.icon]}
-          </svg>
-          <span className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]">
-            {item.label}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}