Merge branch '14-add-team-section' into 'main'

Resolve "add team section"

Closes #13 and #14

See merge request !7

docusaurus.config.js

@@ -87,7 +87,7 @@ const config = {
             items: [
               {
                 label: 'L\'équipe',
-                to: '/#',
+                to: '/#team',
               },
               {
                 label: 'Nos inspirations',
@@ -99,7 +99,7 @@ const config = {
               },
               {
                 label: 'Contact',
-                to: '/#',
+                to: '/contacts',
               },
             ],
           },
@@ -112,6 +112,10 @@ const config = {
       },
       footer: {
         links: [
+              {
+                label: 'Contacts',
+                to: '/contacts',
+              },
               {
                 label: 'Blog',
                 to: '/blog',

src/components/HomepageFeatures/index.js

-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-const FeatureList = [
-  {
-    title: 'Notre philosophie',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Nous pensons que l’amélioration continue et la collaboration entre les équipes d’une même entreprise sont essentielles pour atteindre facilement les objectifs mais surtout en les atteignant sereinement.
-      </>
-    ),
-  },
-  {
-    title: 'Notre philosophie',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Nous pensons que l’amélioration continue et la collaboration entre les équipes d’une même entreprise sont essentielles pour atteindre facilement les objectifs mais surtout en les atteignant sereinement.
-      </>
-    ),
-  },
-  {
-    title: 'Notre philosophie',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Nous pensons que l’amélioration continue et la collaboration entre les équipes d’une même entreprise sont essentielles pour atteindre facilement les objectifs mais surtout en les atteignant sereinement.
-      </>
-    ),
-  },
-];
-
-function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--4', styles.featureElement)}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures() {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

src/components/HomepageTeam/index.js

+import React from 'react';
+import Link from "@docusaurus/Link";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+const FeatureList = [
+  {
+    title: 'Christophe Chaudier',
+    subtitle: 'Formateur et Consultant en méthodologies DevOps',
+    img: 'img/team/cchaudier_bkg.png',
+    description: (
+      <>
+        Formateur et Consultant en méthodologies DevOps et expert en déploiement logiciel. Actif sur les réseaux sociaux @c_chaudier. Saint-Étienne, 40 ans, 20 ans d’expérience. Étant expert en déploiements automatisés, Christophe a en charge la partie « R&D opérationnelle » dans le but d’automatiser la plateforme de service et le déploiement des logiciels. Christophe est également en charge de la coordination et de la formation des consultants Lydra. Ayant le plus d’expérience avec les hébergeurs de plateforme en ligne, Christophe est responsable de la relation commerciale et technique avec ces fournisseurs de solutions d’hébergement de serveurs.
+      </>
+    ),
+  },
+  {
+    title: 'Thomas Michel',
+    subtitle: 'Administrateur système et conseil en logiciels libres',
+    img: 'img/team/tmichel_bkg.png',
+    description: (
+      <>
+        Administrateur système et conseil en logiciels libres. Rennes, 35 ans, 13 ans d’expérience. Déjà opérationnel dans la recherche d’outils numériques libres pour les offres « clé en main », Thomas a en charge la partie « R&D fonctionnelle » consistant à identifier les logiciels les plus adaptés pour répondre à un besoin, et documenter leur processus de déploiement et de paramétrage. De part son expérience dans la mise à disposition de services en ligne « clé en main », Thomas est également au pilotage des travaux légaux et institutionnels. Thomas a aussi la responsabilité de coordonner les travaux de documentation utilisateur et de support à la clientèle.
+      </>
+    ),
+  },
+
+];
+
+const Nouveau =   {
+  title: 'Pourquoi pas toi ?',
+  subtitle: "Rejoins Lydra ",
+  img: 'img/team/hacker.png',
+  link: "/contacts"
+}
+
+function Feature({img, title, subtitle, description, link}) {
+  if (link) {
+    return (
+      <Link className={styles.featureElement} to={link}>
+        <img src={useBaseUrl(img)} className={styles.featureSvg} role="img" />
+        <div className="text--center padding-horiz--md">
+          <h3>{title}</h3>
+          <p> <b>{subtitle}</b></p>
+          {description && (
+            <p>{description}</p>
+          )
+          }
+          
+        </div>
+      </Link>
+    );
+  } else {
+    return (
+      <div className={styles.featureElement}>
+        <img src={useBaseUrl(img)} className={styles.featureSvg} role="img" />
+        <div className="text--center padding-horiz--md">
+          <h3>{title}</h3>
+          <p> <b>{subtitle}</b></p>
+          {description && (
+            <p>{description}</p>
+          )
+          }
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default function HomepageTeam() {
+  const settings = {
+    accessibility: true,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 720,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          initialSlide: 0
+        }
+      },
+    ]
+  };
+  return (
+    <section id="team">
+      <h2 className='text--center margin-top--lg'> Notre Équipe </h2>
+      <div className={styles.features + ' team'}>
+        <div className="container">
+          <div className="row">
+            <div className={clsx('col col--8')}>
+            <Slider {...settings}>
+            {FeatureList.map((props, idx) => (
+                <Feature key={idx} {...props} />
+              ))}
+            </Slider>
+            </div>
+            <Feature {...Nouveau}/>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepageFeatures/styles.module.css → src/components/HomepageTeam/styles.module.css

@@ -9,17 +9,17 @@
   height: 200px;
   width: 200px;
   border-radius: 50%;
-
-}
-
-.featureElement:nth-child(3n+1) .featureSvg {
-  background-color: var(--ifm-color-success);
+  margin-bottom: 1rem;
 }
 
-.featureElement:nth-child(3n+2) .featureSvg {
-  background-color: var(--ifm-color-info);
+.featureElement {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+  color: white;
 }
 
-.featureElement:nth-child(3n+3) .featureSvg {
-  background-color: var(--ifm-color-highlight);
+.featureElement:hover {
+  text-decoration: none;
 }

src/components/TestimoniesCarousel/index.js

@@ -43,7 +43,7 @@ export default function TestimoniesCarousel() {
   return (
     <section >
       <div className={styles.section}>
-        <h2 className={styles.title}> Clients</h2>
+        <h2 className='text--center margin-top--lg'> Clients</h2>
         <Slider {...settings}>
         {testimoniesList.map((props, idx) => (
           <Card key={idx} {...props} />

src/components/TestimoniesCarousel/styles.module.css

@@ -4,11 +4,6 @@
   margin-bottom: 2rem;
 }
 
-.title {
-  text-align: center;
-  margin: 2rem auto
-}
-
 .right {
   right: 0;
 }

src/css/custom.css

@@ -102,3 +102,27 @@ section:nth-child(even) {
   background-color: var(--alterning-bkg);
   padding: 2rem 0;
 }
+
+.team .slick-slide:nth-child(3n+1) img {
+  background-color: var(--ifm-color-success);
+}
+
+.team .slick-slide:nth-child(3n+1) h3 {
+  color: var(--ifm-color-success);
+}
+
+.team .slick-slide:nth-child(3n+2) img {
+  background-color: var(--ifm-color-info);
+}
+
+.team .slick-slide:nth-child(3n+2) h3 {
+  color: var(--ifm-color-info);
+}
+
+.team .slick-slide:nth-child(3n+3) img {
+  background-color: var(--ifm-color-highlight);
+}
+
+.team .slick-slide:nth-child(3n+3) h3 {
+  color: var(--ifm-color-highlight);
+}

src/pages/contacts.md

+---
+title: "Page des contacts"
+description: "Page des contacts"
+keywords: Lydra, legal, sous-traitance
+---
+
+# Page de contacts
+
+Pour nous contacter, plusieurs options s'offrent à vous :
+* pour vos questions
+    * par courriel à [contact@lydra.fr](mailto:contact@lydra.fr)
+* pour ce qui concerne le non-respect de la loi ou du droit d'auteur : par courriel à [abus@lydra.fr](mailto:abus@lydra.fr)
+
+:::note Sources
+[Lydra dépôt git Legal version 1.0.0](https://gitlab.com/lydra/legal/-/blob/1.0.0/contacts.md)
+:::

src/pages/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HomepageTeam from '@site/src/components/HomepageTeam';
 import styles from './index.module.css';
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel';
@@ -39,7 +39,7 @@ export default function Home() {
       description="Description will go into a meta tag in <head />">
       <HomepageHeader />
       <main>
-      <HomepageFeatures />
+      <HomepageTeam />
       <TestimoniesCarousel/>
       </main>
     </Layout>

src/pages/index.module.css

@@ -22,6 +22,7 @@
 
 .hero__subtitle {
   font-size: 1.2rem;
+  margin: auto;
 }
 
 .containerIndex {
@@ -44,7 +45,7 @@
 }
 
 .headerIcon img{
-  max-width: 200px;
+  width: 200px;
 }
 
 .headerIcon {

src/pages/mentions-legales.md

@@ -73,6 +73,7 @@ Le code source du site est disponible sur [ce dépôt Froggit🐸](https://lab.f
 
 - **Collaborate :** conçues par [small.smiles](https://www.flaticon.com/authors/smallsmiles) sur [Flaticon](https://www.flaticon.com/free-icon/collaborate_7829192).
 - **Barista :** conçues par [Josh Boot](https://unsplash.com/fr/@joshboot) sur [Unsplash](https://unsplash.com/fr/photos/-L5W8-yFERs).
+- **Hacker :** conçue par [Vitaly Gorbachev](https://www.flaticon.com/authors/vitaly-gorbachev) sur [Flaticon](https://www.flaticon.com/free-icon/hacker_4123965)
 
 
 :::note Sources