From ea98d5b2e5ba1f4423344c03ebc02da459c30fee Mon Sep 17 00:00:00 2001
From: Celeste Robert <celeste@lydra.fr>
Date: Mon, 14 Apr 2025 17:06:12 +0200
Subject: [PATCH] feat: team on separate page
---
docusaurus.config.js | 4 +-
.../{HomepageTeam => TeamComponent}/index.js | 65 ++++++++++++++++++-
.../styles.module.css | 0
src/css/custom.css | 8 +++
src/pages/equipe.js | 20 ++++++
src/pages/index.js | 7 +-
6 files changed, 96 insertions(+), 8 deletions(-)
rename src/components/{HomepageTeam => TeamComponent}/index.js (81%)
rename src/components/{HomepageTeam => TeamComponent}/styles.module.css (100%)
create mode 100644 src/pages/equipe.js
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8187bea..a96dfeb 100644
--- 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',
diff --git a/src/components/HomepageTeam/index.js b/src/components/TeamComponent/index.js
similarity index 81%
rename from src/components/HomepageTeam/index.js
rename to src/components/TeamComponent/index.js
index d4939f9..5a29e19 100644
--- a/src/components/HomepageTeam/index.js
+++ b/src/components/TeamComponent/index.js
@@ -1,4 +1,5 @@
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>
+ );
+}
+
diff --git a/src/components/HomepageTeam/styles.module.css b/src/components/TeamComponent/styles.module.css
similarity index 100%
rename from src/components/HomepageTeam/styles.module.css
rename to src/components/TeamComponent/styles.module.css
diff --git a/src/css/custom.css b/src/css/custom.css
index 96ceac1..326039b 100644
--- 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;
diff --git a/src/pages/equipe.js b/src/pages/equipe.js
new file mode 100644
index 0000000..a96e7a3
--- /dev/null
+++ b/src/pages/equipe.js
@@ -0,0 +1,20 @@
+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>
+ );
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 99bd3dc..39114b1 100644
--- 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>
);
--
GitLab