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

# Bem-vindo ao Replit

> Replit é a maneira mais rápida de transformar uma ideia em app, site, dashboard, experiência mobile, apresentação de slides, vídeo ou protótipo.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

export const RACHEL_JONES_PROMPT = `Build me a one-page website for an online fitness coach named Rachel Jones. It should feel premium, like a magazine ad — dark, moody, and luxurious, with black and warm gold as the only colors. Big bold headlines, lots of empty space, and elegant serif accents. No bright colors, no rounded "tech startup" vibes.

Here's what should be on the page, top to bottom:

A header bar with a small gold "RJ" logo on the left, the words "RACHEL JONES — FITNESS COACH" next to it, a few menu links across the middle (About, Coaching, Programs, Success Stories, Resources), and a gold "Book a Free Consultation" button on the right.

A huge hero section with a dramatic close-up photo of a strong, fit woman lit with warm gold light against a black background. On the left side over the dark area, put a giant three-line headline:
"STRONGER BODY. CONFIDENT MIND. UNSTOPPABLE YOU." — with the last line in gold.
Underneath: "Personalized coaching. Proven strategies. Real results that last." Then two buttons: a gold "Work With Rachel" and an outlined "Watch Rachel's Story" with a play icon. Below that, show 4 little circular client photos and 5 gold stars with the line "Trusted by 500+ women worldwide."
On the right side, layered on the photo, write "Rachel Jones" in a fancy gold script font, with "CERTIFIED FITNESS COACH" underneath, and a list of credentials with little gold icons: NASM Certified, Precision Nutrition Level 1, Women's Fitness Specialist, 10+ Years Experience.

A "Featured In" strip — a thin row showing fake magazine logos written in different fancy fonts: Women's Health, Oxygen, Forbes, mindbodygreen, Fit Pregnancy, Shape.

A "Holistic Approach" section — centered headline "A Holistic Approach. Real Results." in an elegant serif. Below it, four columns side by side, each with a small gold icon, a title, and a one-line description: Custom Training, Nutrition Guidance, Mindset Coaching, Accountability.

A "Success Stories" section — on the left, the headline "Stronger on the Outside. Stronger on the Inside." with a "See More Success Stories" button. On the right, three before/after transformation photos of women, each with a big gold result number underneath ("−24 LBS in 16 weeks", "+18 LBS of muscle", "−20% body fat in 14 weeks"), a short italic quote, and the client's first name.

A final call-to-action panel — a wide dark card split into three parts. Left: a friendly portrait of Rachel. Middle: headline "You Don't Need More Motivation. You Need the Right Plan." with a gold "Book Your Free Consultation" button. Right: three small benefits with icons — "1:1 Strategy Call", "Personalized Plan", "Start Your Transformation".

For the photos, generate them — I want a fit woman with warm gold dramatic lighting on a black background, very cinematic. The before/after photos should be full-body in the same dark studio style.

Make it look like a real, professional coaching brand — not a template. Don't add forms, signups, or extra pages — just this one beautiful landing page.`;

