> ## 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.

# Projete um site de abertura

> Transforme o plano de lançamento da cafeteria em um design para um site de pré-abertura.

export const OpeningSiteDesignCover = () => <div className="chat-mkt" role="img" aria-label="A frosted design canvas with a website layout and image asset" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, .85fr)",
  gap: "clamp(12px, 2.4vw, 22px)",
  width: "min(720px, 84%)",
  minHeight: "inherit",
  alignItems: "center",
  margin: "auto"
}}>
        <div style={{
  display: "grid",
  gap: 12,
  minHeight: "clamp(148px, 23vw, 198px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.6)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.12))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(6px)"
}}>
          <div style={{
  display: "flex",
  gap: 6
}}>
            {[".92", ".52", ".32"].map(opacity => <span key={opacity} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: `rgba(255,255,255,${opacity})`
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(0, 1fr) minmax(0, .8fr)",
  gap: 10
}}>
            <div style={{
  display: "grid",
  alignContent: "center",
  gap: 9
}}>
              <span style={{
  width: "76%",
  height: 12,
  borderRadius: 99,
  background: "rgba(255,255,255,.86)"
}} />
              <span style={{
  width: "94%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.46)"
}} />
              <span style={{
  width: "72%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.34)"
}} />
              <span style={{
  width: 48,
  height: 18,
  marginTop: 4,
  borderRadius: 99,
  background: "rgba(255,255,255,.74)"
}} />
            </div>
            <div style={{
  minHeight: 92,
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 12,
  background: "linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.18))"
}} />
          </div>
        </div>
        <div style={{
  display: "grid",
  gap: 10
}}>
          {["68%", "86%", "54%"].map((width, index) => <div key={width} style={{
  display: "grid",
  gridTemplateColumns: "18px minmax(0, 1fr)",
  alignItems: "center",
  gap: 9,
  padding: "clamp(9px, 1.5vw, 13px)",
  border: "1px solid rgba(255,255,255,.46)",
  borderRadius: 14,
  background: index === 0 ? "rgba(255,255,255,.29)" : "rgba(255,255,255,.12)",
  backdropFilter: "blur(5px)"
}}>
              <span style={{
  width: 18,
  height: 18,
  borderRadius: index === 1 ? 4 : 999,
  background: index === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.42)"
}} />
              <span style={{
  width,
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.7)"
}} />
            </div>)}
        </div>
      </div>
    </div>
  </div>;

export const CoffeeShopScreenshotFrame = ({src, alt}) => <div style={{
  margin: "28px 0",
  overflow: "hidden",
  borderRadius: "24px",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)",
  boxShadow: "0 16px 32px rgba(112,36,13,.18)"
}}>
    <div style={{
  padding: "clamp(10px, 2vw, 18px)",
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}}>
      <a href={src} target="_blank" rel="noreferrer" aria-label={`Open ${alt} at full size`} style={{
  display: "block",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: "16px",
  background: "rgba(255,255,255,.96)",
  boxShadow: "0 12px 28px rgba(55,27,18,.2)",
  cursor: "zoom-in"
}}>
        <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  height: "auto"
}} />
      </a>
    </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>;
};

<OpeningSiteDesignCover />

Você entende a diferença entre uma conversa e um projeto. Agora transforme o
plano de lançamento da cafeteria em algo que as pessoas possam ver.

Peça ao Replit para usar a conversa, a pesquisa e o plano de lançamento para
criar um site de pré-abertura para o café de bairro:

<AiPrompt>
  Projete um site de "em breve" para minha cafeteria de bairro usando o
  conceito, a direção visual e o plano de lançamento desta conversa. Faça com
  que transmita acolhimento, calma e hospitalidade. Inclua uma breve
  introdução, o bairro, atualizações da abertura e uma forma de as pessoas se
  manterem informadas.
</AiPrompt>

## Crie e refine o site de abertura

<Steps>
  <Step title="Revise o primeiro site">
    Depois de alguns minutos, o Replit transforma a direção da conversa em um
    site de abertura. Revise a primeira versão antes de decidir o que mudar.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Prévia do site de abertura da cafeteria com controles de publicação no Replit" />
  </Step>

  <Step title="Abra o Design">
    Antes de publicar, torne o site seu. Selecione **Design** para abrir a
    tela de design.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-design.jpg" alt="Menu Design do Replit aberto acima de um site de pré-abertura de cafeteria" />
  </Step>

  <Step title="Revise o design">
    A tela de design mantém o site de abertura visível enquanto você decide o
    que ajustar em seguida.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/review-updated-site-design.jpg" alt="Design atualizado do site de abertura da cafeteria com uma imagem de cappuccino gerada na seção principal" />
  </Step>

  <Step title="Explore layouts diferentes">
    Use as próximas etapas sugeridas para experimentar um layout diferente ou
    refinar o que já está funcionando. O Replit mantém a primeira versão
    disponível enquanto você explora.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/explore-design-directions.jpg" alt="Próximas etapas sugeridas pelo Replit Design para reimaginar, experimentar layouts e refinar um site de cafeteria" />
  </Step>

  <Step title="Adicione um recurso de imagem">
    Selecione **Generate** e, em seguida, escolha **Image**. Descreva o
    recurso que você precisa e onde ele vai aparecer. Aqui, o pedido é para
    uma imagem de cappuccino para o site da cafeteria.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-generate-menu.png" alt="Menu Generate na tela do Replit Design com as opções Design, Image, Video e Vector Graphic" />

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/write-image-request.png" alt="Prompt de geração de imagem de um cappuccino na tela do Replit Design" />
  </Step>

  <Step title="Use o novo recurso no site">
    Quando a imagem estiver pronta, selecione-a e peça ao Replit para usá-la
    na seção principal. Continue refinando o site até que ele represente o
    café.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/replace-hero-image.jpg" alt="Imagem de cappuccino gerada selecionada na tela do Replit Design com um pedido para substituir a imagem principal do site" />
  </Step>

  <Step title="Visualize o site antes de publicar">
    Abra a prévia para conferir o site finalizado. Quando estiver satisfeito
    com ele, você está pronto para publicar.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Prévia do site de abertura da cafeteria com controles de publicação no Replit" />
  </Step>
</Steps>

Saiba mais sobre [criar um design](/create-a-design).

## Próximo

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/pt/home/publish-the-site">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>
    </div>

    <div className="chat-example-tag">Publicar</div>
    <div className="chat-card-title">Publique o site</div>
    <p>Torne o site de abertura disponível para as pessoas visitarem e compartilharem.</p>
    <div className="chat-card-link">Continuar →</div>
  </a>
</section>