From dbee486a624946f4f7b84790303bdf881e1b04ba Mon Sep 17 00:00:00 2001
From: sebvtl728 <sebavtl.arinfo@gmail.com>
Date: Thu, 2 Jan 2025 23:18:30 +0100
Subject: [PATCH] update UX card

---
 .../src/components/ServicePageTemplate.jsx    | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ServicePageTemplate.jsx b/frontend/src/components/ServicePageTemplate.jsx
index e6c93c5..8c66bd7 100644
--- a/frontend/src/components/ServicePageTemplate.jsx
+++ b/frontend/src/components/ServicePageTemplate.jsx
@@ -123,8 +123,18 @@ const ServicePageTemplate = ({
                   cursor: "pointer",
                   transition: "transform 0.3s ease, box-shadow 0.3s ease",
                   "&:hover": {
-                    transform: "scale(1.05)",
-                    boxShadow: 5,
+                    transform: {
+                      xs: "none", // Pas d'hover sur mobile
+                      md: "scale(1.05)", // Hover sur desktop uniquement
+                    },
+                    boxShadow: {
+                      xs: 2, // Pas d'effet de hover sur mobile
+                      md: 5, // Augmentation de l'ombre sur desktop
+                    },
+                  },
+                  "&:active": {
+                    transform: "scale(0.98)", // Effet de clic pour le tactile
+                    boxShadow: 3,
                   },
                 }}
                 onClick={() => handleCardClick(feature)}
@@ -132,11 +142,17 @@ const ServicePageTemplate = ({
                 <CardContent>
                   <Typography
                     variant="h3"
-                    sx={{ fontWeight: "bold", mb: 2, fontSize: 26 }}
+                    sx={{
+                      fontWeight: "bold",
+                      mb: 2,
+                      fontSize: 26,
+                    }}
                   >
                     {feature.title}
                   </Typography>
-                  <Typography variant="body2">{feature.description}</Typography>
+                  <Typography variant="body2" sx={{ color: "#555" }}>
+                    {feature.description}
+                  </Typography>
                 </CardContent>
               </Card>
             </Grid>