export const PACE_PROMPT = `Build me a personal running web app called "Pace".

I want a clean, modern web app where I can track my runs and see my progress at a glance — a friendlier, more visual version of a running journal like Strava or Nike Run Club, but simpler and prettier. It only needs to support one user (me) for now, and my profile name should be Alex Morgan. Pre-fill it with about a month of pretend running history so it looks alive from the moment I open it — runs through San Francisco, a mix of easy runs, tempo runs, long runs, and recovery runs, with at least 4–5 runs in the past week so the dashboard looks active.

The app should run in any modern browser, feel fast, and be fully responsive — great on desktop, tablet, and phone.

Look and feel
The vibe is sporty, premium, "athletic brand" — black, white, and a punchy lime green as the accent color. Use the Inter font everywhere. Rounded corners on everything (cards, buttons, pills). It should feel calm and uncluttered, not busy. Light mode by default. Smooth, subtle animations when pages transition, when cards appear, and when I click buttons — it should feel responsive and alive, not stiff.

Overall navigation
A top nav bar with the Pace logo on the left and 5 links across the middle: Home, Runs, Plan, Stats, Profile. The active link has a lime underline; inactive links are gray. On the right: a lime "Log a Run" button (always visible) and a round profile photo (clicking it opens Profile).

On smaller screens, the middle nav links collapse into a hamburger menu, but the lime "Log a Run" button stays visible.

The Home page (the main page) — a scrollable feed, top to bottom:

Greeting. A friendly greeting that changes with the time of day ("Good morning, Alex" / "Good afternoon, Alex" / "Good evening, Alex"), with a subtitle "Ready for your next run?".

Hero banner card. A wide photo of someone running on pavement, with a dark gradient on the left so the text is readable. Big white headline: "You don't find willpower, you create it." Underneath: "Keep showing up." Bottom-left: a lime pill button "Start a Run" with a little black play-circle. Clicking it opens the Log a Run dialog.

"This Week" stats. A row of four cards (2×2 grid on smaller widths): Distance (km), Time (h/min), Elevation (m), Runs (count). Each card: small icon, big number, "+12% vs last week" caption, thin squiggly line graph at the bottom (lime, blue, purple, lime). Numbers reflect my actual runs from the last 7 days.

Weekly Progress card. Title + small "View goals" link. Then "X of Y runs completed" and a big bold percentage on the right. Gradient lime progress bar. Below: seven day pills (M T W T F S S) with date numbers. Today is a black filled circle; days I've run show a lime circle with a white checkmark; others are empty circles.

Your Last Run card. A real interactive map (Leaflet, Mapbox, or similar) showing the route of my most recent run as a lime line, date in the corner, lime "View Run" button, and four stats (Distance, Time, Pace, Calories). Click → full run detail page.

Recent Runs section. Title "Recent Runs" + "See all" link. Three rows, one per recent run: tiny green map-line thumbnail on the left, run name + date, distance + pace lined up on the right. Click a row → run detail. A small "Delete" icon appears on hover.

Upcoming Workout card. Title + small lime circle icon with footprints. Workout name "Tempo Run", "Tomorrow · 6:30 AM". Three stats: 8 km, 5:40/km target pace, "Moderate" intensity. A muted gray "View workout" button. (Placeholder — no real training plan yet.)

Recent Achievements card. Two badges, each with a colorful icon, the badge name, and a one-line description. First is a real PR from my history (e.g. "10K Crusher — Completed a 10K in under 60 minutes"). Second is a placeholder: "Early Bird — Completed 5 runs before 7 AM" with a lime crescent moon icon.

The Runs page
Full list of all my runs, grouped by month (sticky month headers as I scroll). Each row like the recent-runs rows. A search input in the top-right filters by name or run type (Easy, Tempo, Long, Recovery, Interval). Click a row → run detail.

The Stats page — a scrollable view with:
- Time-range pill tabs at the top (7D / 30D / 3M / 6M / 1Y / All).
- Three KPI numbers (Total Distance, Avg Pace, Total Time), each with a green or red badge for change vs the previous period.
- A smooth lime area chart of distance over time. Hover a point to see that day's value.
- Below: a small bar chart of "runs per day of week" and a list of personal records (fastest 5K, fastest 10K, longest run, etc.).

The Plan page
A weekly calendar of upcoming workouts (placeholder — mostly the visual shell). Each day is a row showing what's planned (or "Rest day"). Today's row highlighted lime.

The Profile page
Avatar, name, weekly goal setting, total all-time stats (total distance, total runs, total hours), an "Upgrade to Pro" card with a lime sparkle and "Upgrade Now" button, and a settings list (units km/mi, notifications, sign out).

The "Log a Run" dialog (modal that centers on desktop, slides up from the bottom on mobile):
- Type of run (segmented control: Easy / Tempo / Long / Recovery / Interval)
- Distance in km (number input)
- Duration (mm:ss or hh:mm:ss input)
- Date and time (date and time pickers)
- Optional name
- Big lime "Save Run" button at the bottom
After saving: smooth dismiss, dashboard updates instantly, small toast confirmation.

The Run Detail page (a dedicated page when I click a run):
- Big interactive map of the full route at the top
- Date, run type chip, back link
- Stats row (Distance, Duration, Avg Pace, Calories)
- Per-kilometer splits with pace per km
- "..." menu with Edit and Delete

How it should behave
- The greeting changes based on time of day.
- Hero "Start a Run" and the nav "Log a Run" both open the same Log a Run dialog.
- Loading skeletons instead of blank space.
- Smooth page transitions.
- Fully responsive — every screen looks great on desktop, tablet, and phone.

Things to be honest about
- No real elevation data yet — use a sensible placeholder for the elevation stat card and flag it.
- The little route thumbnails in the recent-runs list can be a generic green squiggle if the real route shape would slow the list down — the big Run Detail map should be real.
- "Upcoming Workout" and the Plan page are placeholders — no training plan engine yet.
- No live GPS tracking in this first version — runs are added by manually filling the Log a Run form.

Build the whole thing end-to-end so it's actually usable: I should be able to open the URL, see my Alex Morgan dashboard fully populated with realistic San Francisco runs, log a new run from either the hero button or the nav, and have it show up in my stats and recent runs immediately.`;

