@salifbiaye/create-boutique 0.3.6 → 0.4.1

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
-  "repository": { "type": "git", "url": "git+https://github.com/salifbiaye/create-boutique.git" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/salifbiaye/create-boutique.git"
+  },
   "license": "UNLICENSED",
   "bin": {
     "create-boutique": "cli/dist/index.js"

package/templates/backend/src/scripts/seed.ts

@@ -27,6 +27,7 @@ import {
   linkSalesChannelsToApiKeyWorkflow,
   linkSalesChannelsToStockLocationWorkflow,
   updateRegionsWorkflow,
+  updateProductsWorkflow,
   updateShippingOptionsWorkflow,
   updateStoresWorkflow,
   uploadFilesWorkflow,
@@ -210,9 +211,14 @@ export default async function seed({ container }: ExecArgs) {
       })
       channel = result[0]
       await linkSalesChannelsToStockLocationWorkflow(container).run({ input: { id: location.id, add: [channel.id] } })
-      // Boutique ajoutée à un projet existant : elle reçoit tout le catalogue déjà en base
-      // (le marchand retire ensuite dans l'admin ce qu'il ne veut pas y vendre).
-      const existingProducts = await productService.listProducts({}, { select: ["id"], take: 10000 })
+      // Boutique ajoutée à un projet existant : elle reçoit le catalogue déjà en base, sauf les produits
+      // du CSV réservés à d'autres boutiques (colonnes boutiques/themes). Le marchand ajuste ensuite dans l'admin.
+      const rows = readCsv()
+      const csvRow = new Map(rows.map((r) => [r.handle, r]))
+      const existingProducts = (await productService.listProducts({}, { select: ["id", "handle"], take: 10000 })).filter((pr) => {
+        const r = csvRow.get(pr.handle)
+        return !r || rowFor(r, b.slug, b.theme)
+      })
       if (existingProducts.length) {
         await linkProductsToSalesChannelWorkflow(container).run({
           input: { id: channel.id, add: existingProducts.map((pr) => pr.id) },
@@ -308,6 +314,20 @@ export async function uploadSeedImage(container: ExecArgs["container"], name: st
 
 type Row = Record<string, string>
 
+function readCsv(): Row[] {
+  const csvFile = path.join(SEED_DIR, "products.csv")
+  if (!fs.existsSync(csvFile)) return []
+  return parse(fs.readFileSync(csvFile, "utf8"), { columns: true, skip_empty_lines: true, trim: true, bom: true })
+}
+
+/** Le produit de cette ligne est-il vendu dans la boutique ? Colonne « boutiques » (slugs), sinon « themes », sinon partout. */
+function rowFor(r: Row, slug: string, theme: string) {
+  const list = (v: string) => v.split("|").map((x) => x.trim()).filter(Boolean)
+  if (r.boutiques) return list(r.boutiques).includes(slug)
+  if (r.themes) return list(r.themes).includes(theme)
+  return true
+}
+
 async function importProducts({
   container,
   logger,
@@ -329,35 +349,50 @@ async function importProducts({
   endsOf: Record<string, string | undefined>
   locationId: string
   profileId: string
-  productService: { listProducts: (f: { handle: string[] }, c: { select: string[] }) => Promise<{ handle: string }[]> }
+  productService: { listProducts: (f: { handle: string[] }, c: { select: string[] }) => Promise<{ id: string; handle: string; thumbnail?: string | null }[]> }
 }) {
-  const csvFile = path.join(SEED_DIR, "products.csv")
-  if (!fs.existsSync(csvFile)) {
+  const rows = readCsv()
+  if (!rows.length) {
     logger.info("[seed] pas de seed/products.csv : aucun produit importé")
     return
   }
-  const rows: Row[] = parse(fs.readFileSync(csvFile, "utf8"), { columns: true, skip_empty_lines: true, trim: true, bom: true })
-  const existing = new Set((await productService.listProducts({ handle: rows.map((r) => r.handle) }, { select: ["handle"] })).map((p) => p.handle))
+  const inDb = await productService.listProducts({ handle: rows.map((r) => r.handle) }, { select: ["id", "handle", "thumbnail"] })
+  const existing = new Set(inDb.map((p) => p.handle))
   const toCreate = rows.filter((r) => r.handle && !existing.has(r.handle))
-  if (!toCreate.length) return
 
   // Images : fichiers de seed/images envoyés au stockage ; URL http(s) gardées telles quelles.
   const uploaded = new Map<string, string>()
-  const imageUrl = async (name: string): Promise<string | undefined> => {
+  const imageUrl = async (name: string, warn = true): Promise<string | undefined> => {
     if (uploaded.has(name)) return uploaded.get(name)
     const url = await uploadSeedImage(container, name)
     if (url) uploaded.set(name, url)
-    else logger.warn(`[seed] image introuvable : ${path.join(SEED_DIR, "images", path.basename(name))}`)
+    else if (warn) logger.warn(`[seed] image introuvable : ${path.join(SEED_DIR, "images", path.basename(name))}`)
     return url
   }
 
+  // Produits déjà en base sans photo : photos ajoutées plus tard dans seed/images → on les complète
+  // (un produit qui a déjà une photo, par exemple choisie dans l'admin, n'est jamais modifié).
+  const csvRow = new Map(rows.map((r) => [r.handle, r]))
+  let filled = 0
+  for (const p of inDb.filter((p) => !p.thumbnail)) {
+    const names = (csvRow.get(p.handle)?.images || "").split("|").filter(Boolean)
+    const images = (await Promise.all(names.map((n) => imageUrl(n, false)))).filter((u): u is string => !!u)
+    if (!images.length) continue
+    await updateProductsWorkflow(container).run({
+      input: { selector: { id: p.id }, update: { thumbnail: images[0], images: images.map((url) => ({ url })) } },
+    })
+    filled++
+  }
+  if (filled) logger.info(`[seed] photos ajoutées à ${filled} produit(s) existant(s)`)
+  if (!toCreate.length) return
+
   const salePrices: { variantKey: string; currency_code: string; amount: number; endsAt?: string }[] = []
   const products: CreateProductWorkflowInputDTO[] = []
   for (const r of toCreate) {
     const missing = currencies.filter((c) => !r[`price_${c}`])
     if (missing.length) logger.warn(`[seed] ${r.handle} : pas de prix en ${missing.join(", ")} (colonne price_<devise>) — invisible dans ces boutiques`)
 
-    const images = (await Promise.all((r.images || "").split("|").filter(Boolean).map(imageUrl))).filter((u): u is string => !!u)
+    const images = (await Promise.all((r.images || "").split("|").filter(Boolean).map((n) => imageUrl(n)))).filter((u): u is string => !!u)
     const optionTitle = r.variant_option || "Default option"
     const values = r.variant_values ? r.variant_values.split("|").map((v) => v.trim()) : ["Default option value"]
     // Boutiques du produit : colonne « boutiques » (slugs), ou « themes » (toutes les boutiques de ces thèmes,

package/templates/storefront/locales/en.json

@@ -308,5 +308,20 @@
   "checkout.testMode.text": "Card payments are in test mode: you will not be charged. Use the test card below with any future expiry date (e.g. 12/34) and any CVC (e.g. 123).",
   "harvest.gift": "Gift wrapping",
   "harvest.giftSub": "Free on request",
-  "harvest.strip": "The season in pictures"
+  "harvest.strip": "The season in pictures",
+  "gala.midnight": "Midnight in",
+  "gala.strokes": "The 12 strokes of midnight",
+  "gala.strokesSub": "Twelve deals to end the year in style.",
+  "cinema.catalog": "Browse the catalog",
+  "cinema.next": "Up next",
+  "cinema.top": "Top 10 this week",
+  "cinema.badgeStock": "Limited stock",
+  "cinema.badgeShipping": "48h delivery",
+  "album.offer": "The Christmas offer",
+  "tech.flash": "Flash deals",
+  "tech.flashTitle": "The best deals, for 24 hours",
+  "tech.deal": "Top deal",
+  "tech.all": "See all",
+  "tech.warranty": "2-year warranty",
+  "tech.warrantySub": "On all tech"
 }

package/templates/storefront/locales/fr.json

@@ -308,5 +308,20 @@
   "checkout.testMode.text": "Le paiement par carte est en mode test : aucune somme ne sera débitée. Utilisez la carte de test ci-dessous, avec une date d'expiration future (ex. 12/34) et n'importe quel code (ex. 123).",
   "harvest.gift": "Emballage cadeau",
   "harvest.giftSub": "Offert sur demande",
-  "harvest.strip": "La saison en images"
+  "harvest.strip": "La saison en images",
+  "gala.midnight": "Minuit dans",
+  "gala.strokes": "Les 12 coups de minuit",
+  "gala.strokesSub": "Douze offres pour finir l'année en beauté.",
+  "cinema.catalog": "Voir le catalogue",
+  "cinema.next": "À suivre",
+  "cinema.top": "Top 10 de la semaine",
+  "cinema.badgeStock": "Stock limité",
+  "cinema.badgeShipping": "Livraison 48 h",
+  "album.offer": "L'offre de Noël",
+  "tech.flash": "Flash deals",
+  "tech.flashTitle": "Les meilleures offres, pour 24 h",
+  "tech.deal": "Offre phare",
+  "tech.all": "Tout voir",
+  "tech.warranty": "Garantie 2 ans",
+  "tech.warrantySub": "Sur toute la tech"
 }

package/templates/storefront/src/app/(main)/page.tsx

@@ -11,6 +11,10 @@ import CategoryTiles from "@modules/ub/category-tiles"
 import { ProductGrid } from "@modules/ub/product-card"
 import { DealsFold, DealsSpotlight } from "@modules/ub/showcase"
 import { HarvestBanner, HarvestGrid, HarvestHero, HarvestServices, HarvestStrip } from "@modules/ub/harvest"
+import { GalaFoil, GalaHero, GalaMidnight, GalaSelection, GalaStrokes } from "@modules/ub/gala"
+import { CinemaHero, CinemaRow, CinemaScreening, CinemaTop } from "@modules/ub/cinema"
+import { TechBento, TechFinal, TechFlash, TechGrid, TechHero, TechSpecs, TechTicker } from "@modules/ub/tech"
+import { AlbumGarland, AlbumHero, AlbumPolaroids, AlbumStory, AlbumTicket } from "@modules/ub/album"
 import { getBoutique } from "@lib/boutique/config"
 import type { Campaign } from "@lib/boutique/campaign"
 
@@ -91,6 +95,78 @@ async function Promo({ campaign }: { campaign: Campaign }) {
   return <PromoBanner campaign={campaign} fallbackImage={best?.thumbnail ?? undefined} />
 }
 
+/** Accueil « Cinéma » (thèmes Halloween) : produits triés par remise pour le Top 10 et « À suivre ». */
+async function CinemaPage({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  const off = (p: (typeof products)[number]) =>
+    Math.max(0, ...(p.variants ?? []).map((v) => {
+      const c = v.calculated_price
+      return c?.original_amount && c.calculated_amount != null ? 1 - c.calculated_amount / c.original_amount : 0
+    }))
+  const sorted = [...products].sort((a, b) => off(b) - off(a))
+  return (
+    <>
+      <CinemaHero campaign={campaign} next={sorted} />
+      <CinemaRow products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <CinemaTop products={sorted} />
+      <CinemaScreening campaign={campaign} image={sorted.find((p) => p.thumbnail)?.thumbnail ?? undefined} />
+    </>
+  )
+}
+
+/** Accueil « Album » (thèmes Noël). */
+async function AlbumPage({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  return (
+    <>
+      <AlbumStory campaign={campaign} products={products} />
+      <AlbumGarland />
+      <AlbumPolaroids products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <AlbumGarland />
+      <AlbumTicket campaign={campaign} />
+    </>
+  )
+}
+
+/** Accueil « Tech » (thèmes Cyber Monday) : offres les plus remisées en « Flash deals » et dans le bento. */
+async function TechPage({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 16, fields: "*categories,*collection" } })
+  const off = (p: (typeof products)[number]) =>
+    Math.max(0, ...(p.variants ?? []).map((v) => {
+      const c = v.calculated_price
+      return c?.original_amount && c.calculated_amount != null ? 1 - c.calculated_amount / c.original_amount : 0
+    }))
+  const sorted = [...products].sort((a, b) => off(b) - off(a))
+  return (
+    <>
+      <TechFlash campaign={campaign} products={sorted} />
+      <TechBento campaign={campaign} products={sorted.length > 12 ? sorted.slice(8) : [...sorted].reverse()} />
+      <TechGrid products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <TechFinal campaign={campaign} />
+    </>
+  )
+}
+
+/** Accueil « Gala » (thèmes Nouvel An). */
+async function GalaProducts({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  return (
+    <>
+      <GalaSelection products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <GalaStrokes products={products} />
+      <GalaFoil campaign={campaign} />
+    </>
+  )
+}
+
 function GridFallback() {
   return <div className="ub-section" aria-busy="true" style={{ minHeight: 320 }} />
 }
@@ -103,6 +179,53 @@ export default async function Home() {
     return <CampaignEnded nextUrl={campaign.nextCampaignUrl} />
   }
 
+  if (getBoutique().theme.home === "tech") {
+    return (
+      <div className="ub-tech">
+        <TechHero campaign={campaign} />
+        <TechTicker campaign={campaign} />
+        <TechSpecs freeShipping={campaign.freeShipping} />
+        <Suspense fallback={<GridFallback />}>
+          <TechPage campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  if (getBoutique().theme.home === "album") {
+    return (
+      <div className="ub-album">
+        <AlbumHero campaign={campaign} />
+        <AlbumGarland />
+        <Suspense fallback={<GridFallback />}>
+          <AlbumPage campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  if (getBoutique().theme.home === "cinema") {
+    return (
+      <div className="ub-cinema">
+        <Suspense fallback={<GridFallback />}>
+          <CinemaPage campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  if (getBoutique().theme.home === "gala") {
+    return (
+      <div className="ub-gala">
+        <GalaHero campaign={campaign} />
+        <GalaMidnight campaign={campaign} />
+        <Suspense fallback={<GridFallback />}>
+          <GalaProducts campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
   if (getBoutique().theme.home === "harvest") {
     return (
       <div className="ub-harvest">

package/templates/storefront/src/app/layout.tsx

@@ -14,6 +14,10 @@ import "styles/ub/forms.css"
 import "styles/ub/account.css"
 import "styles/ub/black-friday.css"
 import "styles/ub/harvest.css"
+import "styles/ub/gala.css"
+import "styles/ub/cinema.css"
+import "styles/ub/album.css"
+import "styles/ub/tech.css"
 import "styles/ub/media.css"
 import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"

package/templates/storefront/src/lib/boutique/schema.ts

@@ -71,7 +71,7 @@ export const themeSchema = z.object({
   /** Variante : reprend la mise en page (règles CSS) de ce thème, avec la palette de styles/ub/variants.css. */
   layout: z.string().regex(SLUG).optional(),
   /** Page d'accueil : « default » (sections standard) ou « harvest » (accueil éditorial des thèmes Thanksgiving) */
-  home: z.enum(["default", "harvest"]).optional(),
+  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech"]).optional(),
   fonts: z.object({
     head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
     body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),

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

@@ -0,0 +1,137 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+
+/**
+ * Accueil « Album » (thèmes Noël, theme.json → "home": "album") : un album de Noël fait main.
+ * Hero velours avec titre calligraphié, guirlande, panneau en bois + photos suspendues, polaroïds avec étiquettes
+ * en papier déchiré, ticket d'offre perforé. CSS : styles/ub/album.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+
+export function AlbumHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  return (
+    <section className="ub-al-hero" style={image ? { ["--al-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      <span className="ub-al-hero__curtain" aria-hidden />
+      <div className="ub-wrap ub-al-hero__in">
+        {hero.eyebrow && <p className="ub-al-eyebrow">{hero.eyebrow}</p>}
+        <h1 className="ub-al-title">{hero.title}</h1>
+        {hero.sub && <p className="ub-al-sub">{hero.sub}</p>}
+        <Link href="/store" className="ub-al-btn">
+          {hero.cta}
+        </Link>
+      </div>
+    </section>
+  )
+}
+
+/** Guirlande de sapin avec boules (séparateur entre les sections). */
+export function AlbumGarland() {
+  return <div className="ub-al-garland" aria-hidden />
+}
+
+/** Section verte : panneau en bois (texte du bandeau promo) et deux photos suspendues. */
+export function AlbumStory({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const promo = campaign.promo
+  const photos = products.filter(imageOf).slice(0, 2)
+  return (
+    <section className="ub-al-story">
+      <div className="ub-wrap ub-al-story__in">
+        <div className="ub-al-hang">
+          {photos.map((p, i) => (
+            <Link key={p.id} href={`/products/${p.handle}`} className="ub-al-hang__item" style={{ ["--i" as string]: i }} aria-label={p.title ?? ""}>
+              <span className="ub-al-hang__ribbon" aria-hidden />
+              <span className="ub-al-frame">
+                <FadeImg src={imageOf(p)} alt="" />
+              </span>
+            </Link>
+          ))}
+        </div>
+        <div className="ub-al-sign">
+          {promo?.eyebrow && <p className="ub-al-sign__eyebrow">{promo.eyebrow}</p>}
+          <h2 className="ub-al-h2">{promo?.title ?? campaign.hero.title}</h2>
+          {promo?.text && <p>{promo.text}</p>}
+          <span className="ub-al-sign__snow" aria-hidden />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Section crème : polaroïds inclinés avec ruban adhésif + étiquettes en papier déchiré (nom, prix). */
+export function AlbumPolaroids({ products, title }: { products: P[]; title: string }) {
+  const items = products.slice(0, 6)
+  if (!items.length) return null
+  return (
+    <section className="ub-al-cream">
+      <div className="ub-wrap">
+        <h2 className="ub-al-h2 ub-al-h2--script">{title}</h2>
+        <ul className="ub-al-list">
+          {items.map((p, i) => {
+            const { cheapestPrice: price } = getProductPrice({ product: p })
+            const onSale = price?.price_type === "sale"
+            const image = imageOf(p)
+            return (
+              <li key={p.id} className="ub-al-item" style={{ ["--i" as string]: i }}>
+                <Link href={`/products/${p.handle}`} className="ub-al-polaroid">
+                  <span className="ub-al-tape" aria-hidden />
+                  <span className="ub-al-polaroid__img">{image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}</span>
+                </Link>
+                <Link href={`/products/${p.handle}`} className="ub-al-label">
+                  <b>{p.title}</b>
+                  {price && (
+                    <span>
+                      {price.calculated_price}
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                  {onSale && price?.percentage_diff && <em>-{price.percentage_diff}%</em>}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+        <div className="ub-al-more">
+          <Link href="/store" className="ub-al-btn ub-al-btn--dark">
+            {t("section.viewAll")}
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Section rouge : ticket d'offre perforé avec compte à rebours. */
+export function AlbumTicket({ campaign }: { campaign: Campaign }) {
+  const { hero, promo } = campaign
+  return (
+    <section className="ub-al-red">
+      <div className="ub-wrap">
+        <h2 className="ub-al-h2 ub-al-h2--script ub-al-h2--light">{t("album.offer")}</h2>
+        <div className="ub-al-ticket">
+          <div className="ub-al-ticket__main">
+            {promo?.seal && <p className="ub-al-sign__eyebrow">{promo.seal}</p>}
+            <p className="ub-al-ticket__big">{hero.bubble?.[1] ? `-${String(hero.bubble[1]).replace(/^-/, "")}` : promo?.title}</p>
+            <p>{hero.sub}</p>
+          </div>
+          <div className="ub-al-ticket__stub">
+            {campaign.showCountdown !== false && <CampaignCountdown endsAt={campaign.endsAt} />}
+            <Link href="/store" className="ub-al-btn">
+              {promo?.cta ?? hero.cta}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/cinema.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 { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Cinéma » (thèmes Halloween, theme.json → "home": "cinema") : la boutique comme une affiche de film.
+ * Hero plein cadre (titre condensé + mot au pinceau, fiche « séance » à droite, « À suivre »), rangée d'affiches,
+ * Top 10 à grands chiffres, bannière « séance de minuit » au format cinéma. CSS : styles/ub/cinema.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+const priceOf = (p: P) => {
+  const { cheapestPrice } = getProductPrice({ product: p })
+  return { price: cheapestPrice, onSale: cheapestPrice?.price_type === "sale" }
+}
+
+export function CinemaHero({ campaign, next }: { campaign: Campaign; next: P[] }) {
+  const { hero, promo } = campaign
+  const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
+  const before = hl ? hero.title.slice(0, hero.title.indexOf(hl)).replace(/[\s,;:–-]+$/, "") : hero.title
+  const after = hl ? hero.title.slice(hero.title.indexOf(hl) + hl.length).trim() : ""
+  const badges = [hero.bubble?.[1] ? `-${String(hero.bubble[1]).replace(/^-/, "")}` : undefined, promo?.seal, t("cinema.badgeStock"), t("cinema.badgeShipping")].filter(
+    Boolean
+  ) as string[]
+  const upNext = next.filter(imageOf).slice(0, 2)
+
+  return (
+    <section className="ub-cn-hero" style={image ? { ["--cn-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      <div className="ub-wrap ub-cn-hero__in">
+        <div className="ub-cn-hero__poster">
+          {hero.eyebrow && <p className="ub-cn-tag">{hero.eyebrow}</p>}
+          <h1 className="ub-cn-title">
+            <span className="ub-cn-title__main">{before}</span>
+            {hl && <span className="ub-cn-title__hl">{hl}</span>}
+            {after && <span className="ub-cn-title__main">{after}</span>}
+          </h1>
+          <Link href="/store" className="ub-cn-fav">
+            <Icon name="sparkle" /> {hero.cta2 ?? t("cinema.catalog")}
+          </Link>
+        </div>
+
+        <aside className="ub-cn-panel">
+          <h2 className="ub-cn-panel__title">{promo?.title ?? hero.title}</h2>
+          <ul className="ub-cn-badges">
+            {badges.map((b) => (
+              <li key={b}>{b}</li>
+            ))}
+          </ul>
+          <p className="ub-cn-panel__text">{hero.sub}</p>
+          <div className="ub-cn-panel__actions">
+            <Link href="/store" className="ub-cn-btn ub-cn-btn--play">
+              <span aria-hidden>▶</span> {hero.cta}
+            </Link>
+            <Link href="/store" className="ub-cn-btn ub-cn-btn--ghost">
+              {t("cinema.catalog")}
+            </Link>
+          </div>
+          {upNext.length > 0 && (
+            <div className="ub-cn-next">
+              <p>{t("cinema.next")}</p>
+              <ul>
+                {upNext.map((p) => (
+                  <li key={p.id}>
+                    <Link href={`/products/${p.handle}`} aria-label={p.title ?? ""}>
+                      <FadeImg src={imageOf(p)} alt="" />
+                      <span className="ub-cn-next__play" aria-hidden>
+                        ▶
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </aside>
+      </div>
+    </section>
+  )
+}
+
+/** Rangée d'affiches (format 2:3) à faire défiler, titre et prix sur l'image. */
+export function CinemaRow({ products, title }: { products: P[]; title: string }) {
+  const items = products.slice(0, 10)
+  if (!items.length) return null
+  return (
+    <section className="ub-cn-section">
+      <div className="ub-wrap ub-cn-head">
+        <h2 className="ub-cn-h2">{title}</h2>
+        <Link href="/store" className="ub-cn-more">
+          {t("section.viewAll")} <Icon name="arrowRight" />
+        </Link>
+      </div>
+      <ul className="ub-cn-row">
+        {items.map((p) => {
+          const { price, onSale } = priceOf(p)
+          const image = imageOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-cn-poster">
+                {image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}
+                {onSale && price?.percentage_diff && <span className="ub-cn-poster__off">-{price.percentage_diff}%</span>}
+                <span className="ub-cn-poster__info">
+                  <b>{p.title}</b>
+                  {price && (
+                    <span>
+                      {price.calculated_price}
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                </span>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}
+
+/** Top 10 : grands chiffres détourés derrière les affiches (les plus remisés d'abord). */
+export function CinemaTop({ products }: { products: P[] }) {
+  const items = products.filter(imageOf).slice(0, 10)
+  if (items.length < 3) return null
+  return (
+    <section className="ub-cn-section">
+      <div className="ub-wrap ub-cn-head">
+        <h2 className="ub-cn-h2">{t("cinema.top")}</h2>
+      </div>
+      <ol className="ub-cn-row ub-cn-top">
+        {items.map((p, i) => (
+          <li key={p.id}>
+            <Link href={`/products/${p.handle}`} className="ub-cn-top__item" aria-label={`${i + 1}. ${p.title ?? ""}`}>
+              <span className="ub-cn-top__num" aria-hidden>
+                {i + 1}
+              </span>
+              <span className="ub-cn-poster ub-cn-poster--small">
+                <FadeImg src={imageOf(p)} alt="" />
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </section>
+  )
+}
+
+/** Bannière « séance de minuit » : format cinéma (bandes noires), texte du bandeau promo, compte à rebours. */
+export function CinemaScreening({ campaign, image }: { campaign: Campaign; image?: string }) {
+  const promo = campaign.promo
+  if (!promo) return null
+  const bg = (promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined) ?? image
+  return (
+    <section className="ub-wrap ub-cn-section">
+      <div className="ub-cn-screen" style={bg ? { ["--cn-screen" as string]: `url("${bg}")` } : undefined}>
+        <div className="ub-cn-screen__text">
+          {promo.eyebrow && <p className="ub-cn-tag">{promo.eyebrow}</p>}
+          <h2 className="ub-cn-h2">{promo.title}</h2>
+          {promo.text && <p>{promo.text}</p>}
+          {campaign.showCountdown !== false && (
+            <div className="ub-cn-screen__cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+          <Link href="/store" className="ub-cn-btn ub-cn-btn--play">
+            <span aria-hidden>▶</span> {promo.cta ?? t("nav.cta")}
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}