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 ea98d5b2 authored by Celeste Robert's avatar Celeste Robert
Browse files

feat: team on separate page

parent 0831231a
No related branches found
No related tags found
1 merge request!89Resolve "style: Revoir le style de la section équipe"
Pipeline #62256 passed
...@@ -149,8 +149,8 @@ const config = { ...@@ -149,8 +149,8 @@ const config = {
items: [ items: [
{ {
label: 'L\'équipe', label: 'L\'équipe',
to: '/#team', to: '/equipe',
activeBasePath: '/#' activeBasePath: '/equipe'
}, },
{ {
label: 'Nos réseaux', label: 'Nos réseaux',
......
import React from "react"; import React from "react";
import clsx from 'clsx';
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick-theme.css";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
...@@ -6,6 +7,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; ...@@ -6,6 +7,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
import { FaLinkedin } from "react-icons/fa"; import { FaLinkedin } from "react-icons/fa";
import Image from "@theme/IdealImage"; import Image from "@theme/IdealImage";
import Link from "@docusaurus/Link"; import Link from "@docusaurus/Link";
import Slider from "react-slick";
const FeatureList = [ const FeatureList = [
{ {
...@@ -96,9 +98,9 @@ function Feature({ img, title, subtitle, description, url, link }) { ...@@ -96,9 +98,9 @@ function Feature({ img, title, subtitle, description, url, link }) {
); );
} }
export default function HomepageTeam() { export function Team() {
return ( return (
<section id="team"> <section>
<h2 className="text--center margin-top--lg"> Notre Équipe </h2> <h2 className="text--center margin-top--lg"> Notre Équipe </h2>
<div className={styles.features + " team"}> <div className={styles.features + " team"}>
<div className="container"> <div className="container">
...@@ -110,3 +112,62 @@ export default function HomepageTeam() { ...@@ -110,3 +112,62 @@ export default function HomepageTeam() {
</section> </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>
);
}
...@@ -40,6 +40,8 @@ ...@@ -40,6 +40,8 @@
--ifm-h4-font-size: 2rem; --ifm-h4-font-size: 2rem;
--ifm-h5-font-size: 1.75rem; --ifm-h5-font-size: 1.75rem;
--ifm-h6-font-size: 1.5rem; --ifm-h6-font-size: 1.5rem;
--ifm-container-width-xxl: 1400px;
} }
/* For readability concerns, you should choose a lighter palette in dark mode. */ /* For readability concerns, you should choose a lighter palette in dark mode. */
...@@ -143,6 +145,12 @@ section:nth-child(even) { ...@@ -143,6 +145,12 @@ section:nth-child(even) {
} }
} }
@media (min-width: 1440px) {
.container {
max-width: var(--ifm-container-width-xxl);
}
}
.tags-list li { .tags-list li {
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
......
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>
);
}
...@@ -3,11 +3,10 @@ import clsx from 'clsx'; ...@@ -3,11 +3,10 @@ import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Image from '@theme/IdealImage'; import Image from '@theme/IdealImage';
import HomepageTeam from '@site/src/components/HomepageTeam';
import styles from './index.module.css'; import styles from './index.module.css';
import useBaseUrl from "@docusaurus/useBaseUrl"; import useBaseUrl from "@docusaurus/useBaseUrl";
import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel'; import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel';
import { TeamSlider } from '@site/src/components/TeamComponent';
const pageTitle = "Home" const pageTitle = "Home"
...@@ -42,8 +41,8 @@ export default function Home() { ...@@ -42,8 +41,8 @@ export default function Home() {
description="Description will go into a meta tag in <head />"> description="Description will go into a meta tag in <head />">
<HomepageHeader /> <HomepageHeader />
<main> <main>
<HomepageTeam /> <TeamSlider />
<TestimoniesCarousel/> <TestimoniesCarousel/>
</main> </main>
</Layout> </Layout>
); );
......
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