export const VELOCITY_PROMPT = `Build me a luxury supercar rental web app called "Velocity."

Vibe & look
Premium, cinematic, dark theme — think Ferrari + Apple. Big hero imagery, generous whitespace, smooth hover and scroll animations. Use a black/charcoal background with a bold accent color (deep red or electric orange). Clean modern sans-serif for body text, an elegant display font for headings. Mobile-friendly throughout.

Pages I need

Landing page — full-bleed hero with a featured supercar and a tagline like "Drive the extraordinary." Below: a search bar (pickup location, pickup date, return date), a "Featured fleet" carousel of 4–6 cars, a "Popular destinations" section (Monaco, Dubai, Los Angeles, Miami, etc.), a short "Why Velocity" three-column section (concierge delivery, full insurance, 24/7 support), and a footer.
Fleet page — grid of all cars with filters (brand, price range, body type) and sort (price, horsepower). Each card shows photo, brand + model, year, daily rate, and an "Available" badge.
Car detail page — large photo gallery, full specs (engine, horsepower, top speed, 0–60, transmission, drivetrain, seats), description, daily rate, a calendar showing unavailable dates, and a "Reserve" button.
Checkout page — pick pickup location and dates, choose add-ons (full insurance, chauffeur), enter driver details (name, email, phone, license number, date of birth), see an itemized price breakdown (rental × days, add-ons, taxes, fees, total), and confirm.
Confirmation page — big confirmation code, trip summary, "Add to my trips" feeling.
My Trips page — list of the signed-in user's past and upcoming reservations.
Accounts
Let people sign up and sign in (email + Google sign-in). Show their name and avatar in the top nav once signed in. Only signed-in users can reserve a car or see their trips — each person only sees their own reservations.

Data that must persist (don't disappear on refresh)

The car fleet (brand, model, year, daily rate, photos, specs, description)
Pickup locations (name, city, country, address)
Featured destinations
Every reservation (which car, which user, pickup/return dates, driver details, price breakdown, status, confirmation code)
Each user's favorited cars
Use a real PostgreSQL database for all of this.

Booking rules

A car cannot be double-booked. If someone tries to reserve dates that overlap an existing reservation for the same car, show a clear message: "This car is already booked for the selected dates. Please choose different dates."
Back-to-back bookings are fine (one trip's return day can equal the next trip's pickup day).
Return date must be after pickup date.
Each reservation gets a unique confirmation code like VEL-XXXXXXXX.
Nice-to-have features

A heart icon on each car to favorite it; favorites show on the user's profile.
Search the fleet by brand or model.
Show prices in USD with thousands separators.
Loading states and graceful error messages — never a blank screen.
Seed data so the app looks alive on first load
Pre-populate the database with ~8 supercars (Ferrari SF90 Stradale, Lamborghini Aventador SVJ, McLaren 765LT, Porsche 911 GT3 RS, Bugatti Chiron, Aston Martin DBS, Mercedes-AMG GT Black Series, Rolls-Royce Ghost), 4–6 pickup locations (Monaco, Dubai, LA, Miami, NYC, London), and 4 featured destinations with beautiful photos.

When you're done, tell me:

How to sign in and try booking a car
How to test that two people can't book the same car for overlapping dates
How to test that I only see my own reservations and not someone else's
Build it cleanly with good defaults — I don't want to manage hosting, credentials, or database setup myself.`;

