> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://docs-loja.usecorvex.com.br/reference/contracts/section.md) — sem APIs inventadas.

Pré-requisitos: tema Corvex (`corvex init`) e familiaridade com [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md) e [Schema Contract](https://docs-loja.usecorvex.com.br/reference/contracts/schema.md).

***

## Parte 1 — Section mínima

### Arquivos

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
sections/hero/
├── section.jsx
└── schema.json
```

### `theme.json`

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
"sections": ["hero", …]
```

### `schema.json`

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "type": "hero",
  "name": "Hero",
  "category": "Banner",
  "settings": []
}
```

### `section.jsx`

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/schema/overview.md):

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "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](https://docs-loja.usecorvex.com.br/reference/contracts/section.md)).

***

## Parte 3 — Consumir settings

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/reference/contracts/section.md).

***

## Parte 4 — Imagem de fundo

Adicionar field [image](https://docs-loja.usecorvex.com.br/schema/fields/image.md):

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "id": "backgroundImage",
  "type": "image",
  "label": "Imagem de fundo"
}
```

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/schema/fields/text.md) + [url](https://docs-loja.usecorvex.com.br/schema/fields/url.md):

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{ "id": "ctaLabel", "type": "text", "label": "Texto do botão", "default": "Ver produtos" },
{ "id": "ctaUrl", "type": "url", "label": "Link do botão", "placeholder": "https://" }
```

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
{settings.ctaUrl && (
  <a href={settings.ctaUrl} className="hero-cta">
    {settings.ctaLabel || 'Ver mais'}
  </a>
)}
```

***

## Parte 6 — Cores

Fields [color](https://docs-loja.usecorvex.com.br/schema/fields/color.md):

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "id": "backgroundColor",
  "type": "color",
  "label": "Cor de fundo",
  "default": "#7c3aed"
},
{
  "id": "textColor",
  "type": "color",
  "label": "Cor do texto",
  "default": "#ffffff"
}
```

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
const style = {
  background: settings.backgroundColor || '#7c3aed',
  color: settings.textColor || '#fff',
  …
};
```

***

## Parte 7 — Altura (select)

Field [select](https://docs-loja.usecorvex.com.br/schema/fields/select.md) — scaffold oficial:

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "id": "height",
  "type": "select",
  "label": "Altura",
  "options": [
    { "value": "small", "label": "Pequena" },
    { "value": "medium", "label": "Média" },
    { "value": "large", "label": "Grande" }
  ],
  "default": "large"
}
```

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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`:

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "blocks": [{ "type": "heading" }, { "type": "text" }],
  "max_blocks": 4
}
```

Ver [Block Contract](https://docs-loja.usecorvex.com.br/reference/contracts/block.md). Não importe `blocks.json` no JSX e não declare propriedade estática no componente — [fazer / não fazer](https://docs-loja.usecorvex.com.br/reference/contracts/section.md#fazer-/-não-fazer-section.jsx). 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](https://docs-loja.usecorvex.com.br/reference/runtime-api.md#edição-inline-—-duplo-clique-no-canvas):

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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`:

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

[Page Contract](https://docs-loja.usecorvex.com.br/reference/contracts/page.md)

***

## Parte 11 — CSS isolado

`sections/hero/styles.css` (opcional):

```css theme={"theme":{"light":"github-light","dark":"github-dark"}}
.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

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
corvex validate
corvex build
corvex sync
```

* O canvas lê o estado aberto no editor ([Preview Contract](https://docs-loja.usecorvex.com.br/reference/contracts/preview.md)).
* **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](https://docs-loja.usecorvex.com.br/schema/overview.md)
* [ ] `corvex validate` passa
* [ ] Template `index.json` inclui instância hero
* [ ] Sem dados de catálogo — hero editorial: **sem** `schema.data` ([Data Contract](https://docs-loja.usecorvex.com.br/reference/contracts/data.md))

***

## 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](https://docs-loja.usecorvex.com.br/guides/create-product-grid.md)
* [Section overview](https://docs-loja.usecorvex.com.br/sections/overview.md)
* [Publish Contract](https://docs-loja.usecorvex.com.br/reference/contracts/publish.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.