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

# Primeiros passos

> Acompanhe o lançamento de uma cafeteria desde uma ideia inicial até um site de abertura publicado com o Replit.

export const GetStartedCover = () => <div className="chat-mkt" role="img" aria-label="A Replit journey from research and ideas to a plan and a finished result" 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: "flex",
  width: "100%",
  minHeight: "inherit",
  boxSizing: "border-box",
  alignItems: "center",
  justifyContent: "center",
  padding: "clamp(10px, 2vw, 20px)"
}}>
        <div style={{
  width: "clamp(270px, 72%, 760px)",
  maxWidth: "calc(100% - 20px)",
  boxSizing: "border-box",
  padding: "clamp(14px, 2.4vw, 24px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 24,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  display: "flex",
  gap: 7
}}>
            {[".92", ".52", ".32"].map(opacity => <span key={opacity} style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: `rgba(255,255,255,${opacity})`
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
  gap: "clamp(8px, 1.8vw, 16px)",
  marginTop: "clamp(16px, 3vw, 24px)"
}}>
            {["48%", "68%", "88%"].map((height, index) => <div key={height} style={{
  display: "grid",
  alignContent: "end",
  minHeight: "clamp(88px, 14vw, 128px)",
  padding: "clamp(8px, 1.4vw, 13px)",
  border: "1px solid rgba(255,255,255,.38)",
  borderRadius: 14,
  background: "rgba(255,255,255,.1)"
}}>
                <span style={{
  display: "block",
  width: index === 2 ? "100%" : "78%",
  height,
  borderRadius: 9,
  background: index === 2 ? "rgba(255,255,255,.82)" : "rgba(255,255,255,.34)"
}} />
              </div>)}
          </div>
          <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: 8,
  marginTop: "clamp(12px, 2vw, 18px)",
  padding: "9px 10px",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 11,
  background: "rgba(255,255,255,.14)"
}}>
            <span style={{
  width: "62%",
  height: 6,
  borderRadius: 99,
  background: "rgba(255,255,255,.72)"
}} />
            <span style={{
  width: 16,
  height: 16,
  borderRadius: 6,
  background: "rgba(255,255,255,.9)"
}} />
          </div>
        </div>
      </div>
    </div>
  </div>;

<GetStartedCover />

Bem-vindo ao Replit, o melhor lugar para transformar suas ideias em algo real.

A melhor maneira de começar e se familiarizar com a plataforma é construir
algo junto.

## O projeto: Abrir uma cafeteria

Imagine que você quer abrir uma cafeteria de bairro. Você precisa pesquisar o
mercado local, escolher um local, definir um plano de lançamento, criar um site e compartilhá-lo
com as pessoas do bairro.

Você não precisa de todas as respostas antes de começar. Comece com a ambição, o
bairro que você tem em mente e as pessoas que você espera que visitem.

## O que você vai aprender

* Como pesquisar o mercado local e transformar suas descobertas em um plano claro
* Como conectar o Replit às ferramentas que você já usa, para que ele possa usar contexto
  mais relevante
* Como acompanhar de forma consistente a concorrência local e as mudanças de mercado
* Como construir e publicar um site que torna sua cafeteria visível para o
  mundo

## O que você vai criar

* Um conceito de café focado e um plano de lançamento
* Pesquisas e material de origem que apoiam suas escolhas
* Uma Rotina semanal que mantém o plano atualizado
* Um site de abertura publicado para as pessoas descobrirem

<Frame caption="O site de abertura da cafeteria que você vai criar e publicar.">
  <img src="https://mintcdn.com/replit/teDUL4A-lNO7dv1O/images/coffee-shop-launch/review-updated-site-design.jpg?fit=max&auto=format&n=teDUL4A-lNO7dv1O&q=85&s=c8fe50bb80c330b66c108027baaf9db8" alt="Um site de abertura de cafeteria mostrado no Replit Design" width="3436" height="1970" data-path="images/coffee-shop-launch/review-updated-site-design.jpg" />
</Frame>

Primeiro, [entenda seu Workspace](/home/understand-your-workspace). É onde a
conversa, o material de origem, a Rotina e o site vão se juntar.