export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
  const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
  const ensureLZString = () => {
    if (typeof document === "undefined") return;
    if (window.LZString) return;
    if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = LZ_SRC;
    s.async = true;
    document.head.appendChild(s);
  };
  const handleCopy = async e => {
    const btn = e.currentTarget;
    if (!prompt) return;
    try {
      await navigator.clipboard.writeText(prompt);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch {}
      document.body.removeChild(ta);
    }
    const original = btn.dataset.label || btn.innerText;
    btn.dataset.label = original;
    btn.innerText = "Copied!";
    setTimeout(() => {
      if (btn.isConnected) btn.innerText = original;
    }, 1500);
  };
  const handleBuild = () => {
    if (!prompt || typeof window === "undefined") return;
    const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
    let url;
    if (window.LZString) {
      const encoded = window.LZString.compressToEncodedURIComponent(prompt);
      url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
    } else {
      url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  };
  ensureLZString();
  const baseButtonStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "8px 16px",
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    lineHeight: 1.2,
    fontFamily: "inherit",
    textDecoration: "none"
  };
  return <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

<YouTubeEmbed videoId="jb8Qh6lxTaw" title="Bem-vindo ao Replit" />

Se você tem uma ideia que quer construir, você está no lugar certo.

Replit é a maneira mais rápida de transformar uma ideia em app, direto do seu navegador. Você também pode usar Replit para criar sites, dashboards, experiências mobile, apresentações de slides, vídeos animados, protótipos e muito mais.

Sua jornada com Replit começa com um prompt. Descreva sua ideia, e Replit vai ajudá-lo a moldá-la, construir uma primeira versão, publicá-la e compartilhá-la com o mundo.

Essa forma de construir é muitas vezes chamada de vibe coding: você traz a ideia, o gosto e o julgamento; o Agent ajuda a transformar isso em software que você pode testar e melhorar.

## Veja o que você pode criar

Replit pode ajudá-lo a criar apps que funcionam e parecem polidos o suficiente para compartilhar.

<Frame>
  <img src="https://mintcdn.com/replit/J4ncie7WOv6XABSq/images/build-examples/luxury-ride-finder.png?fit=max&auto=format&n=J4ncie7WOv6XABSq&q=85&s=d9087b1e8ef7151e9a615046fd834cd5" alt="Velocity, um app premium de aluguel de supercarro com dashboard escuro, formulário de reserva e imagens de carros de luxo" width="2880" height="1800" data-path="images/build-examples/luxury-ride-finder.png" />
</Frame>

<PromptActions prompt={VELOCITY_PROMPT} campaign="docs-welcome-velocity" />

