From f20e8591cb644452bfb9558c5c871538f5c29d1f Mon Sep 17 00:00:00 2001
From: hardik <hardik@navigolabs.com>
Date: Sat, 2 Aug 2025 08:19:02 +0000
Subject: [PATCH] fix : added animation and responsiveness in portfolio segment

---
 src/components/ourwork/ourwork.tsx   | 264 ++++++++++++++++-------
 src/components/services/services.tsx | 304 +++++++++++++++++----------
 2 files changed, 375 insertions(+), 193 deletions(-)

diff --git a/src/components/ourwork/ourwork.tsx b/src/components/ourwork/ourwork.tsx
index d952b94..d275a68 100644
--- a/src/components/ourwork/ourwork.tsx
+++ b/src/components/ourwork/ourwork.tsx
@@ -6,109 +6,213 @@ import {
   Grid,
   Typography,
   Button,
+  Container,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
+import { motion } from "framer-motion";
 import portfolioImg from "../ourwork/Rectangle 6.png";
 
 const works = [
   {
-    title: "Project Name",
+    title: "Project Aurora",
     image: portfolioImg,
+    description: "Modern web design with seamless user experience",
   },
   {
-    title: "Project Name",
+    title: "Project Nexus",
     image: portfolioImg,
+    description: "Mobile application development for enterprise",
   },
   {
-    title: "Project Name",
+    title: "Project Horizon",
     image: portfolioImg,
+    description: "Brand identity and marketing campaign",
   },
 ];
 
 const OurWorks = () => {
-  return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8, px: 2 }}>
-      <Typography variant="h4" align="center" fontWeight="bold" gutterBottom>
-        Our Works
-      </Typography>
-      <Typography variant="subtitle1" align="center" mb={6}>
-        We’ve helped brands grow through bold strategy and creative execution.
-        Explore our recent success stories.
-      </Typography>
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
-      <Grid container spacing={4} justifyContent="center">
-        {works.map((work, index) => (
-          <Grid item xs={12} sm={6} md={4} key={index}>
-            <Card
-              sx={{
-                borderRadius: 3,
-                overflow: "hidden",
-                bgcolor: "#fff",
-                maxWidth: 320,
-                margin: "0 auto",
-              }}
-              elevation={3}
-            >
-              <CardContent>
-                <Typography
-                  variant="subtitle1"
-                  fontWeight="bold"
-                  color="Black"
-                  gutterBottom
-                >
-                  {work.title}
-                </Typography>
-              </CardContent>
-              <CardMedia
-                component="img"
-                image={work.image}
-                alt={work.title}
-                sx={{
-                  objectFit: "contain",
-                  height: 250,
-                  px: 2,
-                }}
-              />
-              <CardContent>
-                <Button
-                  variant="contained"
-                  fullWidth
+  return (
+    <Box
+      sx={{
+        backgroundColor: "#1d2733",
+        color: "#fff",
+        py: 8,
+        px: { xs: 2, sm: 4 },
+      }}
+    >
+      <Container maxWidth="md">
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+        >
+          <Typography
+            variant="h4"
+            align="center"
+            fontWeight={700}
+            gutterBottom
+            sx={{
+              mb: 2,
+              fontFamily: "'Montserrat', sans-serif",
+              letterSpacing: 0.5,
+            }}
+          >
+            Our Portfolio
+          </Typography>
+          <Typography
+            variant="subtitle1"
+            align="center"
+            mb={6}
+            sx={{
+              maxWidth: 600,
+              mx: "auto",
+              color: "rgba(255,255,255,0.8)",
+              fontFamily: "'Open Sans', sans-serif",
+            }}
+          >
+            We craft digital experiences that drive results
+          </Typography>
+        </motion.div>
+
+        <Grid container spacing={isMobile ? 3 : 4} justifyContent="center">
+          {works.map((work, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -5 }}
+              >
+                <Card
                   sx={{
-                    backgroundColor: "#000",
-                    color: "#00FFD1",
-                    fontWeight: "bold",
+                    borderRadius: 2,
+                    overflow: "hidden",
+                    bgcolor: "#fff",
+                    maxWidth: 320,
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                    transition: "all 0.3s ease",
                     "&:hover": {
-                      backgroundColor: "#333",
+                      boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
                     },
-                    borderRadius: "30px",
                   }}
                 >
-                  VIEW DEMO
-                </Button>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
+                  <Box
+                    sx={{
+                      height: 180,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      bgcolor: "#f8f9fa",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <CardMedia
+                      component="img"
+                      image={work.image}
+                      alt={work.title}
+                      sx={{
+                        width: "90%",
+                        height: "90%",
+                        objectFit: "contain",
+                        transition: "transform 0.3s ease",
+                        "&:hover": {
+                          transform: "scale(1.05)",
+                        },
+                      }}
+                    />
+                  </Box>
+                  <CardContent sx={{ flexGrow: 1, px: 3, py: 2 }}>
+                    <Typography
+                      variant="h6"
+                      fontWeight={600}
+                      color="#000"
+                      gutterBottom
+                      sx={{
+                        fontFamily: "'Montserrat', sans-serif",
+                        fontSize: "1.1rem",
+                      }}
+                    >
+                      {work.title}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      color="#000"
+                      sx={{
+                        mb: 2,
+                        fontFamily: "'Open Sans', sans-serif",
+                        fontSize: "0.875rem",
+                      }}
+                    >
+                      {work.description}
+                    </Typography>
+                  </CardContent>
+                  <CardContent sx={{ px: 3, py: 0, pb: 3 }}>
+                    <Button
+                      variant="outlined"
+                      fullWidth
+                      sx={{
+                        borderRadius: "20px",
+                        border: "1px solid #000",
+                        color: "#000",
+                        fontWeight: 600,
+                        py: 1,
+                        fontSize: "0.8rem",
+                        textTransform: "none",
+                        letterSpacing: 0.5,
+                        fontFamily: "'Montserrat', sans-serif",
+                        "&:hover": {
+                          backgroundColor: "#000",
+                          color: "#fff",
+                          border: "1px solid #000",
+                        },
+                        transition: "all 0.3s ease",
+                      }}
+                    >
+                      View Case Study
+                    </Button>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </Grid>
+          ))}
+        </Grid>
 
-      <Box mt={6} display="flex" justifyContent="center">
-        <Button
-          variant="outlined"
-          sx={{
-            borderRadius: "30px",
-            borderColor: "#00FFD1",
-            color: "#00FFD1",
-            px: 4,
-            py: 1.5,
-            fontWeight: "bold",
-            "&:hover": {
-              backgroundColor: "#00FFD1",
-              color: "#000",
-            },
-          }}
-        >
-          VIEW FULL PORTFOLIO →
-        </Button>
-      </Box>
+        <Box mt={6} display="flex" justifyContent="center">
+          <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
+            <Button
+              variant="outlined"
+              sx={{
+                borderRadius: "20px",
+                border: "1px solid #00FFD1",
+                color: "#00FFD1",
+                px: 4,
+                py: 1,
+                fontWeight: 600,
+                fontSize: "0.9rem",
+                textTransform: "none",
+                letterSpacing: 0.5,
+                fontFamily: "'Montserrat', sans-serif",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 255, 209, 0.1)",
+                  border: "1px solid #00FFD1",
+                },
+                transition: "all 0.3s ease",
+              }}
+            >
+              Explore Full Portfolio
+            </Button>
+          </motion.div>
+        </Box>
+      </Container>
     </Box>
   );
 };
