mirror of
https://github.com/modelec/modelec.club.git
synced 2026-01-18 16:37:30 +01:00
Updated Home page
This commit is contained in:
TitiLaPierre
44
src/App.css
44
src/App.css
@@ -4,7 +4,7 @@
|
||||
align-items: center; /* Centrer verticalement */
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px; /* Arrondir les coins en bas */
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow);
|
||||
max-width: 35%;
|
||||
margin: 0 auto; /* Centrer le conteneur */
|
||||
}
|
||||
@@ -187,48 +187,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-slide {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
width: 33%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.carousel-image.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.carousel-image.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.carousel-buttons button {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.botton-container-home {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
48
src/components/box/box.tsx
Normal file
48
src/components/box/box.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from "react";
|
||||
|
||||
interface BoxImageProps {
|
||||
type: "image";
|
||||
src: string;
|
||||
alt?: string;
|
||||
}
|
||||
|
||||
interface BoxDataProps {
|
||||
type: "data";
|
||||
data: string;
|
||||
subtext?: string;
|
||||
}
|
||||
|
||||
interface BoxProps {
|
||||
title: string;
|
||||
subtext?: string;
|
||||
label?: string;
|
||||
elements: (string|BoxImageProps|BoxDataProps)[];
|
||||
}
|
||||
|
||||
export const Box: React.FC<BoxProps> = ({ title, subtext, label, elements }) => {
|
||||
return (
|
||||
<div className={'box-container'}>
|
||||
{label && <span className={'box-label'}>{label}</span>}
|
||||
<div>
|
||||
<h4 className={'box-title'}>{title}</h4>
|
||||
{subtext && <p className={'box-subtext'}>{subtext}</p>}
|
||||
</div>
|
||||
<div className={'box-parts'}>
|
||||
{elements.map((element, index) => {
|
||||
if (typeof element === 'string') {
|
||||
return <p key={index} className={'box-paragraph'}>{element}</p>;
|
||||
} else if (element.type === 'data') {
|
||||
return (
|
||||
<div key={index} className={'box-data'}>
|
||||
<span className={'box-data-number'}>{element.data}</span>
|
||||
{element.subtext && <span className={'box-data-subtext'}>{element.subtext}</span>}
|
||||
</div>
|
||||
);
|
||||
} else if (element.type === 'image') {
|
||||
return <img key={index} className={'box-image'} src={element.src} alt={element.alt} />;
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
interface MiddleTextProps {
|
||||
triptic: { __html: string };
|
||||
text: { __html: string };
|
||||
}
|
||||
|
||||
export const MiddleText: React.FC<MiddleTextProps> = ({ triptic, text }) => {
|
||||
return (
|
||||
<div className="middle-text">
|
||||
<div className="middle-text-triptic" dangerouslySetInnerHTML={triptic}></div>
|
||||
<div className="middle-text-text" dangerouslySetInnerHTML={text}></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -3,11 +3,12 @@ import React from "react";
|
||||
interface NavbarLinkProps {
|
||||
text: string;
|
||||
link: string;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
export const NavbarLink: React.FC<NavbarLinkProps> = ({ text, link }) => {
|
||||
export const NavbarLink: React.FC<NavbarLinkProps> = ({ text, link, isActive }) => {
|
||||
return (
|
||||
<a href={link} className={"navbar-link"}>
|
||||
<a href={link} className={`navbar-link ${isActive ? "link_active" : ""}`}>
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import { CarouselClickables } from "../carousel/carousel.tsx";
|
||||
|
||||
interface FromLeftCardProps {
|
||||
title: string;
|
||||
@@ -35,7 +34,7 @@ export const FromLeftCardCarousel: React.FC<FromLeftCardCarouselProps> = ({ titl
|
||||
<div className={"from-left-card-carousel"}>
|
||||
<div className={"from-left-card-content"}>
|
||||
<h2>{title}</h2>
|
||||
<CarouselClickables images={carousel} links={links} />
|
||||
{/* <CarouselClickables images={carousel} links={links} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
298
src/index.css
298
src/index.css
@@ -0,0 +1,298 @@
|
||||
:root {
|
||||
--main: #FF1616;
|
||||
|
||||
--white: #FFFFFF;
|
||||
--light: #F0F1F3;
|
||||
--gray: #B0B0B0;
|
||||
--lightGray: #E0E0E0;
|
||||
--darkGray: #383838;
|
||||
--black: #111111;
|
||||
|
||||
--shadow: 0 10px 10px rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
|
||||
*:not(svg, path) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--black);
|
||||
box-sizing: border-box;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
#root { background-color: var(--light); }
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5rem;
|
||||
padding: 3rem 100px;
|
||||
}
|
||||
.page-banner {
|
||||
position: relative;
|
||||
}
|
||||
.page-banner-image {
|
||||
max-width: 85%;
|
||||
max-height: 450px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.page-banner-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
max-width: 40%;
|
||||
gap: 15px;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
translate: 0 -50%;
|
||||
padding: 2rem;
|
||||
background: var(--white);
|
||||
border-radius: 15px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.page-banner-header {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
padding-left: 0.8em;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
border-radius: 999px;
|
||||
height: 100%;
|
||||
background: var(--main);
|
||||
}
|
||||
}
|
||||
.page-banner-text {
|
||||
color: var(--darkGray);
|
||||
line-height: 1.3;
|
||||
& u {
|
||||
color: var(--black);
|
||||
text-decoration: underline var(--main) 2px;
|
||||
}
|
||||
& b {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
.page-banner-label {
|
||||
background: var(--main);
|
||||
color: var(--white);
|
||||
padding: 0.3em 1em;
|
||||
font-size: 0.8em;
|
||||
width: fit-content;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
.page-title {
|
||||
font-weight: 800;
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
margin-bottom: 2rem;
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 35px;
|
||||
height: 4px;
|
||||
background: var(--main);
|
||||
top: 50%;
|
||||
}
|
||||
&::before {
|
||||
left: -20px;
|
||||
translate: -100% -50%;
|
||||
}
|
||||
&::after {
|
||||
right: -20px;
|
||||
translate: 100% -50%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-container {
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--white);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
justify-self: center;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.media-separator {
|
||||
border: none;
|
||||
width: 2px;
|
||||
height: 1.5em;
|
||||
background: var(--lightGray);
|
||||
}
|
||||
.media-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
color: var(--black);
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
padding: 1em 2em;
|
||||
transition: color 0.3s;
|
||||
&:hover {
|
||||
color: var(--main);
|
||||
}
|
||||
}
|
||||
|
||||
.dual {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 5rem;
|
||||
}
|
||||
.box-container {
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
background: var(--white);
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
}
|
||||
.box-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
background: var(--main);
|
||||
color: var(--white);
|
||||
padding: 0.3em 1em;
|
||||
font-size: 0.8em;
|
||||
width: fit-content;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.3em;
|
||||
text-align: center;
|
||||
}
|
||||
.box-subtext {
|
||||
color: var(--darkGray);
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
.box-parts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
& > * {
|
||||
max-height: 350px;
|
||||
}
|
||||
}
|
||||
.box-data {
|
||||
border-radius: 10px;
|
||||
padding: 2rem 1rem;
|
||||
background: var(--lightGray);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.box-data-number {
|
||||
color: var(--main);
|
||||
font-size: 3em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box-data-subtext {
|
||||
color: var(--darkGray);
|
||||
font-size: 0.8em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.box-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.partners {
|
||||
box-shadow: 0 0 0 100vmax var(--black);
|
||||
clip-path: inset(0 -100vmax);
|
||||
padding-block: 4rem;
|
||||
background: var(--black);
|
||||
max-width: 500px;
|
||||
}
|
||||
.partners-title {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.partners-text {
|
||||
color: var(--lightGray);
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.partners-list {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.partner {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 15px;
|
||||
background: var(--white);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.partner-logo {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.partner-name {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
translate: -50% 0;
|
||||
color: var(--lightGray);
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
margin-top: 0.5rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.partner:hover .partner-name {
|
||||
color: var(--main);
|
||||
}
|
||||
.partners-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.partners-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: fit-content;
|
||||
padding: 1em 2em;
|
||||
border-radius: 999px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&.action_main {
|
||||
color: var(--white);
|
||||
background: var(--main);
|
||||
}
|
||||
&.action_second {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
@@ -11,104 +11,123 @@ const Home: React.FC = () => {
|
||||
<>
|
||||
<div className={'page-banner'}>
|
||||
<img
|
||||
src={'https://r2.modelec.club/logo-full.png'}
|
||||
alt={'Modelec Logo'}
|
||||
id={'logo-full-home'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'photo-container'}>
|
||||
<img
|
||||
className={'page-banner-image'}
|
||||
src={'https://r2.modelec.club/coupe-2024.png'}
|
||||
alt={'Modelec Photo'}
|
||||
id={'photo-coupe-home'}
|
||||
/>
|
||||
<div className={'page-banner-content'}>
|
||||
<h3 className={'page-banner-header'}>Qui sommes-nous ?</h3>
|
||||
<p className={'page-banner-text'}>
|
||||
Nous sommes <u>Modelec</u>, une association étudiante de l'<u>ISEN</u> qui a pour but de promouvoir la <b>robotique</b>, l'<b>électronique</b> et le <b>modélisme</b> auprès des étudiants de notre campus grâce à l'organisation d'ateliers et d'événements.
|
||||
</p>
|
||||
<p className={'page-banner-text'}>
|
||||
Nous participons également à la coupe de <u>France de robotique</u> où en 2024, nous avons fini <u>14e</u> sur 82 pour notre <u>première participation</u>.
|
||||
</p>
|
||||
<span className={'page-banner-label'}>Club 100% étudiant</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'content-container'}>
|
||||
<MiddleText
|
||||
triptic={{ __html: 'ROBOTIQUE<br> ELECTRONIQUE<br> MODELESIME<br>' }}
|
||||
text={{
|
||||
__html:
|
||||
"<h3>Qui sommes-nous ?</h3>Bienvenue ! Nous sommes Modelec, le club de robotique, électronique et modelisme de l'ISEN Nantes. Nous sommes une association étudiante qui a pour but de promouvoir la robotique, l'électronique et le modelisme auprès des étudiants de l'ISEN Nantes. Nous organisons des ateliers et des événements autour de ces thèmes. Nous participons également à la coupe de france de robotique où pour notre première participation en 2024 nous avons fini 14e sur 82.<h2>CLUB 100% ETUDIANTS</h2>",
|
||||
}}
|
||||
/>
|
||||
<FromRightCard
|
||||
|
||||
<div className={'media-container'}>
|
||||
<SocialNetwork Icon={Instagram} name="modelec_isen" link="https://www.instagram.com/modelec_isen" />
|
||||
<hr className={'media-separator'} />
|
||||
<SocialNetwork Icon={Youtube} name="modelec" link="https://youtube.com/modelec" />
|
||||
<hr className={'media-separator'} />
|
||||
<SocialNetwork Icon={Github} name="modelec" link="https://www.github.com/modelec" />
|
||||
</div>
|
||||
|
||||
<div className={'dual'}>
|
||||
<Box
|
||||
title={'Coupe de France de robotique'}
|
||||
content={{
|
||||
__html:
|
||||
"<span style='color: #0693E3;font-size: 1.5em;'>14 ème</span> sur 82 équipes<br>1 ère participation<p style='font-size: 2em; margin: 0 auto;'>100% étudiants</p>",
|
||||
}}
|
||||
image={'https://r2.modelec.club/serge-pixel.png'}
|
||||
className={'coupe-title'}
|
||||
/>
|
||||
<h1 className={'title-white'}>Nos Réseaux</h1>
|
||||
<SocialNetworks
|
||||
networks={[
|
||||
{
|
||||
icon: 'https://r2.modelec.club/github.svg',
|
||||
link: 'https://www.github.com/modelec',
|
||||
name: 'Modelec_ISEN',
|
||||
},
|
||||
{
|
||||
icon: 'https://r2.modelec.club/youtube.svg',
|
||||
link: 'https://youtube.com/modelec',
|
||||
name: 'Modelec_ISEN',
|
||||
},
|
||||
{
|
||||
icon: 'https://r2.modelec.club/insta.svg',
|
||||
link: 'https://www.instagram.com/modelec_isen',
|
||||
name: 'Modelec_ISEN',
|
||||
},
|
||||
subtext={'Première participation'}
|
||||
label={'Édition 2024'}
|
||||
elements={[
|
||||
{ type: "image", src: 'https://r2.modelec.club/serge-pixel.png', alt: 'Serge Pixel' },
|
||||
{ type: "data", data: "14e", "subtext": "/82 équipes" }
|
||||
]}
|
||||
/>
|
||||
<FromLeftCardCarousel
|
||||
title={'Nos Partenaires'}
|
||||
carousel={[
|
||||
'https://r2.modelec.club/isen.png',
|
||||
'https://r2.modelec.club/mercurycloud.png',
|
||||
'https://r2.modelec.club/bde.png',
|
||||
<Box
|
||||
title={'ISEN Nantes'}
|
||||
subtext={'Notre école'}
|
||||
elements={[
|
||||
'Parce que les technologies du numérique sont partout, l’ISEN forme des ingénieurs aptes à répondre aux besoins des entreprises dans tous les secteurs d’activités. Sur un parc de 10 hectares, le campus est doté d\'un restaurant. Depuis la rentrée 2021 les étudiants sont accueillis dans le nouveau bâtiment ISEN construit avec le soutien de la Région Pays de la Loire.'
|
||||
]}
|
||||
links={[
|
||||
'https://isen-nantes.fr',
|
||||
'https://mercurycloud.fr',
|
||||
'https://instagram.com/odyssey_bde',
|
||||
]}
|
||||
/>
|
||||
<MiddleText
|
||||
triptic={{ __html: "GRANDE<br> ECOLE<br> D'INGENIEUR<br>" }}
|
||||
text={{
|
||||
__html:
|
||||
"<h3>Notre actualité</h3>Parce que les technologies du numérique sont partout, l’ISEN forme des ingénieurs aptes à répondre aux besoins des entreprises dans tous les secteurs d’activités. Sur un parc de 10 hectares, le campus est doté d'un restaurant. Depuis la rentrée 2021 les étudiants sont accueillis dans le nouveau bâtiment ISEN construit avec le soutien de la Région Pays de la Loire.",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={'botton-container-home'}>
|
||||
<h1>Nos Projets</h1>
|
||||
<div className={'partners'}>
|
||||
<h1 className={'partners-title'}>Ils rendent notre projet possible</h1>
|
||||
<p className={'partners-text'}>
|
||||
Un grand merci à nos partenaires qui nous soutiennent dans l'aventure et qui permettent à Modelec de continuer cette année encore.
|
||||
</p>
|
||||
<div className={'partners-list'}>
|
||||
<a className={'partner'} target={'_blank'} href={'https://isen-nantes.fr'}>
|
||||
<img className={'partner-logo'} src={'https://r2.modelec.club/isen.png'} alt={'ISEN Nantes'} />
|
||||
<span className={'partner-name'}>ISEN Nantes</span>
|
||||
</a>
|
||||
<a className={'partner'} target={'_blank'} href={'https://mercurycloud.fr'}>
|
||||
<img className={'partner-logo'} src={'https://r2.modelec.club/mercurycloud.png'} alt={'Mercury Cloud'} />
|
||||
<span className={'partner-name'}>Mercury Cloud</span>
|
||||
</a>
|
||||
<a className={'partner'} target={'_blank'} href={'https://instagram.com/odyssey_bde'}>
|
||||
<img className={'partner-logo'} src={'https://r2.modelec.club/bde.png'} alt={'BDE Odyssey'} />
|
||||
<span className={'partner-name'}>BDE Odyssey</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className={'partners-actions'}>
|
||||
<a className={'partners-action action_main'} href={'/partenaires'}>
|
||||
<BookmarkBook />
|
||||
En savoir plus
|
||||
</a>
|
||||
<a className={'partners-action action_second'} href={'/contact'}>
|
||||
Devenir partenaire
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="page-title">Nos Projets</h2>
|
||||
<Carousel
|
||||
images={[
|
||||
'https://r2.modelec.club/robot1.jpg',
|
||||
'https://r2.modelec.club/robot2.jpg',
|
||||
'https://r2.modelec.club/robot3.jpg',
|
||||
'https://r2.modelec.club/robot4.jpg',
|
||||
'https://r2.modelec.club/robot5.jpg',
|
||||
carousel={[
|
||||
{
|
||||
image: 'https://picsum.photos/id/1/600/300',
|
||||
title: 'Lorem Ipsum',
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum neque et, vehicula justo.',
|
||||
},
|
||||
{
|
||||
image: 'https://picsum.photos/id/2/600/300',
|
||||
title: 'Fusce et sem',
|
||||
text: 'Fusce et sem nec nunc luctus tincidunt. Nullam sit amet neque sed elit fermentum efficitur.',
|
||||
},
|
||||
{
|
||||
image: 'https://picsum.photos/id/3/600/300',
|
||||
title: 'Vestibulum',
|
||||
text: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nec turpis.',
|
||||
},
|
||||
{
|
||||
image: 'https://picsum.photos/id/4/600/300',
|
||||
title: 'Pellentesque',
|
||||
text: 'Pellentesque habitant morbi tristique sen et netus et malesuada fames ac turpis egestas.',
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<h1>L'équipe</h1>
|
||||
<Team
|
||||
team={[
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="page-title">Notre Équipe</h2>
|
||||
<Carousel
|
||||
carousel={[
|
||||
{
|
||||
name: 'Maxime Chauveau',
|
||||
role: 'Président',
|
||||
image: 'https://r2.modelec.club/maxime.png',
|
||||
title: 'Maxime Chauveau',
|
||||
text: 'Président',
|
||||
},
|
||||
{
|
||||
name: 'Marie Dupont',
|
||||
role: 'Trésorière',
|
||||
image: 'https://r2.modelec.club/maxime.png',
|
||||
title: 'Marie Dupont',
|
||||
text: 'Trésorière',
|
||||
},
|
||||
{
|
||||
name: 'Pierre Dupont',
|
||||
role: 'Secrétaire',
|
||||
image: 'https://r2.modelec.club/maxime.png',
|
||||
title: 'Pierre Dupont',
|
||||
text: 'Secrétaire',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user