diff --git a/package-lock.json b/package-lock.json
index c3dbab1a98ebd49cc0a68f2fac8534cb026a120b..9998bc2d5b39585e9fac1b04b288dc66bfb7157a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "compagnons-devops-fr",
"version": "0.0.0",
"dependencies": {
+ "@calcom/embed-react": "^1.5.2",
"@docusaurus/core": "^3.7",
"@docusaurus/plugin-content-blog": "^3.7.0",
"@docusaurus/preset-classic": "^3.7",
@@ -1939,6 +1940,32 @@
"node": ">=6.9.0"
}
},
+ "node_modules/@calcom/embed-core": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@calcom/embed-core/-/embed-core-1.5.2.tgz",
+ "integrity": "sha512-y1mpVDfcaVdLJ/CN17c7N2SyJAMiM3u9NYvL5mWFDBe4aa5HLTDc5g/DBbO2oCq859W3bxs11voC/E3KkJH3Iw=="
+ },
+ "node_modules/@calcom/embed-react": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@calcom/embed-react/-/embed-react-1.5.2.tgz",
+ "integrity": "sha512-DgY3RySiXOrbIVX1LiV/ucKilG+TkvqhP4/0nLlKPLOlk642cSO30xSu4nOmVgR60FLqMyp7Vlg/Xd6J5ijETg==",
+ "dependencies": {
+ "@calcom/embed-core": "1.5.2",
+ "@calcom/embed-snippet": "1.3.2"
+ },
+ "peerDependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ }
+ },
+ "node_modules/@calcom/embed-snippet": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/@calcom/embed-snippet/-/embed-snippet-1.3.2.tgz",
+ "integrity": "sha512-EmW/ZjaQD0HjLI8yFNA5Mtb8zCOQQnj9RhChujuMijUK8EVyE1KtU9t3xIxm1hBMNHr4R1qMaBo2QYaZqQhzsw==",
+ "dependencies": {
+ "@calcom/embed-core": "1.5.2"
+ }
+ },
"node_modules/@colors/colors": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -18928,9 +18955,9 @@
}
},
"node_modules/typescript": {
- "version": "5.7.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
- "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+ "version": "5.8.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
"license": "Apache-2.0",
"peer": true,
"bin": {
diff --git a/package.json b/package.json
index ab822373827080c19ba87be851b96eee8fe74ace..0553d4cb37cae82712dc2fb7261603fc753b3aaa 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"lint": "eslint '**/*.js'"
},
"dependencies": {
+ "@calcom/embed-react": "^1.5.2",
"@docusaurus/core": "^3.7",
"@docusaurus/plugin-content-blog": "^3.7.0",
"@docusaurus/preset-classic": "^3.7",
diff --git a/src/components/HomepageList/index.js b/src/components/HomepageList/index.js
index 587dd0fa2a8187994695d99dd729117fe0aa4eb8..b9da9ddfbae1d9c452056dfe8e3b611c0ea201ad 100644
--- a/src/components/HomepageList/index.js
+++ b/src/components/HomepageList/index.js
@@ -3,20 +3,7 @@ import styles from './styles.module.css';
import checkmark from '@site/static/img/components/HomepageList/checked.png'
-const FeatureList = [
- {
- title: <>La <b>passion</b> de l’<i>infrastructure as code</i>.</>,
- },
- {
- title: <>La conviction que les <b>logiciels libres</b> et open-source sont émancipateurs </>,
- },
- {
- title: <> L’envie de <b>partager</b> des méthodes, bonnes pratiques ou retours d’expériences.</>,
- },
- {
- title: <>L’<b>amélioration continue</b> fait de nous des experts en devenir.</>,
- },
-];
+
function Feature({title}) {
return (
@@ -27,17 +14,12 @@ function Feature({title}) {
);
}
-export default function HomepageList() {
+export default function HomepageList(list) {
return (
- <div className={styles.listContainer + ' container'}>
- <p>Chez Lydra nous nous sentons seuls entre deux Meetups ou deux conférences. <br/> Nous n’avons pas trouvé de lieu où échanger et avoir des débats en français sur le sujet qui nous passionne. </p>
- <p> Nous avons donc décidé de créer et d’animer une communauté qui partage nos valeurs : </p>
-
<ul className="col">
- {FeatureList.map((props, idx) => (
+ {list.list.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</ul>
- </div>
);
}
diff --git a/src/components/Ical.jsx b/src/components/Ical.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ffc6401249be5fc5b61097579d72ff2f70f3b56b
--- /dev/null
+++ b/src/components/Ical.jsx
@@ -0,0 +1,15 @@
+import Cal, { getCalApi } from "@calcom/embed-react";
+import { useEffect } from "react";
+export default function Ical(brand_color) {
+ useEffect(()=>{
+ (async function () {
+ const cal = await getCalApi({"namespace":"mentor"});
+ cal("ui", {"cssVarsPerTheme":{"light":{"cal-brand":{brand_color}},"dark":{"cal-brand":{brand_color}},"hideEventTypeDetails":false,"layout":"month_view"}});
+ })();
+ }, [])
+ return <Cal namespace="mentor"
+ calLink="cchaudier/mentor"
+ style={{width:"100%",height:"100%",overflow:"scroll"}}
+ config={{"layout":"month_view","theme":"auto"}}
+ />;
+};
diff --git a/src/css/custom.css b/src/css/custom.css
index 28495ffc85c0a02fd120d4837507baca8523cc74..55d54ab1d72e5dbc173119fd4ab9dafca9cd05ae 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -138,6 +138,11 @@ main > .container {
max-width: initial !important;
}
+.centeredContainer {
+ max-width: 800px;
+ margin: auto;
+}
+
@media (max-width: 560px) {
.video-responsive {
width: 100%;
diff --git a/src/pages/index.js b/src/pages/index.js
index 2aa147b9c7adfa66d3b2080c43e4117c71686f54..84613fd27e08d4f7a3d26b416e260d40c0ecc9da 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,6 +17,21 @@ export default function Home() {
document.getElementById("join").appendChild(script);
}, []);
+ const list = [
+ {
+ title: <>La <b>passion</b> de l’<i>infrastructure as code</i>.</>,
+ },
+ {
+ title: <>La conviction que les <b>logiciels libres</b> et open-source sont émancipateurs </>,
+ },
+ {
+ title: <> L’envie de <b>partager</b> des méthodes, bonnes pratiques ou retours d’expériences.</>,
+ },
+ {
+ title: <>L’<b>amélioration continue</b> fait de nous des experts en devenir.</>,
+ },
+ ];
+
const FeatureList = [
{
title: 'Tu te sens seul avec l’envie d’échanger sur les méthodes DevOps...',
@@ -52,7 +67,11 @@ export default function Home() {
<section className="text--center margin-vert--xl">
<Heading as='h2' className='text--center'>C'est quoi les Compagnons du DevOps ?</Heading>
<YoutubeEmbed embedId="pg3M3LeaP-k?start=30" />
- <HomepageList/>
+ <div className='container text--left'>
+ <p>Chez Lydra nous nous sentons seuls entre deux Meetups ou deux conférences. <br/> Nous n’avons pas trouvé de lieu où échanger et avoir des débats en français sur le sujet qui nous passionne. </p>
+ <p> Nous avons donc décidé de créer et d’animer une communauté qui partage nos valeurs : </p>
+ <HomepageList list={list}/>
+ </div>
</section>
<section>
<TestimoniesCarousel />
diff --git a/src/pages/mentor.js b/src/pages/mentor.js
deleted file mode 100644
index 9a95269a74c16035d09d2f79aa64248a6a19a8ae..0000000000000000000000000000000000000000
--- a/src/pages/mentor.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-import HomepageWelcome from '../components/HomepageWelcome';
-import YoutubeEmbed from '@site/src/components/YoutubeEmbed';
-import RegisterForm from '../components/RegisterForm';
-import Button from '../components/JoinButton';
-import TestimoniesCarousel from '../components/TestimoniesCarousel'
-import Heading from '@theme/Heading'
-import Link from '@docusaurus/Link'
-
-export default function Home() {
- const FeatureList = [
- {
- Svg: require('@site/static/img/components/HomepageWelcome/checklist.png').default,
- title: "Tu es au bon endroit pour te former au DevOps."
- }
- ];
-
- return (
- <Layout
- title="Mentorat"
- description="Apprends plus vite grâce à un mentor DevOps">
- <main>
- <section className='heroShadow'>
- <div className='heroBanner'>
- <Heading as='h1' className='hero__title text--center'> Apprends plus vite grâce à un mentor DevOps </Heading>
- <HomepageWelcome FeatureList={FeatureList}/>
- <div className='container'>
- <div className='buttonsDisplay'>
- <Button text="Télécharge mon offre" url="https://bref.lydra.fr/mentordevops"/>
- <Button url="/formations" text="Découvre mes formations" />
- </div>
- </div>
- </div>
- </section>
- <section className="text--center margin-vert--xl">
- <Heading as='h2' className='text--center'>Ma vision du mentorat !</Heading>
- <div className='container'>
- <div className='row'>
- <div className='col col--6'>
- <YoutubeEmbed embedId="_uBpW5K4xpc?si=fDTBsAx6vyx4XUGl" />
- </div>
- <div className='col col--6'>
- <YoutubeEmbed embedId="rJCTjBMq-3k?si=PAhN04Ym1SBnXEX3" />
- </div>
- </div>
- </div>
- </section>
- <section>
- <TestimoniesCarousel />
- </section>
- <section className="text--center margin-vert--xl">
- <RegisterForm/>
- <p> Les données recueillies sur cette page sont stockées par notre sous-traitant systeme.io, dont la politique de confidentialité est <Link to='https://systeme.io/fr/privacy-policy'> disponible ici.</Link> </p>
- </section>
- </main>
- </Layout>
- );
-}
diff --git a/src/pages/mentor.jsx b/src/pages/mentor.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..14788d12c5ff9afe1d9beae16ff4316e395a9fd0
--- /dev/null
+++ b/src/pages/mentor.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading'
+import Link from '@docusaurus/Link'
+
+export default function Mentor() {
+ return (
+ <Layout
+ title="Mentorat"
+ description="Apprends plus vite grâce à un mentor DevOps">
+ <main>
+ <section className='heroShadow'>
+ <div className='heroBanner'>
+ <Heading as='h1' className='hero__title text--center margin-bottom--none'> Mentorat DevOps</Heading> <p className="hero__subtitle">Trouve l'accompagnement qui te correspond</p>
+ <img src={require('@site/static/img/components/HomepageWelcome/compass.png').default} style={{width: '115px'}} alt="Mentorat DevOps" />
+ <div className='container'>
+ <p className='text--center margin-top--md' style={{fontSize: '1.2rem'}}>Le DevOps, c’est un chemin. <br /> Mais il ne se fait pas seul. <br /> Et surtout : <strong> on n'a pas tous les mêmes besoins.</strong></p>
+ </div>
+ </div>
+ </section>
+ <section className="text--center margin-vert--xl">
+ <div className="container">
+ <div className="row">
+ <div className="col">
+ <div className="card">
+ <div className="card__header">
+ <Heading as='h2'>Tu veux progresser en tant que professionnel individuel ?</Heading>
+ </div>
+ <div className="card__body text--left">
+ <span>
+ Tu es :
+ </span>
+ <ul>
+ <li>Dev, Ops, SRE, Architecte ?</li>
+ <li>En reconversion, en début de carrière ou autodidacte ?</li>
+ <li>Un tech solo qui veut gagner du temps et monter en compétences ?</li>
+ </ul>
+ </div>
+ <img src={require('@site/static/img/components/HomepageWelcome/target.png').default} className='margin-vert--md' style={{width: '100px',margin: 'auto'}} alt="Mentorat individuel" />
+ <p className='margin-bottom--xs'>
+ 👉 Alors c’est ici que ça se passe 👇
+ </p>
+ <div className="card__footer">
+ <Link to="/mentorat-individuel" className="button button--secondary button--block"> Je veux un mentorat individuel</Link>
+ </div>
+ </div>
+ </div>
+ <div className="col">
+ <div className="card">
+ <div className="card__header">
+ <Heading as='h2'>Tu gères une équipe tech ou produit ?</Heading>
+ </div>
+ <div className="card__body text--left">
+ <span>
+ Tu es :
+ </span>
+ <ul>
+ <li>CTO, lead dev, manager, responsable d’équipe ?</li>
+ <li>À la tête d’une squad, d’une feature team ou d’une DSI ?</li>
+ <li>En quête de méthode, d’alignement et de progression collective ?</li>
+ <li>Tu ne sais pas comment faire ta transision DevOps ?</li>
+ </ul>
+ </div>
+ <img src={require('@site/static/img/components/HomepageWelcome/lifebuoy.png').default} className='margin-vert--md' style={{width: '100px',margin: 'auto'}} alt="Mentorat individuel" />
+ <p className='margin-bottom--xs'>
+ 👉 C’est par ici 👇
+ </p>
+ <div className="card__footer">
+ <Link to="/mentorat-equipe" className="button button--secondary button--block">👥 Je veux un mentorat pour mon équipe</Link>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p className='text--center margin-top--lg'>
+ 💬 Tu ne sais pas trop ? Tu hésites ? Tu veux en parler directement avec moi ? <br />
+ 📩 Écris-moi : <Link href="mailto:mentor@compagnons-devops.fr">mentor@compagnons-devops.fr</Link> <br />
+ </p>
+ <span className='margin-top--md text--bold'>Choisis ton chemin. On avance ensemble.</span>
+ </section>
+ </main>
+ </Layout>
+ );
+}
diff --git a/src/pages/mentorat-equipe.jsx b/src/pages/mentorat-equipe.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f5585bd33b26f84c9c288848b6cd34381edb4d33
--- /dev/null
+++ b/src/pages/mentorat-equipe.jsx
@@ -0,0 +1,216 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading'
+import Link from '@docusaurus/Link'
+import Ical from '@site/src/components/Ical';
+export default function Mentor() {
+
+
+ return (
+ <Layout
+ title="Mentorat"
+ description="Apprends plus vite grâce à un mentor DevOps">
+ <main>
+ <section className='heroShadow'>
+ <div className='heroBanner'>
+ <Heading as='h1' className='hero__title text--center margin-bottom--none'> Votre équipe est compétente…</Heading> <p className="hero__subtitle">Mais elle pourrait être exponentielle..</p>
+ <img src={require('@site/static/img/components/HomepageWelcome/lifebuoy.png').default} style={{width: '115px'}} alt="Mentorat DevOps" />
+ <div className='container'>
+ <Link to="#rdv" className="button button--primary"> Je veux un mentorat d'équipe</Link>
+ </div>
+ </div>
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container centeredContainer">
+ <Heading as='h2' style={{fontSize: '2rem'}}>Vous gérez une équipe tech, produit, ou vous êtes DSI</Heading>
+ Et vous le voyez :
+ <ul>
+ <li>Chacun a ses méthodes.</li>
+ <li>L’outillage part dans tous les sens.</li>
+ <li>Les bonnes pratiques DevOps sont connues… mais pas appliquées.</li>
+ <li>Vos projets prennent du retard.</li>
+ <li>Les juniors ne progressent pas assez vite.</li>
+ <li>Vos Ops sont sous pression.</li>
+ <li>Et vous manquez de recul stratégique.</li>
+ </ul>
+
+ <Heading as='h2'>🚨 Le vrai problème ?</Heading>
+ <p className='margin-bottom--sm'>Pas le code. Pas l’infra. <br /> 👉 C’est le <b>manque de méthode, de vision et d’alignement.</b></p>
+ </div>
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container centeredContainer">
+
+ <Heading as='h2'>🎯 Ce qu’il vous faut : un mentor DevOps pour votre équipe</Heading>
+
+ <p>Pas une formation théorique.
+ Pas un énième outil miracle.
+ Mais un <b>accompagnement humain, pragmatique, opérationnel.</b></p>
+
+ Quelqu’un qui :
+ <ul>
+ <li>Cadre les discussions</li>
+ <li>Fait monter chaque membre en compétence</li>
+ <li>Rétablit une culture commune</li>
+ <li>Et soutient votre posture de leader technique</li>
+ </ul>
+
+ <Heading as='h2' className='margin-bottom--none'> 👋 Qui je suis</Heading>
+ <p>
+ Je suis <b>Christophe Chaudier</b>, je travail dans la tech depuis 25 ans <br />
+ Je suis <b>Artisan DevOps</b> et CTO de notre petite ESN, formateur et mentor spécialisé dans le DevOps
+ </p>
+ <p>
+ J’anime la communauté des <b>Compagnons du DevOps</b> (1700+ membres). <br/>
+ Animateur du <b>podcast Radio DevOps</b> <br/>
+ +4 ans de <b>vidéos sur YouTube</b> pour vulgariser et transmettre le cloud et le DevOps
+ </p>
+ <p>Et j’ai déjà accompagné des équipes vers plus de méthode, plus de sérénité, plus d’impact.</p>
+ </div>
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container">
+ <Heading className='margin-bottom--md text--center' style={{fontSize: '2rem'}} as='h2'>🧪 Ce que je fais avec votre équipe</Heading>
+ <div className="card margin-vert--md" style={{backgroundColor: '#32ca7c85'}}>
+ <div className="card__body">
+ <div className="row">
+ <div className="col">
+ <Heading as='h3'>✅ Des séances 100% personnalisées</Heading>
+ <ul>
+ <li>En visio (2h)</li>
+ <li>Rythme au choix : 1x/mois, 2x/mois ou 1x/semaine</li>
+ <li>Jusqu’à 5 personnes en simultané</li>
+ <li>Un espace privé avec : replays vidéos, notes, ressources partagées dans un espace privé</li>
+ </ul>
+ <b>Chaque séance inclut :</b>
+ <ul>
+ <li>Retour sur les actions précédentes</li>
+ <li>Déblocage en temps réel (pair-programming, revue de code, réflexion outillage, etc.)</li>
+ <li>Plan d’action jusqu'à la prochaine session</li>
+ </ul>
+ </div>
+ <div className="col">
+ <p>
+ 🎠Bonus :
+ </p>
+ <ul>
+ <li>Accès à toutes mes formations e-learning sur le DevOps gratuitement.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container text--center">
+ <Heading as='h2' style={{fontSize: '2rem'}}>💥 Résultats concrets</Heading>
+ <div className="row">
+ <div className="col col--6">
+ <div className="card">
+ <div className="card__header">
+ <Heading as='h2'>🎥 Vidéo - Témoignage de Christian (INRAE)</Heading>
+
+ </div>
+ <div className="card__body text--left">
+ <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vtSIBjGe9Zk?si=SMRukjZQD-OIYlSp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+ <blockquote className='margin-top--md'>
+ On était 5 admins avec chacun nos pratiques. Grâce au mentorat, on a unifié notre méthode, gagné du temps, évité des erreurs. Même les plus expérimentés ont appris.
+ <b>→ Résultat : équipe alignée, efficace, motivée.</b>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container">
+ <Heading as='h3'>🧾 Les formules</Heading>
+ <table>
+ <thead>
+ <tr>
+ <th>Formule</th>
+ <th>Fréquence des séances</th>
+ <th>Prix HT</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Légère</td>
+ <td>2h par mois</td>
+ <td>1000 €</td>
+ </tr>
+ <tr>
+ <td>Sprint <i>(-10%)</i></td>
+ <td>2h toutes les 2 semaines</td>
+ <td>1800 €</td>
+ </tr>
+ <tr>
+ <td>Intense <i>(-20%)</i></td>
+ <td>2h toutes les semaines</td>
+ <td>3200 €</td>
+ </tr>
+ </tbody>
+ </table>
+ <ul style={{listStyleType: 'none', paddingLeft: '0'}}>
+ <li>âœ”ï¸ Finançable OPCO (contacte-moi pour que l'on parle des conditions)</li>
+ <li>âœ”ï¸ Sans engagement long</li>
+ <li>âœ”ï¸ Abonnement mensuel modifiable ou résiliable à tout moment avant le 15 du mois</li>
+ <li>âœ”ï¸ Mentorat 100% à distance</li>
+ </ul>
+ </div>
+
+ <div className="container margin-vert--lg centeredContainer">
+ <div className="row">
+ <div className="col">
+ <Heading as='h3'>✅ Ce mentorat est pour vous si:</Heading>
+ <ul>
+ <li>Vous avez une équipe produit, dev ou ops</li>
+ <li>Vous voulez structurer vos pratiques DevOps</li>
+ <li>Vous manquez de recul et de méthode</li>
+ <li>Vous avez besoin de monter en puissance, rapidement</li>
+ </ul>
+ </div>
+ <div className="col">
+ <Heading as='h3'>⌠Ce n’est pas pour vous si…</Heading>
+ <ul>
+ <li>Vous cherchez juste un outil ou une formation figée</li>
+ <li>Vous ne voulez pas impliquer votre équipe</li>
+ <li>Vous pensez que tout va déjà parfaitement bien</li>
+ <li>Vous cherchez des formations uniquement techniques</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div className="container text--center" id="rdv">
+ <Heading as='h3'>📬 Envie de savoir si c’est adapté à votre équipe ?</Heading>
+ <p>
+ 📠Réservez votre session découverte dès maintenant :
+ </p>
+ <Ical brand_color="#E8AC00" />
+ <div className="margin-vert--lg text--center">
+ 📎 Ou téléchargez le programme complet en PDF : <br />
+ <Link to="https://bref.lydra.fr/mentordevops" className="button button--primary margin-vert--md">Télécharger le PDF pour ton manager</Link>
+ <p>
+ Un projet bien mené, c’est une équipe bien accompagnée. <br />
+ <b>Offrez à la vôtre ce coup de boost stratégique.</b>
+ </p>
+ </div>
+
+ </div>
+
+
+ </section>
+
+
+ </main>
+ </Layout>
+ );
+}
diff --git a/src/pages/mentorat-individuel.jsx b/src/pages/mentorat-individuel.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..5e6961d7d51b2c7bd8518ebd8f5dc7cfc643ea41
--- /dev/null
+++ b/src/pages/mentorat-individuel.jsx
@@ -0,0 +1,240 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading'
+import Link from '@docusaurus/Link'
+import HomepageList from '@site/src/components/HomepageList';
+import Ical from '@site/src/components/Ical';
+export default function Mentor() {
+
+ const list = [
+ {
+ title: '3 Ã 4 fois plus de vitesse',
+ },
+ {
+ title: 'Moins de stress, plus de sérénité',
+ },
+ {
+ title: 'Des choix techniques assumés',
+ },
+ {
+ title: 'Un vrai recul sur ta posture',
+ },
+ {
+ title: 'De la motivation, du cadre, de la clarté',
+ },
+ ]
+
+ return (
+ <Layout
+ title="Mentorat"
+ description="Apprends plus vite grâce à un mentor DevOps">
+ <main>
+ <section className='heroShadow'>
+ <div className='heroBanner'>
+ <Heading as='h1' className='hero__title text--center margin-bottom--none'> Tu veux progresser en DevOps… mais tu galère ?</Heading> <p className="hero__subtitle">Tu es dev, ops, en reconversion ou CTO débordé.</p>
+ <img src={require('@site/static/img/components/HomepageWelcome/target.png').default} style={{width: '115px'}} alt="Mentorat DevOps" />
+ <div className='container'>
+ <p className='text--center margin-top--md' style={{fontSize: '1.2rem'}}> Et tu le sens bien : t’as pas de vision clair sur ce que tu dois faire. <br /> T’as pas la méthode. <br />Et surtout… <strong>t’as pas le temps de te planter.</strong></p>
+ <Link to="#rdv" className="button button--primary"> Je veux un mentorat individuel</Link>
+ </div>
+ </div>
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container centeredContainer">
+ <Heading as='h2' style={{fontSize: '2rem'}}>🚨 Tu vis ça ?</Heading>
+ <ul>
+ <li>Tu gères une infra trop grosse pour tes épaules</li>
+ <li>Tu avances dans le flou, seul, sans recul</li>
+ <li>Tu doutes de tes choix techniques</li>
+ <li>Tu passes tes soirées à chercher des solutions</li>
+ <li>Tu sens que tu pourrais aller plus vite… mais tu tournes en rond</li>
+ </ul>
+ <p>💥 Tu n’as pas besoin d’une formation de plus. Tu as besoin d’un mentor.</p>
+ <Heading as='h2'>🧠Un mentor, c’est un raccourci</Heading>
+ <p className='margin-bottom--sm'>Pas un gourou. Pas un coach bullshit. Juste quelqu’un qui a déjà traversé ce que tu vis, et qui t’aide à :</p>
+ <ul>
+ <li>Te poser les bonnes questions</li>
+ <li>Gagner du temps</li>
+ <li>Monter en compétence</li>
+ <li>Trouver ton propre chemin DevOps</li>
+ </ul>
+
+ <Heading as='h2' className='margin-bottom--none'> 👋 Moi, c’est Christophe Chaudier</Heading>
+ <ul>
+ <li>Je travail dans la tech depuis 25 ans</li>
+ <li>Je suis Artisan DevOps et CTO de notre petite ESN</li>
+ <li>Créateur du forum des Compagnons du DevOps (+1700 membres)</li>
+ <li>Animateur du podcast Radio DevOps</li>
+ <li>+4 ans de vidéos sur YouTube pour vulgariser et transmettre le cloud et le DevOps</li>
+ </ul>
+ <p> 👋 Je suis là pour t’accompagner, te challenger et te faire progresser sérieusement (et sans te lâcher).</p>
+
+ </div>
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container">
+ <Heading as='h2' style={{fontSize: '2rem'}}>💬 Ce que disent mes mentorés</Heading>
+ <div className="row">
+ <div className="col">
+ <div className="card">
+ <div className="card__header">
+ <Heading as='h2'>🎥 Vidéo - Témoignage de Mathieu</Heading>
+ </div>
+ <div className="card__body text--left">
+ <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9pWNcISwF3E?si=IKTkdgtYD8kGYkYJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+ <blockquote className='margin-top--md'>
+ On a perdu notre DevOps. J’ai repris l’infra, seul. Grâce au mentorat, on a gagné 3 à 4 fois plus de temps que si j’avais fait ça dans mon coin. Christophe m’a recentré, m’a guidé. On a avancé à une vitesse folle.
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ <div className="col">
+ <div className="card">
+ <div className="card__header">
+ <Heading as='h2'>🎥 Vidéo - Témoignage de Christian (INRAE)</Heading>
+ </div>
+ <div className="card__body text--left">
+ <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vtSIBjGe9Zk?si=SMRukjZQD-OIYlSp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <blockquote className='margin-top--md'>
+ On était 5 admins, chacun bossait différemment. Grâce au mentorat, on a aligné nos pratiques. Même les plus expérimentés ont appris. On a évité des erreurs. Et <i>on a gagné en clarté, en cohésion, en efficacité.</i> <br />
+ Christophe ne te donne pas des réponses toutes faites. Il te fait réfléchir. Il t’aide à décider. Et <i>il t’accompagne jusqu’au bout.</i>
+ Tout est structuré. Les replays, les ressources, les plans d’action… c’est carré.
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section className="margin-vert--xl">
+ <div className="container">
+ <Heading style={{fontSize: '2rem'}} as='h2'>🎯 Le mentorat DevOps individuel</Heading>
+ <p>
+ C’est un accompagnement humain, personnalisé et technique, pour te faire grandir dans ta pratique DevOps.
+ </p>
+ <div className="card margin-vert--md" style={{backgroundColor: '#32ca7c85'}}>
+ <div className="card__body">
+ <div className="row">
+ <div className="col">
+ <p>
+ Chaque mois, tu as :
+ </p>
+ <ul>
+ <li>Une séance en visio (1h)</li>
+ <li>Pair programming, code review, questions libres</li>
+ <li>Un plan d’action sur-mesure</li>
+ </ul>
+ </div>
+ <div className="col">
+ <p>
+ Un espace privé avec :
+ </p>
+ <ul>
+ <li>Replay vidéo</li>
+ <li>Leur transcriptions IA</li>
+ <li>Notes et ressources du mentor</li>
+ </ul>
+ </div>
+
+ </div>
+ <p>
+ 🎠Bonus : accès à toutes mes formations e-learning sur le DevOps gratuitement.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="container">
+
+ <Heading as='h3'>💥 Ce que tu vas gagner</Heading>
+ <HomepageList list={list}/>
+ </div>
+
+ </section>
+
+ <section className="margin-vert--xl">
+ <div className="container">
+ <Heading as='h2' style={{fontSize: '2rem'}}>ðŸ› ï¸ Les formules individuelles</Heading>
+ <table>
+ <thead>
+ <tr>
+ <th>Formule</th>
+ <th>Fréquence des séances</th>
+ <th>Prix HT</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Légère</td>
+ <td>1h par mois</td>
+ <td>250 €</td>
+ </tr>
+ <tr>
+ <td>Sprint <i>(-10%)</i></td>
+ <td>1h toutes les 2 semaines</td>
+ <td>450 €</td>
+ </tr>
+ <tr>
+ <td>Intense <i>(-10%)</i></td>
+ <td>1h toutes les semaines</td>
+ <td>800 €</td>
+ </tr>
+ </tbody>
+ </table>
+ <ul style={{listStyleType: 'none', paddingLeft: '0'}}>
+ <li>âœ”ï¸ Finançable OPCO (contact-moi pour que l'on parle des conditions)</li>
+ <li>âœ”ï¸ Sans engagement long</li>
+ <li>âœ”ï¸ Abonnement mensuel modifiable ou résiliable à tout moment avant le 15 du mois</li>
+ <li>âœ”ï¸ Mentorat 100% à distance</li>
+ </ul>
+ </div>
+
+ <div className="container margin-vert--lg centeredContainer">
+ <div className="row">
+ <div className="col">
+ <Heading as='h3'>✅ C’est pour toi si…</Heading>
+ <p>Tu veux progresser sans bullshit</p>
+ <p>Tu veux faire les choses bien</p>
+ <p>Tu as un projet DevOps concret (pro/perso)</p>
+ <p>Tu veux un vrai regard extérieur</p>
+ </div>
+ <div className="col">
+ <Heading as='h3'>⌠Ce n’est pas pour toi si…</Heading>
+ <p>
+ Tu veux juste consommer des tutos
+ </p>
+ <p>
+ Tu ne veux pas t’impliquer
+ </p>
+ <p>
+ Tu refuses d’être challengé
+ </p>
+ <p>
+ Tu cherche juste des formations techniques
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="container text--center" id="rdv">
+ <Heading as='h3'>🔥 Tu veux passer un cap ?</Heading>
+ <p>
+ 📠Réserve ta session découverte dès maintenant :
+ </p>
+ <Ical brand_color="#E8AC00" />
+ <div className="margin-vert--lg text--center">
+ 📎 Ou télécharge le programme complet ici : <br />
+ <Link to="https://bref.lydra.fr/mentordevops" className="button button--primary margin-vert--md">Télécharger le PDF pour ton manager</Link>
+ <p>
+ Le meilleur moment pour se faire accompagner, c’était hier.<br />
+ <b> Le deuxième meilleur moment, c’est maintenant. </b>
+ </p>
+ </div>
+
+ </div>
+ </section>
+ </main>
+ </Layout>
+ );
+}
diff --git a/static/img/components/HomepageWelcome/compass.png b/static/img/components/HomepageWelcome/compass.png
new file mode 100644
index 0000000000000000000000000000000000000000..e06d44a014ef2218d565ec4da5ca91eb823a69de
Binary files /dev/null and b/static/img/components/HomepageWelcome/compass.png differ
diff --git a/static/img/components/HomepageWelcome/lifebuoy.png b/static/img/components/HomepageWelcome/lifebuoy.png
new file mode 100644
index 0000000000000000000000000000000000000000..445065ac2957899b17a3c39e754897fa59664bd0
Binary files /dev/null and b/static/img/components/HomepageWelcome/lifebuoy.png differ
diff --git a/static/img/components/HomepageWelcome/target.png b/static/img/components/HomepageWelcome/target.png
new file mode 100644
index 0000000000000000000000000000000000000000..0de4dcfd7074d2560707e8a0c5fe93cf56f93a51
Binary files /dev/null and b/static/img/components/HomepageWelcome/target.png differ