Criar uma Hero Section

Golden Path — Hero Section mínima até versão completa, usando apenas contratos V2.

Golden Path para uma Hero Section na Corvex. Todos os requisitos vêm dos contratos canônicos — sem APIs inventadas.

Pré-requisitos: tema Corvex (corvex init) e familiaridade com Section Contract e Schema Contract.

---

Parte 1 — Section mínima

Arquivos

sections/hero/
├── section.jsx
└── schema.json

theme.json

"sections": ["hero", …]

schema.json

{
  "type": "hero",
  "name": "Hero",
  "category": "Banner",
  "settings": []
}

section.jsx

export default function HeroSection({ settings = {} }) {
  return (
    <section className="hero">
      <h1>Hero</h1>
    </section>
  );
}

Validar: corvex validate

---

Parte 2 — Adicionar schema completo

Expandir schema.json conforme Schema overview:

{
  "type": "hero",
  "name": "Hero",
  "category": "Banner",
  "settings": [
    { "id": "title", "type": "text", "label": "Título", "default": "Bem-vindo" },
    { "id": "subtitle", "type": "textarea", "label": "Subtítulo" }
  ]
}

name e category são REQUIRED (Section Contract).

---

Parte 3 — Consumir settings

export default function HeroSection({ settings = {} }) {
  return (
    <section className="hero">
      <h1>{settings.title || 'Bem-vindo'}</h1>
      {settings.subtitle && <p>{settings.subtitle}</p>}
    </section>
  );
}

O componente deve ler valores de settings — ver Section Contract.

---

Parte 4 — Imagem de fundo

Adicionar field image:

{
  "id": "backgroundImage",
  "type": "image",
  "label": "Imagem de fundo"
}

export default function HeroSection({ settings = {} }) {
  const style = {
    backgroundImage: settings.backgroundImage
      ? `url(${settings.backgroundImage})`
      : undefined,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    minHeight: 400,
    padding: '48px 24px',
  };

  return (
    <section className="hero" style={style}>
      <h1>{settings.title || 'Bem-vindo'}</h1>
    </section>
  );
}

---

Parte 5 — CTA com URL

Fields text + url:

{ "id": "ctaLabel", "type": "text", "label": "Texto do botão", "default": "Ver produtos" },
{ "id": "ctaUrl", "type": "url", "label": "Link do botão", "placeholder": "https://" }

{settings.ctaUrl && (
  <a href={settings.ctaUrl} className="hero-cta">
    {settings.ctaLabel || 'Ver mais'}
  </a>
)}

---

Parte 6 — Cores

Fields color:

{
  "id": "backgroundColor",
  "type": "color",
  "label": "Cor de fundo",
  "default": "#7c3aed"
},
{
  "id": "textColor",
  "type": "color",
  "label": "Cor do texto",
  "default": "#ffffff"
}

const style = {
  background: settings.backgroundColor || '#7c3aed',
  color: settings.textColor || '#fff',
  …
};

---

Parte 7 — Altura (select)

Field select — scaffold oficial:

{
  "id": "height",
  "type": "select",
  "label": "Altura",
  "options": [
    { "value": "small", "label": "Pequena" },
    { "value": "medium", "label": "Média" },
    { "value": "large", "label": "Grande" }
  ],
  "default": "large"
}

const heights = { small: 200, medium: 360, large: 480 };
const minHeight = heights[settings.height] || 480;

---

Parte 8 — Blocks (opcional)

Se a hero aceita título + texto como blocks:

1. Registrar blocks no tema: blocks/heading, blocks/text
2. sections/hero/blocks.json:

{
  "blocks": [{ "type": "heading" }, { "type": "text" }],
  "max_blocks": 4
}

Ver Block Contract. Não importe blocks.json no JSX e não declare propriedade estática no componente — fazer / não fazer. Para hero simples, settings da section bastam.

---

Parte 9 — Edição inline (opcional)

Duplo clique no canvas (modo Inspecionar ativo no builder). Ver Runtime API:

import { SectionChrome, InlineText } from '@corvex/runtime';

export default function HeroSection(props) {
  const settings = props.settings ?? props;

  return (
    <SectionChrome label="Hero" settings={settings}>
      <section className="hero-section">
        <InlineText
          propKey="title"
          tag="h1"
          value={settings.title || 'Título do hero'}
          placeholder="Duplo clique para editar"
        />
        <InlineText
          propKey="subtitle"
          tag="p"
          value={settings.subtitle || ''}
          multiline
        />
      </section>
    </SectionChrome>
  );
}

• propKey = id do field em schema.json (title, subtitle, …).
• Campos select, image, color continuam só no inspetor lateral.

---

Parte 10 — Template default

templates/index.json:

{
  "name": "Página inicial",
  "type": "index",
  "sections": {
    "hero": {
      "type": "hero",
      "settings": {
        "title": "Bem-vindo à sua loja",
        "subtitle": "Personalize no editor"
      }
    }
  },
  "order": ["hero"]
}

Page Contract

---

Parte 11 — CSS isolado

sections/hero/styles.css (opcional):

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  background: #fff;
  color: #111;
  text-decoration: none;
}

Incluído no bundle CSS pelo build.

---

Parte 12 — Build e preview

corvex validate
corvex build
corvex sync

• O canvas lê o estado aberto no editor (Preview Contract).
• Pré-visualizar grava o rascunho da página e abre a aba. Se esse salvamento falha, a aba não abre. Uma URL de rascunho aberta por fora do botão lê só o que já está no servidor.

---

Checklist de entrega

• sections/hero/section.jsx + schema.json existem
• ID hero em theme.json → sections
• name + category no schema
• Field types apenas da lista estável
• corvex validate passa
• Template index.json inclui instância hero
• Sem dados de catálogo — hero editorial: sem schema.data (Data Contract)

---

Hero completa — referência do scaffold

corvex init cria sections/hero. A edição inline desta página usa propKey. É essa prop que o editor grava no setting.

---

Próximos passos

• Grid de produtos
• Section overview
• Publish Contract