From a97011c484b12d67fe95e4de4ea917577e43095c Mon Sep 17 00:00:00 2001
From: sebvtl728 <sebavtl.arinfo@gmail.com>
Date: Wed, 8 Jan 2025 21:27:24 +0100
Subject: [PATCH] Templates des services

---
 frontend/src/components/Header.jsx            | 127 +++++++-----------
 .../{FormationIA.jsx => ServiceDeux.jsx}      |   4 +-
 .../src/components/Pages/ServiceTrois.jsx     |  55 ++++++++
 .../Pages/{FormationWeb.jsx => ServiceUn.jsx} |   6 +-
 frontend/src/main.jsx                         |  10 +-
 5 files changed, 118 insertions(+), 84 deletions(-)
 rename frontend/src/components/Pages/{FormationIA.jsx => ServiceDeux.jsx} (97%)
 create mode 100644 frontend/src/components/Pages/ServiceTrois.jsx
 rename frontend/src/components/Pages/{FormationWeb.jsx => ServiceUn.jsx} (95%)

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index b7d727e..fae4874 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -100,35 +100,16 @@ const Header = () => {
           color="inherit"
           aria-label="menu"
           onClick={toggleDrawer(true)}
-          sx={{ 
+          sx={{
             display: { xs: "block", md: "none" },
-            color: " #ffffff"
-           }}
+            color: " #ffffff",
+          }}
         >
           <MenuIcon />
         </IconButton>
 
-        {/* Logo as Home Link */}
-        {/* <Typography
-          variant="h6"
-          component={Link}
-          to="/"
-          sx={{
-            flexGrow: 1,
-            textAlign: { xs: "center", md: "left" },
-            fontWeight: "bold",
-            textDecoration: "none",
-            color: "white",
-            "&:hover": {
-              color: "#00bcd4",
-            },
-          }}
-        >
-          Mon Site React
-        </Typography> */}
-
-                {/* Logo */}
-                <Box
+        {/* Logo */}
+        <Box
           component={Link}
           to="/"
           sx={{
@@ -152,7 +133,6 @@ const Header = () => {
 
         {/* Navigation Links */}
         <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
-
           {/* Services Dropdown */}
           <Button
             color="inherit"
@@ -163,11 +143,11 @@ const Header = () => {
               fontWeight: location.pathname.includes("/services")
                 ? "bold"
                 : "normal",
-                textDecoration: location.pathname.includes("/services")
+              textDecoration: location.pathname.includes("/services")
                 ? "underline"
                 : "none",
-                ...commonButtonStyles,
-              }}
+              ...commonButtonStyles,
+            }}
           >
             Services
           </Button>
@@ -182,11 +162,11 @@ const Header = () => {
           >
             <MenuItem
               component={Link}
-              to="/services/formation-web"
+              to="/services/prestation-maitrise-oeuvre"
               onClick={handleMenuClose}
             >
               <WorkIcon sx={{ marginRight: 1 }} />
-              Formation Web
+              Prestation maitrise oeuvre
             </MenuItem>
             <MenuItem
               component={Link}
@@ -206,19 +186,19 @@ const Header = () => {
             </MenuItem>
           </Menu>
 
-            <Button
-              component={Link}
-              to="/posts"
-              color="inherit"
-              sx={{
-                fontWeight: location.pathname === "/posts" ? "bold" : "normal",
-                textDecoration:
-                  location.pathname === "/posts" ? "underline" : "none",
-                ...commonButtonStyles,
-              }}
-            >
-              Réalisations
-            </Button>
+          <Button
+            component={Link}
+            to="/posts"
+            color="inherit"
+            sx={{
+              fontWeight: location.pathname === "/posts" ? "bold" : "normal",
+              textDecoration:
+                location.pathname === "/posts" ? "underline" : "none",
+              ...commonButtonStyles,
+            }}
+          >
+            Réalisations
+          </Button>
           <Button
             component={Link}
             to="/about"
@@ -298,8 +278,6 @@ const Header = () => {
           </IconButton>
         </Box>
 
-
-
         {/* Drawer for mobile */}
         <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
           <Box
@@ -314,24 +292,20 @@ const Header = () => {
             onKeyDown={toggleDrawer(false)}
           >
             <Box
-          
-          sx={{
-            display:"block",
-            textAlign: "center",
-            
-            
-          
-          }}
-        >
-          <img
-            src={LogoM}
-            alt="Logo"
-            style={{
-              height: "50px",
-              width: "auto",
-            }}
-          />
-        </Box>
+              sx={{
+                display: "block",
+                textAlign: "center",
+              }}
+            >
+              <img
+                src={LogoM}
+                alt="Logo"
+                style={{
+                  height: "50px",
+                  width: "auto",
+                }}
+              />
+            </Box>
             <Typography
               variant="h6"
               sx={{ textAlign: "center", marginBottom: 2 }}
@@ -346,8 +320,9 @@ const Header = () => {
                 to="/"
                 selected={location.pathname === "/"}
               >
-                <HomeIcon sx={{ 
-                    marginRight: 1, 
+                <HomeIcon
+                  sx={{
+                    marginRight: 0.5,
                   }}
                 />
                 <ListItemText primary="Accueil" />
@@ -355,11 +330,11 @@ const Header = () => {
               <ListItem
                 button
                 component={Link}
-                to="/services/formation-web"
-                selected={location.pathname.includes("/services/formation-web")}
+                to="/services/prestation-maitrise-oeuvre"
+                selected={location.pathname.includes("/services/prestation-maitrise-oeuvre")}
               >
-                <WorkIcon sx={{ marginRight: 1 }} />
-                <ListItemText primary="Formation Web" />
+                <WorkIcon sx={{ marginRight: 0.5 }} />
+                <ListItemText primary="Prestation maitrise oeuvre" />
               </ListItem>
               <ListItem
                 button
@@ -367,16 +342,18 @@ const Header = () => {
                 to="/services/formation-ia"
                 selected={location.pathname.includes("/services/formation-ia")}
               >
-                <WorkIcon sx={{ marginRight: 1 }} />
+                <WorkIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Formation IA" />
               </ListItem>
               <ListItem
                 button
                 component={Link}
                 to="/services/formation-video"
-                selected={location.pathname.includes("/services/formation-video")}
+                selected={location.pathname.includes(
+                  "/services/formation-video"
+                )}
               >
-                <WorkIcon sx={{ marginRight: 1 }} />
+                <WorkIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Formation Video" />
               </ListItem>
               <ListItem
@@ -385,7 +362,7 @@ const Header = () => {
                 to="/posts"
                 selected={location.pathname === "/posts"}
               >
-                <ArticleIcon sx={{ marginRight: 1 }} />
+                <ArticleIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Réalisations" />
               </ListItem>
               <ListItem
@@ -394,7 +371,7 @@ const Header = () => {
                 to="/about"
                 selected={location.pathname === "/about"}
               >
-                <InfoIcon sx={{ marginRight: 1 }} />
+                <InfoIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="À propos" />
               </ListItem>
               <ListItem
@@ -403,7 +380,7 @@ const Header = () => {
                 to="/contact"
                 selected={location.pathname === "/contact"}
               >
-                <ContactMailIcon sx={{ marginRight: 1 }} />
+                <ContactMailIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Contact" />
               </ListItem>
             </List>
diff --git a/frontend/src/components/Pages/FormationIA.jsx b/frontend/src/components/Pages/ServiceDeux.jsx
similarity index 97%
rename from frontend/src/components/Pages/FormationIA.jsx
rename to frontend/src/components/Pages/ServiceDeux.jsx
index 6d697ee..9368744 100644
--- a/frontend/src/components/Pages/FormationIA.jsx
+++ b/frontend/src/components/Pages/ServiceDeux.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ServicePageTemplate from '../ServicePageTemplate';
 
-const FormationIA = () => {
+const ServiceDeux = () => {
   const serviceDetails = {
     title: 'Formation IA',
     subtitle: 'Dominez l’intelligence artificielle.',
@@ -52,4 +52,4 @@ const FormationIA = () => {
   return <ServicePageTemplate {...serviceDetails} />;
 };
 
-export default FormationIA;
\ No newline at end of file
+export default ServiceDeux;
\ No newline at end of file
diff --git a/frontend/src/components/Pages/ServiceTrois.jsx b/frontend/src/components/Pages/ServiceTrois.jsx
new file mode 100644
index 0000000..1e3d845
--- /dev/null
+++ b/frontend/src/components/Pages/ServiceTrois.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import ServicePageTemplate from '../ServicePageTemplate';
+
+const ServiceTrois = () => {
+  const serviceDetails = {
+    title: 'Formation IA',
+    subtitle: 'Dominez l’intelligence artificielle.',
+    description:
+      'Plongez dans le futur ! Notre formation IA vous prépare aux outils modernes d’intelligence artificielle comme Python, TensorFlow et OpenAI API. Apprenez à créer des modèles IA performants.',
+    features: [
+      {
+        title: 'Fondamentaux de l’IA',
+        description: 'Concepts, algorithmes et applications.',
+        modalText: 'Découvrez les bases de l’IA, des algorithmes aux applications concrètes dans divers domaines.',
+        modalImage: 'https://picsum.photos/id/200/800/400.webp',
+      },
+      {
+        title: 'Python pour l’IA',
+        description: 'Bibliothèques populaires : TensorFlow, PyTorch.',
+        modalText: 'Apprenez à utiliser Python et ses bibliothèques pour concevoir des modèles d’IA puissants.',
+        modalImage: 'https://picsum.photos/id/201/800/400.webp',
+      },
+      {
+        title: 'Projets Pratiques',
+        description: 'Créez vos propres modèles IA.',
+        modalText: 'Mettez vos compétences en pratique en développant des projets IA réels.',
+        modalImage: 'https://picsum.photos/id/202/800/400.webp',
+      },
+    ],
+    image: 'https://picsum.photos/id/239/1920/1080.webp',
+    ctaText: 'Découvrir la formation IA',
+    ctaLink: '/contact',
+    carouselItems: [
+      {
+        title: 'Site E-commerce',
+        description: 'Un projet e-commerce performant et moderne.',
+        image: 'https://picsum.photos/id/453/800/400.webp',
+      },
+      {
+        title: 'Portfolio Personnel',
+        description: 'Montrez vos compétences avec un portfolio sur mesure.',
+        image: 'https://picsum.photos/id/454/800/400.webp',
+      },
+      {
+        title: 'Blog Dynamique',
+        description: 'Créez un blog interactif et optimisé pour le SEO.',
+        image: 'https://picsum.photos/id/455/800/400.webp',
+      },
+    ],
+  };
+
+  return <ServicePageTemplate {...serviceDetails} />;
+};
+
+export default ServiceTrois;
\ No newline at end of file
diff --git a/frontend/src/components/Pages/FormationWeb.jsx b/frontend/src/components/Pages/ServiceUn.jsx
similarity index 95%
rename from frontend/src/components/Pages/FormationWeb.jsx
rename to frontend/src/components/Pages/ServiceUn.jsx
index f9388ea..67de73a 100644
--- a/frontend/src/components/Pages/FormationWeb.jsx
+++ b/frontend/src/components/Pages/ServiceUn.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ServicePageTemplate from '../ServicePageTemplate';
 
-const FormationWeb = () => {
+const ServiceUn = () => {
   const serviceDetails = {
-    title: 'Formation Web',
+    title: 'Prestation-maitrise-oeuvre',
     subtitle: 'Apprenez à maîtriser les technologies du web.',
     description:
       'Notre formation web vous permet de développer vos compétences en développement frontend, backend et design. Rejoignez notre programme pour apprendre HTML, CSS, JavaScript et bien plus.',
@@ -47,4 +47,4 @@ const FormationWeb = () => {
   return <ServicePageTemplate {...serviceDetails} />;
 };
 
-export default FormationWeb;
\ No newline at end of file
+export default ServiceUn;
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 96ff5df..4befa79 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -16,8 +16,9 @@ import Search from "./components/Pages/Search"; // Nouveau composant pour la rec
 import Header from "./components/Header";
 
 // Import des services
-import FormationWeb from "./components/Pages/FormationWeb";
-import FormationIA from "./components/Pages/FormationIA";
+import ServiceUn from "./components/Pages/ServiceUn.jsx";
+import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
+import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
 
 function App() {
   return (
@@ -40,8 +41,9 @@ ReactDOM.createRoot(document.getElementById("root")).render(
             <Route path="/contact" element={<Contact />} />
             <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
             {/* Routes pour les services */}
-            <Route path="/services/formation-web" element={<FormationWeb />} />
-            <Route path="/services/formation-ia" element={<FormationIA />} />
+            <Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
+            <Route path="/services/formation-ia" element={<ServiceDeux />} />
+            <Route path="/services/formation-video" element={<ServiceTrois />} />
           </Routes>
         </Router>
       </HelmetProvider>