> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-docs-automation-github-pr-review.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Créer des mises en page personnalisées

> Utilisez les modes de page et les composants pour créer des landing pages, pages marketing et autres mises en page non standard sur Mintlify.

Les pages Mintlify utilisent une mise en page standard par défaut, avec une barre latérale, une zone de contenu et une table des matières. Personnalisez cette mise en page avec les [modes de page](/fr/organize/pages#page-mode) pour créer des pages de destination, des vitrines de fonctionnalités ou toute page nécessitant un design unique.

Ce guide explique comment utiliser les modes de page, Tailwind CSS et les composants pour créer des mises en page personnalisées.

<div id="choose-a-page-mode">
  ## Choisir un mode de page
</div>

Définissez le champ `mode` dans le frontmatter de votre page pour contrôler quels éléments d'interface apparaissent.

| Mode      | Barre latérale | Table des matières | Pied de page | Support des thèmes           | Idéal pour                                                         |
| --------- | -------------- | ------------------ | ------------ | ---------------------------- | ------------------------------------------------------------------ |
| `default` | Oui            | Oui                | Oui          | Tous les thèmes              | Pages de documentation standard                                    |
| `wide`    | Oui            | Non                | Oui          | Tous les thèmes              | Pages sans titres ou nécessitant plus de largeur                   |
| `custom`  | Non            | Non                | Non          | Tous les thèmes              | Pages de destination, pages marketing ou mises en page plein écran |
| `frame`   | Oui            | Non                | Modifié      | Aspen, Almond, Luma, Sequoia | Contenu personnalisé nécessitant une navigation par barre latérale |
| `center`  | Non            | Non                | Oui          | Mint, Linden, Willow, Maple  | Journaux de modifications, expériences de lecture concentrée       |

Pour les pages de destination, le mode `custom` offre le plus de contrôle. Il supprime tous les éléments d'interface à l'exception de la barre de navigation supérieure, vous offrant une toile vierge pour construire.

```yaml Example page frontmatter theme={null}
---
title: "Welcome"
mode: "custom"
---
```

<div id="build-a-landing-page">
  ## Créer une page de destination
</div>

Une page de destination typique combine une section hero, des cartes de fonctionnalités et des appels à l'action.

<div id="set-up-the-page">
  ### Configurer la page
</div>

Créez un fichier MDX avec le mode `custom` :

```yaml Example landing page frontmatter theme={null}
---
title: "Documentation"
description: "Everything you need to build with our platform."
mode: "custom"
---
```

<div id="create-a-hero-section">
  ### Créer une section hero
</div>

Utilisez du HTML avec des classes Tailwind CSS pour construire une section hero centrée :

```mdx Example hero section theme={null}
<div className="px-4 py-16 lg:py-32 max-w-3xl mx-auto text-center">
  <h1 className="text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
    Documentation
  </h1>
  <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500">
    Everything you need to build, deploy, and scale your application.
  </p>
</div>
```

<Tip>
  Incluez des styles pour le mode clair et le mode sombre. Utilisez les classes Tailwind préfixées par `dark:` pour gérer le mode sombre.
</Tip>

<div id="add-navigation-cards">
  ### Ajouter des cartes de navigation
</div>

Utilisez les composants [Card](/fr/components/cards) et [Columns](/fr/components/columns) pour créer une grille de liens sous la section hero :

```mdx Example navigation cards theme={null}
<div className="max-w-4xl mx-auto px-6">
  <Columns cols={2}>
    <Card title="Quickstart" icon="rocket" href="/quickstart">
      Get up and running in under five minutes.
    </Card>
    <Card title="API reference" icon="code" href="/api-reference">
      Explore endpoints, parameters, and examples.
    </Card>
    <Card title="Guides" icon="book" href="/guides">
      Step-by-step tutorials for common tasks.
    </Card>
    <Card title="Components" icon="puzzle" href="/components">
      Reusable UI components for your docs.
    </Card>
  </Columns>
</div>
```

<div id="use-images-with-dark-mode-support">
  ### Utiliser des images avec support du mode sombre
</div>

Affichez différentes images pour le mode clair et sombre en utilisant les classes de visibilité de Tailwind :

```mdx Example images with dark mode support theme={null}
<img
  src="/images/hero-light.png"
  alt="Platform overview showing the main dashboard."
  className="block dark:hidden"
/>
<img
  src="/images/hero-dark.png"
  alt="Platform overview showing the main dashboard."
  className="hidden dark:block"
/>
```

<div id="use-react-components-for-interactive-layouts">
  ## Utiliser des composants React pour des mises en page interactives
</div>

Pour des éléments réutilisables ou interactifs, définissez des [composants React](/fr/customize/react-components) directement dans votre fichier MDX :

```mdx Example React component theme={null}
export const FeatureCard = ({ title, description, href }) => (
  <a className="group block p-6 rounded-xl border border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 transition-colors" href={href}>
    <h3 className="font-medium text-gray-900 dark:text-zinc-50 group-hover:underline">
      {title}
    </h3>
    <p className="mt-2 text-sm text-gray-500 dark:text-zinc-500">
      {description}
    </p>
  </a>
);

<div className="max-w-4xl mx-auto px-6 grid sm:grid-cols-2 gap-4">
  <FeatureCard
    title="Authentication"
    description="Set up OAuth, API keys, and session management."
    href="/guides/authentication"
  />
  <FeatureCard
    title="Webhooks"
    description="Receive real-time notifications for events."
    href="/guides/webhooks"
  />
</div>
```

<Warning>
  Évitez d'utiliser la propriété `style` sur les éléments HTML. Cela peut provoquer un décalage de la mise en page au chargement de la page. Utilisez des classes Tailwind CSS ou un [fichier CSS personnalisé](/fr/customize/custom-scripts) à la place.
</Warning>

<div id="add-custom-css">
  ## Ajouter du CSS personnalisé
</div>

Pour les styles que Tailwind ne couvre pas, ajoutez un fichier CSS à votre dépôt. Mintlify applique les fichiers CSS à l'ensemble du site, rendant leurs noms de classes disponibles dans tous les fichiers MDX.

<Note>
  Les valeurs arbitraires de Tailwind CSS (par exemple, `w-[350px]`) ne sont pas prises en charge. Utilisez un fichier CSS personnalisé pour les valeurs que les classes utilitaires de Tailwind ne couvrent pas.
</Note>

```css Example custom CSS file theme={null}
.landing-hero {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 4rem 2rem;
}

@media (prefers-color-scheme: dark) {
  .landing-hero {
    background: linear-gradient(135deg, #0c1222 0%, #1a1a2e 100%);
  }
}
```

Puis référencez la classe dans votre MDX :

```mdx Example custom CSS usage theme={null}
<div className="landing-hero">
  <h1>Welcome to the docs</h1>
</div>
```

Consultez [Scripts personnalisés](/fr/customize/custom-scripts) pour en savoir plus sur le CSS personnalisé et les sélecteurs CSS disponibles.

<div id="full-example">
  ## Exemple complet
</div>

Voici une page de destination complète qui combine une section hero avec des cartes de navigation :

```mdx Example landing page theme={null}
---
title: "Documentation"
description: "Everything you need to build with our platform."
mode: "custom"
---

export const HeroCard = ({ title, description, href, icon }) => (
  <a className="group block p-6 rounded-xl border border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 transition-colors" href={href}>
    <h3 className="font-medium text-gray-900 dark:text-zinc-50">
      {title}
    </h3>
    <p className="mt-2 text-sm text-gray-500 dark:text-zinc-500">
      {description}
    </p>
  </a>
);

<div className="px-4 py-16 lg:py-32 max-w-3xl mx-auto text-center">
  <h1 className="text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
    Documentation
  </h1>
  <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500 max-w-xl mx-auto">
    Everything you need to build, deploy, and scale your application.
  </p>
</div>

<div className="max-w-4xl mx-auto px-6 pb-16 grid sm:grid-cols-2 gap-4">
  <HeroCard
    title="Quickstart"
    description="Get up and running."
    href="/quickstart"
  />
  <HeroCard
    title="API reference"
    description="Explore endpoints, parameters, and examples."
    href="/api-reference"
  />
  <HeroCard
    title="Guides"
    description="Step-by-step tutorials for common tasks."
    href="/guides"
  />
  <HeroCard
    title="SDKs"
    description="Client libraries for every major language."
    href="/sdks"
  />
</div>
```

<div id="tips">
  ## Conseils
</div>

* **Testez en mode clair et sombre.** Prévisualisez votre mise en page personnalisée dans les deux modes pour détecter les styles `dark:` manquants.
* **Utilisez les classes `max-w-*`** pour limiter la largeur du contenu et garder le texte lisible.
* **Pensez au responsive.** Utilisez les préfixes responsive de Tailwind (`sm:`, `md:`, `lg:`) pour que votre mise en page fonctionne sur tous les écrans.
* **Combinez les modes.** Utilisez le mode `custom` pour la page d'accueil de votre documentation et le mode `default` pour le reste. Le mode se définit par page, ce qui permet à différentes pages d'utiliser différentes mises en page.
* **Vérifiez les décalages de mise en page.** Si des éléments sautent au chargement de la page, remplacez les propriétés `style` en ligne par des classes Tailwind ou du CSS personnalisé.