Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit cfad1118 authored by Celeste Robert's avatar Celeste Robert Committed by Christophe Chaudier
Browse files

feat: mentor page

parent 02e56a05
No related branches found
No related tags found
1 merge request!30Resolve "add mentorat section"
......@@ -81,15 +81,30 @@ const config = {
href: 'https://cloud.lydra.fr/s/z8AMZbqs6mxd5CH#mindmap'
},
{
to: '/formations',
label: '🎓 Formations',
position: 'left'
to: '/formations',
label: '🎓 Formations',
position: 'left'
},
{
type: 'dropdown',
label: 'Mentorat',
position: 'left',
items: [
{
label: 'DevOps',
to: '/mentor',
},
{
label: 'GitLab',
href: 'https://froggit.fr/accelerateur-gitlab',
},
],
},
{
to: '/docs/outils',
label: '🧰 Outils',
position: 'left'
},
},
{
label: 'Soutenir',
position: 'left',
......
......@@ -3,24 +3,7 @@ import clsx from 'clsx';
import styles from './styles.module.css';
import Button from '../JoinButton';
const FeatureList = [
{
title: 'Tu te sens seul avec l’envie d’échanger sur les méthodes DevOps...',
Svg: require('@site/static/img/components/HomepageWelcome/coffee-break.png').default,
},
{
title: 'Les problématiques liées au déploiement te titillent…',
Svg: require('@site/static/img/components/HomepageWelcome/books.png').default,
},
{
title: 'Et tu aimes tester de nouveaux outils.',
Svg: require('@site/static/img/components/HomepageWelcome/puzzle.png').default,
},
{
title: <b> Alors tu es au bon endroit ! </b>,
Svg: require('@site/static/img/components/HomepageWelcome/computer.png').default,
},
];
function Feature({Svg, title}) {
return (
......@@ -35,17 +18,19 @@ function Feature({Svg, title}) {
);
}
export default function HomepageWelcome() {
export default function HomepageWelcome(props) {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<div className={styles.center + ' row'}>
{props.FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
<Button/>
{props.btnUrl &&
<Button text={props.btnText} url={props.btnUrl}/>
}
</section>
);
}
......@@ -22,3 +22,7 @@
height: 130px;
width: 130px;
}
.center {
justify-content: center;
}
import React from "react";
import Link from "@docusaurus/Link";
const Button = () => (
const Button = (props) => (
<div className="button-frame">
<Link className="button large button--primary" to="#join"> Je rejoins les Compagnons du DevOps </Link>
<Link className="button large button--primary" to={props.url}> {props.text} </Link>
</div>
)
......
......@@ -6,9 +6,7 @@ import styles from './styles.module.css';
const YoutubeEmbed = ({ embedId }) => (
<div className={styles.videoResponsive}>
<iframe
width="1024"
height="576"
src={`https://www.youtube.com/embed/${embedId}`}
src={`https://www.youtube-nocookie.com/embed/${embedId}`}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
......
.videoResponsive {
margin-bottom: 26px;
margin: 0 auto 26px auto;
max-width: 1024px;
}
.videoResponsive iframe {
width:100%;
aspect-ratio: 1.7;
}
@media screen and (max-width: 600px) {
......@@ -8,14 +14,13 @@
padding-bottom:56.25%;
position:relative;
height:0;
}
}
.videoResponsive iframe {
.videoResponsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
}
}
......@@ -29,6 +29,10 @@ strong, b {
font-family: var(--ifm-font-family-bold);
}
.dropdown__link--active {
color: var(--ifm-button-primary-color);
}
.large {
font-size: large;
padding: 10px 30px;
......@@ -52,6 +56,14 @@ strong, b {
text-decoration: none;
}
.buttonsDisplay {
max-width: 600px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
margin: auto;
}
.heroBanner {
padding: 2.6rem 0;
......
......@@ -8,9 +8,26 @@ import RegisterForm from '../components/RegisterForm';
import HomepageList from '../components/HomepageList'
import TestimoniesCarousel from '../components/TestimoniesCarousel'
export default function Home() {
const FeatureList = [
{
title: 'Tu te sens seul avec l’envie d’échanger sur les méthodes DevOps...',
Svg: require('@site/static/img/components/HomepageWelcome/coffee-break.png').default,
},
{
title: 'Les problématiques liées au déploiement te titillent…',
Svg: require('@site/static/img/components/HomepageWelcome/books.png').default,
},
{
title: 'Et tu aimes tester de nouveaux outils.',
Svg: require('@site/static/img/components/HomepageWelcome/puzzle.png').default,
},
{
title: <b> Alors tu es au bon endroit ! </b>,
Svg: require('@site/static/img/components/HomepageWelcome/computer.png').default,
},
];
const {siteConfig} = useDocusaurusContext();
return (
<Layout
......@@ -21,7 +38,7 @@ export default function Home() {
<div className='heroBanner'>
<h1 className='hero__title text--center'>{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<HomepageWelcome/>
<HomepageWelcome FeatureList={FeatureList} btnText="Je rejoins les compagnons du DevOps" btnUrl="#join"/>
</div>
</section>
<section className="text--center margin-vert--xl">
......
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'
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'>
<h1 className='hero__title text--center'> Apprends plus vite grâce à un mentor DevOps </h1>
<HomepageWelcome FeatureList={FeatureList}/>
<div className='container'>
<div className='buttonsDisplay'>
<Button text="Télécharge mon offre" url="https://cloud.lydra.fr/s/tgT4LYQBSNZYdgp"/>
<Button url="/formations" text="Découvre mes formations" />
</div>
</div>
</div>
</section>
<section className="text--center margin-vert--xl">
<h2 className='text--center'>Ma vision du mentorat !</h2>
<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 <a href='https://systeme.io/fr/privacy-policy'> disponible ici.</a> </p>
</section>
</main>
</Layout>
);
}
import Redirect from "../components/redirects";
*Redirection...*
<Redirect path="mentor" />
static/img/components/HomepageWelcome/checklist.png

24.6 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment