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

# Concevoir une page de destination

> À partir d'un brief Notion et de fichiers de marque, concevez une page de liste d'attente ou de lancement dans 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>;
};

Vous n'avez pas encore de page : un nouveau produit, une liste d'attente ou une
campagne. À partir d'un brief Notion et de fichiers de marque dans Google
Drive, concevez une page de destination dans Replit Design : héro, preuve,
fonctionnement, et un seul appel à l'action. L'Agent utilise l'offre et le
texte de Notion, ainsi que le logo, les couleurs et la typographie de Drive.
C'est le système visuel de la page, pas le site codé. Utilisez les frames
comme spécification lorsque vous construisez.

## Idéal pour

* Les designers produit qui ont besoin d'une page de liste d'attente ou de lancement avant que le produit ne soit en direct.
* Les fondateurs qui ont besoin d'une première mise en page à l'image de la marque à partir d'un brief Notion et de ressources Drive.

## Connecteurs

<Connectors
  items={[
{
  id: "notion",
  name: "Notion",
  why: "Brief : offre, audience, preuve et appel à l'action",
},
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logo, couleurs, typographie et ressources de marque",
},
]}
/>

## Avant de commencer

Ayez une page Notion avec le brief (offre, audience, appel à l'action) et des
fichiers de marque dans Drive. Connectez Notion et Drive. Indiquez à qui la
page s'adresse et quel doit être l'appel à l'action principal (inscription,
liste d'attente, réserver une démo, acheter).

## Invite à l'Agent

<AiPrompt>
  À partir de cette page Notion \[lien] et des fichiers de marque dans Google
  Drive, conçois une page de destination dans Replit Design pour \[liste
  d'attente / lancement / réserver une démo]. Utilise l'offre, l'audience, la
  preuve et l'appel à l'action de Notion. Construis des frames desktop et
  mobile : héro avec un seul appel à l'action, preuve sociale, fonctionnement,
  et un appel à l'action final. Utilise le logo, les couleurs et la
  typographie existants.
</AiPrompt>

## À quoi s'attendre

L'Agent lit le brief Notion et les fichiers de marque Drive, puis organise des frames
dans Replit Design. Vous obtenez une page desktop et un recadrage mobile, pas une
application déployée. Utilisez les frames comme spécification lorsque vous construisez,
ou demandez à l'Agent de les implémenter dans un flux de Build ultérieur. Prévisualisez
desktop et mobile côte à côte. Vérifiez l'appel à l'action, les preuves et les couleurs
par rapport à Notion et Drive avant de considérer les frames comme définitives.

## Adaptez-le à vos besoins

<AiPrompt>
  Fais-en une page de destination pour liste d'attente : une seule promesse,
  trois preuves, capture d'e-mail, et pas de navigation supplémentaire. Tire
  les preuves de Notion.
</AiPrompt>

<AiPrompt>
  Ajoute une section tarifs avec trois formules à partir de ce tableau Notion
  \[lien]. Garde le système visuel. Mets en avant le forfait du milieu.
</AiPrompt>

## Dépannage

* **Le texte ne vient pas du brief :** donnez le lien de la page Notion et demandez à l'Agent d'utiliser l'offre, l'audience, la preuve et l'appel à l'action qui s'y trouvent, sans le réécrire à partir du site.
* **Les couleurs et la typographie ne correspondent pas à la marque :** connectez Drive et pointez vers les fichiers de logo, de couleurs et de typographie.
* **Vous attendiez un site en direct :** ce flux produit des frames dans Replit Design, pas une application déployée. Utilisez les frames comme spécification, ou demandez à l'Agent de les implémenter dans un flux de Build ultérieur.

## Voir aussi

<CardGroup cols={2}>
  <Card title="Créer des icônes et bannières pour réseaux sociaux" href="/fr/use-cases/create-social-kit">
    Les mêmes fichiers de marque Google Drive pour les éléments de profil et de couverture.
  </Card>

  <Card title="Lancer un site web d'événement payant" href="/fr/use-cases/launch-event-website">
    La même source Notion pour une page publique, pas seulement des frames.
  </Card>
</CardGroup>