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

# Bienvenue sur Replit

> Replit est le moyen le plus rapide de passer d'une idée à une application, un site web, un tableau de bord, une expérience mobile, un diaporama, une vidéo ou un prototype.

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="Bienvenue sur Replit" />

Si vous avez une idée à concrétiser, vous êtes au bon endroit.

Replit est le moyen le plus rapide de passer d'une idée à une application, directement depuis votre navigateur. Vous pouvez aussi utiliser Replit pour créer des sites web, des tableaux de bord, des expériences mobiles, des diaporamas, des vidéos animées, des prototypes et bien plus encore.

Votre parcours sur Replit commence par un prompt. Décrivez votre idée, et Replit vous aidera à la structurer, à en créer une première version, à la publier et à la partager avec le monde entier.

Cette façon de construire est souvent appelée le vibe coding : vous apportez l'idée, le goût et le jugement ; Agent se charge de les transformer en logiciel que vous pouvez tester et améliorer.

## Voir ce que vous pouvez créer

Replit peut vous aider à créer des applications qui fonctionnent et qui sont suffisamment soignées pour être partagées.

<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, une application de location de supercars haut de gamme avec un tableau de bord sombre, un formulaire de réservation et des images de voitures de luxe" width="2880" height="1800" data-path="images/build-examples/luxury-ride-finder.png" />
</Frame>

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

**[Application de réservation premium →](https://luxury-ride-finder.replit.app/)** Parcourez les voitures, recherchez les disponibilités et réservez une expérience de location haut de gamme.

<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, un tableau de bord de suivi de course premium avec des métriques de performance, un statut de récupération, des cartes de parcours et des graphiques de progression" width="2880" height="1800" data-path="images/build-examples/pace-running-tracker.png" />
</Frame>

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

**[Suivi de course →](https://run-tracker-pace.replit.app/)** Suivez vos courses, votre progression, votre récupération et vos insights d'entraînement dans un tableau de bord produit soigné.

<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="Page d'accueil de Rachel Jones Fitness Coach — une photo dramatique et sombre de Rachel avec le titre 'Un corps plus fort. Un esprit confiant. Un vous inarrêtable.', un appel à l'action 'Travailler avec Rachel', quatre certifications et les logos de Women's Health, Forbes et d'autres médias" width="2880" height="1800" data-path="images/build-examples/rachel-jones-coach.png" />
</Frame>

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

**[Page d'accueil de coaching →](https://rachel-jones-coach.replit.app/)** Lancez une belle page pour une activité de services avec des témoignages, des offres et un appel à l'action pour une consultation.

<Card title="Commencez à créer — c'est gratuit" icon="rocket" href="https://replit.com">
  Créez votre compte Replit et publiez votre première application depuis un seul prompt.
</Card>

## Pour commencer

Choisissez le projet le plus proche de ce que vous souhaitez créer et ouvrez le guide correspondant. Chacun vous guide d'un seul prompt jusqu'à une URL publiée que vous pouvez partager — sans configuration, sans décisions à peser longuement.

<CardGroup cols={2}>
  <Card title="Créez et publiez votre première application" icon="rocket" href="/fr/build/your-first-app" img="/images/runwell/runwell-published.png" horizontal>
    Un premier projet guidé du prompt à une URL en ligne.
  </Card>

  <Card title="Lancez une page d'accueil" icon="rectangle-list" href="/fr/build/landing-page" img="/images/build-examples/rachel-jones-coach.png" horizontal>
    Publiez une offre ou une page de liste d'attente à laquelle les gens peuvent répondre dès aujourd'hui.
  </Card>

  <Card title="Prototypez une idée de produit" icon="lightbulb" href="/fr/build/prototype-an-idea" img="/images/build-examples/pace-running-tracker.png" horizontal>
    Transformez un concept en flux fonctionnel que vous pouvez tester cette semaine.
  </Card>

  <Card title="Transformez un design Figma en application" icon="pen-nib" href="/fr/build/figma-to-app" img="/images/fitstart/turn-mockup-into-app/figma-build-result.png" horizontal>
    Importez un cadre, voyez-le comme une application fonctionnelle et affinez à partir de là.
  </Card>

  <Card icon="chart-simple" href="/fr/build/dashboard" horizontal>
    Transformez une feuille de calcul, une base de données ou une API en insights utiles.
  </Card>

  <Card title="Créez une application mobile" icon="mobile-screen" href="/fr/build/mobile-app" img="/images/build-examples/mobile-app.png" horizontal>
    Créez quelque chose conçu pour les téléphones — sans Xcode ni Android Studio.
  </Card>
</CardGroup>

## Importer un projet existant

Vous avez déjà du code, un design ou un projet sur une autre plateforme ? Importez-le dans Replit et continuez avec Agent.

<CardGroup cols={2}>
  <Card title="Importer depuis GitHub" icon="github" href="/fr/build/import-from-providers">
    Importez un dépôt public ou privé dans Replit et lancez-le.
  </Card>

  <Card title="Importer depuis Figma" icon="figma" href="/fr/build/figma-to-app">
    Convertissez un cadre Figma en application React interactive.
  </Card>

  <Card title="Importer depuis Vercel" href="/fr/build/import-from-providers">
    Récupérez le dépôt GitHub derrière un projet Vercel.
  </Card>

  <Card title="Importer depuis Bolt" href="/fr/build/import-from-providers">
    Exportez depuis Bolt vers GitHub, puis importez dans Replit.
  </Card>

  <Card title="Importer depuis Lovable" href="/fr/build/import-from-providers">
    Exportez depuis Lovable vers GitHub, puis importez dans Replit.
  </Card>

  <Card title="Importer depuis un ZIP" href="/fr/build/import-from-providers">
    Téléversez une archive `.zip` et continuez à construire avec Agent.
  </Card>
</CardGroup>

## Votre prochaine étape

Si vous souhaitez un premier projet guidé, commencez par [Créez et publiez votre première application](/fr/build/your-first-app).

Si vous avez un objectif précis, choisissez la carte qui correspond le mieux à ce que vous souhaitez créer.

Pour comprendre l'organisation de la documentation, consultez [Guide de la documentation Replit](/fr/build/use-the-docs).