feat: team on separate page

ea98d5b2 · Celeste Robert · 0831231a · ea98d5b2 · ea98d5b2 · ea98d5b2
Commit ea98d5b2 authored 2 months ago by Celeste Robert
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -149,8 +149,8 @@ const config = {
            items: [
              {
                label: 'L\'équipe',
-                to: '/#team',
-                activeBasePath: '/#'
+                to: '/equipe',
+                activeBasePath: '/equipe'
              },
              {
                label: 'Nos réseaux',

--- a/src/components/HomepageTeam/index.js
+++ b/src/components/HomepageTeam/index.js
 import React from "react";
+import clsx from 'clsx';
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import styles from "./styles.module.css";
@@ -6,6 +7,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import { FaLinkedin } from "react-icons/fa";
 import Image from "@theme/IdealImage";
 import Link from "@docusaurus/Link";
+import Slider from "react-slick";

 const FeatureList = [
  {
@@ -96,9 +98,9 @@ function Feature({ img, title, subtitle, description, url, link }) {
 );
 }

-export default function HomepageTeam() {
+export function Team() {
  return (
-    <section id="team">
+    <section>
      <h2 className="text--center margin-top--lg"> Notre Équipe </h2>
      <div className={styles.features + " team"}>
        <div className="container">
@@ -110,3 +112,62 @@ export default function HomepageTeam() {
    </section>
  );
 }
+
+
+function FeatureSlider({img, title, subtitle}) {
+    return (
+      <div className={styles.featureElement}>
+        <div style={{position:'relative'}}>
+          <Image img={useBaseUrl(img)} className={styles.featureSvg} style={{margin:'auto'}} role="img" />
+        </div>
+        <div className="text--center padding-horiz--md">
+          <h3>{title}</h3>
+          <p> <b>{subtitle}</b></p>
+          <Link className="button button--sm button--primary" href="/equipe"> Voir plus </Link>
+        </div>
+      </div>
+    )
+}
+
+
+export function TeamSlider() {
+  const settings = {
+    accessibility: true,
+    autoplay: true,
+    autoplaySpeed: 8500,
+    speed: 1500,
+    infinite: true,
+    rtl: true,
+    slidesToShow: 3,
+    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')}>
+            <Slider {...settings}>
+            {FeatureList.map((props, idx) => (
+                <FeatureSlider key={idx} {...props} />
+              ))}
+            </Slider>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
--- a/src/components/HomepageTeam/styles.module.css
+++ b/src/components/HomepageTeam/styles.module.css
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -40,6 +40,8 @@
  --ifm-h4-font-size: 2rem;
  --ifm-h5-font-size: 1.75rem;
  --ifm-h6-font-size: 1.5rem;
+
+  --ifm-container-width-xxl: 1400px;
 }

 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -143,6 +145,12 @@ section:nth-child(even) {
  }
 }

+@media (min-width: 1440px) {
+  .container {
+    max-width: var(--ifm-container-width-xxl);
+  }
+}
+
 .tags-list li {
  white-space: nowrap;
  text-align: center;

--- a/src/pages/equipe.js
+++ b/src/pages/equipe.js
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import { Team } from '@site/src/components/TeamComponent';
+
+const pageTitle = "Équipe"
+
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${pageTitle} - ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <main>
+        <Team />
+      </main>
+    </Layout>
+  );
+}
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,11 +3,10 @@ import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Image from '@theme/IdealImage';
-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';
-
+import { TeamSlider } from '@site/src/components/TeamComponent';

 const pageTitle = "Home"

@@ -42,8 +41,8 @@ export default function Home() {
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />
      <main>
-      <HomepageTeam />
-      <TestimoniesCarousel/>
+        <TeamSlider />
+        <TestimoniesCarousel/>
      </main>
    </Layout>
  );