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

# Crie o design de uma landing page

> A partir de um briefing no Notion e de arquivos de marca, crie o design de uma página de lista de espera ou de lançamento no Replit Design.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Você ainda não tem uma página: um novo produto, lista de espera ou campanha. A partir de um
briefing no Notion e de arquivos de marca no Google Drive, crie o design de uma landing page
no Replit Design: seção principal (hero), provas sociais, como funciona e uma chamada para
ação. O Agent usa a oferta e o texto do Notion, além do logotipo, das cores e da tipografia
do Drive. Isso é o sistema visual da página, não o site codificado. Use os frames como
especificação na hora de construir.

## Ideal para

* Designers de produto que precisam de uma página de lista de espera ou de lançamento antes de o produto estar no ar.
* Fundadores que precisam de um primeiro layout alinhado à marca, a partir de um briefing no Notion e materiais do Drive.

## Conectores

<Connectors
  items={[
{
  id: "notion",
  name: "Notion",
  why: "Briefing: oferta, público, provas e chamada para ação",
},
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logotipo, cores, tipografia e materiais de marca",
},
]}
/>

## Antes de começar

Tenha uma página no Notion com o briefing (oferta, público, chamada para ação) e arquivos de
marca no Drive. Conecte Notion e Drive. Diga para quem a página é destinada e qual deve ser a
chamada para ação principal (cadastro, lista de espera, agendar uma demonstração, compra).

## Prompt para o agente

<AiPrompt>
  A partir desta página do Notion \[link] e dos arquivos de marca no Google
  Drive, crie o design de uma landing page no Replit Design para \[lista de
  espera / lançamento / agendar uma demonstração]. Use a oferta, o público,
  as provas e a chamada para ação do Notion. Construa frames para desktop e
  mobile: seção principal com uma chamada para ação, provas sociais, como
  funciona e uma chamada para ação final. Use o logotipo, as cores e a
  tipografia existentes.
</AiPrompt>

## O que esperar

O Agent lê o briefing do Notion e os arquivos de marca do Drive, e então organiza os frames
no Replit Design. Você recebe uma página para desktop e um recorte para mobile, não um app
publicado. Use os frames como especificação na hora de construir, ou peça ao Agent para
implementá-los em um fluxo de Build posterior. Visualize desktop e mobile lado a lado. Confira
a chamada para ação, os pontos de prova e as cores em relação ao Notion e ao Drive antes de
considerar os frames finais.

## Adapte ao seu caso

<AiPrompt>
  Transforme isso em uma landing page de lista de espera: uma promessa, três
  pontos de prova, captura de e-mail e sem navegação extra. Extraia os
  pontos de prova do Notion.
</AiPrompt>

<AiPrompt>
  Adicione uma seção de preços com três planos a partir desta tabela do
  Notion \[link]. Mantenha o sistema visual. Destaque o plano do meio.
</AiPrompt>

## Solução de problemas

* **O texto não vem do briefing:** forneça o link da página do Notion e peça ao Agent para usar a oferta, o público, as provas e a chamada para ação de lá, sem reescrever a partir do site.
* **As cores e a tipografia não correspondem à marca:** conecte o Drive e aponte para os arquivos de logotipo, cores e tipografia.
* **Você esperava um site no ar:** este fluxo de trabalho produz frames no Replit Design, não um app publicado. Use os frames como especificação, ou peça ao Agent para implementá-los em um fluxo de Build posterior.

## Relacionados

<CardGroup cols={2}>
  <Card title="Crie ícones e banners para redes sociais" href="/pt/use-cases/create-social-kit">
    Os mesmos arquivos de marca do Google Drive para materiais de perfil e capa.
  </Card>

  <Card title="Lance um site de evento pago" href="/pt/use-cases/launch-event-website">
    A mesma fonte no Notion para uma página pública, não apenas frames.
  </Card>
</CardGroup>