@unbox-plus/cli 0.20.4

package/template/components/home/sections/purchase-hero.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+// HERO DE COMPRA — o bloco de conversão principal (padrão das lojas Unbox de produção):
+// galeria + título + seletor de quantidade com tiers + vantagens + garantia, como SEÇÃO
+// de home (âncora #comprar) ou topo de landing. Produto e preço REAIS (data.featured).
+// Tiers em QUANTITY_TIERS (lib/store-config.ts) — só prometa o que o backend cumpre.
+// CTA → /carrinho/oferta (passo 2: escolher produtos/variantes + frequência).
+//
+// EDITOR: é copy da marca e vira caminho da seção: o chapéu (`chapeu`, quando a receita traz), o
+// texto (`texto`), o botão (`cta`, um Slot: o <button> tem ícone ao lado e precisa continuar o
+// mesmo elemento), as vantagens (LISTA `vantagens.vantagem-N`, com etiqueta, texto e ícone) e as
+// duas linhas da garantia (`garantia.chapeu`, `garantia.titulo`). Fica fora do editor, e fora do
+// gate por `data-editor-ignore`, o que é DADO ou MECÂNICA (README do editor, §8): foto, nome e preço
+// do produto, os tiers de quantidade (configuração comercial), os cálculos de desconto e a frase do
+// CDC (texto legal). Para o lojista o topo é BANNER ou "bloco de compra", nunca "hero".
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ShieldCheck, CreditCard, Truck, ArrowRight } from "@phosphor-icons/react/dist/ssr";
+import { Editable, EditableScope } from "@/lib/editable";
+import { Stars } from "./stars";
+import { QUANTITY_TIERS } from "@/lib/store-config";
+import { formatBRL } from "@/lib/format";
+import type { SectionComponentProps } from "./registry";
+import { Foto } from "@/components/ui/foto";
+
+type Perk = { tag: string; text: string; icon?: string };
+const PERK_ICONS: Record<string, React.ComponentType<any>> = { shield: ShieldCheck, card: CreditCard, truck: Truck };
+
+
+export function PurchaseHeroSection({ data, sectionProps = {} }: SectionComponentProps) {
+  const router = useRouter();
+  const product = data.featured;
+  const {
+    tagline = "",
+    description = "",
+    ctaLabel = "2. Escolher os produtos",
+    sacEmail = "",
+  } = sectionProps as Record<string, string>;
+  // Sem perks na receita, o bloco de perks some (nada de "envio com rastreio" por default).
+  const perks = (sectionProps.perks as Perk[] | undefined) ?? [];
+  const rating = typeof sectionProps.rating === "number" ? (sectionProps.rating as number) : null;
+
+  const defaultIdx = Math.max(0, QUANTITY_TIERS.findIndex((t) => t.selected) !== -1
+    ? QUANTITY_TIERS.findIndex((t) => t.selected)
+    : Math.floor((QUANTITY_TIERS.length - 1) / 2));
+  const [sel, setSel] = React.useState(defaultIdx);
+  const [busy, setBusy] = React.useState(false);
+
+  if (!product) return null;
+  const tier = QUANTITY_TIERS[sel];
+  const unit = product.price;
+  const unitOff = unit * (1 - tier.offPct / 100);
+  const totalFull = unit * tier.quantity;
+  const total = unitOff * tier.quantity;
+  const anyOff = QUANTITY_TIERS.some((t) => t.offPct > 0);
+
+  return (
+    <div id="comprar" className="mx-auto max-w-[var(--container-max,1240px)] scroll-mt-24 px-4 pt-[42px] sm:px-6">
+      <div className="grid gap-9 lg:grid-cols-[1.02fr_0.98fr]">
+        {/* galeria (foto do produto: dado do catálogo) */}
+        <div className="lg:sticky lg:top-24 lg:self-start" data-editor-ignore="">
+          <div className="overflow-hidden rounded-2xl bg-[var(--store-surface-2)]">
+            {product.imageUrl
+              ? <Foto src={product.imageUrl} alt={product.title} width={1200} height={1200} sizes="(min-width: 1024px) 600px, 100vw" priority className="aspect-square w-full object-contain p-8" />
+              : <img src="/brand/ph/photo-a.svg" alt="" className="aspect-square w-full object-cover" />}
+          </div>
+          <Link href={`/produto/${encodeURIComponent(product.slug)}`} className="mt-3 inline-block text-[13.5px] font-semibold text-[var(--store-primary,#18181B)] underline underline-offset-2">Ver página do produto</Link>
+        </div>
+
+        {/* compra */}
+        <div>
+          <div className="flex items-center gap-2">
+            <Stars n={rating} className="text-[16px] text-[var(--store-cta-dark)]" />
+            {tagline && <Editable.Text path="chapeu" fallback={tagline} label="Chapéu acima do nome do produto" className="text-[12.5px] font-extrabold uppercase tracking-[0.8px] text-[var(--store-primary,#18181B)]" />}
+          </div>
+          <h2 className="font-display mt-2.5 text-[27px] font-extrabold leading-[1.15] sm:text-[31px]" data-editor-ignore="">{product.title}</h2>
+          {description && <Editable.Text as="p" path="texto" fallback={description} label="Texto do bloco de compra" multiline className="mt-2.5 text-[15px] leading-[1.55] text-[var(--store-muted)]" />}
+
+          <div className="mt-5 store-card rounded-2xl p-5">
+            {/* tiers, desconto e totais: configuração comercial e cálculo, fora do editor */}
+            <div data-editor-ignore="">
+              {anyOff && (
+                <>
+                  <div className="text-[13.5px] font-extrabold text-[var(--store-ink)]">🔥 Desconto acumulado</div>
+                  {tier.offPct > 0 && (
+                    <div className="mt-2 rounded-lg bg-[var(--store-cta-soft,#FDF0DC)] px-3.5 py-2 text-[12.5px] font-bold text-[var(--store-cta-fg,#1C1207)]">
+                      📦 Você desbloqueou {tier.offPct}% OFF! Economia de {formatBRL(totalFull - total)}
+                    </div>
+                  )}
+                </>
+              )}
+              <div className={`${anyOff ? "mt-4" : ""} text-[13px] font-bold text-[var(--store-ink)]`}>1. Selecione a quantidade</div>
+              <div className="mt-2.5 grid gap-2.5">
+                {QUANTITY_TIERS.map((t, i) => {
+                  const u = unit * (1 - t.offPct / 100);
+                  return (
+                    <button key={t.quantity} type="button" onClick={() => setSel(i)}
+                      className={`flex items-center justify-between gap-3 rounded-xl border-2 px-4 py-3.5 text-left transition-colors ${i === sel ? "border-[var(--store-cta,#D97706)] bg-white shadow-sm" : "border-[var(--store-line-2)] bg-white hover:border-[var(--store-primary,#18181B)]/50"}`}>
+                      <span className="flex items-center gap-3">
+                        <span className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${i === sel ? "bg-[var(--store-cta,#D97706)]" : "border-2 border-[var(--store-faint)]"}`}>
+                          {i === sel && <span className="text-[11px] font-black text-[var(--store-cta-fg,#1C1207)]">✓</span>}
+                        </span>
+                        <span>
+                          <span className="font-display flex items-center gap-2 text-[15px] font-extrabold">
+                            {t.quantity} {t.quantity === 1 ? "unidade" : "unidades"}
+                            {t.badge && <span className="rounded-full bg-[var(--store-surface-2)] px-2.5 py-0.5 text-[10.5px] font-bold uppercase tracking-[0.4px] text-[var(--store-muted)]">{t.badge}</span>}
+                          </span>
+                          <span className="mt-0.5 block text-[12.5px] font-semibold text-[var(--store-muted)]">{formatBRL(u)}/unidade{t.perks.length > 0 ? ` · ${t.perks.join(" + ")}` : ""}</span>
+                        </span>
+                      </span>
+                      <span className="text-right">
+                        {t.offPct > 0 && <span className="mr-2 rounded-full bg-[var(--store-cta-soft,#FDF0DC)] px-2 py-0.5 text-[11px] font-extrabold text-[var(--store-cta-fg,#1C1207)]">{t.offPct}%OFF</span>}
+                        {t.offPct > 0 && <span className="block text-[11.5px] text-[var(--store-faint)] line-through">{formatBRL(unit * t.quantity)}</span>}
+                        <span className="font-display text-[16px] font-extrabold text-[var(--store-ink)]">{formatBRL(u * t.quantity)}</span>
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* vantagens: lista editável (o invólucro do item é display:contents; a célula do grid é o card) */}
+            {perks.length > 0 && (
+              <div className="mt-5 grid grid-cols-3 gap-2.5">
+                <EditableScope path="vantagens">
+                  <Editable.Sections nested>
+                    {perks.map((p, i) => {
+                      const Icon = PERK_ICONS[p.icon ?? ""] ?? ShieldCheck;
+                      return (
+                        <Editable.Section key={i} item id={`vantagem-${i + 1}`} label={`Vantagem ${i + 1}`}>
+                          <div className="overflow-hidden rounded-xl border border-[var(--store-line-2)] text-center">
+                            <Editable.Text as="div" path="etiqueta" fallback={p.tag} label="Etiqueta da vantagem" className="bg-[var(--store-chrome-bg,#18181B)] px-1 py-1.5 text-[9.5px] font-extrabold uppercase tracking-[0.5px] text-[var(--store-chrome-text,#ffffff)]" />
+                            <div className="flex flex-col items-center gap-1.5 px-2 py-3">
+                              <Editable.Icon path="icone" label="Ícone da vantagem" size={22} className="text-[22px] text-[var(--store-primary,#18181B)]">
+                                <Icon weight="fill" />
+                              </Editable.Icon>
+                              <Editable.Text path="texto" fallback={p.text} label="Texto da vantagem" className="text-[11px] font-semibold leading-[1.3] text-[var(--store-ink-2)]" />
+                            </div>
+                          </div>
+                        </Editable.Section>
+                      );
+                    })}
+                  </Editable.Sections>
+                </EditableScope>
+              </div>
+            )}
+
+            {/* resumo + CTA */}
+            <div className="mt-4 flex flex-wrap items-center justify-between gap-2" data-editor-ignore="">
+              <span className="flex items-center gap-2">
+                <span className="rounded-full bg-[var(--store-primary-soft,#F1F1F3)] px-3 py-1 text-[12px] font-bold text-[var(--store-primary,#18181B)]">{formatBRL(unitOff)}/unidade</span>
+                {tier.offPct > 0 && <span className="rounded-full bg-[var(--store-cta-soft,#FDF0DC)] px-3 py-1 text-[12px] font-extrabold text-[var(--store-cta-fg,#1C1207)]">{tier.offPct}%OFF</span>}
+              </span>
+              <span className="text-right">
+                {tier.offPct > 0 && <span className="mr-2 text-[12.5px] text-[var(--store-faint)] line-through">De {formatBRL(totalFull)}</span>}
+                <span className="font-display text-[19px] font-extrabold">{formatBRL(total)}</span>
+              </span>
+            </div>
+            <Editable.Slot path="cta" type="text" fallback={ctaLabel} label="Botão de compra">
+              {(v, attrs, ref, estilo) => (
+                <button ref={ref} {...attrs} type="button" disabled={busy} onClick={() => { setBusy(true); router.push(`/carrinho/oferta?quantity=${tier.quantity}`); }}
+                  className="font-display mt-3.5 flex w-full items-center justify-center gap-2 rounded-full bg-[var(--store-cta,#D97706)] py-4 text-[15.5px] font-extrabold uppercase tracking-[0.5px] text-[var(--store-cta-fg,#1C1207)] transition-colors hover:bg-[var(--store-cta-dark,#B45309)] disabled:opacity-60" style={estilo}>
+                  {busy ? "Preparando..." : v} <ArrowRight weight="bold" />
+                </button>
+              )}
+            </Editable.Slot>
+          </div>
+
+          <div className="mt-4 flex items-start gap-3.5 rounded-2xl border-2 border-dashed border-[var(--store-cta,#D97706)]/60 bg-[var(--store-surface)] px-5 py-4">
+            <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--store-primary-soft,#F1F1F3)] text-[var(--store-primary,#18181B)]">
+              <Editable.Icon path="garantia.icone" label="Ícone da garantia" size={22} className="text-[22px]">
+                <ShieldCheck weight="fill" />
+              </Editable.Icon>
+            </span>
+            <div className="text-[13px] leading-[1.5] text-[var(--store-muted)]">
+              <Editable.Text as="span" path="garantia.chapeu" fallback="Seu pedido está protegido por" label="Linha acima da garantia" className="block text-[11.5px]" />
+              <Editable.Text as="span" path="garantia.titulo" fallback="Compra segura e troca fácil" label="Título da garantia" className="font-display block text-[15px] font-extrabold text-[var(--store-ink)]" />
+              {/* texto legal (CDC): fora do editor por regra (§8) */}
+              <span data-editor-ignore="">Arrependimento em até 7 dias após o recebimento (CDC).{sacEmail ? ` Fale com ${sacEmail}.` : ""}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/quote-banner.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+// Faixa full-width com foto + citação grande (na loja de referência: depoimento da fundadora).
+// Conteúdo via receita; default neutro assinado pela própria loja (nunca invente
+// depoimento de terceiro).
+//
+// EDITOR: foto, citação, autor e cargo (quando a receita traz) são caminhos da seção. A citação é
+// um `Editable.Slot`: as aspas curvas ficam no render, fora do valor, para o lojista não ter de
+// digitá-las (e não perdê-las) ao trocar a frase. A foto continua passando pelo `Foto` (otimizador
+// do Next): o `Editable.Slot` só lhe entrega o src/alt do lojista e os atributos de seleção.
+import { Editable } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+import { Foto } from "@/components/ui/foto";
+
+export function QuoteBannerSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    quote = "A gente montou essa loja do jeito que gostaria de comprar: produto honesto, entrega cuidada e zero enrolação.",
+    author = "Time da loja",
+    role = "",
+    image = "/brand/ph/photo-b.svg",
+  } = sectionProps as Record<string, string>;
+  return (
+    <div className="reveal mt-[52px] bg-[var(--store-chrome-bg,#18181B)]">
+      <div className="mx-auto grid max-w-[var(--container-max,1240px)] items-stretch md:grid-cols-[44fr_56fr]">
+        {/* TODO: trocar por foto real (fundador/bastidor/produto) */}
+        <Editable.Slot path="imagem" type="image" fallback={{ src: image, alt: "" }} label="Foto">
+          {(v, attrs, ref) => <Foto ref={ref} attrs={attrs} src={v.src} alt={v.alt ?? ""} width={1240} height={840} sizes="(min-width: 768px) 50vw, 100vw" className="h-full max-h-[420px] w-full object-cover md:max-h-none" />}
+        </Editable.Slot>
+        <div className="flex flex-col justify-center gap-5 px-6 py-10 sm:px-10 sm:py-14">
+          <Editable.Slot path="citacao" type="text" fallback={quote} label="Citação">
+            {(v, attrs, ref, estilo) => (
+              <p ref={ref} className="font-display text-[22px] font-bold leading-[1.35] text-[var(--store-chrome-text,#ffffff)] sm:text-[26px]" style={estilo} {...attrs}>
+                “{v}”
+              </p>
+            )}
+          </Editable.Slot>
+          <div className="text-[14px] text-[var(--store-chrome-muted)]">
+            <Editable.Text path="autor" fallback={author} label="Quem assina a citação" className="font-bold text-[var(--store-chrome-text,#ffffff)]" />
+            {role ? (
+              <>
+                {" · "}
+                <Editable.Text path="cargo" fallback={role} label="Cargo de quem assina" />
+              </>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/registry.ts

@@ -0,0 +1,186 @@
+// Registry das seções da home — o mapa nome→componente que a receita
+// (components/home/home-recipe.ts) referencia.
+//
+// ESTE ARQUIVO NÃO DESCREVE AS SEÇÕES, só declara os nomes válidos (a union tipada que faz o
+// tsc reprovar nome inventado). Pra saber O QUE cada seção é, quais variantes tem e quando
+// cabe usar: agents/PADROES.md §2 — é o catálogo, e é mais barato que abrir os 24 componentes.
+//
+// Pra criar uma seção ou variante nova: arquivo em components/home/sections/ + entrada aqui
+// + IDENTIDADE_PADRAO (id, tipo e nome que o lojista vê) + registro no PADROES.md §2.
+import type { CatalogProductItem, CatalogCategory } from "@/components/catalog/catalog-client";
+import type { ResolvedCombo } from "@/lib/enrichment/combos";
+import type { SectionKind } from "@/lib/editable";
+// só o TIPO: lib/vitrine.ts é `server-only`, e `import type` é apagado na compilação. Nenhum
+// módulo de servidor entra no bundle das seções por causa desta linha.
+import type { VitrinesResolvidas } from "@/lib/vitrine";
+import { HeroSection } from "./hero";
+import { TrustBarSection } from "./trust-bar";
+import { CategoryPillsSection } from "./category-pills";
+import { CombosCarouselSection } from "./combos-carousel";
+import { SavingsSection } from "./savings";
+import { ReviewsSection } from "./reviews";
+import { KitsSection } from "./kits";
+import { TrustStripSection } from "./trust-strip";
+import { NewsletterSection } from "./newsletter";
+import { AttributesMarqueeSection } from "./attributes-marquee";
+import { BenefitsSection } from "./benefits";
+import { StatsGridSection } from "./stats-grid";
+import { QuoteBannerSection } from "./quote-banner";
+import { MediaCardsSection } from "./media-cards";
+import { SpecTableSection } from "./spec-table";
+import { RitualSection } from "./ritual";
+import { FounderStorySection } from "./founder-story";
+import { VideoWallSection } from "./video-wall";
+import { SocialRowSection } from "./social-row";
+import { ReviewsCarouselSection } from "./reviews-carousel";
+import { ComparisonSection } from "./comparison";
+import { ProductShowcaseSection } from "./product-showcase";
+import { PurchaseHeroSection } from "./purchase-hero";
+import { BlocoHtmlSection } from "./bloco-html";
+
+/** Dados buscados pelo servidor (app/page.tsx) e entregues a todas as seções. */
+export interface HomeData {
+  combos: CatalogProductItem[];
+  featured: CatalogProductItem | null;
+  bundles: ResolvedCombo[];
+  categories: CatalogCategory[];
+  combosTitle: string;
+  /** Rótulo "R$X" do frete grátis; null = loja sem regra de frete grátis (seções escondem o selo). */
+  freeShipLabel: string | null;
+  /**
+   * EDITOR: as VITRINES já resolvidas, indexadas pelo CAMINHO (`<container>.<id da seção>.vitrine`).
+   *
+   * O documento do lojista guarda só a ESCOLHA (categoria da Unbox, lista de produtos ou busca);
+   * quem busca os produtos é o SERVIDOR (lib/vitrine.ts, `resolverVitrinesDoDocumento`) e os entrega
+   * prontos aqui. Cada seção acha os seus DERIVANDO o caminho do próprio escopo (`joinPath(ctx.scope,
+   * CAMPO_VITRINE)`), nunca por uma constante escrita à mão, que descolaria da seção no primeiro `id`
+   * renomeado.
+   *
+   * Caminho ausente = o lojista não escolheu, ou a escolha não resolveu em nada (Unbox fora,
+   * categoria esvaziada): a seção mostra os produtos do CÓDIGO. Omitido de todo (página que não
+   * leu o documento, como /oferta) = idem.
+   */
+  vitrines?: VitrinesResolvidas;
+}
+
+/** Props que toda seção recebe do renderer (CombosHome). */
+export interface SectionComponentProps {
+  data: HomeData;
+  variant?: string;
+  sectionProps?: Record<string, unknown>;
+}
+
+export const SECTIONS = {
+  hero: HeroSection,
+  "trust-bar": TrustBarSection,
+  "category-pills": CategoryPillsSection,
+  "combos-carousel": CombosCarouselSection,
+  savings: SavingsSection,
+  reviews: ReviewsSection,
+  kits: KitsSection,
+  "trust-strip": TrustStripSection,
+  newsletter: NewsletterSection,
+  // Biblioteca de conversão (portada de uma loja Unbox real em produção, genericizadas):
+  "attributes-marquee": AttributesMarqueeSection,
+  benefits: BenefitsSection,
+  "stats-grid": StatsGridSection,
+  "quote-banner": QuoteBannerSection,
+  "media-cards": MediaCardsSection,
+  "spec-table": SpecTableSection,
+  ritual: RitualSection,
+  "founder-story": FounderStorySection,
+  "video-wall": VideoWallSection,
+  "social-row": SocialRowSection,
+  "reviews-carousel": ReviewsCarouselSection,
+  comparison: ComparisonSection,
+  "product-showcase": ProductShowcaseSection,
+  "purchase-hero": PurchaseHeroSection,
+  // Seção do EDITOR (não vem da receita): o lojista a adiciona pelo "+" e cola o HTML dele dentro.
+  // Fica no registry como as outras porque o catálogo (sections/catalogo.ts) só sabe instanciar o que
+  // está aqui, e porque o dia em que a receita quiser um bloco de HTML fixo, ele já existe.
+  "bloco-html": BlocoHtmlSection,
+} as const;
+
+export type SectionName = keyof typeof SECTIONS;
+
+export interface RecipeEntry {
+  section: SectionName;
+  /**
+   * EDITOR: identidade ESTÁVEL da seção (ordem, ocultar, e o prefixo de todo caminho de copy dentro
+   * dela). Omitido = o id de IDENTIDADE_PADRAO da seção (e "-2", "-3" nas repetidas).
+   *
+   * CHAVE PRIMÁRIA depois que a loja publica: o documento do lojista aponta para este nome. Renomear,
+   * ou reordenar seções repetidas (o que renumera as derivadas), apaga a edição dele em silêncio.
+   * Escreva o id à mão nas seções que se repetem na receita.
+   */
+  id?: string;
+  /** Nome que o LOJISTA vê no painel ("Banner principal"). Omitido = o de IDENTIDADE_PADRAO. */
+  label?: string;
+  /** Tipo da seção no vocabulário fechado da foundation (`SECTION_KINDS`). Omitido = o de IDENTIDADE_PADRAO. */
+  kind?: SectionKind;
+  /** Variante visual da seção (ver cada componente / PADROES.md). Omitida = default. */
+  variant?: string;
+  /** Props específicas da seção (ex.: imagens do hero, copy). */
+  props?: Record<string, unknown>;
+}
+
+/** A receita da home: ordem + variante + props de cada seção. */
+export type HomeRecipe = RecipeEntry[];
+
+/**
+ * A IDENTIDADE de cada seção PARA O EDITOR: o id (prefixo de todo caminho de copy, chave primária
+ * depois de publicado), o tipo do vocabulário fechado e o nome que o lojista lê no painel.
+ *
+ * Mora AQUI, e não em cada entrada da receita, porque `components/home/home-recipe.ts` é REESCRITO
+ * pelo create-unbox-store a partir de src/presets.js: uma receita que exigisse id/kind/label em cada
+ * linha nasceria incompleta em toda loja gerada. A receita pode sobrescrever qualquer um dos três
+ * (é o que fazer numa seção repetida ou num bloco com nome próprio, "Tradicional", "Chocolate").
+ *
+ * Ids em português, do ponto de vista do lojista, nunca o nome de código: o id vaza no tooltip do
+ * painel e no caminho de todo texto da seção ("banner", nunca "hero"; ver README do editor,
+ * "Vocabulário: nunca hero"). NÃO RENOMEIE depois que alguma loja publicou.
+ */
+export const IDENTIDADE_PADRAO: Record<SectionName, { id: string; kind: SectionKind; label: string }> = {
+  hero: { id: "banner", kind: "banner", label: "Banner principal" },
+  "trust-bar": { id: "selos", kind: "beneficios", label: "Selos de confiança" },
+  "category-pills": { id: "categorias", kind: "outro", label: "Categorias" },
+  "combos-carousel": { id: "vitrine", kind: "vitrine-de-produtos", label: "Vitrine de destaques" },
+  savings: { id: "economia", kind: "produto-em-destaque", label: "Economia do combo" },
+  reviews: { id: "depoimentos", kind: "depoimentos", label: "Depoimentos" },
+  kits: { id: "kits", kind: "vitrine-de-produtos", label: "Kits e combos" },
+  "trust-strip": { id: "diferenciais", kind: "beneficios", label: "Diferenciais" },
+  newsletter: { id: "newsletter", kind: "newsletter", label: "Newsletter" },
+  "attributes-marquee": { id: "faixa-rolante", kind: "texto-rolante", label: "Faixa rolante" },
+  benefits: { id: "beneficios", kind: "beneficios", label: "Benefícios" },
+  "stats-grid": { id: "numeros", kind: "beneficios", label: "Números e destaques" },
+  "quote-banner": { id: "citacao", kind: "sobre-a-marca", label: "Citação" },
+  "media-cards": { id: "cards", kind: "galeria", label: "Cards de imagem" },
+  "spec-table": { id: "ficha", kind: "outro", label: "Ficha técnica" },
+  ritual: { id: "como-funciona", kind: "como-funciona", label: "Como funciona" },
+  "founder-story": { id: "historia", kind: "sobre-a-marca", label: "Nossa história" },
+  "video-wall": { id: "videos", kind: "video", label: "Vídeos" },
+  "social-row": { id: "comunidade", kind: "galeria", label: "Comunidade" },
+  "reviews-carousel": { id: "avaliacoes", kind: "depoimentos", label: "Avaliações" },
+  comparison: { id: "comparativo", kind: "comparacao", label: "Comparativo" },
+  "product-showcase": { id: "grade", kind: "vitrine-de-produtos", label: "Grade de produtos" },
+  "purchase-hero": { id: "compra", kind: "produto-em-destaque", label: "Bloco de compra" },
+  "bloco-html": { id: "bloco-html", kind: "outro", label: "Bloco de HTML" },
+};
+
+/**
+ * Cada entrada da receita com a identidade completa (id, kind, label) que o editor usa: o que a
+ * receita declara vence; o que ela omite sai de IDENTIDADE_PADRAO. Id derivado ganha "-2", "-3"
+ * quando a mesma seção se repete, na ordem em que aparece.
+ */
+export function withIds(recipe: HomeRecipe): (RecipeEntry & { id: string; kind: SectionKind; label: string })[] {
+  const vistos = new Map<string, number>();
+  return recipe.map((e) => {
+    const padrao = IDENTIDADE_PADRAO[e.section];
+    const kind = e.kind ?? padrao.kind;
+    const label = e.label ?? padrao.label;
+    if (e.id) return { ...e, id: e.id, kind, label };
+    const n = (vistos.get(padrao.id) ?? 0) + 1;
+    vistos.set(padrao.id, n);
+    return { ...e, id: n === 1 ? padrao.id : `${padrao.id}-${n}`, kind, label };
+  });
+}

package/template/components/home/sections/reviews-carousel.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+// Carrossel de reviews em card bordado com pílulas de tema (portado do carrossel de clube de uma loja real em produção).
+// Reviews REAIS via receita (props.reviews). Sem elas a seção não renderiza — não existe
+// default: "Cliente A/B/C" fabricado foi ao ar em loja real.
+//
+// EDITOR: só o TÍTULO é caminho da seção. As avaliações são dado de terceiros (quem fala é o
+// cliente, não a marca), e a regra §8 do README do editor as deixa fora dos primitivos; os filtros
+// e as setas são interface. O carrossel mostra uma avaliação por vez, então nem uma lista editável
+// caberia aqui sem trocar o desenho da seção. O miolo sai do gate por `data-editor-ignore`.
+import * as React from "react";
+import { CaretLeft, CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { Editable } from "@/lib/editable";
+import { Stars } from "./stars";
+import type { SectionComponentProps } from "./registry";
+
+type Review = { name: string; quote: string; tag?: string; stars?: number };
+
+export function ReviewsCarouselSection({ sectionProps = {} }: SectionComponentProps) {
+  const { title = "O que dizem nossos clientes" } = sectionProps as Record<string, string>;
+  const reviews = (sectionProps.reviews as Review[] | undefined) ?? [];
+  const tags = [...new Set(reviews.map((r) => r.tag).filter(Boolean))] as string[];
+  const [active, setActive] = React.useState<string | null>(null);
+  const [idx, setIdx] = React.useState(0);
+  const visible = active ? reviews.filter((r) => r.tag === active) : reviews;
+  const current = visible[Math.min(idx, visible.length - 1)] ?? reviews[0];
+
+  const step = (d: number) => setIdx((i) => (i + d + visible.length) % visible.length);
+
+  if (!reviews.length) return null;
+  const comNota = reviews.filter((r) => r.stars != null);
+  const media = comNota.length ? comNota.reduce((s, r) => s + (r.stars as number), 0) / comNota.length : null;
+
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="rounded-2xl border-2 border-[var(--store-primary,#18181B)]/25 bg-[var(--store-surface)] p-6 sm:p-9">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display text-[24px] font-extrabold" />
+          <Stars n={media} className="text-[16px] text-[var(--store-cta-dark)]" />
+        </div>
+        <div data-editor-ignore="">
+          {tags.length > 1 && (
+            <div className="mt-5 flex flex-wrap gap-2">
+              {[null, ...tags].map((t) => (
+                <button key={t ?? "todos"} type="button" onClick={() => { setActive(t); setIdx(0); }} className={`rounded-full border px-4 py-1.5 text-[13px] font-semibold transition-colors ${active === t ? "border-[var(--store-primary,#18181B)] bg-[var(--store-primary,#18181B)] text-white" : "border-[var(--store-line-2)] bg-white text-[var(--store-ink-2)] hover:border-[var(--store-primary,#18181B)]"}`}>{t ?? "todos"}</button>
+              ))}
+            </div>
+          )}
+          <div className="mt-6 flex items-center gap-4">
+            <button type="button" onClick={() => step(-1)} aria-label="Anterior" className="hidden h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full border-[1.5px] border-[var(--store-line-2)] bg-white hover:border-[var(--store-primary,#18181B)] sm:flex"><CaretLeft weight="bold" /></button>
+            <div className="min-h-[110px] flex-1 rounded-xl bg-white p-6">
+              <p className="text-[15.5px] leading-[1.6] text-[var(--store-ink-2)]">“{current.quote}”</p>
+              <div className="mt-3 text-[13.5px] font-bold text-[var(--store-ink)]">{current.name}</div>
+            </div>
+            <button type="button" onClick={() => step(1)} aria-label="Próximo" className="hidden h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full border-[1.5px] border-[var(--store-line-2)] bg-white hover:border-[var(--store-primary,#18181B)] sm:flex"><CaretRight weight="bold" /></button>
+          </div>
+          <div className="mt-4 flex justify-center gap-1.5">
+            {visible.map((_, i) => (
+              <button key={i} type="button" onClick={() => setIdx(i)} aria-label={`Review ${i + 1}`} className={`h-2 w-2 rounded-full ${i === idx ? "bg-[var(--store-primary,#18181B)]" : "bg-[var(--store-line-2)]"}`} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/reviews.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+// REVIEWS — depoimentos. Variantes: "grid" (3 colunas, default) e "faixa" (linha única
+// horizontal, mais discreta — combina com estilos minimalistas).
+// SÓ com depoimentos reais, vindos da receita (props.reviews, preenchidos no briefing a partir
+// de avaliações que existem). Sem eles, a seção não renderiza. Não há default: a foundation
+// publicava "Cliente A/B/C" com selo de compra verificada, e isso foi ao ar em loja real.
+//
+// EDITOR: só o TÍTULO é caminho da seção. As avaliações são dado de terceiros (quem fala é o
+// cliente, não a marca) e a nota média é número vindo de dados: a regra §8 do README do editor
+// os deixa fora dos primitivos, e a lista sai do gate por `data-editor-ignore`.
+import { SealCheck } from "@phosphor-icons/react/dist/ssr";
+import { Star } from "@phosphor-icons/react/dist/ssr";
+import { Editable } from "@/lib/editable";
+import { Stars } from "./stars";
+import type { SectionComponentProps } from "./registry";
+
+export interface HomeReview { name: string; quote: string; stars?: number; verified?: boolean }
+
+export function ReviewsSection({ variant = "grid", sectionProps = {} }: SectionComponentProps) {
+  const REVIEWS = (sectionProps.reviews as HomeReview[] | undefined) ?? [];
+  const { title = "O que dizem nossos clientes" } = sectionProps as Record<string, string>;
+  if (!REVIEWS.length) return null;
+  const comNota = REVIEWS.filter((r) => r.stars != null);
+  const media = comNota.length ? (comNota.reduce((s, r) => s + (r.stars as number), 0) / comNota.length).toFixed(1).replace(".", ",") : null;
+  if (variant === "faixa") {
+    return (
+      <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[42px] sm:px-6">
+        <div className="flex gap-[18px] overflow-x-auto rounded-xl border border-[var(--store-line)] bg-[var(--store-surface)] px-6 py-5 [scrollbar-width:thin]" data-editor-ignore="">
+          {REVIEWS.map((r) => (
+            <div key={r.name} className="flex min-w-[300px] flex-1 items-start gap-3.5">
+              <Stars n={r.stars} className="mt-0.5 flex text-[13px] text-[var(--store-cta-dark)]" />
+              <div>
+                <p className="text-[14px] leading-[1.5] text-[var(--store-ink-2)]">“{r.quote}”</p>
+                <div className="mt-1.5 text-[12.5px] font-bold text-[var(--store-muted)]">{r.name}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // grid (default)
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[42px] sm:px-6">
+      <div className="mb-[18px] flex items-end justify-between">
+        <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display text-[26px] font-extrabold" />
+        {media && <div className="flex items-center gap-2 text-sm font-semibold text-[var(--store-muted)]" data-editor-ignore=""><Star weight="fill" className="text-[17px] text-[var(--store-cta-dark)]" /><b className="text-[var(--store-ink)]">{media}</b></div>}
+      </div>
+      <div className="grid gap-[18px] md:grid-cols-3" data-editor-ignore="">
+        {REVIEWS.map((r) => (
+          <div key={r.name} className="flex flex-col gap-3.5 store-card rounded-xl p-6">
+            <Stars n={r.stars} className="flex text-[15px] text-[var(--store-cta-dark)]" />
+            <p className="flex-1 text-[15px] leading-[1.55] text-[var(--store-ink-2)]">“{r.quote}”</p>
+            <div className="flex items-center gap-3">
+              <span className="flex h-11 w-11 items-center justify-center rounded-full border-2 border-[var(--store-primary-soft,#F1F1F3)] bg-[var(--store-chrome-bg,#18181B)] text-sm font-extrabold text-white">{r.name[0]}</span>
+              <div>
+                <div className="text-sm font-bold text-[var(--store-ink)]">{r.name}</div>
+                {r.verified && <div className="mt-0.5 flex items-center gap-1.5 text-xs font-semibold text-[var(--store-primary,#18181B)]"><SealCheck weight="fill" />Compra verificada</div>}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}