From b24600acd23f2f1aaf0178f57b7ad71435e8ce09 Mon Sep 17 00:00:00 2001
From: sebvtl728 <sebavtl.arinfo@gmail.com>
Date: Mon, 3 Feb 2025 12:26:49 +0100
Subject: [PATCH] Maj des Pages services

---
 frontend/src/components/Header.jsx            | 29 +++++++++
 frontend/src/components/Pages/ServiceDeux.jsx | 41 ++++++-------
 .../src/components/Pages/ServiceQuatre.jsx    | 59 +++++++++++++++++++
 .../src/components/Pages/ServiceTrois.jsx     |  2 +-
 frontend/src/components/Pages/ServiceUn.jsx   | 10 ++--
 frontend/src/main.jsx                         |  3 +
 6 files changed, 114 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/components/Pages/ServiceQuatre.jsx

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 1b9d091..401e01f 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -169,6 +169,7 @@ const Header = () => {
               <WorkIcon sx={{ marginRight: 1 }} />
               Prestation maitrise oeuvre
             </MenuItem>
+            
             <MenuItem
               component={Link}
               to="/services/structure-beton-charpente-metallique-bois"
@@ -177,6 +178,7 @@ const Header = () => {
               <WorkIcon sx={{ marginRight: 1 }} />
               Structure béton | charpente métallique / bois
             </MenuItem>
+
             <MenuItem
               component={Link}
               to="/services/electricite"
@@ -185,6 +187,16 @@ const Header = () => {
               <WorkIcon sx={{ marginRight: 1}} />
               Électricité
             </MenuItem>
+
+            <MenuItem
+              component={Link}
+              to="/services/ssi"
+              onClick={handleMenuClose}
+            >
+              <WorkIcon sx={{ marginRight: 1}} />
+              Systeme Sécurité Incendie (SSI)
+            </MenuItem>
+
           </Menu>
 
           <Button
@@ -360,6 +372,7 @@ const Header = () => {
                 <WorkIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Structure beton..." />
               </ListItem>
+
               <ListItem
                 button
                 component={Link}
@@ -371,6 +384,19 @@ const Header = () => {
                 <WorkIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Electricité..." />
               </ListItem>
+
+              <ListItem
+                button
+                component={Link}
+                to="/services/ssi"
+                selected={location.pathname.includes(
+                  "/services/ssi"
+                )}
+              >
+                <WorkIcon sx={{ marginRight: 0.5 }} />
+                <ListItemText primary="SSI..." />
+              </ListItem>
+
               <ListItem
                 button
                 component={Link}
@@ -380,6 +406,7 @@ const Header = () => {
                 <ArticleIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Réalisations" />
               </ListItem>
+
               <ListItem
                 button
                 component={Link}
@@ -389,6 +416,7 @@ const Header = () => {
                 <InfoIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="À propos" />
               </ListItem>
+
               <ListItem
                 button
                 component={Link}
@@ -398,6 +426,7 @@ const Header = () => {
                 <ContactMailIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Contact" />
               </ListItem>
+
             </List>
           </Box>
         </Drawer>
diff --git a/frontend/src/components/Pages/ServiceDeux.jsx b/frontend/src/components/Pages/ServiceDeux.jsx
index 70848d2..9cc6b56 100644
--- a/frontend/src/components/Pages/ServiceDeux.jsx
+++ b/frontend/src/components/Pages/ServiceDeux.jsx
@@ -7,8 +7,8 @@ const ServiceDeux = () => {
     title: "Structure béton charpente métallique & bois",
     subtitle: "Dominez l’intelligence artificielle.",
 
-    image: "https://picsum.photos/id/239/1920/1080.webp",
-    ctaText: "Découvrir la formation IA",
+    image: "https://picsum.photos/id/240/1920/1080.webp",
+    ctaText: "En savoir plus !",
     ctaLink: "/contact",
     
     // section 1
@@ -16,48 +16,41 @@ const ServiceDeux = () => {
     description: "Le béton est le matériau de construction le plus répandu dans le monde. \nIl est présent dans tous les secteurs de la construction.\n\n Longtemps associé à l’image négative des grands ensembles, gris et vieillissants, le béton a réalisé des progrès spectaculaires ces dernières années, tant au niveau de ses performances techniques que des aspects esthétiques. \n\nIl commence même à entrer dans les foyers comme produit de décoration !\nUne charpente est un assemblage de pièces de bois et/ou de métal, servant à soutenir ou couvrir des constructions et faisant partie de la toiture.",
     
     // section 2
-    desirTitle: "Ce que nous offrons",// ✅ Modifiable individuellement
+    desirTitle: "Titre",// ✅ Modifiable individuellement
     
     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.",
+        title: "Titre",
+        description: "Description",
+        modalText:"Description modal.",
         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.",
+        title: "Titre",
+        description: "Description",
+        modalText: "Description modal.",
         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.",
+        title: "Titre",
+        description: "Description",
+        modalText: "Description modal.",
         modalImage: "https://picsum.photos/id/202/800/400.webp",
       },
     ],
 
     carouselItems: [
       {
-        title: "Site E-commerce",
+        title: "Structure beton",
         description: "Un projet e-commerce performant et moderne.",
-        image: "https://picsum.photos/id/453/800/400.webp",
+        image: "https://picsum.photos/id/522/800/400.webp",
       },
       {
-        title: "Portfolio Personnel",
+        title: "Structure bois",
         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",
+        image: "https://picsum.photos/id/521/800/400.webp",
       },
+
     ],
   };
 
diff --git a/frontend/src/components/Pages/ServiceQuatre.jsx b/frontend/src/components/Pages/ServiceQuatre.jsx
new file mode 100644
index 0000000..39a3aec
--- /dev/null
+++ b/frontend/src/components/Pages/ServiceQuatre.jsx
@@ -0,0 +1,59 @@
+import React from "react";
+import ServicePageTemplate from "../ServicePageTemplate";
+
+const ServiceUn = () => {
+  const serviceDetails = {
+    // Hero
+    title: 'Titre héros', // ✅ Modifiable individuellement
+    subtitle: 'Description, héros', // ✅ Modifiable individuellement
+
+    image: "https://picsum.photos/id/1021/1920/1080.webp",
+    ctaText: "En savoir plus",
+    ctaLink: "/contact",
+
+    // section 1
+    interestTitle: 'Titre interet', // ✅ Modifiable individuellement
+    description: 'Description interet', // ✅ Modifiable individuellement
+
+    // section 2
+    desirTitle: 'Titre', // ✅ Modifiable individuellement
+
+    features: [
+      {
+        title: "Titre",
+        description: "Description.",
+        modalText:"Description Modal.",
+        modalImage: "https://picsum.photos/id/300/800/400.webp",
+      },
+      {
+        title: "Titre",
+        description: "Description.",
+        modalText:"Description Modal.",
+        modalImage: "https://picsum.photos/id/301/800/400.webp",
+      },
+      {
+        title: "Titre",
+        description: "Description.",
+        modalText:"Description Modal.",
+        modalImage: "https://picsum.photos/id/302/800/400.webp",
+      },
+    ],
+
+    carouselItems: [
+      {
+        title: "Portfolio Modern",
+        description: "Montrez vos compétences avec un portfolio unique.",
+        image: "https://picsum.photos/id/305/800/400.webp",
+      },
+      {
+        title: "Blog SEO",
+        description: "Optimisez vos articles pour le référencement.",
+        image: "https://picsum.photos/id/306/800/400.webp",
+      },
+    ],
+  };
+
+  return <ServicePageTemplate {...serviceDetails} />;
+};
+
+export default ServiceUn;
diff --git a/frontend/src/components/Pages/ServiceTrois.jsx b/frontend/src/components/Pages/ServiceTrois.jsx
index 52c5f45..8b5904e 100644
--- a/frontend/src/components/Pages/ServiceTrois.jsx
+++ b/frontend/src/components/Pages/ServiceTrois.jsx
@@ -7,7 +7,7 @@ const ServiceTrois = () => {
     title: "Électricité", // ✅ Modifiable individuellement
     subtitle: "IN3 est un bureau d’études technique spécialisé dans l’ingénierie électrique du bâtiment.",
 
-    image: "https://picsum.photos/id/1018/1920/1080.webp",
+    image: "https://picsum.photos/id/1019/1920/1080.webp",
     ctaText: "En savoir plus",
     ctaLink: "/contact",
 
diff --git a/frontend/src/components/Pages/ServiceUn.jsx b/frontend/src/components/Pages/ServiceUn.jsx
index cdbfd8a..5f0562c 100644
--- a/frontend/src/components/Pages/ServiceUn.jsx
+++ b/frontend/src/components/Pages/ServiceUn.jsx
@@ -9,7 +9,7 @@ const ServiceUn = () => {
     subtitle:
       "Notre bureau d’études in3 au Mans conçoit des bâtiments à construire ou à rénover selon le programme fourni par le maître de l’ouvrage, de diriger l’exécution des marchés de travaux, de proposer le règlement des travaux et leur réception. Nos missions sont les suivantes :", // ✅ Modifiable individuellement
 
-    image: "https://picsum.photos/id/1018/1920/1080.webp",
+    image: "https://picsum.photos/id/1026/1920/1080.webp",
     ctaText: "En savoir plus",
     ctaLink: "/contact",
 
@@ -48,14 +48,14 @@ const ServiceUn = () => {
 
     carouselItems: [
       {
-        title: "Portfolio Modern",
+        title: "préstation maitrise d'oeuvre",
         description: "Montrez vos compétences avec un portfolio unique.",
-        image: "https://picsum.photos/id/305/800/400.webp",
+        image: "https://picsum.photos/id/307/800/400.webp", 
       },
       {
-        title: "Blog SEO",
+        title: "Bureau d'études maitrise-oeuvre",
         description: "Optimisez vos articles pour le référencement.",
-        image: "https://picsum.photos/id/306/800/400.webp",
+        image: "https://picsum.photos/id/308/800/400.webp", 
       },
     ],
     // ✅ Métadonnées SEO
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index b0e06d2..9afe6dd 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -28,6 +28,7 @@ const Dashboard = lazy(() => import("./components/Pages/Dashboard"));
 import ServiceUn from "./components/Pages/ServiceUn.jsx";
 import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
 import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
+import ServiceQuatre from "./components/Pages/ServiceQuatre.jsx";
 
 // Import des composants globaux
 import Header from "./components/Header";
@@ -46,10 +47,12 @@ function YourApp() {
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
           <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
+         
           {/* Routes pour les services */}
           <Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
           <Route path="/services/structure-beton-charpente-metallique-bois" element={<ServiceDeux />} />
           <Route path="/services/electricite" element={<ServiceTrois />} />
+          <Route path="/services/ssi" element={<ServiceQuatre />} />
           <Route path="/admin/create-post" element={<CreatePost />} />
           <Route path="/post/:slug" element={<PostDetails />} />
           <Route path="/admin/posts" element={<PostList />} />