Partenaires page

src/App.css

@@ -78,6 +78,8 @@
 }
 
 .content-container {
+    padding-top: 2em;
+    padding-bottom: 2em;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -379,4 +381,32 @@
     color: white;
     width: 100%;
     text-align: center;
+}
+
+.partenaires-list-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 5em;
+    margin: 2em 0;
+}
+
+.partenaires-list-image {
+    width: 10em;
+    height: 10em;
+    object-fit: cover;
+    object-position: center;
+}
+
+.partenaires-list-a {
+    text-decoration: none;
+    color: black;
+    cursor: pointer;
+}
+
+.separator {
+    width: 100%;
+    height: 50px;
+    background-color: black;
 }

src/App.tsx

@@ -3,6 +3,7 @@ import "./App.css";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Home from "./pages/Home";
 import NotFound from "./pages/404";
+import Partenaires from "./pages/Partenaires.tsx";
 
 const App: React.FC = () => {
     return (
@@ -10,6 +11,7 @@ const App: React.FC = () => {
             <div className="app">
                 <Routes>
                     <Route path="/" element={<Home />} />
+                    <Route path="/partenaires" element={<Partenaires />} />
                     <Route path="*" element={<NotFound />} />
                 </Routes>
             </div>

src/components/partenaires/partenaires.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface Partenaire {
+    title: string;
+    logo: string;
+    link: string;
+}
+
+interface PartenairesListProps {
+    partenaires: Partenaire[];
+}
+
+const PartenairesList: React.FC<PartenairesListProps> = ({ partenaires }) => {
+    return (
+        <div className={"partenaires-list-container"}>
+            {partenaires.map((partenaire, index) => (
+                <div key={index}>
+                    <h2>{partenaire.title}</h2>
+                    <a href={partenaire.link} className={"partenaires-list-a"}>
+                        <img src={partenaire.logo} alt={partenaire.title} className={"partenaires-list-image"}/>
+                    </a>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default PartenairesList;

src/pages/Partenaires.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Navbar } from "../components/navbar/navbar";
+import PartenairesList from "../components/partenaires/partenaires";
+import {Footer} from "../components/footer/footer.tsx";
+import {FromLeftCard} from "../components/sidecard/fromleftcard.tsx";
+import {FromRightCard} from "../components/sidecard/fromrightcard.tsx";
+
+const Partenaires: React.FC = () => {
+    return (
+        <>
+            <Navbar/>
+            <PartenairesList partenaires={[
+                {
+                    title: "ISEN Nantes",
+                    logo: "/assets/images/isen.png",
+                    link: "https://www.isen-nantes.fr"
+                },
+                {
+                    title: "MercuryCloud",
+                    logo: "/assets/images/mercurycloud.png",
+                    link: "https://www.mercurycloud.fr"
+                },
+                {
+                    title: "Odyssey BDE",
+                    logo: "/assets/images/bde.png",
+                    link: "https://instagram.com/odyssey_bde"
+                }
+            ]}/>
+            <div className={"content-container"}>
+                <FromLeftCard title={"ISEN Nantes"}
+                              image={"/assets/images/isen.png"}
+                              content={"L'ISEN Nantes est une école d'ingénieurs généraliste en 5 ans. Elle forme des ingénieurs dans les domaines de l'électronique, de l'informatique et des télécommunications. Ils nous mettent à disposition un local pour travailler sur nos projets."} />
+                <div className={"separator"}></div>
+                <FromRightCard title={"MercuryCloud"}
+                               image={"/assets/images/mercurycloud.png"}
+                               content={{__html:"MercuryCloud est un hébergeur web, de vps ainsi que de serveur de jeu. Ils nous mettent à disposition un vps pour de la compilation et pour héberger certains service dont ce site web."}} />
+                <div className={"separator"}></div>
+                <FromLeftCard title={"Odyssey BDE"}
+                              image={"/assets/images/bde.png"}
+                              content={"Le BDE de l'ISEN Nantes, Odyssey, est un partenaire de longue date. Ils nous aident dans l'organisation de nos évènements et nous soutiennent dans nos projets."} />
+            </div>
+            <Footer/>
+        </>
+    );
+}
+
+export default Partenaires;