maj template page and pages

frontend/src/components/ServicePageTemplate.jsx

@@ -59,6 +59,7 @@ const ServicePageTemplate = ({
       {/* Section Hero */}
       <Box
         sx={{
+          mt:5,
           backgroundImage: `url(${image})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
@@ -67,12 +68,17 @@ const ServicePageTemplate = ({
           alignItems: "center",
           justifyContent: "center",
           textAlign: "center",
-          color: "white",
+          color: "black",
           padding: "20px",
         }}
       >
-        <Box sx={{ maxWidth: "800px" }}>
-          <Typography variant="h1" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "3rem", lg: "4rem" } }}>
+        <Box sx={{ 
+          maxWidth: "800px",
+          backgroundColor:"rgba(255, 255, 255, 0.39)",
+          p:5,
+          borderRadius:5
+          }}>
+          <Typography variant="h1" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "3rem", lg: "3rem",whiteSpace: "pre-line" } }}>
             {title}
           </Typography>
           <Typography variant="body1" sx={{ mb: 4 }}>
@@ -121,7 +127,7 @@ const ServicePageTemplate = ({
                 }}
               >
                 <CardContent>
-                  <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2, fontSize: 26 }}>
+                  <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2, fontSize: 26,whiteSpace: "pre-line" }}>
                     {feature.title}
                   </Typography>
                   <Typography variant="body2" sx={{ color: "#555" }}>
@@ -152,6 +158,73 @@ const ServicePageTemplate = ({
           </Box>
         </Fade>
       </Modal>
+    {/* Carousel Section */}
+    {carouselItems && carouselItems.length > 0 && (
+        <Box
+          sx={{
+            padding: "40px 20px",
+            textAlign: "center",
+            backgroundColor: "#f9f9f9",
+          }}
+        >
+          <Typography variant="h2" 
+            sx={{ 
+              marginBottom: 4,
+              fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
+ 
+            }}
+          >
+            Découvrez nos réalisations
+          </Typography>
+
+          <Swiper
+            modules={[Navigation, Pagination, Autoplay]}
+            spaceBetween={20}
+            slidesPerView={1}
+            navigation
+            pagination={{ clickable: true }}
+            autoplay={{ delay: 3000 }}
+            loop
+          >
+            {carouselItems.map((item, index) => (
+              <SwiperSlide key={index}>
+                <Card
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "20px",
+                    boxShadow: 3,
+                  }}
+                >
+                  <img
+                    src={item.image}
+                    alt={item.title}
+                    style={{
+                      width: "40%",
+                      height: "auto",
+                      objectFit: "cover",
+                      borderRadius: "8px",
+                      marginRight: "20px",
+                    }}
+                  />
+                  <CardContent>
+                    <Typography variant="h3" 
+                      sx={{ 
+                        fontWeight: "bold",
+                        fontSize: { xs: '1.2rem', md: '2rem', lg: '2.5rem' }, // Responsive 
+                      }}
+                    >
+                      {item.title}
+                    </Typography>
+                    <Typography variant="body2">{item.description}</Typography>
+                  </CardContent>
+                </Card>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </Box>
+      )}
+
     </Box>
   );
 };