---
title: Gabarit de page d'accueil
sidebar:
order: 10
---
import { Image } from "astro:assets"
import { Code, Tabs, TabItem } from "@astrojs/starlight/components"
import assetHomepage from "./homepage.png"
import homepageHtml from "@gouvfr-lasuite/integration/dist/html/homepage.html?raw"
Le gabarit de page d'accueil vous permet de rapidement intégrer dans le code de votre service une
page d'accueil suivant un visuel commun avec tous les autres services de La Suite.
## Règles d'utilisation
Le gabarit de page d'accueil est un guide à utiliser pour intégrer votre page d'accueil de service.
Si pour des raisons techniques quelconques vous ne pouvez pas reprendre les templates proposés à la
lettre, voici les points importants à retenir :
- la page d'accueil doit contenir [le bouton Gaufre](../gaufre) dans son coin supérieur droit,
- elle doit présenter le nom de votre service à travers une phrase d'accroche suivant un minimum le
visuel proposé,
- elle doit permettre à l'utilisateur de se connecter à votre application,
- elle doit afficher en fond de page
[une des photos communes de La Suite](/reference/api#arrière-plan-de-page-daccueil)
## Installation
### 1. CSS
Le gabarit se base sur une partie du [DSFR](https://www.systeme-de-design.gouv.fr/). Suivant que
vous l'utilisiez déjà ou non dans votre projet, un fichier CSS différent est à charger.
Le fichier CSS à utiliser est :
```
@gouvfr-lasuite/integration/dist/css/homepage-gaufre-dsfr.css
```
Si durant l'installation vous avez décidé de
[copier les assets](../getting-started/#gestion-des-assets), assurez-vous que la police de
caractères Marianne a bien été copiée en suivant le chemin noté dans le CSS.
Le fichier CSS à utiliser est :
```
@gouvfr-lasuite/integration/dist/css/homepage-gaufre.css
```
### 2. JS
Pour faire fonctionner le bouton Gaufre présent en haut à droite de la page, il est nécessaire de
charger un fichier JS externe qui s'occupe d'afficher le widget au clic du bouton.
Vous pouvez ajouter ce code dans le `` de votre page d'accueil uniquement, ou dans le ``
commun à toutes vos pages si vous décidez d'intégrer [La Gaufre](../gaufre) de façon globale sur
votre site :
`}
lang="html"
/>
:::note
Pour que le script fonctionne il est nécessaire qu'il ait un id `lasuite-gaufre-script`, ne
l'enlevez pas !
:::
### 3. HTML
:::tip
Pour facilement générer le code nécessaire, utilisez
[le générateur de gabarit de page d'accueil](../homepage-generator).
Sinon, suivez les conseils ci-dessous.
:::
#### Avec React
Si vous utilisez React, utilisez le composant `Homepage` fourni par le paquet. Il faut lui passer
plusieurs _props_ pour adapter le contenu à votre service. Et lui passer en enfant le contenu à
afficher dans la partie droite de la page d'accueil.
Plusieurs composants prêt-à-l'emploi sont disponibles pour vous aider à construire rapidement ce
contenu :
- `HomepageEmail` affiche un bloc contenant un formulaire de connexion par e-mail,
- `HomepageEmailOrProconnect` affiche un bloc contenant un formulaire de connexion par e-mail et un
bouton Proconnect,
- `HomepageProconnect` affiche un bloc contenant un bouton de connexion par Proconnect,
Tous les composants sont typés avec TypeScript avec des props commentées. En attendant une
documentation plus complète, vous pouvez vous aider de l'autocomplétion de votre éditeur pour en
savoir plus sur chaque composant.
##### Traduction
Si vous utilisez les composants React et que vous avez besoin de traduire votre page d'accueil,
vous pouvez envelopper les composants avec le provider `LaSuiteTranslationsProvider` provenant du
paquet, et lui passer en props vos `translations`. Les traductions françaises sont exportées en
tant que `frTranslations`.
#### Sans React
Si vous n'utilisez pas React, utilisez le HTML présent dans
`@gouvfr-lasuite/integration/dist/html/homepage.html` :
Voir le code HTML
Remplacez le contenu de la div `.lasuite-homepage__form-inner` par le contenu propre à votre page
d'accueil. Vous pouvez utiliser du HTML prêt à l'emploi pour construire rapidement ce contenu :
- `@gouvfr-lasuite/integration/dist/html/email.html` affiche un bloc contenant un formulaire de
connexion par e-mail,
- `@gouvfr-lasuite/integration/dist/html/email-or-proconnect.html` affiche un bloc contenant un
formulaire de connexion par e-mail et un bouton Proconnect,
- `@gouvfr-lasuite/integration/dist/html/proconnect.html` affiche un bloc contenant un bouton de
connexion par Proconnect.
:::caution
Dans les gabarits HTML fournis, toutes les parties `~~replace~~` sont à remplacer avec vos données !
:::
:::tip
Vous pouvez récupérer le logo de votre service au format svg dans le paquet npm :
`@gouvfr-lasuite/integration/dist/logos`.
:::