Switch to react

2026-01-18 16:37:30 +01:00 · 2024-09-28 00:34:45 +02:00
parent 6a88214822
commit 56cb05fd6b
55 changed files with 4354 additions and 510 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.idea/*
-!.idea/.gitignore
-*.iml
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -1,7 +1,50 @@
-# modelec.club
+# React + TypeScript + Vite

-Ce repo contient le code source du site web du club Modelec de l'ISEN Nantes.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

-La version déployé est disponible à l'adresse suivante : [modelec.club](https://modelec.club)
+Currently, two official plugins are available:

-Site web réalisé par le club [AppenISEN](https://instagram.com/appen_isen) de l'ISEN Nantes.
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
--- a/assets/Photo
+++ b/assets/Photo
--- a/assets/modelec-logo-full.png
+++ b/assets/modelec-logo-full.png
--- a/assets/modelec-logo-small.png
+++ b/assets/modelec-logo-small.png
--- a/assets/partners/bde.jpg
+++ b/assets/partners/bde.jpg
--- a/assets/partners/isen.png
+++ b/assets/partners/isen.png
--- a/assets/partners/mercurycloud.png
+++ b/assets/partners/mercurycloud.png
--- a/2024/IMG-20240511-WA0004.jpg
+++ b/2024/IMG-20240511-WA0004.jpg
--- a/2024/IMG_20240511_161326.jpg
+++ b/2024/IMG_20240511_161326.jpg
--- a/2024/PXL_20240509_142944459.MP.jpg
+++ b/2024/PXL_20240509_142944459.MP.jpg
--- a/2024/PXL_20240510_230657006.NIGHT.jpg
+++ b/2024/PXL_20240510_230657006.NIGHT.jpg
--- a/assets/serge.jpg
+++ b/assets/serge.jpg
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/index.html
+++ b/index.html
@@ -1,102 +1,13 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="utf-8">
-    <title> Modelec </title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link href="style.css" rel="stylesheet">
-    <script src="slideshow.js" defer></script>
-    <link rel="icon" type="image/x-icon" href="assets/modelec-logo-small.png">
-</head>
-<body>
-<div id="content">
-    <nav id="header">
-        <img src="assets/modelec-logo-full.png" alt="Logo Modelec" id="logo-modelec">
-        <div id="header-links">
-            <a class="link" href="#"><div class="header-link">Accueil</div></a>
-            <a class="link" href="photo.html"><div class="header-link">Photos</div></a>
-        </div>
-    </nav>
-    <div id="card-div">
-        <div class="card">
-            <h1 class="card-title">Qui sommes nous ?</h1>
-            <p class="card-text">
-                Bienvenue nous sommes le club Modelec, un club de robotique, électronique et modelisme . Nous sommes une association étudiante qui a pour but de promouvoir la robotique, l'électronique et le modelisme . 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.
-            </p>
-        </div>
-        <div class="card-large-height">
-            <h1 class="card-title">Une photo de l'équipe</h1>
-            <div class="card-text">
-                <img src="assets/Photo%20Bureau.jpg" alt="Photo de l'équipe" id="photo-equipe">
-                <p class="card-subtext">L'équipe Modelec lors de la coupe de France de robotique 2024</p>
-            </div>
-        </div>
-        <div class="card">
-            <h1 class="card-title">Nos projets pour l'année</h1>
-            <p class="card-text">
-                Nous voulons réitérer notre participation à la coupe de France de robotique en 2025. Nous voulons également organiser des ateliers de soudure, de programmation et de modélisme. Cette année, nous aimerions également organiser des événements autour de ces thèmes comme des visites de Fablab, des initiations,…
-            </p>
-        </div>
-        <div class="card">
-            <h1 class="card-title">Nos partenaires</h1>
-            <p class="card-text">
-                <div class="slideshow-container autoslide">
-                    <div class="slide fade">
-                        <a href="https://mercurycloud.fr"><img src="assets/partners/mercurycloud.png" alt="Logo Mercury Cloud" class="partner-logo"></a>
-                        <a href="https://mercurycloud.fr" class="link"><p class="partner-name">Mercury Cloud</p></a>
-                    </div>
-            <!---
-                    <div class="slide fade">
-                        <a href="https://www.isen-ouest.fr"><img src="assets/partners/isen.png" alt="Logo ISEN Nantes" class="partner-logo"></a>
-                        <a href="https://www.isen-ouest.fr" class="link"><p class="partner-name">ISEN Nantes</p></a>
-                    </div>
-                    ---->
-            <!---
-                    <div class="slide fade">
-                        <a href="https://www.instagram.com/odyssey_bde/"><img src="assets/partners/bde.jpg" alt="Logo BDE ISEN Nantes" class="partner-logo"></a>
-                        <a href="https://www.instagram.com/odyssey_bde/" class="link"><p class="partner-name">Odyssey BDE ISEN Nantes</p></a>
-                    </div>
--->
-                    <button class="prev">&#10094;</button>
-                    <button class="next">&#10095;</button>
-                </div>
-        </div>
-        <div class="card-large-width">
-            <h1 class="card-title">Notre robot</h1>
-            <p class="card-text">
-                Voici Serge, notre robot pour la coupe de France de robotique 2024. Il est équipé de 2 roues motrices, 2 roues codeuses, 3 pinces et 2 bras d'orientation pour les panneaux solaires. Il est également équipé d'une caméra pour la vision et d'un lidar pour la détection d'adversaire et la triangulation. Coté hardware, il est géré par un raspberry pi 5 et un arduino mega. Côté software, il est géré par des programmes C++ fait sur mesure dont le code est disponible sur notre <a href="https://github.com/modelec">github</a>.
-                <br>
-                <br>
-                A coté Serge est accompagné de 2 Pixels, ses PAMI (Partie Autonome Mobile Intelligente) qui sont des robots autonomes qui peuvent se déplacer et se repérer dans l'espace. Ils sont gérés par des arduino uno.
-            </p>
-        </div>
-        <div class="grid">
-            <div class="card" id="Serge">
-                <h1 class="card-title">Serge</h1>
-                <div class="card-text">
-                    <img src="assets/serge.jpg" alt="Photo de Serge" id="photo-serge">
-                    <p class="card-subtext">Serge et ses 2 Pixels</p>
-                </div>
-            </div>
-            <div class="card-contact">
-                <h1 class="card-title">Nous contacter</h1>
-                <p class="card-text">
-                    Vous pouvez nous contacter par mail à l'adresse <a href="mailto:contact@modelec.club" class="link"> contact@modelec.club</a> ou bien par message privé sur instagram.
-                </p>
-            </div>
-        </div>
-        <div class="card-large-height">
-            <h1 class="card-title">Nos réseaux sociaux</h1>
-            <p class="card-text">
-                <iframe src="https://www.instagram.com/modelec_isen/embed" class="social-media" width="100%" height="650px"></iframe>
-            </p>
-        </div>
-    </div>
-    <div id="footer">
-        <p>© 2024 Modelec ISEN Nantes. Site réalisé par AppenISEN</p>
-    </div>
-</div>
-</body>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "modelec-club",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  }
+}
--- a/photo.html
+++ b/photo.html
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <title>Modelec ISEN</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link href="style.css" rel="stylesheet">
-    <script src="slideshow.js" defer></script>
-    <link rel="icon" type="image/x-icon" href="assets/modelec-logo-small.png">
-</head>
-<body>
-<div id="content">
-  <nav id="header">
-    <img src="assets/modelec-logo-full.png" alt="Logo Modelec" id="logo-modelec">
-    <div id="header-links">
-      <a class="link" href="index.html"><div class="header-link">Accueil</div></a>
-      <a class="link" href="#"><div class="header-link">Photos</div></a>
-    </div>
-  </nav>
-  <div id="card-div">
-    <div class="card-very-large-width">
-      <h1 class="card-title">Photos coupe de France de robotique 2024</h1>
-      <div class="card-text">
-        <div class="slideshow-container autoslide">
-          <div class="slide fade">
-              <img src="assets/photo%20coupe%202024/IMG-20240511-WA0004.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
-          </div>
-          <div class="slide fade">
-              <img src="assets/photo%20coupe%202024/IMG_20240511_161326.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
-          </div>
-          <div class="slide fade">
-              <img src="assets/photo%20coupe%202024/PXL_20240509_142944459.MP.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
-          </div>
-          <div class="slide fade">
-              <img src="assets/photo%20coupe%202024/PXL_20240510_230657006.NIGHT.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
-          </div>
-          <button class="prev">&#10094;</button>
-            <button class="next">&#10095;</button>
-        </div>
-      </div>
-    </div>
-    <div class="card-very-large-width">
-        <h1 class="card-title">Vidéos coupe de france de robotique 2024</h1>
-        <div class="card-text">
-            <div class="slideshow-container">
-                <div class="slide fade">
-                    <iframe src="https://r2.modelec.club/serie%202.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
-                    <p class="card-subtext">Match de série 2</p>
-                </div>
-                <div class="slide fade">
-                    <iframe src="https://r2.modelec.club/serie%203.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
-                    <p class="card-subtext">Match de série 3</p>
-                </div>
-                <div class="slide fade">
-                    <iframe src="https://r2.modelec.club/serie%204.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
-                    <p class="card-subtext">Match de série 4</p>
-                </div>
-                <div class="slide fade">
-                    <iframe src="https://r2.modelec.club/serie%205%20pr%C3%A9paration.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
-                    <p class="card-subtext">Préparation du match de série 5</p>
-                </div>
-                <div class="slide fade">
-                    <iframe src="https://r2.modelec.club/serie%205.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
-                    <p class="card-subtext">Match de série 5</p>
-                </div>
-                <div class="slide fade">
-                    <iframe src="https://r2.modelec.club/finale.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
-                    <p class="card-subtext">Match de finale</p>
-                </div>
-
-                <button class="prev">&#10094;</button>
-                <button class="next">&#10095;</button>
-            </div>
-        </div>
-    </div>
-  </div>
-</div>
-</body>
-</html>
--- a/public/assets/images/bde.png
+++ b/public/assets/images/bde.png
--- a/public/assets/images/coupe-2024.png
+++ b/public/assets/images/coupe-2024.png
--- a/public/assets/images/isen.png
+++ b/public/assets/images/isen.png
--- a/public/assets/images/logo-full.png
+++ b/public/assets/images/logo-full.png
--- a/public/assets/images/logo.png
+++ b/public/assets/images/logo.png
--- a/public/assets/images/mercurycloud.png
+++ b/public/assets/images/mercurycloud.png
--- a/public/assets/images/serge-pixel.png
+++ b/public/assets/images/serge-pixel.png
--- a/public/assets/images/team-member/maxime.png
+++ b/public/assets/images/team-member/maxime.png
--- a/public/assets/svg/github-dark.svg
+++ b/public/assets/svg/github-dark.svg
@@ -0,0 +1,10 @@
+<svg width="50" height="50" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_175_91)">
+        <path d="M12.4082 0C5.55265 0 0 5.48187 0 12.25C0 17.6706 3.55184 22.2491 8.48408 23.8722C9.10449 23.9794 9.33714 23.6119 9.33714 23.2903C9.33714 22.9994 9.32163 22.0347 9.32163 21.0087C6.20408 21.5753 5.39755 20.2584 5.14939 19.5694C5.0098 19.2172 4.4049 18.13 3.87755 17.8391C3.44327 17.6094 2.82286 17.0428 3.86204 17.0275C4.83918 17.0122 5.53714 17.9156 5.7698 18.2831C6.88653 20.1359 8.6702 19.6153 9.38367 19.2937C9.49224 18.4975 9.81796 17.9616 10.1747 17.6553C7.41388 17.3491 4.52898 16.2925 4.52898 11.6069C4.52898 10.2747 5.0098 9.17219 5.80082 8.31469C5.67673 8.00844 5.24245 6.75281 5.9249 5.06844C5.9249 5.06844 6.96408 4.74687 9.33714 6.32406C10.3298 6.04844 11.3845 5.91062 12.4392 5.91062C13.4939 5.91062 14.5486 6.04844 15.5412 6.32406C17.9143 4.73156 18.9535 5.06844 18.9535 5.06844C19.6359 6.75281 19.2016 8.00844 19.0776 8.31469C19.8686 9.17219 20.3494 10.2594 20.3494 11.6069C20.3494 16.3078 17.449 17.3491 14.6882 17.6553C15.138 18.0381 15.5257 18.7731 15.5257 19.9216C15.5257 21.56 15.5102 22.8769 15.5102 23.2903C15.5102 23.6119 15.7429 23.9947 16.3633 23.8722C18.8266 23.0514 20.9672 21.4886 22.4836 19.4036C24 17.3187 24.8159 14.8167 24.8163 12.25C24.8163 5.48187 19.2637 0 12.4082 0Z" fill="black"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_175_91">
+            <rect width="24.8163" height="24.5" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/assets/svg/github.svg
+++ b/public/assets/svg/github.svg
@@ -0,0 +1,10 @@
+<svg width="48" height="47" viewBox="0 0 48 47" fill="#000000" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_23_21)">
+        <path d="M23.5984 0C10.5603 0 9.15527e-05 10.4256 9.15527e-05 23.2975C9.15527e-05 33.6067 6.75511 42.3141 16.1354 45.401C17.3154 45.6049 17.7578 44.906 17.7578 44.2944C17.7578 43.7411 17.7283 41.9064 17.7283 39.9552C11.7993 41.0327 10.2654 38.5283 9.7934 37.2178C9.52791 36.548 8.3775 34.4803 7.37457 33.927C6.54863 33.4902 5.36871 32.4127 7.34507 32.3835C9.20344 32.3544 10.5308 34.0726 10.9733 34.7715C13.0972 38.2953 16.4894 37.3051 17.8463 36.6936C18.0528 35.1792 18.6723 34.16 19.3507 33.5775C14.1001 32.9951 8.61348 30.9857 8.61348 22.0744C8.61348 19.5408 9.52791 17.444 11.0323 15.8132C10.7963 15.2308 9.97038 12.8428 11.2683 9.63935C11.2683 9.63935 13.2446 9.02779 17.7578 12.0273C19.6457 11.5031 21.6516 11.2411 23.6574 11.2411C25.6633 11.2411 27.6691 11.5031 29.557 12.0273C34.0702 8.99867 36.0465 9.63935 36.0465 9.63935C37.3444 12.8428 36.5185 15.2308 36.2825 15.8132C37.7869 17.444 38.7013 19.5117 38.7013 22.0744C38.7013 31.0148 33.1852 32.9951 27.9346 33.5775C28.79 34.3056 29.5275 35.7034 29.5275 37.8876C29.5275 41.0036 29.498 43.5081 29.498 44.2944C29.498 44.906 29.9405 45.634 31.1204 45.401C35.8053 43.8401 39.8764 40.8677 42.7603 36.9026C45.6443 32.9374 47.1959 28.179 47.1967 23.2975C47.1967 10.4256 36.6365 0 23.5984 0Z" fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_23_21">
+            <rect width="47.1966" height="46.595" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/assets/svg/insta-dark.svg
+++ b/public/assets/svg/insta-dark.svg
@@ -0,0 +1,10 @@
+<svg width="50" height="50" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_175_87)">
+        <path d="M12.5918 0C9.22457 0 8.80114 0.0153125 7.47812 0.0735C6.1551 0.13475 5.25396 0.339937 4.46449 0.643125C3.63639 0.950629 2.88631 1.43298 2.26669 2.05647C1.63554 2.6685 1.14702 3.40893 0.835099 4.22625C0.527997 5.00413 0.318609 5.89531 0.258119 7.19687C0.19918 8.50609 0.18367 8.92259 0.18367 12.2515C0.18367 15.5774 0.19918 15.9939 0.258119 17.3001C0.32016 18.6047 0.527997 19.4943 0.835099 20.2738C1.15306 21.0792 1.57649 21.7621 2.26669 22.4435C2.95534 23.1249 3.6471 23.5445 4.46294 23.8569C5.25396 24.1601 6.15355 24.3668 7.47502 24.4265C8.79959 24.4847 9.22147 24.5 12.5918 24.5C15.9622 24.5 16.3825 24.4847 17.7071 24.4265C19.027 24.3652 19.9313 24.1601 20.7207 23.8569C21.5483 23.5492 22.2978 23.0669 22.917 22.4435C23.6072 21.7621 24.0306 21.0792 24.3486 20.2738C24.6541 19.4943 24.8635 18.6047 24.9255 17.3001C24.9845 15.9939 25 15.5774 25 12.25C25 8.92259 24.9845 8.50609 24.9255 7.19841C24.8635 5.89531 24.6541 5.00413 24.3486 4.22625C24.0367 3.40891 23.5482 2.66847 22.917 2.05647C22.2975 1.43275 21.5474 0.950363 20.7192 0.643125C19.9282 0.339937 19.0255 0.133219 17.7055 0.0735C16.381 0.0153125 15.9606 0 12.5887 0H12.5934H12.5918ZM11.4798 2.20806H12.5934C15.9064 2.20806 16.2988 2.21878 17.6063 2.2785C18.8161 2.33209 19.4737 2.53269 19.9111 2.69959C20.4896 2.92162 20.9038 3.18806 21.338 3.61681C21.7723 4.04556 22.0406 4.45288 22.2655 5.02556C22.4362 5.45584 22.6378 6.10509 22.6921 7.29947C22.7526 8.59031 22.765 8.97772 22.765 12.2469C22.765 15.5162 22.7526 15.9051 22.6921 17.1959C22.6378 18.3903 22.4346 19.038 22.2655 19.4698C22.0666 20.0017 21.7491 20.4827 21.3365 20.8771C20.9022 21.3058 20.4896 21.5707 19.9095 21.7928C19.4753 21.9612 18.8176 22.1602 17.6063 22.2154C16.2988 22.2736 15.9064 22.2873 12.5934 22.2873C9.28041 22.2873 8.88645 22.2736 7.57894 22.2154C6.36914 22.1602 5.71306 21.9612 5.27567 21.7928C4.73669 21.5966 4.24909 21.2837 3.84873 20.8771C3.43577 20.4821 3.11777 20.0007 2.91812 19.4683C2.74906 19.038 2.54587 18.3888 2.49159 17.1944C2.43265 15.9036 2.42024 15.5162 2.42024 12.2439C2.42024 8.97312 2.43265 8.58725 2.49159 7.29641C2.54743 6.10203 2.74906 5.45278 2.91967 5.02097C3.14457 4.44981 3.41445 4.04097 3.84873 3.61222C4.28302 3.18347 4.69559 2.91856 5.27567 2.69653C5.71306 2.52809 6.36914 2.32903 7.57894 2.27391C8.72359 2.22184 9.16718 2.20653 11.4798 2.205V2.20806ZM19.2162 4.24156C19.0207 4.24156 18.8271 4.27959 18.6464 4.35346C18.4658 4.42733 18.3016 4.53561 18.1634 4.67212C18.0251 4.80862 17.9154 4.97067 17.8406 5.14902C17.7658 5.32737 17.7273 5.51852 17.7273 5.71156C17.7273 5.90461 17.7658 6.09576 17.8406 6.27411C17.9154 6.45246 18.0251 6.61451 18.1634 6.75101C18.3016 6.88751 18.4658 6.99579 18.6464 7.06967C18.8271 7.14354 19.0207 7.18156 19.2162 7.18156C19.6111 7.18156 19.9899 7.02669 20.2691 6.75101C20.5483 6.47533 20.7052 6.10143 20.7052 5.71156C20.7052 5.32169 20.5483 4.94779 20.2691 4.67212C19.9899 4.39644 19.6111 4.24156 19.2162 4.24156ZM12.5934 5.95962C11.7482 5.94661 10.9088 6.09971 10.1241 6.41003C9.33944 6.72034 8.62512 7.18167 8.02276 7.76715C7.4204 8.35263 6.94203 9.05056 6.61551 9.8203C6.28898 10.5901 6.12082 11.4162 6.12082 12.2508C6.12082 13.0853 6.28898 13.9115 6.61551 14.6812C6.94203 15.451 7.4204 16.1489 8.02276 16.7344C8.62512 17.3199 9.33944 17.7812 10.1241 18.0915C10.9088 18.4018 11.7482 18.5549 12.5934 18.5419C14.2662 18.5161 15.8617 17.842 17.0355 16.665C18.2092 15.488 18.8671 13.9025 18.8671 12.2508C18.8671 10.599 18.2092 9.01357 17.0355 7.83655C15.8617 6.65954 14.2662 5.98539 12.5934 5.95962ZM12.5934 8.16616C13.6905 8.16616 14.7426 8.59642 15.5184 9.36229C16.2941 10.1282 16.73 11.1669 16.73 12.25C16.73 13.3331 16.2941 14.3718 15.5184 15.1377C14.7426 15.9036 13.6905 16.3338 12.5934 16.3338C11.4963 16.3338 10.4441 15.9036 9.66839 15.1377C8.89263 14.3718 8.45681 13.3331 8.45681 12.25C8.45681 11.1669 8.89263 10.1282 9.66839 9.36229C10.4441 8.59642 11.4963 8.16616 12.5934 8.16616Z" fill="black"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_175_87">
+            <rect width="24.8163" height="24.5" fill="white" transform="translate(0.18367)"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/assets/svg/insta.svg
+++ b/public/assets/svg/insta.svg
@@ -0,0 +1,10 @@
+<svg width="48" height="47" viewBox="0 0 48 47" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_23_24)">
+        <path d="M23.5983 0C17.1943 0 16.389 0.0291219 13.8729 0.139785C11.3567 0.256273 9.64286 0.646506 8.14142 1.22312C6.56651 1.80794 5.13998 2.7253 3.96157 3.91107C2.76123 5.07506 1.83214 6.48323 1.23891 8.03764C0.654853 9.51704 0.256632 11.2119 0.14159 13.6873C0.0294979 16.1772 0 16.9693 0 23.3004C0 29.6257 0.0294979 30.4178 0.14159 32.9019C0.259582 35.3831 0.654853 37.0751 1.23891 38.5574C1.84362 40.0892 2.64891 41.388 3.96157 42.684C5.27128 43.9799 6.58688 44.7778 8.13847 45.3719C9.64286 45.9485 11.3537 46.3417 13.867 46.4552C16.3861 46.5659 17.1884 46.595 23.5983 46.595C30.0082 46.595 30.8076 46.5659 33.3267 46.4552C35.837 46.3388 37.5567 45.9485 39.0582 45.3719C40.6321 44.7868 42.0576 43.8694 43.2351 42.684C44.5477 41.388 45.353 40.0892 45.9577 38.5574C46.5388 37.0751 46.9371 35.3831 47.0551 32.9019C47.1671 30.4178 47.1966 29.6257 47.1966 23.2975C47.1966 16.9693 47.1671 16.1772 47.0551 13.6902C46.9371 11.2119 46.5388 9.51704 45.9577 8.03764C45.3646 6.48319 44.4355 5.075 43.2351 3.91107C42.057 2.72487 40.6304 1.80744 39.0552 1.22312C37.5508 0.646506 35.8341 0.253361 33.3238 0.139785C30.8047 0.0291219 30.0053 0 23.5924 0H23.6013H23.5983ZM21.4833 4.19938H23.6013C29.902 4.19938 30.6483 4.21976 33.135 4.33334C35.4358 4.43527 36.6865 4.81676 37.5184 5.13419C38.6187 5.55646 39.4062 6.06318 40.2322 6.87859C41.0581 7.69401 41.5684 8.46865 41.9962 9.55781C42.3206 10.3761 42.7041 11.6109 42.8074 13.8824C42.9224 16.3374 42.946 17.0742 42.946 23.2917C42.946 29.5092 42.9224 30.2489 42.8074 32.7039C42.7041 34.9754 42.3177 36.2073 41.9962 37.0285C41.6178 38.0401 41.014 38.9547 40.2292 39.7048C39.4033 40.5202 38.6187 41.024 37.5154 41.4463C36.6895 41.7666 35.4388 42.1452 33.135 42.25C30.6483 42.3607 29.902 42.3869 23.6013 42.3869C17.3005 42.3869 16.5513 42.3607 14.0646 42.25C11.7638 42.1452 10.516 41.7666 9.68416 41.4463C8.65911 41.0733 7.73177 40.4782 6.97035 39.7048C6.18497 38.9535 5.58019 38.038 5.20048 37.0256C4.87895 36.2073 4.49253 34.9725 4.38929 32.701C4.2772 30.246 4.2536 29.5092 4.2536 23.2859C4.2536 17.0654 4.2772 16.3316 4.38929 13.8766C4.49548 11.6051 4.87895 10.3703 5.20343 9.54907C5.63115 8.46282 6.14441 7.68527 6.97035 6.86986C7.7963 6.05444 8.58094 5.55063 9.68416 5.12837C10.516 4.80803 11.7638 4.42944 14.0646 4.3246C16.2415 4.22559 17.0852 4.19647 21.4833 4.19355V4.19938ZM36.1969 8.06677C35.825 8.06677 35.4568 8.13908 35.1132 8.27958C34.7696 8.42007 34.4574 8.626 34.1945 8.88561C33.9315 9.14521 33.7229 9.45341 33.5806 9.7926C33.4383 10.1318 33.3651 10.4953 33.3651 10.8625C33.3651 11.2296 33.4383 11.5931 33.5806 11.9323C33.7229 12.2715 33.9315 12.5797 34.1945 12.8393C34.4574 13.0989 34.7696 13.3049 35.1132 13.4454C35.4568 13.5859 35.825 13.6582 36.1969 13.6582C36.9479 13.6582 37.6682 13.3636 38.1993 12.8393C38.7303 12.315 39.0287 11.6039 39.0287 10.8625C39.0287 10.121 38.7303 9.4099 38.1993 8.88561C37.6682 8.36131 36.9479 8.06677 36.1969 8.06677ZM23.6013 11.3342C21.9938 11.3095 20.3975 11.6007 18.9051 12.1908C17.4128 12.781 16.0543 13.6584 14.9087 14.7719C13.7631 15.8853 12.8533 17.2127 12.2323 18.6766C11.6113 20.1406 11.2915 21.7118 11.2915 23.299C11.2915 24.8861 11.6113 26.4574 12.2323 27.9213C12.8533 29.3853 13.7631 30.7126 14.9087 31.8261C16.0543 32.9396 17.4128 33.8169 18.9051 34.4071C20.3975 34.9973 21.9938 35.2885 23.6013 35.2637C26.7827 35.2147 29.8171 33.9326 32.0494 31.6941C34.2817 29.4556 35.5329 26.4403 35.5329 23.299C35.5329 20.1577 34.2817 17.1423 32.0494 14.9039C29.8171 12.6654 26.7827 11.3832 23.6013 11.3342ZM23.6013 15.5307C25.6878 15.5307 27.6888 16.349 29.1641 17.8056C30.6395 19.2621 31.4684 21.2376 31.4684 23.2975C31.4684 25.3574 30.6395 27.3329 29.1641 28.7895C27.6888 30.246 25.6878 31.0643 23.6013 31.0643C21.5148 31.0643 19.5138 30.246 18.0384 28.7895C16.563 27.3329 15.7342 25.3574 15.7342 23.2975C15.7342 21.2376 16.563 19.2621 18.0384 17.8056C19.5138 16.349 21.5148 15.5307 23.6013 15.5307Z" fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_23_24">
+            <rect width="47.1966" height="46.595" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/assets/svg/mail.svg
+++ b/public/assets/svg/mail.svg
@@ -0,0 +1,10 @@
+<svg width="50" height="50" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_175_93)">
+        <path d="M0 6.125C0 5.31277 0.322655 4.53382 0.896986 3.95949C1.47132 3.38516 2.25027 3.0625 3.0625 3.0625H21.4375C22.2497 3.0625 23.0287 3.38516 23.603 3.95949C24.1773 4.53382 24.5 5.31277 24.5 6.125V18.375C24.5 19.1872 24.1773 19.9662 23.603 20.5405C23.0287 21.1148 22.2497 21.4375 21.4375 21.4375H3.0625C2.25027 21.4375 1.47132 21.1148 0.896986 20.5405C0.322655 19.9662 0 19.1872 0 18.375V6.125ZM3.0625 4.59375C2.65639 4.59375 2.26691 4.75508 1.97974 5.04224C1.69258 5.32941 1.53125 5.71889 1.53125 6.125V6.45728L12.25 12.8885L22.9688 6.45728V6.125C22.9688 5.71889 22.8074 5.32941 22.5203 5.04224C22.2331 4.75508 21.8436 4.59375 21.4375 4.59375H3.0625ZM22.9688 8.24272L15.7596 12.5685L22.9688 17.0045V8.24272ZM22.9167 18.7716L14.2804 13.4566L12.25 14.674L10.2196 13.4566L1.58331 18.7701C1.67033 19.0959 1.86248 19.3839 2.12995 19.5894C2.39742 19.7948 2.72524 19.9062 3.0625 19.9062H21.4375C21.7746 19.9063 22.1022 19.7951 22.3697 19.59C22.6371 19.3848 22.8294 19.0972 22.9167 18.7716ZM1.53125 17.0045L8.74038 12.5685L1.53125 8.24272V17.0045Z" fill="black"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_175_93">
+            <rect width="24.5" height="24.5" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/assets/svg/youtube-dark.svg
+++ b/public/assets/svg/youtube-dark.svg
@@ -0,0 +1,10 @@
+<svg width="50" height="49" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_175_89)">
+        <path d="M0.489796 18.375V6.125C0.489796 5.31277 0.816617 4.53382 1.39836 3.95949C1.98011 3.38516 2.76912 3.0625 3.59184 3.0625H22.2041C23.0268 3.0625 23.8158 3.38516 24.3976 3.95949C24.9793 4.53382 25.3061 5.31277 25.3061 6.125V18.375C25.3061 19.1872 24.9793 19.9662 24.3976 20.5405C23.8158 21.1148 23.0268 21.4375 22.2041 21.4375H3.59184C2.76912 21.4375 1.98011 21.1148 1.39836 20.5405C0.816617 19.9662 0.489796 19.1872 0.489796 18.375ZM11.0212 7.79866C10.9053 7.71715 10.7688 7.66872 10.6268 7.65868C10.4848 7.64864 10.3428 7.67737 10.2163 7.74174C10.0897 7.8061 9.98356 7.9036 9.90941 8.02357C9.83527 8.14354 9.79601 8.28134 9.79592 8.42187V16.0781C9.79601 16.2187 9.83527 16.3565 9.90941 16.4764C9.98356 16.5964 10.0897 16.6939 10.2163 16.7583C10.3428 16.8226 10.4848 16.8514 10.6268 16.8413C10.7688 16.8313 10.9053 16.7829 11.0212 16.7013L16.4498 12.8732C16.5503 12.8024 16.6323 12.7089 16.6888 12.6005C16.7453 12.4921 16.7748 12.3719 16.7748 12.25C16.7748 12.1281 16.7453 12.0079 16.6888 11.8995C16.6323 11.7911 16.5503 11.6976 16.4498 11.6268L11.0212 7.79866Z" fill="black"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_175_89">
+            <rect width="24.8163" height="24.5" fill="white" transform="translate(0.489796)"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/assets/svg/youtube.svg
+++ b/public/assets/svg/youtube.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="36" viewBox="0 0 48 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 29.9463V6.64878C0 5.10406 0.621561 3.62261 1.72795 2.53032C2.83433 1.43804 4.33491 0.824402 5.89958 0.824402H41.2971C42.8617 0.824402 44.3623 1.43804 45.4687 2.53032C46.5751 3.62261 47.1966 5.10406 47.1966 6.64878V29.9463C47.1966 31.491 46.5751 32.9725 45.4687 34.0648C44.3623 35.157 42.8617 35.7707 41.2971 35.7707H5.89958C4.33491 35.7707 2.83433 35.157 1.72795 34.0648C0.621561 32.9725 0 31.491 0 29.9463ZM20.0291 9.8318C19.8085 9.67678 19.549 9.58468 19.279 9.56559C19.009 9.54649 18.7388 9.60114 18.4982 9.72355C18.2575 9.84596 18.0556 10.0314 17.9146 10.2596C17.7736 10.4877 17.6989 10.7498 17.6987 11.0171V25.578C17.6989 25.8453 17.7736 26.1074 17.9146 26.3355C18.0556 26.5637 18.2575 26.7491 18.4982 26.8715C18.7388 26.9939 19.009 27.0486 19.279 27.0295C19.549 27.0104 19.8085 26.9183 20.0291 26.7633L30.3533 19.4828C30.5445 19.3481 30.7004 19.1703 30.8079 18.9641C30.9154 18.758 30.9715 18.5294 30.9715 18.2975C30.9715 18.0657 30.9154 17.8371 30.8079 17.631C30.7004 17.4248 30.5445 17.247 30.3533 17.1123L20.0291 9.8318Z" fill="white"/>
+</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/slideshow.js
+++ b/slideshow.js
@@ -1,42 +0,0 @@
-document.querySelectorAll(".slideshow-container").forEach((container) => {
-    let slideIndex = 0;
-    let timer;
-
-    let sliderChild = [...container.children].filter(child => child.classList.contains("slide"));
-
-    let prevBtn = container.querySelector(".prev");
-    let nextBtn = container.querySelector(".next");
-
-    prevBtn.addEventListener("click", () => plusSlides(-1));
-    nextBtn.addEventListener("click", () => plusSlides(1));
-
-    function plusSlides(n) {
-        if (timer) clearTimeout(timer);
-        slideIndex+=n;
-        showSlides();
-    }
-
-    function currentSlide(n) {
-        if (timer) clearTimeout(timer);
-        slideIndex = n;
-        showSlides();
-    }
-
-    function showSlides() {
-        let i;
-        for (i = 0; i < sliderChild.length; i++) {
-            sliderChild[i].style.display = "none";
-        }
-        if (slideIndex > sliderChild.length - 1) {slideIndex = 0}
-        sliderChild[slideIndex].style.display = "flex";
-
-        if (container.classList.contains("autoslide")) {
-            timer = setTimeout(() => {
-                slideIndex++;
-                showSlides();
-            }, 5000);
-        }
-    }
-
-    showSlides(slideIndex);
-});
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,382 @@
+#root {
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    background-color: white;
+    margin: 0;
+}
+
+.navbar {
+    font-family: 'Arial', sans-serif;
+    background-color: white;
+    width: 100%;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    margin: 0;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1em 0;
+    width: 100%;
+}
+
+.navbar-links {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.navbar-logo-img img {
+    width: 100%;
+    height: auto;
+    max-width: 7vw;
+}
+
+.navbar-link {
+    text-decoration: none;
+    color: black;
+    font-size: 1.5em;
+    margin: 0 1em;
+}
+
+.logo-container {
+    display: flex;
+    justify-content: center; /* Centrer horizontalement */
+    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);
+    max-width: 35%;
+    margin: 0 auto; /* Centrer le conteneur */
+}
+
+#logo-full-home {
+    width: 100%;
+    height: auto;
+    max-width: 30vw;
+}
+
+.photo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 3em auto;
+    width: 35%;
+    border-radius: 20px;
+}
+
+.photo-container img {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    border-radius: 20px;
+}
+
+.content-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    width: 100%;
+    background-color: black;
+}
+
+.middle-text {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 3em;
+    margin-left: 10em;
+    margin-right: 10em;
+    gap: 3em;
+}
+
+.middle-text-triptic {
+    color: white;
+    font-weight: 300;
+    font-size: 1.5em;
+}
+
+.middle-text-text {
+    color: white;
+}
+
+.from-right-card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: white;
+    margin-left: auto;
+    padding-right: 2em;
+    border-bottom-left-radius: 20px;
+    border-top-left-radius: 20px;
+    width: 70%;
+    overflow: hidden;
+    height: auto;
+}
+
+.from-right-card-image {
+    flex: 3;
+}
+
+.from-right-card-content {
+    flex: 4;
+}
+
+.from-right-card img {
+    width: 55%;
+    height: auto;
+    border-bottom-left-radius: 20px;
+    border-top-left-radius: 20px;
+    object-fit: cover;
+    display: block;
+}
+
+.coupe-title{
+    color: #0693E3;
+}
+
+.social-network {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+    text-decoration: none;
+}
+
+.social-network img {
+    color: white;
+    fill: white;
+}
+
+.social-network-name {
+    color: white;
+    text-decoration: none;
+}
+
+.social-networks {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 5em;
+}
+
+.title-white {
+    color: white;
+    font-size: 2em;
+    font-weight: 300;
+}
+
+.from-left-card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: white;
+    margin-right: auto;
+    padding-right: 2em;
+    border-bottom-right-radius: 20px;
+    border-top-right-radius: 20px;
+    width: 70%;
+    overflow: hidden;
+    height: auto;
+}
+
+.from-left-card img {
+    width: 55%;
+    height: auto;
+    border-bottom-right-radius: 20px;
+    border-top-right-radius: 20px;
+    object-fit: cover;
+    display: block;
+}
+
+.from-left-card-image {
+    flex: 3;
+}
+
+.from-left-card-content {
+    flex: 4;
+}
+
+.from-left-card-carousel {
+    margin-top: 2em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: white;
+    margin-right: auto;
+    padding-right: 2em;
+    border-bottom-right-radius: 20px;
+    border-top-right-radius: 20px;
+    width: 70%;
+    overflow: hidden;
+    height: auto;
+}
+
+.from-left-card-carousel img {
+    padding-left: 40vh;
+    width: 50%;
+    height: auto;
+    object-fit: cover;
+    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 {
+    position: absolute;
+    top: 50%;
+    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;
+    align-items: center;
+    margin: 3em auto;
+    width: 100%;
+    flex-direction: column;
+}
+
+.team {
+    display: flex;
+    flex-direction: column;
+    width: 50vh;
+}
+
+.team-member {
+    display: flex;
+    flex-direction: row;
+    gap: 2em;
+}
+
+.team-member-image img {
+    width: 10em;
+    height: 10em;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 50%;
+}
+
+.team-member-wrapper {
+    position: relative;
+}
+
+.offset-left {
+    margin-top: -1em;
+    margin-right: 20em;
+}
+
+.offset-right {
+    margin-top: -2em;
+    margin-left: 20em;
+}
+
+.footer-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2em 0;
+    width: 100vw;
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+}
+
+.footer-separator {
+    width: 100vw;
+    height: 10px;
+    background-color: black;
+}
+
+.footer-content-top {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.footer-content-top img {
+    width: 100%;
+    height: auto;
+    max-width: 20vw;
+}
+
+.social-network-small-icon {
+    fill: black;
+    color: black;
+}
+
+.footer-nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 3em;
+    margin: 2em 0;
+}
+
+.footer-nav a {
+    text-decoration: none;
+    color: black;
+    font-size: 1.2em;
+}
+
+.footer-credits {
+    background-color: black;
+    color: white;
+    width: 100%;
+    text-align: center;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,40 @@
+import './App.css'
+import { Navbar } from "./components/navbar/navbar.tsx";
+import { MiddleText } from "./components/middletext/middletext.tsx";
+import { FromRightCard } from "./components/sidecard/fromrightcard.tsx";
+import { SocialNetworks } from "./components/socialnetwork/socialnetwork.tsx";
+import { FromLeftCardCarousel } from "./components/sidecard/fromleftcard.tsx";
+import {Carousel} from "./components/carousel/carousel.tsx";
+import {Team} from "./components/team/team.tsx";
+import {Footer} from "./components/footer/footer.tsx";
+
+function App() {
+  return (
+    <>
+        <Navbar />
+        <div className={"logo-container"}>
+            <img src={"/assets/images/logo-full.png"} alt={"Modelec Logo"} id={"logo-full-home"}/>
+        </div>
+        <div className={"photo-container"}>
+            <img src={"/assets/images/coupe-2024.png"} alt={"Modelec Photo"} id={"photo-coupe-home"}/>
+        </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 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={"/assets/images/serge-pixel.png"} className={"coupe-title"}/>
+            <h1 className={"title-white"}>Nos Réseaux</h1>
+            <SocialNetworks networks={[{icon: "/assets/svg/github.svg", link: "https://www.github.com/modelec", name: "Modelec_ISEN"}, {icon: "/assets/svg/youtube.svg", link: "https://youtube.com/modelec", name: "Modelec_ISEN"}, {icon: "/assets/svg/insta.svg", link: "https://www.instagram.com/modelec_isen", name: "Modelec_ISEN"}]}/>
+            <FromLeftCardCarousel title={"Nos Partenaires"} carousel={["/assets/images/isen.png", "/assets/images/mercurycloud.png", "/assets/images/bde.png"]} 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>
+            <Carousel images={['/assets/images/robot1.jpg', '/assets/images/robot2.jpg', '/assets/images/robot3.jpg', '/assets/images/robot4.jpg', '/assets/images/robot5.jpg']} />
+            <h1>L'équipe</h1>
+            <Team team={[{name: "Jean Dupont", role: "Président", image: "/assets/images/team-member/maxime.png"}, {name: "Marie Dupont", role: "Trésorière", image: "/assets/images/team-member/maxime.png"}, {name: "Pierre Dupont", role: "Secrétaire", image: "/assets/images/team-member/maxime.png"}]}/>
+        </div>
+        <Footer />
+    </>
+  )
+}
+
+export default App
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/carousel/carousel.tsx
+++ b/src/components/carousel/carousel.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from "react";
+
+interface CarouselProps {
+    images: string[];
+}
+
+interface CarouselClickablesProps {
+    images: string[];
+    links: string[];
+}
+
+export const Carousel: React.FC<CarouselProps> = ({ images }) => {
+    const [currentImage, setCurrentImage] = React.useState(0);
+
+    const nextImage = () => {
+        setCurrentImage((currentImage + 1) % images.length);
+    }
+
+    const previousImage = () => {
+        setCurrentImage((currentImage - 1 + images.length) % images.length);
+    }
+
+    return (
+        <div className={"carousel"}>
+            <div className={"carousel-image"}>
+                <img src={images[currentImage]} alt={"carousel"}/>
+            </div>
+            <div className={"carousel-buttons"}>
+                <button onClick={previousImage}>Previous</button>
+                <button onClick={nextImage}>Next</button>
+            </div>
+        </div>
+    )
+}
+
+export const CarouselClickables: React.FC<CarouselClickablesProps> = ({ images, links }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [fade, setFade] = useState("fade-in");
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            handleNextImage();
+        }, 3000);
+
+        return () => clearInterval(interval);
+    }, [images.length]);
+
+    const handleNextImage = () => {
+        setFade("fade-out");
+        setTimeout(() => {
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+            setFade("fade-in");
+        }, 500);
+    };
+
+    const handlePreviousImage = () => {
+        setFade("fade-out");
+        setTimeout(() => {
+            setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
+            setFade("fade-in");
+        }, 500);
+    };
+
+    return (
+        <div className="carousel-container">
+            <div className="carousel-slide" style={{ transform: `translateX(-${currentIndex * 100}%)` }}>
+                {images.map((image, index) => (
+                    <a key={index} href={links[index]} target="_blank" rel="noopener noreferrer">
+                        <img
+                            src={image}
+                            alt={`Slide ${index}`}
+                            className={`carousel-image ${fade}`}
+                            style={{ display: index === currentIndex ? 'block' : 'none' }}
+                        />
+                    </a>
+                ))}
+            </div>
+            <div className="carousel-buttons">
+                <button onClick={handlePreviousImage}>Previous</button>
+                <button onClick={handleNextImage}>Next</button>
+            </div>
+        </div>
+    );
+};
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { SocialNetworkSmall } from "../socialnetwork/socialnetwork";
+
+export const Footer: React.FC = () => {
+    return (
+        <div className={"footer-container"}>
+            <footer className={"footer"}>
+                <div className={"footer-separator"}></div>
+                <div className={"footer-content"}>
+                    <div className={"footer-content-top"}>
+                        <img src={"/assets/images/logo-full.png"} alt={"Modelec"}/>
+                    </div>
+                    <div className={"footer-content-middle"}>
+                        <div className={"social-networks"}>
+                            <SocialNetworkSmall icon={"/assets/svg/github-dark.svg"} link={"https://www.github.com/modelec"} />
+                            <SocialNetworkSmall icon={"/assets/svg/youtube-dark.svg"} link={"https://youtube.com/modelec"} />
+                            <SocialNetworkSmall icon={"/assets/svg/insta-dark.svg"} link={"https://www.instagram.com/modelec_isen"} />
+                            <SocialNetworkSmall icon={"/assets/svg/mail.svg"} link={"mailto:contact@modelec.club"} />
+                        </div>
+                    </div>
+                    <div className={"footer-content-bottom"}>
+                        <nav className={"footer-nav"}>
+                            <a href={"/projets"}>Projets</a>
+                            <a href={"/materiels"}>Matériels</a>
+                            <a href={"/photos"}>Photos</a>
+                            <a href={"/partenaires"}>Partenaires</a>
+                            <a href={"/contact"}>Nous contacter</a>
+                        </nav>
+                    </div>
+                </div>
+            </footer>
+            <div className={"footer-credits"}>
+                <p>© 2024 Modelec ISEN Nantes. Site réalisé par AppenISEN.</p>
+            </div>
+        </div>
+    );
+}
--- a/src/components/middletext/middletext.tsx
+++ b/src/components/middletext/middletext.tsx
@@ -0,0 +1,15 @@
+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>
+    );
+};
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -0,0 +1,24 @@
+import { NavbarLink } from "../navbarlink/navbarLink";
+
+export const Navbar = () => {
+    return (
+        <>
+            <nav className={"navbar"}>
+                <div className={"navbar-container"}>
+                    <div className={"navbar-logo"}>
+                        <a href={"/"} className={"navbar-logo-img"}>
+                            <img src={"/assets/images/logo.png"} alt={"Modelec Logo"}/>
+                        </a>
+                    </div>
+                    <div className={"navbar-links"}>
+                        <NavbarLink text={"Projets"} link={"/projets"}/>
+                        <NavbarLink text={"Matériels"} link={"/materiels"}/>
+                        <NavbarLink text={"Photos"} link={"/photos"}/>
+                        <NavbarLink text={"Partenaires"} link={"/partenaires"}/>
+                        <NavbarLink text={"Nous contacter"} link={"/contact"}/>
+                    </div>
+                </div>
+            </nav>
+        </>
+    )
+}
--- a/src/components/navbarlink/navbarLink.tsx
+++ b/src/components/navbarlink/navbarLink.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+interface NavbarLinkProps {
+    text: string;
+    link: string;
+}
+
+export const NavbarLink: React.FC<NavbarLinkProps> = ({ text, link }) => {
+    return (
+        <a href={link} className={"navbar-link"}>
+            {text}
+        </a>
+    );
+};
--- a/src/components/sidecard/fromleftcard.tsx
+++ b/src/components/sidecard/fromleftcard.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { CarouselClickables } from "../carousel/carousel.tsx";
+
+interface FromLeftCardProps {
+    title: string;
+    content: string;
+    image: string;
+}
+
+interface FromLeftCardCarouselProps {
+    title: string;
+    carousel: string[];
+    links: string[];
+}
+
+export const FromLeftCard: React.FC<FromLeftCardProps> = ({ title, content, image }) => {
+    return (
+        <>
+            <div className={"from-left-card"}>
+                <div className={"from-left-card-content"}>
+                    <h2>{title}</h2>
+                    {content}
+                </div>
+                <div className={"from-left-card-image"}>
+                    <img src={image} alt={title}/>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export const FromLeftCardCarousel: React.FC<FromLeftCardCarouselProps> = ({ title, carousel, links }) => {
+    return (
+        <>
+            <div className={"from-left-card-carousel"}>
+                <div className={"from-left-card-content"}>
+                    <h2>{title}</h2>
+                    <CarouselClickables images={carousel} links={links} />
+                </div>
+            </div>
+        </>
+    )
+}
--- a/src/components/sidecard/fromrightcard.tsx
+++ b/src/components/sidecard/fromrightcard.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+interface FromRightCardProps {
+    title: string;
+    content: { __html: string };
+    image: string;
+    className?: string; // Ajout de la prop className
+}
+
+export const FromRightCard: React.FC<FromRightCardProps> = ({ title, content, image, className }) => {
+    return (
+        <div className={`from-right-card`}>
+            <div className="from-right-card-image">
+                <img src={image} alt={title} />
+            </div>
+            <div className="from-right-card-content">
+                <h2 className={`${className}`}>{title}</h2>
+                <div dangerouslySetInnerHTML={content}></div>
+            </div>
+        </div>
+    );
+};
--- a/src/components/socialnetwork/socialnetwork.tsx
+++ b/src/components/socialnetwork/socialnetwork.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+interface SocialNetworkProps {
+    icon: string;
+    link: string;
+    name: string;
+}
+
+interface SocialNetworkSmallProps {
+    icon: string;
+    link: string;
+}
+
+interface SocialNetworksProps {
+    networks: SocialNetworkProps[];
+}
+
+const SocialNetwork: React.FC<SocialNetworkProps> = ({ icon, link, name }) => {
+    return (
+        <a href={link} className={"social-network"}>
+            <img src={icon} alt={name}/>
+            <p className={"social-network-name"}>{name}</p>
+        </a>
+    );
+}
+
+export const SocialNetworkSmall: React.FC<SocialNetworkSmallProps> = ({ icon, link }) => {
+    return (
+        <a href={link} className={"social-network-small"}>
+            <img src={icon} alt={link} className={"social-network-small-icon"}/>
+        </a>
+    );
+}
+
+export const SocialNetworks: React.FC<SocialNetworksProps> = ({ networks }) => {
+    return (
+        <div className={"social-networks"}>
+            {networks.map((network, index) => <SocialNetwork key={index} {...network} />)}
+        </div>
+    );
+}
--- a/src/components/team/team.tsx
+++ b/src/components/team/team.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+interface TeamProps {
+    name: string;
+    role: string;
+    image: string;
+}
+
+interface TeamsProps {
+    team: TeamProps[];
+}
+
+const TeamMemberLeft: React.FC<TeamProps> = ({ name, role, image }) => {
+    return (
+        <div className={"team-member"}>
+           <div className={"team-member-text"}>
+               <h3>{role}</h3>
+                <h2>{name}</h2>
+           </div>
+              <div className={"team-member-image"}>
+                <img src={image} alt={name}/>
+              </div>
+        </div>
+    );
+}
+
+const TeamMemberRight: React.FC<TeamProps> = ({ name, role, image }) => {
+    return (
+        <div className={"team-member"}>
+            <div className={"team-member-image"}>
+                <img src={image} alt={name}/>
+            </div>
+            <div className={"team-member-text"}>
+                <h3>{role}</h3>
+                <h2>{name}</h2>
+            </div>
+        </div>
+    );
+}
+
+export const Team: React.FC<TeamsProps> = ({ team }) => {
+    return (
+        <div className={"team"}>
+            {team.map((member, index) => {
+                const isLeft = index % 2 === 0;
+                const offsetClass = isLeft ? "offset-left" : "offset-right";
+                return (
+                    <div key={index} className={`team-member-wrapper ${offsetClass}`}>
+                        {isLeft ? <TeamMemberLeft name={member.name} role={member.role} image={member.image}/> : <TeamMemberRight name={member.name} role={member.role} image={member.image}/>}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
--- a/src/index.css
+++ b/src/index.css
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/style.css
+++ b/style.css
@@ -1,278 +0,0 @@
-@media (min-width: 1024px) {
-    .card {
-        width: 25%;
-    }
-
-    .card-large-width{
-        width: 61.5%;
-    }
-
-    .card-very-large-width{
-        width: 100%;
-    }
-
-    .card-large-height{
-        width: 40%;
-    }
-}
-.card{
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    background-color: #e1e4ed;
-    width: 25%;
-    overflow: hidden;
-    height: 12.5%;
-}
-
-.card-large-height{
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    background-color: #e1e4ed;
-    width: 40%;
-    height: 12.5%;
-}
-
-.card-large-width{
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    background-color: #e1e4ed;
-    width: 61.5%;
-    height: 12.5%;
-}
-
-.card-very-large-width{
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    background-color: #e1e4ed;
-    width: 100%;
-    height: 12.5%;
-}
-
-.card-full-width{
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    background-color: #e1e4ed;
-    width: 100%;
-    height: 12.5%;
-}
-
-.card-contact{
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    background-color: #e1e4ed;
-    height: 12.5%;
-}
-
-#card-div{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 80vw;
-    margin: 0 auto;
-    flex-wrap: wrap;
-    flex-direction: row;
-}
-
-#header {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 10%;
-    border-bottom: black 1px solid;
-    flex-direction: column;
-}
-
-#header-links{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    flex-wrap: wrap;
-}
-
-.header-link{
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    background-color: #e1e4ed;
-    cursor: pointer;
-}
-
-#logo-modelec{
-    max-width: 12%;
-}
-
-#photo-equipe{
-    max-width: 100%;
-    max-height: 100%;
-}
-
-#photo-serge{
-    max-width: 100%;
-    max-height: 100%;
-}
-
-#footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 30px; /* Adjust as needed */
-    border-top: black 1px solid;
-}
-
-.card-subtext{
-    font-size: 0.9em;
-    color: #666;
-    text-align: center;
-}
-
-img{
-    border-radius: 20px;
-}
-
-body{
-    font-family: 'Roboto', sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f1f1fb;
-}
-
-.partner-logo{
-    max-width: 100px;
-    margin: 0 auto;
-}
-
-.slideshow-container{
-    max-width: 100%;
-    position: relative;
-    margin: 0 auto;
-}
-
-.video-slideshow-container{
-    max-width: 100%;
-    position: relative;
-    margin: 0 auto;
-}
-
-.slide{
-    display: none;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
-
-.vslide{
-    display: none;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
-
-.prev, .next, .vprev, .vnext{
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    width: 40px;
-    height: 40px;
-    margin-top: -20px;
-    padding: 0;
-    color: white;
-    font-weight: bold;
-    font-size: 18px;
-    transition: 0.6s ease;
-    border-radius: 50%;
-    user-select: none;
-    background-color: #666666;
-}
-
-.next, .vnext {
-    right: 0;
-}
-
-.prev:hover, .next:hover, .vprev:hover, .vnext:hover {
-    background-color: rgba(0,0,0,0.8);
-}
-
-.fade {
-    animation-name: fade;
-    animation-duration: 1.5s;
-}
-
-@keyframes fade {
-    from {opacity: .4}
-    to {opacity: 1}
-}
-
-.link{
-    text-decoration: none;
-    color: #666;
-}
-
-.photo-coupe{
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.video-coupe{
-    max-width: 100%;
-    max-height: 100%;
-}
-
-video{
-    border-radius: 20px;
-}
-
-.social-media {
-    border-radius: 20px;
-}
-
-.grid{
-    display: flex;
-    flex-direction: column;
-    width: 50%;
-}
-
-#Serge{
-    width: 93%;
-}
-
-@media (max-width: 1440px) {
-    .card {
-        width: 100%;
-    }
-
-    .card-large-height {
-        width: 100%;
-        height: 35%;
-    }
-
-    .card-large-width {
-        width: 100%;
-        height: 35%;
-    }
-}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>