diff --git a/website/src/components/HomepageExample.astro b/website/src/components/HomepageExample.astro
new file mode 100644
index 0000000..624c447
--- /dev/null
+++ b/website/src/components/HomepageExample.astro
@@ -0,0 +1,81 @@
+---
+import "@gouvfr-lasuite/integration/dist/css/homepage-full.css"
+import { jsx as _jsx } from "react/jsx-runtime"
+import { renderToStaticMarkup } from "react-dom/server"
+import { Homepage, HomepageProconnect } from "@gouvfr-lasuite/integration"
+import logo from "@/assets/logos/equipes.svg"
+
+const { title, props } = Astro.props
+
+const DefaultHomepage = _jsx(Homepage, {
+ lasuiteApiUrl: import.meta.env.PUBLIC_LASUITE_API_URL,
+ entity: "Gouvernement",
+ tagline:
+ "**Mon service de La Suite**,
un outil sécurisé et centralisé
pour les agents publics",
+ logo: logo.src,
+ serviceName: "Mon service de La Suite",
+ serviceId: "equipes",
+ homepageUrl: "/",
+ footerOptions: {
+ description: "Un service de la Direction interministérielle du numérique",
+ sitemapUrl: "~~replace~~",
+ a11yUrl: "~~replace~~",
+ a11yLevel: "~~replace~~",
+ termsUrl: "~~replace~~",
+ privacyUrl: "~~replace~~",
+ },
+ children: _jsx(HomepageProconnect, { url: "~~replace~~" }),
+ ...props,
+})
+const html = renderToStaticMarkup(DefaultHomepage)
+---
+
+
+
+
+
+ Exemple page d'accueil {title} - La Suite numérique
+
+
+
+
+
+
Notes :
+
+ - n'oubliez pas de remplacer toutes les occurences de `~~replace~~` dans le code,
+ -
+ remplacez le chemin de la photo dans `.lasuite-homepage__bg` avec l'id de votre service
+
+
+
Retour à la documentation
+
+
+
+
+
diff --git a/website/src/content/docs/guides/homepage.mdx b/website/src/content/docs/guides/homepage.mdx
index ceb787e..978c231 100644
--- a/website/src/content/docs/guides/homepage.mdx
+++ b/website/src/content/docs/guides/homepage.mdx
@@ -173,3 +173,10 @@ Vous pouvez récupérer le logo de votre service au format svg dans le paquet np
`@gouvfr-lasuite/integration/dist/logos`.
:::
+
+## Exemples
+
+- [Page d'accueil classique](/examples/homepage/default),
+- [Avec connexion e-mail uniquement](/examples/homepage/email),
+- [Avec connexion e-mail + proconnect](/examples/homepage/email-proconnect),
+- [Avec contenus additionnels/personnalisés](/examples/homepage/custom).
diff --git a/website/src/pages/examples/homepage/custom.astro b/website/src/pages/examples/homepage/custom.astro
new file mode 100644
index 0000000..0ee6858
--- /dev/null
+++ b/website/src/pages/examples/homepage/custom.astro
@@ -0,0 +1,34 @@
+---
+import { jsx as _jsx } from "react/jsx-runtime"
+import HomepageExample from "@/components/HomepageExample.astro"
+---
+
+
diff --git a/website/src/pages/examples/homepage/default.astro b/website/src/pages/examples/homepage/default.astro
new file mode 100644
index 0000000..6b7b5bc
--- /dev/null
+++ b/website/src/pages/examples/homepage/default.astro
@@ -0,0 +1,6 @@
+---
+import { jsx as _jsx } from "react/jsx-runtime"
+import HomepageExample from "@/components/HomepageExample.astro"
+---
+
+
diff --git a/website/src/pages/examples/homepage/email-proconnect.astro b/website/src/pages/examples/homepage/email-proconnect.astro
new file mode 100644
index 0000000..81f6b26
--- /dev/null
+++ b/website/src/pages/examples/homepage/email-proconnect.astro
@@ -0,0 +1,15 @@
+---
+import { jsx as _jsx } from "react/jsx-runtime"
+import { HomepageEmailOrProconnect } from "@gouvfr-lasuite/integration"
+import HomepageExample from "@/components/HomepageExample.astro"
+---
+
+
diff --git a/website/src/pages/examples/homepage/email.astro b/website/src/pages/examples/homepage/email.astro
new file mode 100644
index 0000000..03db84b
--- /dev/null
+++ b/website/src/pages/examples/homepage/email.astro
@@ -0,0 +1,14 @@
+---
+import { jsx as _jsx } from "react/jsx-runtime"
+import { HomepageEmail } from "@gouvfr-lasuite/integration"
+import HomepageExample from "@/components/HomepageExample.astro"
+---
+
+