**[App de reservas premium →](https://luxury-ride-finder.replit.app/)** Navegue por carros, pesquise disponibilidade e reserve uma experiência de aluguel de alto nível.

<Frame>
  <img src="https://mintcdn.com/replit/yG4SOQfWGbnjXJ3G/images/build-examples/pace-running-tracker.png?fit=max&auto=format&n=yG4SOQfWGbnjXJ3G&q=85&s=226e18de3c853f5e3bd1039b4ffea4a2" alt="Pace, um dashboard premium de rastreador de corrida com métricas de desempenho, status de recuperação, mapas de rotas e gráficos de progresso" width="2880" height="1800" data-path="images/build-examples/pace-running-tracker.png" />
</Frame>

<PromptActions prompt={PACE_PROMPT} campaign="docs-welcome-pace" />

**[Rastreador de corrida →](https://run-tracker-pace.replit.app/)** Acompanhe corridas, progresso, recuperação e insights de treino em um dashboard de produto polido.

<Frame>
  <img src="https://mintcdn.com/replit/yG4SOQfWGbnjXJ3G/images/build-examples/rachel-jones-coach.png?fit=max&auto=format&n=yG4SOQfWGbnjXJ3G&q=85&s=b43fe0b074a4473b478a04ede1bb53ff" alt="Página inicial da Treinadora de Fitness Rachel Jones — uma foto dramática e escura de Rachel com o título 'Corpo mais forte. Mente confiante. Você imparável.', um call to action 'Trabalhe com Rachel', quatro credenciais de certificação e logos de Women's Health, Forbes e outras publicações" width="2880" height="1800" data-path="images/build-examples/rachel-jones-coach.png" />
</Frame>

<PromptActions prompt={RACHEL_JONES_PROMPT} campaign="docs-welcome-rachel-jones" />

**[Página inicial de coaching →](https://rachel-jones-coach.replit.app/)** Lance uma página bonita para um negócio de serviços com depoimentos, ofertas e um call to action de consulta.

<Card title="Comece a criar — é grátis" icon="rocket" href="https://replit.com">
  Crie sua conta Replit e publique seu primeiro app com um único prompt.
</Card>

## Primeiros passos

Escolha o projeto mais próximo do que você quer criar e abra o guia. Cada um o conduz de um único prompt até uma URL publicada que você pode compartilhar — sem configuração, sem decisões para se angustiar.

<CardGroup cols={2}>
  <Card title="Construa e publique seu primeiro app" icon="rocket" href="/pt/build/your-first-app" img="/images/runwell/runwell-published.png" horizontal>
    Um primeiro projeto guiado do prompt até uma URL ao vivo.
  </Card>

  <Card title="Lance uma página inicial" icon="rectangle-list" href="/pt/build/landing-page" img="/images/build-examples/rachel-jones-coach.png" horizontal>
    Publique uma oferta ou página de lista de espera com a qual as pessoas possam responder hoje.
  </Card>

  <Card title="Prototipe uma ideia de produto" icon="lightbulb" href="/pt/build/prototype-an-idea" img="/images/build-examples/pace-running-tracker.png" horizontal>
    Transforme um conceito em um fluxo funcional que você pode testar esta semana.
  </Card>

  <Card title="Transforme um design Figma em app" icon="pen-nib" href="/pt/build/figma-to-app" img="/images/fitstart/turn-mockup-into-app/figma-build-result.png" horizontal>
    Importe um frame, veja-o como um app funcional e refine a partir daí.
  </Card>

  <Card icon="chart-simple" href="/pt/build/dashboard" horizontal>
    Transforme uma planilha, banco de dados ou API em insights úteis.
  </Card>

  <Card title="Crie um app mobile" icon="mobile-screen" href="/pt/build/mobile-app" img="/images/build-examples/mobile-app.png" horizontal>
    Crie algo projetado para celulares — sem Xcode, sem Android Studio.
  </Card>
</CardGroup>

## Importe um projeto existente

Já tem código, um design ou um projeto em outra plataforma? Importe-o para Replit e continue com o Agent.

<CardGroup cols={2}>
  <Card title="Importar do GitHub" icon="github" href="/pt/build/import-from-providers">
    Traga um repositório público ou privado para Replit e coloque-o em funcionamento.
  </Card>

  <Card title="Importar do Figma" icon="figma" href="/pt/build/figma-to-app">
    Converta um frame do Figma em um app React interativo.
  </Card>

  <Card title="Importar do Vercel" href="/pt/build/import-from-providers">
    Traga o repositório GitHub por trás de um projeto Vercel.
  </Card>

  <Card title="Importar do Bolt" href="/pt/build/import-from-providers">
    Exporte do Bolt para o GitHub e importe no Replit.
  </Card>

  <Card title="Importar do Lovable" href="/pt/build/import-from-providers">
    Exporte do Lovable para o GitHub e importe no Replit.
  </Card>

  <Card title="Importar de ZIP" href="/pt/build/import-from-providers">
    Faça upload de um arquivo `.zip` e continue criando com o Agent.
  </Card>
</CardGroup>

## Seu próximo passo

Se você quer um primeiro projeto guiado, comece com [Construa e publique seu primeiro app](/pt/build/your-first-app).

Se você veio com um objetivo específico, escolha o card que melhor corresponde ao que você quer criar.

Para entender como a documentação está organizada, veja [Guia para os Docs do Replit](/pt/build/use-the-docs).