diff --git a/src/components/services/services.tsx b/src/components/services/services.tsx
index 59282d6..76236f8 100644
--- a/src/components/services/services.tsx
+++ b/src/components/services/services.tsx
@@ -7,6 +7,7 @@ import {
   Container,
   useMediaQuery,
   useTheme,
+  Grid,
 } from "@mui/material";
 import { motion, AnimatePresence, PanInfo } from "framer-motion";
 import { useState } from "react";
@@ -35,18 +36,17 @@ const services = [
 
 const Services = () => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null);
 
   const handleDragEnd = (
     event: MouseEvent | TouchEvent | PointerEvent,
     info: PanInfo
   ) => {
     if (info.offset.x > 50) {
-      // Swiped right
       setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
     } else if (info.offset.x < -50) {
-      // Swiped left
       setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
     }
   };
@@ -58,23 +58,29 @@ const Services = () => {
           initial={{ opacity: 0, y: -20 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
-          viewport={{ once: true }}
+          viewport={{ once: true, margin: "-100px" }}
         >
           <Typography
             variant="h4"
             align="center"
             fontWeight="bold"
             gutterBottom
+            sx={{ mb: 2 }}
           >
-            Services
+            Our Services
           </Typography>
-          <Typography variant="subtitle1" align="center" mb={6}>
-            We offer design, development & marketing services
+          <Typography
+            variant="subtitle1"
+            align="center"
+            mb={6}
+            sx={{ maxWidth: 600, mx: "auto" }}
+          >
+            Professional solutions tailored to your needs
           </Typography>
         </motion.div>
 
         {isMobile ? (
-          <Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
+          <Box sx={{ position: "relative", height: 380 }}>
             <AnimatePresence initial={false}>
               <motion.div
                 key={currentIndex}
@@ -91,144 +97,216 @@ const Services = () => {
                   padding: "0 16px",
                 }}
               >
-                <Card
-                  sx={{
-                    borderRadius: 5,
-                    overflow: "hidden",
-                    height: "100%",
-                    bgcolor: "#fff",
-                    display: "flex",
-                    flexDirection: "column",
-                    maxWidth: 345,
-                    mx: "auto",
-                  }}
-                  elevation={3}
+                <motion.div
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
                 >
-                  <Box
+                  <Card
                     sx={{
-                      height: 200,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
+                      borderRadius: 2,
                       overflow: "hidden",
+                      height: "100%",
+                      bgcolor: "#fff",
+                      display: "flex",
+                      flexDirection: "column",
+                      maxWidth: 300,
+                      mx: "auto",
+                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                     }}
                   >
-                    <CardMedia
-                      component="img"
-                      image={services[currentIndex].image}
-                      alt={services[currentIndex].title}
+                    <Box
                       sx={{
-                        objectFit: "contain",
                         width: "100%",
-                        height: "100%",
+                        height: 150,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        bgcolor: "#f8f9fa",
+                        overflow: "hidden",
                       }}
-                    />
-                  </Box>
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography
-                      variant="h6"
-                      fontWeight="bold"
-                      gutterBottom
-                      color="black"
                     >
-                      {services[currentIndex].title}
-                    </Typography>
-                    <Typography variant="body2" color="black">
-                      {services[currentIndex].description}
-                    </Typography>
-                  </CardContent>
-                </Card>
+                      <motion.div
+                        animate={{
+                          scale: hoveredCard === currentIndex ? 1.05 : 1,
+                          y: hoveredCard === currentIndex ? -5 : 0,
+                        }}
+                        transition={{ duration: 0.3 }}
+                        style={{ width: "100%" }}
+                      >
+                        <CardMedia
+                          component="img"
+                          image={services[currentIndex].image}
+                          alt={services[currentIndex].title}
+                          sx={{
+                            width: "100%",
+                            height: "auto",
+                            objectFit: "cover",
+                          }}
+                        />
+                      </motion.div>
+                    </Box>
+                    <CardContent sx={{ flexGrow: 1 }}>
+                      <Typography
+                        variant="h6"
+                        fontWeight="bold"
+                        gutterBottom
+                        color="#000"
+                      >
+                        {services[currentIndex].title}
+                      </Typography>
+                      <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
+                        {services[currentIndex].description}
+                      </Typography>
+                      <motion.div
+                        whileHover={{ x: 5 }}
+                        transition={{ type: "spring", stiffness: 300 }}
+                      >
+                        <Typography
+                          variant="caption"
+                          color="primary"
+                          fontWeight="bold"
+                          sx={{ cursor: "pointer" }}
+                        >
+                          Learn more →
+                        </Typography>
+                      </motion.div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
               </motion.div>
             </AnimatePresence>
 
-            {/* Dots indicator */}
             <Box
               sx={{
                 display: "flex",
                 justifyContent: "center",
-                mt: 2,
-                gap: 1,
+                mt: 3,
+                gap: 1.5,
               }}
             >
               {services.map((_, index) => (
-                <Box
+                <motion.div
                   key={index}
                   onClick={() => setCurrentIndex(index)}
-                  sx={{
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
-                    cursor: "pointer",
-                  }}
-                />
+                  whileHover={{ scale: 1.2 }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  <Box
+                    sx={{
+                      width: 10,
+                      height: 10,
+                      borderRadius: "50%",
+                      bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
+                      cursor: "pointer",
+                    }}
+                  />
+                </motion.div>
               ))}
             </Box>
           </Box>
         ) : (
-          <Box
-            sx={{
-              display: "grid",
-              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
-              gap: 4,
-            }}
-          >
+          <Grid container spacing={3} justifyContent="center">
             {services.map((service, index) => (
-              <motion.div
+              <Grid
+                item
+                xs={12}
+                sm={6}
+                md={4}
                 key={index}
-                whileHover={{ y: -5 }}
-                transition={{ duration: 0.3 }}
+                sx={{ display: "flex", justifyContent: "center" }}
               >
-                <Card
-                  sx={{
-                    borderRadius: 5,
-                    overflow: "hidden",
-                    height: "100%",
-                    bgcolor: "#fff",
-                    display: "flex",
-                    flexDirection: "column",
-                  }}
-                  elevation={3}
+                <motion.div
+                  initial={{ opacity: 0, y: 50 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  viewport={{ once: true, margin: "-100px" }}
+                  onHoverStart={() => setHoveredCard(index)}
+                  onHoverEnd={() => setHoveredCard(null)}
+                  style={{ width: "100%", maxWidth: 280 }}
                 >
-                  <Box
-                    sx={{
-                      height: 200,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      overflow: "hidden",
+                  <motion.div
+                    whileHover={{
+                      y: -8,
+                      boxShadow: "0 15px 30px -5px rgba(0, 0, 0, 0.2)",
                     }}
+                    transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                    style={{ height: "100%" }}
                   >
-                    <motion.div whileHover={{ scale: 1.05 }}>
-                      <CardMedia
-                        component="img"
-                        image={service.image}
-                        alt={service.title}
-                        sx={{
-                          objectFit: "contain",
-                          width: "100%",
-                          height: "100%",
-                        }}
-                      />
-                    </motion.div>
-                  </Box>
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography
-                      variant="h6"
-                      fontWeight="bold"
-                      gutterBottom
-                      color="black"
+                    <Card
+                      sx={{
+                        borderRadius: 2,
+                        overflow: "hidden",
+                        height: "100%",
+                        bgcolor: "#fff",
+                        display: "flex",
+                        flexDirection: "column",
+                        boxShadow: "0 5px 15px rgba(0, 0, 0, 0.1)",
+                        width: "100%",
+                      }}
                     >
-                      {service.title}
-                    </Typography>
-                    <Typography variant="body2" color="black">
-                      {service.description}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </motion.div>
+                      <Box
+                        sx={{
+                          width: "100%",
+                          height: 160,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          bgcolor: "#f8f9fa",
+                          overflow: "hidden",
+                        }}
+                      >
+                        <motion.div
+                          animate={{
+                            scale: hoveredCard === index ? 1.1 : 1,
+                            y: hoveredCard === index ? -5 : 0,
+                          }}
+                          transition={{ duration: 0.3 }}
+                          style={{ width: "100%" }}
+                        >
+                          <CardMedia
+                            component="img"
+                            image={service.image}
+                            alt={service.title}
+                            sx={{
+                              width: "100%",
+                              height: "auto",
+                              objectFit: "cover",
+                            }}
+                          />
+                        </motion.div>
+                      </Box>
+                      <CardContent sx={{ flexGrow: 1 }}>
+                        <Typography
+                          variant="h6"
+                          fontWeight="bold"
+                          gutterBottom
+                          color="#000"
+                        >
+                          {service.title}
+                        </Typography>
+                        <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
+                          {service.description}
+                        </Typography>
+                        <motion.div
+                          whileHover={{ x: 5 }}
+                          transition={{ type: "spring", stiffness: 300 }}
+                        >
+                          <Typography
+                            variant="caption"
+                            color="primary"
+                            fontWeight="bold"
+                            sx={{ cursor: "pointer" }}
+                          >
+                            Learn more →
+                          </Typography>
+                        </motion.div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                </motion.div>
+              </Grid>
             ))}
-          </Box>
+          </Grid>
         )}
       </Container>
     </Box>