@salifbiaye/create-boutique 0.5.0 → 0.7.0

package/templates/storefront/src/modules/ub/lantern.tsx

@@ -0,0 +1,244 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { type P, discountLabel, discountOf, heroImageOf, imageOf, priceOf, splitTitle, spaced } from "./home-kit"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Lanterne » (Mubarak · Nuit, theme.json → "home": "lantern") : Ramadan, Aïd, Tabaski.
+ * Nuit bleue étoilée, or. Hero : texte + le visuel entier dans une fenêtre en arc (mihrab) liserée d'or,
+ * la remise dans une lanterne suspendue. Puis : la sélection en galerie d'arcs (accordéon), idées cadeaux par budget
+ * (tiers de prix, quelle que soit la devise), bande « jusqu'à l'Aïd » à motif d'étoiles. CSS : styles/ub/lantern.css.
+ */
+
+/** Étoile à 8 branches (motif géométrique décoratif). */
+function Star({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 26" aria-hidden>
+      <path d="M12 1.5 14.6 6l5.1-.7-.7 5.1 4.5 2.6-4.5 2.6.7 5.1-5.1-.7L12 24.5 9.4 20l-5.1.7.7-5.1L.5 13l4.5-2.6-.7-5.1 5.1.7z" />
+    </svg>
+  )
+}
+
+/** Croissant de lune. */
+function Crescent({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden>
+      <path d="M15.5 2.5a9.5 9.5 0 1 0 6 16.9A8 8 0 1 1 15.5 2.5z" />
+    </svg>
+  )
+}
+
+/** Séparateur ornemental : filet · étoile · filet. */
+function Ornament() {
+  return (
+    <span className="ub-ln-orn" aria-hidden>
+      <i />
+      <Star />
+      <i />
+    </span>
+  )
+}
+
+export function LanternHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-ln-hero">
+      <span className="ub-ln-sky" aria-hidden />
+      <div className="ub-wrap ub-ln-hero__in">
+        <div className="ub-ln-hero__text">
+          {hero.eyebrow && (
+            <p className="ub-ln-kicker">
+              <Crescent className="ub-ln-crescent" />
+              {hero.eyebrow}
+            </p>
+          )}
+          <h1 className="ub-ln-title">
+            {before} {hl && <em>{hl}</em>}{spaced(after)}
+          </h1>
+          <Ornament />
+          {hero.sub && <p className="ub-ln-sub">{hero.sub}</p>}
+          <div className="ub-ln-actions">
+            <Link href="/store" className="ub-ln-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <a href="#cadeaux" className="ub-ln-btn ub-ln-btn--ghost">
+                {hero.cta2}
+              </a>
+            )}
+          </div>
+          {campaign.showCountdown !== false && (
+            <div className="ub-ln-cd">
+              <small>{t("lantern.until")}</small>
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </div>
+        {/* Fenêtre en arc : le visuel entier, jamais recadré ni agrandi ; lanterne suspendue avec la remise */}
+        <figure className="ub-ln-window">
+          <span className="ub-ln-window__img">{image ? <FadeImg src={image} alt="" priority /> : <span className="ub-ph" />}</span>
+          {off && (
+            <p className="ub-ln-lantern" aria-hidden>
+              <i className="ub-ln-lantern__chain" />
+              <span className="ub-ln-lantern__cap" />
+              <span className="ub-ln-lantern__body">
+                <small>{hero.bubble?.[0]}</small>
+                <b>{off}</b>
+              </span>
+              <span className="ub-ln-lantern__foot" />
+            </p>
+          )}
+        </figure>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * La sélection : galerie d'arcs en accordéon. Au survol (ou au focus clavier), l'arc s'ouvre et montre le produit ;
+ * les autres restent en fines bandes, nom en lettres d'or verticales. Le premier est ouvert par défaut. CSS seul.
+ */
+export function LanternArches({ products, title }: { products: P[]; title: string }) {
+  const items = products.filter(imageOf).slice(0, 6)
+  if (items.length < 3) return null
+  return (
+    <section className="ub-ln-section">
+      <div className="ub-wrap">
+        <header className="ub-ln-head">
+          <p className="ub-ln-kicker">{t("lantern.selectionKicker")}</p>
+          <h2 className="ub-ln-h2">{title}</h2>
+          <Ornament />
+        </header>
+        <ul className="ub-ln-fold">
+          {items.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            const pct = Math.round(discountOf(p) * 100)
+            return (
+              <li key={p.id}>
+                <Link href={`/products/${p.handle}`} className="ub-ln-fold__item" aria-label={t("card.view", { name: p.title ?? "" })}>
+                  <FadeImg className="ub-ln-fold__img" src={imageOf(p)} alt="" />
+                  <span className="ub-ln-fold__label">
+                    <b>{String(i + 1).padStart(2, "0")}</b>
+                    {p.title}
+                  </span>
+                  <span className="ub-ln-fold__body">
+                    {onSale && pct > 0 && <span className="ub-ln-fold__off">-{pct}%</span>}
+                    <span className="ub-ln-fold__name">{p.title}</span>
+                    {price && (
+                      <span className="ub-ln-price">
+                        <b>{price.calculated_price}</b>
+                        {onSale && <s>{price.original_price}</s>}
+                      </span>
+                    )}
+                    <span className="ub-ln-fold__go" aria-hidden>
+                      <Icon name="arrowUpRight" />
+                    </span>
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Idées cadeaux par budget : les produits répartis en trois tiers de prix (petites attentions → grands gestes). */
+export function LanternBudget({ products }: { products: P[] }) {
+  const priced = products
+    .filter(imageOf)
+    .map((p) => ({ p, price: priceOf(p).price }))
+    .filter((x): x is { p: P; price: NonNullable<typeof x.price> } => !!x.price)
+    .sort((a, b) => a.price.calculated_price_number - b.price.calculated_price_number)
+  if (priced.length < 3) return null
+  const size = Math.ceil(priced.length / 3)
+  const groups = [0, 1, 2].map((i) => priced.slice(i * size, (i + 1) * size)).filter((g) => g.length)
+  const { locale } = getBoutique()
+  const fmt = new Intl.NumberFormat(locale, { style: "currency", currency: priced[0].price.currency_code.toUpperCase(), maximumFractionDigits: 0 })
+  return (
+    <section className="ub-ln-section" id="cadeaux">
+      <div className="ub-wrap">
+        <header className="ub-ln-head">
+          <p className="ub-ln-kicker">{t("lantern.giftsKicker")}</p>
+          <h2 className="ub-ln-h2">{t("lantern.gifts")}</h2>
+          <Ornament />
+        </header>
+        <div className="ub-ln-budget">
+          {groups.map((g, i) => {
+            const max = g[g.length - 1].price.calculated_price_number
+            const min = g[0].price.calculated_price_number
+            const range =
+              i === 0
+                ? t("lantern.upTo", { amount: fmt.format(Math.ceil(max)) })
+                : i === groups.length - 1
+                  ? t("lantern.from", { amount: fmt.format(Math.floor(min)) })
+                  : t("lantern.between", { min: fmt.format(Math.floor(min)), max: fmt.format(Math.ceil(max)) })
+            return (
+              <article key={i} className="ub-ln-tier">
+                <Star className="ub-ln-tier__star" />
+                <h3>{t(`lantern.tier${i + 1}`)}</h3>
+                <p className="ub-ln-tier__range">{range}</p>
+                <ul>
+                  {g.slice(0, 3).map(({ p, price }) => (
+                    <li key={p.id}>
+                      <Link href={`/products/${p.handle}`} className="ub-ln-gift">
+                        <span className="ub-ln-gift__img">
+                          <FadeImg src={imageOf(p)} alt="" />
+                        </span>
+                        <span className="ub-ln-gift__name">{p.title}</span>
+                        <b>{price.calculated_price}</b>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </article>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Bande « jusqu'à l'Aïd » : motif d'étoiles, croissant, compte à rebours. */
+export function LanternNight({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  return (
+    <section className="ub-ln-section">
+      <div className="ub-wrap">
+        <div className="ub-ln-night">
+          <svg className="ub-ln-night__pattern" aria-hidden>
+            <defs>
+              <pattern id="ub-ln-stars" width="56" height="56" patternUnits="userSpaceOnUse">
+                <path d="M28 8 32.7 16.2 42 15l-1.2 9.3L49 28l-8.2 3.7L42 41l-9.3-1.2L28 48l-4.7-8.2L14 41l1.2-9.3L7 28l8.2-3.7L14 15l9.3 1.2z" fill="none" stroke="currentColor" strokeWidth="1" />
+              </pattern>
+            </defs>
+            <rect width="100%" height="100%" fill="url(#ub-ln-stars)" />
+          </svg>
+          <Crescent className="ub-ln-night__moon" />
+          {promo?.eyebrow && <p className="ub-ln-kicker">{promo.eyebrow}</p>}
+          <h2 className="ub-ln-h2">{promo?.title ?? campaign.hero.title}</h2>
+          {promo?.text && <p className="ub-ln-sub">{promo.text}</p>}
+          {campaign.showCountdown !== false && (
+            <div className="ub-ln-cd ub-ln-cd--center">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+          <Link href="/store" className="ub-ln-btn">
+            {promo?.cta ?? campaign.hero.cta} <Icon name="arrowRight" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/locker.tsx

@@ -0,0 +1,180 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
+import { type P, discountLabel, heroImageOf, imageOf, priceOf, splitTitle, spaced } from "./home-kit"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Vestiaire » (Sport, theme.json → "home": "locker") : jour de match.
+ * Hero (rangée de maillots, tableau d'affichage : remise + chrono du match), composition d'équipe sur un terrain
+ * (les produits placés en formation), maillots sur cintres, bande « mi-temps ». CSS : styles/ub/locker.css.
+ */
+
+export function LockerHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-lk-hero">
+      {image && <HeroImage src={image} position="center 40%" />}
+      <div className="ub-wrap ub-lk-hero__in">
+        <div className="ub-lk-hero__text">
+          {hero.eyebrow && <p className="ub-lk-kicker">{hero.eyebrow}</p>}
+          <h1 className="ub-lk-title">
+            {before} {hl && <span className="ub-lk-title__hl">{hl}</span>}{spaced(after)}
+          </h1>
+          {hero.sub && <p className="ub-lk-sub">{hero.sub}</p>}
+          <div className="ub-lk-actions">
+            <Link href="/store" className="ub-lk-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <a href="#composition" className="ub-lk-btn ub-lk-btn--ghost">
+                {hero.cta2}
+              </a>
+            )}
+          </div>
+        </div>
+        {/* Tableau d'affichage : remise « au score » et chrono du match (fin de l'offre) */}
+        <aside className="ub-lk-board">
+          <p className="ub-lk-board__row">
+            <span>{t("locker.home")}</span>
+            <b>{off ?? "—"}</b>
+            <span>{t("locker.away")}</span>
+          </p>
+          {campaign.showCountdown !== false && (
+            <div className="ub-lk-board__clock">
+              <small>{t("locker.clock")}</small>
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </aside>
+      </div>
+    </section>
+  )
+}
+
+/** Composition d'équipe : les produits placés en formation sur un terrain (gardien en bas). */
+function formation(n: number): number[] {
+  if (n >= 11) return [3, 3, 4, 1]
+  if (n >= 8) return [2, 3, 2, 1]
+  if (n >= 6) return [2, 2, 1, 1]
+  return [n]
+}
+export function LockerLineup({ products, title }: { products: P[]; title: string }) {
+  const players = products.filter(imageOf).slice(0, 11)
+  if (players.length < 4) return null
+  const rows = formation(players.length)
+  let k = 0
+  const lines = rows.map((count) => players.slice(k, (k += count)))
+  return (
+    <section className="ub-lk-section" id="composition">
+      <div className="ub-wrap">
+        <header className="ub-lk-head">
+          <p className="ub-lk-kicker">{t("locker.lineupKicker")}</p>
+          <h2 className="ub-lk-h2">{title}</h2>
+          <p className="ub-lk-lead">{t("locker.lineupSub", { formation: rows.length > 1 ? rows.slice(0, -1).reverse().join("-") : String(rows[0]) })}</p>
+        </header>
+        <div className="ub-lk-pitch">
+          <span className="ub-lk-pitch__lines" aria-hidden />
+          {lines.map((line, r) => (
+            <ul key={r} className="ub-lk-line">
+              {line.map((p) => {
+                const n = players.indexOf(p) + 1
+                const { price, onSale } = priceOf(p)
+                return (
+                  <li key={p.id}>
+                    <Link href={`/products/${p.handle}`} className="ub-lk-player">
+                      <span className="ub-lk-player__img">
+                        <FadeImg src={imageOf(p)} alt="" />
+                        <span className="ub-lk-player__num">{n}</span>
+                      </span>
+                      <span className="ub-lk-player__name">{p.title}</span>
+                      {price && (
+                        <span className="ub-lk-player__price">
+                          {price.calculated_price}
+                          {onSale && price.percentage_diff && <em> -{price.percentage_diff}%</em>}
+                        </span>
+                      )}
+                    </Link>
+                  </li>
+                )
+              })}
+            </ul>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Maillots sur cintres : cartes suspendues à une barre de vestiaire. */
+export function LockerRack({ products, title }: { products: P[]; title: string }) {
+  const items = products.filter(imageOf).slice(0, 8)
+  if (!items.length) return null
+  return (
+    <section className="ub-lk-section">
+      <div className="ub-wrap">
+        <header className="ub-lk-head ub-lk-head--row">
+          <h2 className="ub-lk-h2">{title}</h2>
+          <Link href="/store" className="ub-lk-more">
+            {t("locker.all")} <Icon name="arrowRight" />
+          </Link>
+        </header>
+        <div className="ub-lk-rack">
+          <span className="ub-lk-rack__bar" aria-hidden />
+          <ul>
+            {items.map((p) => {
+              const { price, onSale } = priceOf(p)
+              return (
+                <li key={p.id}>
+                  <Link href={`/products/${p.handle}`} className="ub-lk-hang">
+                    <svg className="ub-lk-hang__hook" viewBox="0 0 60 34" aria-hidden>
+                      <path d="M30 2a6 6 0 1 1-6 6M30 14 4 30h52z" />
+                    </svg>
+                    <span className="ub-lk-hang__img">
+                      <FadeImg src={imageOf(p)} alt="" />
+                      {onSale && price?.percentage_diff && <b className="ub-lk-off">-{price.percentage_diff}%</b>}
+                    </span>
+                    <span className="ub-lk-hang__name">{p.title}</span>
+                    {price && (
+                      <span className="ub-lk-hang__price">
+                        <b>{price.calculated_price}</b>
+                        {onSale && <s>{price.original_price}</s>}
+                      </span>
+                    )}
+                  </Link>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Mi-temps : bande promo façon écran de stade. */
+export function LockerHalftime({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  return (
+    <section className="ub-lk-section">
+      <div className="ub-wrap">
+        <div className="ub-lk-half">
+          <span className="ub-lk-half__tag">{promo?.eyebrow ?? t("locker.half")}</span>
+          <h2 className="ub-lk-half__title">{promo?.title ?? campaign.hero.title}</h2>
+          {promo?.text && <p className="ub-lk-lead">{promo.text}</p>}
+          <Link href="/store" className="ub-lk-btn">
+            {promo?.cta ?? campaign.hero.cta} <Icon name="arrowRight" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/mosaic.tsx

@@ -0,0 +1,189 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
+import { type P, discountLabel, discountOf, heroImageOf, imageOf, priceOf, splitTitle, spaced } from "./home-kit"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Mosaïque » (Jeux 2, theme.json → "home": "mosaic") : clair, 5 couleurs vives en carreaux.
+ * Hero (illustration centrée en fond, texte à gauche, carreaux remise / chrono / offres à droite), disciplines (catégories en pastilles de couleur),
+ * tableau des médailles (classement des offres), relais (carrousel de témoins colorés). CSS : styles/ub/mosaic.css.
+ */
+
+const COLORS = ["sky", "sun", "coral", "grass", "violet"] as const
+
+export function MosaicHero({ campaign, count }: { campaign: Campaign; count?: number }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-mo-hero">
+      {/* Illustration en fond, centrée, fondue dans le blanc du hero (multiply) */}
+      {image && <HeroImage src={image} position="center" className="ub-mo-hero__bg" />}
+      <div className="ub-wrap ub-mo-hero__in">
+        <div className="ub-mo-hero__text">
+          {hero.eyebrow && <p className="ub-mo-kicker">{hero.eyebrow}</p>}
+          <h1 className="ub-mo-title">
+            {before} {hl && <span className="ub-mo-title__hl">{hl}</span>}{spaced(after)}
+          </h1>
+          {hero.sub && <p className="ub-mo-sub">{hero.sub}</p>}
+          <div className="ub-mo-actions">
+            <Link href="/store" className="ub-mo-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <a href="#medailles" className="ub-mo-btn ub-mo-btn--ghost">
+                {hero.cta2}
+              </a>
+            )}
+          </div>
+        </div>
+        {/* Carreaux de couleur : remise, temps restant, nombre d'offres */}
+        <div className="ub-mo-tiles">
+          {off && (
+            <p className="ub-mo-cell is-sun">
+              <small>{hero.bubble?.[0]}</small>
+              <b>{off}</b>
+              <small>{hero.bubble?.[2]}</small>
+            </p>
+          )}
+          {campaign.showCountdown !== false && (
+            <div className="ub-mo-cell is-sky">
+              <small>{t("mosaic.left")}</small>
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+          {!!count && (
+            <p className="ub-mo-cell is-coral">
+              <b>{count}</b>
+              <small>{t("mosaic.offers")}</small>
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Disciplines : catégories racines en pastilles de couleur (navigation rapide). */
+export function MosaicDisciplines({ categories, title }: { categories: HttpTypes.StoreProductCategory[]; title: string }) {
+  const roots = categories.filter((c) => !c.parent_category).slice(0, 10)
+  if (!roots.length) return null
+  return (
+    <section className="ub-wrap ub-mo-section ub-mo-disc">
+      <h2 className="ub-mo-h3">{title}</h2>
+      <ul>
+        {roots.map((c, i) => (
+          <li key={c.id}>
+            <Link href={`/categories/${c.handle}`} className={`ub-mo-chip is-${COLORS[i % COLORS.length]}`}>
+              {c.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+/** Tableau des médailles : les offres classées par remise (or, argent, bronze pour le podium). */
+export function MosaicMedals({ products, title }: { products: P[]; title: string }) {
+  const rows = products.filter(imageOf).slice(0, 8)
+  if (!rows.length) return null
+  const medal = ["gold", "silver", "bronze"]
+  return (
+    <section className="ub-mo-section" id="medailles">
+      <div className="ub-wrap">
+        <header className="ub-mo-head">
+          <p className="ub-mo-kicker">{t("mosaic.medalsKicker")}</p>
+          <h2 className="ub-mo-h2">{title}</h2>
+        </header>
+        <div className="ub-mo-table" role="table" aria-label={title}>
+          <div className="ub-mo-tr ub-mo-tr--head" role="row">
+            <span role="columnheader">{t("mosaic.rank")}</span>
+            <span role="columnheader">{t("mosaic.product")}</span>
+            <span role="columnheader">{t("mosaic.saving")}</span>
+            <span role="columnheader">{t("mosaic.price")}</span>
+          </div>
+          {rows.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            const pct = Math.round(discountOf(p) * 100)
+            return (
+              <Link key={p.id} href={`/products/${p.handle}`} className="ub-mo-tr" role="row">
+                <span role="cell" className="ub-mo-rank">
+                  {i < 3 ? <i className={`ub-mo-medal is-${medal[i]}`}>{i + 1}</i> : i + 1}
+                </span>
+                <span role="cell" className="ub-mo-prod">
+                  <span className="ub-mo-prod__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  <b>{p.title}</b>
+                </span>
+                <span role="cell" className="ub-mo-save">{pct > 0 ? `-${pct}%` : "—"}</span>
+                <span role="cell" className="ub-mo-price">
+                  {price && (
+                    <>
+                      <b>{price.calculated_price}</b>
+                      {onSale && <s>{price.original_price}</s>}
+                    </>
+                  )}
+                </span>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Relais : carrousel de cartes colorées, chaque offre passe le témoin à la suivante. */
+export function MosaicRelay({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const items = products.filter(imageOf).slice(0, 10)
+  if (!items.length) return null
+  const promo = campaign.promo
+  return (
+    <section className="ub-mo-section">
+      <div className="ub-wrap">
+        <header className="ub-mo-head ub-mo-head--row">
+          <div>
+            {promo?.eyebrow && <p className="ub-mo-kicker">{promo.eyebrow}</p>}
+            <h2 className="ub-mo-h2">{promo?.title ?? t("mosaic.relay")}</h2>
+            {promo?.text && <p className="ub-mo-lead">{promo.text}</p>}
+          </div>
+          <Link href="/store" className="ub-mo-btn">
+            {promo?.cta ?? campaign.hero.cta} <Icon name="arrowRight" />
+          </Link>
+        </header>
+        <ol className="ub-mo-relay">
+          {items.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            return (
+              <li key={p.id} className={`is-${COLORS[i % COLORS.length]}`}>
+                <Link href={`/products/${p.handle}`} className="ub-mo-leg">
+                  <span className="ub-mo-leg__tag">{t("mosaic.leg", { n: i + 1 })}</span>
+                  <span className="ub-mo-leg__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  <span className="ub-mo-leg__name">{p.title}</span>
+                  {price && (
+                    <span className="ub-mo-price">
+                      <b>{price.calculated_price}</b>
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                </Link>
+              </li>
+            )
+          })}
+        </ol>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/nav.tsx

@@ -67,12 +67,15 @@ export default function Nav({ current }: { current?: "home" | "shop" }) {
           <Link href="/order/track">{t("nav.track")}</Link>
           <Link href="/legal/contact">{t("nav.contact")}</Link>
         </nav>
-        <Link className="ub-search" href="/store">
-          {t("nav.search")}
-          <Icon name="search" />
-        </Link>
+        {/* Recherche : formulaire GET vers la page Boutique (fonctionne sans JavaScript) */}
+        <form className="ub-search" action="/store" role="search">
+          <input type="search" name="q" placeholder={t("nav.search")} aria-label={t("nav.search")} autoComplete="off" />
+          <button type="submit" aria-label={t("nav.search")}>
+            <Icon name="search" />
+          </button>
+        </form>
         <div className="ub-nav__icons">
-          <Link className="ub-icon ub-icon--search" href="/store" aria-label={t("nav.search")}>
+          <Link className="ub-icon ub-icon--search" href="/store#recherche" aria-label={t("nav.search")}>
             <Icon name="search" />
           </Link>
           <Link className="ub-icon ub-icon--user" href="/account" aria-label={t("nav.account")} data-testid="nav-account-link">