package.json

@@ -58,6 +58,5 @@
   "devDependencies": {
     "@types/react-icons": "^2.2.7",
     "@types/react-slick": "^0.23.13"
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }

src/components/aboutus/aboutus.tsx

@@ -1,200 +1,36 @@
 import { Box, Typography, Button } from "@mui/material";
 import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
-import { motion, Variants, Transition } from "framer-motion";
 
 const AboutUs = () => {
-  // Type-safe animation variants
-  const containerVariants: Variants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.3,
-        duration: 0.8,
-      },
-    },
-  };
-
-  const itemVariants: Variants = {
-    hidden: { y: 30, opacity: 0 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      transition: {
-        duration: 0.8,
-        ease: [0.16, 1, 0.3, 1], // Cubic bezier curve for easeOut
-      },
-    },
-  };
-
-  const titleVariants: Variants = {
-    ...itemVariants,
-    hover: {
-      scale: 1.02,
-      transition: {
-        repeat: Infinity,
-        repeatType: "reverse",
-        duration: 1.5,
-      } as Transition,
-    },
-  };
-
-  const underlineVariants: Variants = {
-    hidden: { width: 0 },
-    visible: {
-      width: "80px",
-      transition: {
-        delay: 0.5,
-        duration: 0.8,
-      },
-    },
-    hover: {
-      width: "120px",
-      backgroundColor: "#00e1ff",
-    },
-  };
-
-  const buttonContainerVariants: Variants = {
-    ...itemVariants,
-    hover: {
-      scale: 1.05,
-      transition: {
-        type: "spring",
-        stiffness: 400,
-      },
-    },
-  };
-
   return (
-    <Box
-      component={motion.div}
-      initial={{ opacity: 0 }}
-      whileInView={{ opacity: 1 }}
-      viewport={{ once: true, margin: "-100px" }}
-      sx={{
-        backgroundColor: "#1d2733",
-        color: "#fff",
-        py: { xs: 8, md: 12 },
-        px: 3,
-      }}
-    >
-      <Box
-        component={motion.div}
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-        viewport={{ once: true }}
-        sx={{
-          textAlign: "center",
-          maxWidth: 800,
-          mx: "auto",
-        }}
-      >
-        {/* Title Section */}
-        <Box
-          component={motion.div}
-          variants={titleVariants}
-          whileHover="hover"
-          sx={{ mb: 4 }}
-        >
-          <Typography
-            variant="h2"
-            sx={{
-              fontFamily: "'Cormorant Garamond', serif",
-              fontWeight: 600,
-              fontSize: { xs: "2.5rem", md: "3rem" },
-              letterSpacing: "1px",
-              position: "relative",
-              textShadow: "0 0 8px rgba(0, 225, 255, 0.3)",
-            }}
-          >
+    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
+      <Box textAlign="center" maxWidth={800} mx="auto">
+        <Typography variant="h4" fontWeight="bold" gutterBottom>
           About Us
-            <Box
-              component={motion.div}
-              variants={underlineVariants}
-              initial="hidden"
-              animate="visible"
-              whileHover="hover"
-              sx={{
-                height: "3px",
-                background: "linear-gradient(90deg, #00e1ff, transparent)",
-                margin: "20px auto 0",
-                borderRadius: "2px",
-              }}
-            />
         </Typography>
-        </Box>
-
-        {/* Content Section */}
-        <Box component={motion.div} variants={itemVariants} sx={{ mb: 4 }}>
-          <Typography
-            paragraph
-            sx={{
-              fontFamily: "'Montserrat', sans-serif",
-              fontSize: { xs: "1rem", md: "1.1rem" },
-              lineHeight: 1.9,
-              fontWeight: 300,
-              color: "rgba(255,255,255,0.85)",
-            }}
-          >
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum
-            repellendus aperiam, nobis debitis nam nemo dolorum! Suscipit
-            voluptatibus eum tenetur accusantium eveniet iure, optio illum
-            minima, quo mollitia vitae dolorem.
+        <Typography variant="body1" paragraph>
+          Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
+          hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
+          dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
+          auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
+          vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
+          luctus et nulla purus nibh ut. Enim sed fermentum purus molestie
+          parturient morbi nunc aliquet. Aliquam sed etiam turpis non lectus
+          commodo cras leo gravida.
         </Typography>
-        </Box>
-
-        {/* Button Section */}
-        <Box
-          component={motion.div}
-          variants={buttonContainerVariants}
-          whileHover="hover"
-        >
         <Button
           variant="outlined"
-            endIcon={
-              <motion.div
-                animate={{ x: [0, 5, 0] }}
-                transition={{
-                  duration: 1.5,
-                  repeat: Infinity,
-                  ease: "easeInOut",
-                }}
-              >
-                <ArrowOutwardIcon />
-              </motion.div>
-            }
+          endIcon={<ArrowOutwardIcon />}
           sx={{
-              borderColor: "#00e1ff",
-              color: "#00e1ff",
+            mt: 2,
+            borderColor: "#00FFD1",
+            color: "#00FFD1",
             borderRadius: "30px",
-              fontWeight: 500,
-              px: 3,
-              py: 1.1,
-              fontFamily: "'Montserrat', sans-serif",
-              letterSpacing: "1px",
-              fontSize: "0.9rem",
-              textTransform: "uppercase",
-              position: "relative",
-              overflow: "hidden",
+            fontWeight: "bold",
+            px: 4,
             "&:hover": {
-                backgroundColor: "rgba(0, 225, 255, 0.1)",
-                boxShadow: "0 0 15px rgba(0, 225, 255, 0.4)",
-                "&::before": {
-                  transform: "translateX(0)",
-                },
-              },
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                background:
-                  "linear-gradient(90deg, transparent, rgba(0, 225, 255, 0.2), transparent)",
-                transform: "translateX(-100%)",
-                transition: "transform 0.6s ease",
+              backgroundColor: "#00FFD1",
+              color: "#000",
             },
           }}
         >
@@ -202,7 +38,6 @@ const AboutUs = () => {
         </Button>
       </Box>
     </Box>
-    </Box>
   );
 };
 

src/components/footer/footer.tsx

@@ -1,294 +1,92 @@
-import React from "react";
+import React from 'react';
 import {
-  Box,
-  Container,
-  Grid,
-  Typography,
-  Link,
-  Divider,
-  Stack,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-import { Instagram, YouTube, Facebook, LinkedIn } from "@mui/icons-material";
-import { motion, Variants } from "framer-motion";
+  Box, Container, Grid, Typography, Link, Divider, Stack, useMediaQuery, useTheme
+} from '@mui/material';
+import {
+  Instagram, YouTube, Facebook, LinkedIn
+} from '@mui/icons-material';
+import { motion } from 'framer-motion';
 
 export default function Footer() {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  const isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));
-
-  // Animation variants
-  const containerVariants: Variants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        when: "beforeChildren",
-      },
-    },
-  };
-
-  const itemVariants: Variants = {
-    hidden: { y: 20, opacity: 0 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      transition: {
-        duration: 0.5,
-        ease: "easeOut",
-      },
-    },
-    hover: {
-      scale: 1.05,
-      color: "#00E0FF",
-      transition: { duration: 0.2 },
-    },
-  };
-
-  const socialIconVariants: Variants = {
-    hidden: { scale: 0 },
-    visible: {
-      scale: 1,
-      transition: {
-        type: "spring",
-        stiffness: 500,
-        damping: 15,
-      },
-    },
-    hover: {
-      scale: 1.2,
-      transition: { duration: 0.2 },
-    },
-  };
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
-    <Box
-      component="footer"
-      sx={{
-        backgroundColor: "#0F111A",
-        color: "#fff",
-        pt: 8,
-        pb: 4,
-        overflow: "hidden",
-      }}
-    >
+    <Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
       <Container maxWidth="lg">
         <motion.div
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: "-50px" }}
-          variants={containerVariants}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
         >
-          <Grid container spacing={isMobile ? 3 : 4}>
+          <Grid container spacing={4}>
             {/* Column 1: Explore Links */}
             <Grid item xs={12} sm={6} md={3}>
-              <Typography
-                component={motion.div}
-                variants={itemVariants}
-                variant="h6"
-                fontWeight={600}
-                gutterBottom
-                sx={{ color: "#00E0FF" }}
-              >
-                Explore
-              </Typography>
               <Stack spacing={1}>
-                {["About Us", "Portfolio", "Blogs", "Services"].map((item) => (
-                  <Link
-                    key={item}
-                    component={motion.a}
-                    variants={itemVariants}
-                    whileHover="hover"
-                    href="#"
-                    color="inherit"
-                    underline="hover"
-                    sx={{
-                      display: "inline-block",
-                      transition: "color 0.2s ease",
-                    }}
-                  >
-                    {item}
-                  </Link>
-                ))}
+                <Link href="#" color="inherit" underline="hover">About Us</Link>
+                <Link href="#" color="inherit" underline="hover">Portfolio</Link>
+                <Link href="#" color="inherit" underline="hover">Blogs</Link>
+                <Link href="#" color="inherit" underline="hover">Services</Link>
               </Stack>
             </Grid>
 
             {/* Column 2: Support Links */}
             <Grid item xs={12} sm={6} md={3}>
-              <Typography
-                component={motion.div}
-                variants={itemVariants}
-                variant="h6"
-                fontWeight={600}
-                gutterBottom
-                sx={{ color: "#00E0FF" }}
-              >
-                Support
-              </Typography>
               <Stack spacing={1}>
-                {["FAQ’s", "Terms & Conditions", "Privacy Policy"].map(
-                  (item) => (
-                    <Link
-                      key={item}
-                      component={motion.a}
-                      variants={itemVariants}
-                      whileHover="hover"
-                      href="#"
-                      color="inherit"
-                      underline="hover"
-                      sx={{
-                        display: "inline-block",
-                        transition: "color 0.2s ease",
-                      }}
-                    >
-                      {item}
-                    </Link>
-                  )
-                )}
+                <Link href="#" color="inherit" underline="hover">FAQ’s</Link>
+                <Link href="#" color="inherit" underline="hover">Terms & Conditions</Link>
+                <Link href="#" color="inherit" underline="hover">Privacy Policy</Link>
               </Stack>
             </Grid>
 
-            {/* Column 3: Logo */}
+            {/* Column 3: Logo (only visible on md+) */}
+            {!isMobile && (
               <Grid item xs={12} sm={6} md={3}>
-              <Box
-                component={motion.div}
-                variants={itemVariants}
-                sx={{
-                  display: "flex",
-                  justifyContent: isMobile
-                    ? "flex-start"
-                    : isTablet
-                    ? "center"
-                    : "flex-end",
-                  mb: 2,
-                  height: "100%",
-                  alignItems: isMobile ? "flex-start" : "center",
-                }}
-              >
-                <motion.img
-                  initial={{ scale: 0 }}
-                  animate={{ scale: 1 }}
-                  transition={{
-                    type: "spring",
-                    stiffness: 300,
-                    damping: 15,
-                    delay: 0.2,
-                  }}
-                  src="/logo.png"
+                <Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}>
+                  <img
+                    src="/logo.png" // Replace with actual logo
                     alt="Quadra Edge"
-                  style={{
-                    maxWidth: isMobile ? "140px" : "180px",
-                    height: "auto",
-                    filter: "drop-shadow(0 0 8px rgba(0, 224, 255, 0.4))",
-                  }}
+                    style={{ maxWidth: '180px', height: 'auto' }}
                   />
                 </Box>
               </Grid>
+            )}
 
             {/* Column 4: Contact Info + Socials */}
             <Grid item xs={12} sm={6} md={3}>
-              <Typography
-                component={motion.div}
-                variants={itemVariants}
-                variant="h6"
-                fontWeight={600}
-                gutterBottom
-                sx={{ color: "#00E0FF" }}
-              >
-                Contact Us
-              </Typography>
+              {/* Mobile: show logo here instead */}
+              {isMobile && (
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+                  <img
+                    src="/logo.png" // Replace with actual logo
+                    alt="Quadra Edge"
+                    style={{ maxWidth: '180px', height: 'auto' }}
+                  />
+                </Box>
+              )}
 
-              <Typography
-                component={motion.div}
-                variants={itemVariants}
-                variant="body2"
-                mb={1}
-              >
-                +1 (123) 456-7890
-              </Typography>
-
-              <Typography
-                component={motion.div}
-                variants={itemVariants}
-                variant="body2"
-              >
-                123 Business Ave, Suite 100
-                <br />
-                New York, NY 10001
-              </Typography>
+              <Typography fontWeight={600} gutterBottom>Contact Us</Typography>
+              <Typography variant="body2" mb={1}>Number</Typography>
+              <Typography variant="body2">Address</Typography>
 
               <Stack
                 direction="row"
                 spacing={2}
-                sx={{ mt: 3 }}
-                component={motion.div}
-                variants={containerVariants}
+                sx={{ mt: 2 }}
               >
-                {[
-                  { icon: <Instagram />, name: "Instagram" },
-                  { icon: <YouTube />, name: "YouTube" },
-                  { icon: <Facebook />, name: "Facebook" },
-                  { icon: <LinkedIn />, name: "LinkedIn" },
-                ].map((social, index) => (
-                  <Link
-                    key={social.name}
-                    component={motion.a}
-                    variants={socialIconVariants}
-                    whileHover="hover"
-                    href="#"
-                    sx={{
-                      color: "#00E0FF",
-                      display: "flex",
-                      alignItems: "center",
-                    }}
-                    aria-label={social.name}
-                  >
-                    {React.cloneElement(social.icon, {
-                      sx: {
-                        fontSize: isMobile ? "1.8rem" : "2rem",
-                        transition: "transform 0.2s ease",
-                      },
-                    })}
-                  </Link>
-                ))}
+                <Link href="#"><Instagram sx={{ color: '#00E0FF' }} /></Link>
+                <Link href="#"><YouTube sx={{ color: '#00E0FF' }} /></Link>
+                <Link href="#"><Facebook sx={{ color: '#00E0FF' }} /></Link>
+                <Link href="#"><LinkedIn sx={{ color: '#00E0FF' }} /></Link>
               </Stack>
             </Grid>
           </Grid>
 
-          <Divider
-            component={motion.hr}
-            initial={{ scaleX: 0 }}
-            whileInView={{ scaleX: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            sx={{
-              my: 4,
-              borderColor: "#00E0FF",
-              borderBottomWidth: 2,
-              opacity: 0.6,
-            }}
-          />
+          <Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
 
-          <Box
-            component={motion.div}
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.4 }}
-            textAlign="center"
-          >
-            <Typography
-              variant="body2"
-              sx={{
-                color: "#00E0FF",
-                fontSize: isMobile ? "0.8rem" : "0.9rem",
-                letterSpacing: "0.5px",
-              }}
-            >
-              Copyright © {new Date().getFullYear()} QuadraEdge. All rights
-              reserved.
+          <Box textAlign="center">
+            <Typography variant="body2" sx={{ color: '#00E0FF' }}>
+              Copyright © 2025 QuadraEdge
             </Typography>
           </Box>
         </motion.div>

src/components/header/header.tsx

@@ -2,9 +2,11 @@ import React, { useState } from "react";
 import {
   AppBar,
   Toolbar,
+  Typography,
   IconButton,
   Drawer,
   List,
+  ListItem,
   ListItemText,
   Button,
   useMediaQuery,
@@ -12,68 +14,39 @@ import {
   Box,
   Container,
   ListItemButton,
-  Divider,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import { motion } from "framer-motion";
-import HomeIcon from "@mui/icons-material/Home";
-import BuildIcon from "@mui/icons-material/Build";
-import WorkIcon from "@mui/icons-material/Work";
-import InfoIcon from "@mui/icons-material/Info";
-import ArticleIcon from "@mui/icons-material/Article";
-import logo from "../QE Website design/Logo.png";
 
-const navItems = [
-  { label: "Home", icon: <HomeIcon />, href: "#" },
-  { label: "Services", icon: <BuildIcon />, href: "#" },
-  { label: "Portfolio", icon: <WorkIcon />, href: "#" },
-  { label: "About Us", icon: <InfoIcon />, href: "#" },
-  { label: "Blog", icon: <ArticleIcon />, href: "#" },
-];
+const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"];
 
 const Header = () => {
   const [mobileOpen, setMobileOpen] = useState(false);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
-  const toggleDrawer = () => setMobileOpen(!mobileOpen);
+  const toggleDrawer = () => {
+    setMobileOpen(!mobileOpen);
+  };
 
   const drawer = (
-    <Box
-      sx={{ width: 260, height: "100%", backgroundColor: "#000" }}
-      onClick={toggleDrawer}
-    >
-      <ListItemButton
-        component="a"
-        href="#"
-        sx={{ justifyContent: "center", my: 2 }}
-      >
-        <Box component="img" src={logo} alt="Logo" sx={{ height: 40 }} />
-      </ListItemButton>
-      <Divider sx={{ backgroundColor: "#444" }} />
-      <Box>
+    <Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
+      <List>
         {navItems.map((item) => (
-          <ListItemButton component="a" href={item.href} key={item.label}>
-            <Box
-              sx={{ display: "flex", alignItems: "center", color: "#00E0FF" }}
-            >
-              <Box sx={{ mr: 2 }}>{item.icon}</Box>
-              <ListItemText primary={item.label} sx={{ color: "#fff" }} />
-            </Box>
+          <ListItemButton component="a" href="#" key={item}>
+            <ListItemText primary={item} sx={{ color: "#fff" }} />
           </ListItemButton>
         ))}
-      </Box>
-      <Divider sx={{ backgroundColor: "#444", my: 2 }} />
-      <Box px={2}>
+        <ListItem disablePadding>
           <Button
             variant="outlined"
             fullWidth
             sx={{
               borderColor: "#00E0FF",
               color: "#00E0FF",
-            borderRadius: "24px",
-            fontWeight: 600,
-            textTransform: "none",
+              backgroundColor: "transparent",
+              borderRadius: "8px",
+              m: 2,
               "&:hover": {
                 backgroundColor: "#00E0FF",
                 color: "#000",
@@ -82,7 +55,8 @@ const Header = () => {
           >
             Contact Us
           </Button>
-      </Box>
+        </ListItem>
+      </List>
     </Box>
   );
 
@@ -92,10 +66,20 @@ const Header = () => {
       sx={{ backgroundColor: "#000", boxShadow: "none" }}
     >
       <Container maxWidth="lg">
-        <Toolbar sx={{ justifyContent: "space-between", py: 1.5 }}>
+        <Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}>
+              QUADRA EDGE
+            </Typography>
+          </motion.div>
+
           {isMobile ? (
             <>
-              <IconButton edge="end" onClick={toggleDrawer}>
+              <IconButton color="inherit" edge="end" onClick={toggleDrawer}>
                 <MenuIcon sx={{ color: "#fff" }} />
               </IconButton>
               <Drawer
@@ -108,78 +92,44 @@ const Header = () => {
               </Drawer>
             </>
           ) : (
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                width: "100%",
-              }}
-            >
-              {/* Left - Logo */}
-              <motion.div
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.6 }}
-              >
-                <Box
-                  component="a"
-                  href="#"
-                  sx={{ display: "flex", alignItems: "center" }}
-                >
-                  <Box
-                    component="img"
-                    src={logo}
-                    alt="Logo"
-                    sx={{ height: 40, width: "auto", objectFit: "contain" }}
-                  />
-                </Box>
-              </motion.div>
-
-              {/* Center - Navigation */}
             <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
               {navItems.map((item, index) => (
                 <motion.div
-                    key={item.label}
+                  key={item}
                   initial={{ opacity: 0, y: -5 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: 0.1 * index }}
                 >
-                    <Box
+                  <Typography
+                    variant="body1"
                     component="a"
-                      href={item.href}
+                    href="#"
                     sx={{
                       color: "#fff",
                       textDecoration: "none",
-                        fontWeight: 500,
-                        fontSize: "1rem",
                       "&:hover": {
                         color: "#00E0FF",
                       },
                     }}
                   >
-                      {item.label}
-                    </Box>
+                    {item}
+                  </Typography>
                 </motion.div>
               ))}
-              </Box>
-
-              {/* Right - Contact Us */}
               <motion.div
-                initial={{ opacity: 0, x: 10 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.6 }}
+                initial={{ opacity: 0, y: -5 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.5 }}
               >
                 <Button
                   variant="outlined"
                   sx={{
                     borderColor: "#00E0FF",
                     color: "#00E0FF",
-                    borderRadius: "24px",
+                    backgroundColor: "transparent",
+                    borderRadius: "8px",
                     textTransform: "none",
-                    fontWeight: 600,
-                    px: 3,
-                    py: 1,
+                    padding: "8px 24px",
                     "&:hover": {
                       backgroundColor: "#00E0FF",
                       color: "#000",

src/components/hero/hero.tsx

@@ -1,63 +1,24 @@
 import { Box, Button, Container, Grid, Typography } from "@mui/material";
 import { motion } from "framer-motion";
 import backgroundImg from "../hero/Frame 22.png";
-
 export default function Hero() {
   return (
     <Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
       <Container maxWidth="lg">
         <motion.div
-          initial={{ opacity: 0, y: -30 }}
+          initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1 }}
-        >
-          <Grid container spacing={4} alignItems="center">
-            <Grid item xs={12} md={6}>
-              <Box>
-                <Typography
-                  variant="h2"
-                  fontWeight="bold"
-                  gutterBottom
-                  sx={{
-                    fontSize: { xs: "2rem", sm: "2.8rem", md: "3.4rem" },
-                    lineHeight: 1.2,
-                  }}
+          transition={{ duration: 0.8 }}
         >
+          <Grid container>
+            <Grid item md={6}>
+              <Typography variant="h3" fontWeight="bold" gutterBottom>
                 We Create <br />
                 Brands That Stick
               </Typography>
-
-                {/* Sliding second line after 7s */}
-                <motion.div
-                  initial={{ opacity: 0, x: 50 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 7, duration: 1 }}
-                >
-                  <Typography
-                    variant="h5"
-                    sx={{
-                      mt: 2,
-                      fontWeight: 300,
-                      color: "#00E0FF",
-                      fontStyle: "italic",
-                    }}
-                  >
-                    "Let your brand speak before you do."
-                  </Typography>
-                </motion.div>
-              </Box>
             </Grid>
-
-            <Grid item xs={12} md={6}>
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 1, duration: 1 }}
-              >
-                <Typography
-                  variant="body1"
-                  sx={{ maxWidth: "500px", fontSize: "1.1rem", color: "#ccc" }}
-                >
+            <Grid item md={6}>
+              <Typography variant="body1" maxWidth="sm">
                 We help founders grow through bold design, sharp strategy, and
                 smart marketing that drives recognition, engagement and
                 long-term brand loyalty.
@@ -68,11 +29,6 @@ export default function Hero() {
                   mt: 4,
                   borderColor: "#00E0FF",
                   color: "#00E0FF",
-                    borderRadius: "24px",
-                    px: 4,
-                    py: 1.5,
-                    textTransform: "none",
-                    fontWeight: 600,
                   "&:hover": {
                     backgroundColor: "#00E0FF",
                     color: "#000",
@@ -81,21 +37,12 @@ export default function Hero() {
               >
                 Get in Touch
               </Button>
-              </motion.div>
             </Grid>
           </Grid>
         </motion.div>
       </Container>
-
-      <Box width="100%" mt={8}>
-        <motion.img
-          src={backgroundImg}
-          alt="Hero Background"
-          width="100%"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 1.5, duration: 1 }}
-        />
+      <Box width="100%">
+        <img src={backgroundImg} alt="" width={"100%"} />
       </Box>
     </Box>
   );

src/components/ourwork/ourwork.tsx

@@ -6,213 +6,109 @@ 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 Aurora",
+    title: "Project Name",
     image: portfolioImg,
-    description: "Modern web design with seamless user experience",
   },
   {
-    title: "Project Nexus",
+    title: "Project Name",
     image: portfolioImg,
-    description: "Mobile application development for enterprise",
   },
   {
-    title: "Project Horizon",
+    title: "Project Name",
     image: portfolioImg,
-    description: "Brand identity and marketing campaign",
   },
 ];
 
 const OurWorks = () => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
   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
+    <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}
-            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 variant="subtitle1" align="center" mb={6}>
+        We’ve helped brands grow through bold strategy and creative execution.
+        Explore our recent success stories.
       </Typography>
-        </motion.div>
 
-        <Grid container spacing={isMobile ? 3 : 4} justifyContent="center">
+      <Grid container spacing={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={{
-                    borderRadius: 2,
+                borderRadius: 3,
                 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": {
-                      boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
-                    },
+                margin: "0 auto",
               }}
+              elevation={3}
             >
-                  <Box
-                    sx={{
-                      height: 180,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      bgcolor: "#f8f9fa",
-                      overflow: "hidden",
-                    }}
+              <CardContent>
+                <Typography
+                  variant="subtitle1"
+                  fontWeight="bold"
+                  color="Black"
+                  gutterBottom
                 >
+                  {work.title}
+                </Typography>
+              </CardContent>
               <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)",
-                        },
+                  height: 250,
+                  px: 2,
                 }}
               />
-                  </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 }}>
+              <CardContent>
                 <Button
-                      variant="outlined"
+                  variant="contained"
                   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",
+                    color: "#00FFD1",
+                    fontWeight: "bold",
+                    "&:hover": {
+                      backgroundColor: "#333",
                     },
-                        transition: "all 0.3s ease",
+                    borderRadius: "30px",
                   }}
                 >
-                      View Case Study
+                  VIEW DEMO
                 </Button>
               </CardContent>
             </Card>
-              </motion.div>
           </Grid>
         ))}
       </Grid>
 
       <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 #00E0FF",
-                color: "#00E0FF",
+            borderRadius: "30px",
+            borderColor: "#00FFD1",
+            color: "#00FFD1",
             px: 4,
-                py: 1,
-                fontWeight: 600,
-                fontSize: "0.9rem",
-                textTransform: "none",
-                letterSpacing: 0.5,
-                fontFamily: "'Montserrat', sans-serif",
+            py: 1.5,
+            fontWeight: "bold",
             "&:hover": {
-                  backgroundColor: "rgba(0, 225, 255, 0.19)",
-                  border: "1px solid #00e1ff",
+              backgroundColor: "#00FFD1",
+              color: "#000",
             },
-                transition: "all 0.3s ease",
           }}
         >
-              Explore Full Portfolio
+          VIEW FULL PORTFOLIO →
         </Button>
-          </motion.div>
       </Box>
-      </Container>
     </Box>
   );
 };

src/components/services/services.tsx

@@ -7,7 +7,6 @@ import {
   Container,
   useMediaQuery,
   useTheme,
-  Grid,
 } from "@mui/material";
 import { motion, AnimatePresence, PanInfo } from "framer-motion";
 import { useState } from "react";
@@ -36,17 +35,18 @@ const services = [
 
 const Services = () => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   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,29 +58,23 @@ const Services = () => {
           initial={{ opacity: 0, y: -20 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true }}
         >
           <Typography
             variant="h4"
             align="center"
             fontWeight="bold"
             gutterBottom
-            sx={{ mb: 2 }}
           >
-            Our Services
+            Services
           </Typography>
-          <Typography
-            variant="subtitle1"
-            align="center"
-            mb={6}
-            sx={{ maxWidth: 600, mx: "auto" }}
-          >
-            Professional solutions tailored to your needs
+          <Typography variant="subtitle1" align="center" mb={6}>
+            We offer design, development & marketing services
           </Typography>
         </motion.div>
 
         {isMobile ? (
-          <Box sx={{ position: "relative", height: 380 }}>
+          <Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
             <AnimatePresence initial={false}>
               <motion.div
                 key={currentIndex}
@@ -96,102 +90,70 @@ const Services = () => {
                   width: "100%",
                   padding: "0 16px",
                 }}
-              >
-                <motion.div
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
               >
                 <Card
                   sx={{
-                      borderRadius: 2,
+                    borderRadius: 5,
                     overflow: "hidden",
                     height: "100%",
                     bgcolor: "#fff",
                     display: "flex",
                     flexDirection: "column",
-                      maxWidth: 300,
+                    maxWidth: 345,
                     mx: "auto",
-                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                   }}
+                  elevation={3}
                 >
                   <Box
                     sx={{
-                        width: "100%",
-                        height: 150,
+                      height: 200,
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                        bgcolor: "#f8f9fa",
                       overflow: "hidden",
                     }}
-                    >
-                      <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={{
+                        objectFit: "contain",
                         width: "100%",
-                            height: "auto",
-                            objectFit: "cover",
+                        height: "100%",
                       }}
                     />
-                      </motion.div>
                   </Box>
                   <CardContent sx={{ flexGrow: 1 }}>
                     <Typography
                       variant="h6"
                       fontWeight="bold"
                       gutterBottom
-                        color="#000"
+                      color="black"
                     >
                       {services[currentIndex].title}
                     </Typography>
-                      <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
+                    <Typography variant="body2" color="black">
                       {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: 3,
-                gap: 1.5,
+                mt: 2,
+                gap: 1,
               }}
             >
               {services.map((_, index) => (
-                <motion.div
+                <Box
                   key={index}
                   onClick={() => setCurrentIndex(index)}
-                  whileHover={{ scale: 1.2 }}
-                  whileTap={{ scale: 0.9 }}
-                >
-                  <Box
                   sx={{
                     width: 10,
                     height: 10,
@@ -200,77 +162,52 @@ const Services = () => {
                     cursor: "pointer",
                   }}
                 />
-                </motion.div>
               ))}
             </Box>
           </Box>
         ) : (
-          <Grid container spacing={3} justifyContent="center">
-            {services.map((service, index) => (
-              <Grid
-                item
-                xs={12}
-                sm={6}
-                md={4}
-                key={index}
-                sx={{ display: "flex", justifyContent: "center" }}
-              >
-                <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 }}
-                >
-                  <motion.div
-                    whileHover={{
-                      y: -8,
-                      boxShadow: "0 15px 30px -5px rgba(0, 0, 0, 0.2)",
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+              gap: 4,
             }}
-                    transition={{ type: "spring", stiffness: 400, damping: 10 }}
-                    style={{ height: "100%" }}
+          >
+            {services.map((service, index) => (
+              <motion.div
+                key={index}
+                whileHover={{ y: -5 }}
+                transition={{ duration: 0.3 }}
               >
                 <Card
                   sx={{
-                        borderRadius: 2,
+                    borderRadius: 5,
                     overflow: "hidden",
                     height: "100%",
                     bgcolor: "#fff",
                     display: "flex",
                     flexDirection: "column",
-                        boxShadow: "0 5px 15px rgba(0, 0, 0, 0.1)",
-                        width: "100%",
                   }}
+                  elevation={3}
                 >
                   <Box
                     sx={{
-                          width: "100%",
-                          height: 160,
+                      height: 200,
                       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%" }}
-                        >
+                    <motion.div whileHover={{ scale: 1.05 }}>
                       <CardMedia
                         component="img"
                         image={service.image}
                         alt={service.title}
                         sx={{
+                          objectFit: "contain",
                           width: "100%",
-                              height: "auto",
-                              objectFit: "cover",
+                          height: "100%",
                         }}
                       />
                     </motion.div>
@@ -280,33 +217,18 @@ const Services = () => {
                       variant="h6"
                       fontWeight="bold"
                       gutterBottom
-                          color="#000"
+                      color="black"
                     >
                       {service.title}
                     </Typography>
-                        <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
+                    <Typography variant="body2" color="black">
                       {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>
             ))}
-          </Grid>
+          </Box>
         )}
       </Container>
     </Box>

src/components/testomonials/testomonias.tsx

@@ -3,348 +3,98 @@ import {
   Box,
   Card,
   CardContent,
+  Grid,
   Typography,
-  IconButton,
 } from "@mui/material";
-import { motion, AnimatePresence, useAnimation, Variants } from "framer-motion";
-import { useEffect, useState } from "react";
-import { KeyboardArrowLeft, KeyboardArrowRight } from "@mui/icons-material";
 import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";
 
 const testimonials = [
   {
-    name: "Sarah Johnson",
-    role: "Marketing Director",
-    company: "Tech Innovations Inc.",
-    feedback: "Working with this team transformed our digital presence.",
+    name: "Name",
+    role: "Role",
+    company: "Company Name & Logo",
+    feedback:
+      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
     rating: 5,
   },
   {
-    name: "Michael Chen",
-    role: "Sr. Manager",
+    name: "John Dae",
+    role: "Sr Manager",
     company: "Wells Fargo",
-    feedback: "Exceptional service from start to finish.",
+    feedback:
+      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
     rating: 5,
   },
   {
-    name: "Emily Rodriguez",
-    role: "Product Owner",
-    company: "Nexus Enterprises",
-    feedback: "The team's technical expertise was outstanding.",
+    name: "Name",
+    role: "Role",
+    company: "Company Name & Logo",
+    feedback:
+      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
     rating: 4,
   },
 ];
 
-// Properly typed animation variants
-const containerVariants: Variants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.2,
-      duration: 0.8,
-    },
-  },
-};
-
-const itemVariants: Variants = {
-  hidden: { y: 50, opacity: 0 },
-  visible: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      duration: 0.6,
-      ease: "easeOut", // Using string literal instead of array
-    },
-  },
-  hover: {
-    y: -10,
-    transition: { duration: 0.3 },
-  },
-};
-
 const Testimonials = () => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [isMobile, setIsMobile] = useState(false);
-  const controls = useAnimation();
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 600);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  useEffect(() => {
-    if (!isMobile) return;
-
-    const timer = setInterval(() => {
-      handleNext();
-    }, 5000);
-
-    return () => clearInterval(timer);
-  }, [currentIndex, isMobile]);
-
-  const handleNext = () => {
-    controls
-      .start({
-        x: "-100%",
-        opacity: 0,
-        transition: { duration: 0.3 },
-      })
-      .then(() => {
-        setCurrentIndex((prev) => (prev + 1) % testimonials.length);
-        controls
-          .start({
-            x: "100%",
-            opacity: 0,
-          })
-          .then(() => {
-            controls.start({
-              x: 0,
-              opacity: 1,
-              transition: { duration: 0.5 },
-            });
-          });
-      });
-  };
-
-  const handlePrev = () => {
-    controls
-      .start({
-        x: "100%",
-        opacity: 0,
-        transition: { duration: 0.3 },
-      })
-      .then(() => {
-        setCurrentIndex(
-          (prev) => (prev - 1 + testimonials.length) % testimonials.length
-        );
-        controls
-          .start({
-            x: "-100%",
-            opacity: 0,
-          })
-          .then(() => {
-            controls.start({
-              x: 0,
-              opacity: 1,
-              transition: { duration: 0.5 },
-            });
-          });
-      });
-  };
-
   return (
-    <Box
-      sx={{
-        backgroundColor: "#1d2733",
-        color: "#fff",
-        py: { xs: 6, md: 10 },
-        px: { xs: 2, md: 3 },
-        overflow: "hidden",
-      }}
-    >
-      {/* Header Section */}
-      <Box
-        component={motion.div}
-        initial="hidden"
-        animate="visible"
-        variants={containerVariants}
-        textAlign="center"
-        mb={{ xs: 4, md: 6 }}
-        sx={{ maxWidth: 800, mx: "auto" }}
-      >
-        <Typography variant="h3" fontWeight="bold" gutterBottom>
+    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
+      <Box textAlign="center" mb={6}>
+        <Typography variant="h4" fontWeight="bold" gutterBottom>
           Testimonials
         </Typography>
         <Typography variant="subtitle1">
-          Don't just take our word for it
+          Don’t just take our word for it -- hear directly from our clients
         </Typography>
       </Box>
 
-      {/* Mobile Carousel */}
-      {isMobile ? (
-        <Box sx={{ position: "relative", height: 450 }}>
-          <AnimatePresence>
-            <Box
-              component={motion.div}
-              key={currentIndex}
-              animate={controls}
-              initial={{ x: 0, opacity: 1 }}
-              exit={{ x: 0, opacity: 0 }}
-              sx={{
-                position: "absolute",
-                width: "100%",
-                display: "flex",
-                justifyContent: "center",
-              }}
-            >
-              <TestimonialCard testimonial={testimonials[currentIndex]} />
-            </Box>
-          </AnimatePresence>
-
-          <NavigationArrows handlePrev={handlePrev} handleNext={handleNext} />
-        </Box>
-      ) : (
-        /* Desktop Grid */
-        <Box
-          component={motion.div}
-          initial="hidden"
-          animate="visible"
-          variants={containerVariants}
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-            flexWrap: "wrap",
-            gap: 4,
-            px: { md: 4 },
-          }}
-        >
+      <Grid container spacing={4} justifyContent="center">
         {testimonials.map((t, idx) => (
-            <Box
-              key={idx}
-              component={motion.div}
-              variants={itemVariants}
-              whileHover="hover"
-              sx={{
-                width: { md: 350 },
-                flex: { md: "1 1 300px" },
-              }}
-            >
-              <TestimonialCard testimonial={t} />
-            </Box>
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-// Extracted Card Component
-const TestimonialCard = ({
-  testimonial,
-}: {
-  testimonial: (typeof testimonials)[0];
-}) => (
+          <Grid item xs={12} sm={6} md={4} key={idx}>
             <Card
               sx={{
                 borderRadius: 3,
-      width: "100%",
-      minHeight: 400,
+                maxWidth: 320,
+                margin: "0 auto",
                 textAlign: "center",
                 py: 3,
-      px: 2,
-      background: "linear-gradient(145deg, #1d2733, #232f3e)",
-      boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
-      border: "1px solid rgba(0, 225, 255, 0.1)",
-      transition: "all 0.3s ease",
-      "&:hover": {
-        boxShadow: "0 12px 40px rgba(0, 225, 255, 0.15)",
-        borderColor: "rgba(0, 225, 255, 0.3)",
-        transform: "translateY(-5px)",
-      },
               }}
             >
               <Avatar
                 src={testimonialImg}
-      alt={testimonial.name}
-      sx={{
-        width: 80,
-        height: 80,
-        margin: "0 auto",
-        mb: 2,
-        border: "2px solid #00e1ff",
-        boxShadow: "0 0 15px rgba(0, 225, 255, 0.4)",
-      }}
+                alt={t.name}
+                sx={{ width: 100, height: 100, margin: "0 auto", mb: 2 }}
               />
               <CardContent>
-      <Typography variant="h6" fontWeight="bold" color="#00e1ff">
-        {testimonial.name}
+                <Typography variant="subtitle1" fontWeight="bold">
+                  {t.name} ,{" "}
+                  <span style={{ fontWeight: "normal" }}>{t.role}</span>
                 </Typography>
-      <Typography variant="subtitle1" color="rgba(255,255,255,0.8)" mb={0.5}>
-        {testimonial.role}
+                <Typography variant="body2" color="text.secondary" mb={1}>
+                  {t.company}
                 </Typography>
-      <Typography variant="body2" color="rgba(255,255,255,0.6)" mb={2}>
-        {testimonial.company}
-      </Typography>
-      <Typography
-        variant="body1"
-        color="rgba(255,255,255,0.8)"
-        mb={3}
-        fontStyle="italic"
-      >
-        {testimonial.feedback}
+                <Typography variant="body2" color="text.secondary" mb={2}>
+                  {t.feedback}
                 </Typography>
                 <Box>
                   {Array.from({ length: 5 }).map((_, i) => (
-          <Box
-            component="span"
+                    <span
                       key={i}
-            sx={{
-              color:
-                i < testimonial.rating ? "#00e1ff" : "rgba(255,255,255,0.2)",
-              fontSize: "1.5rem",
-              mx: 0.5,
-              textShadow:
-                i < testimonial.rating
-                  ? "0 0 8px rgba(0, 225, 255, 0.5)"
-                  : "none",
+                      style={{
+                        color: i < t.rating ? "#00FFD1" : "#ccc",
+                        fontSize: "1.2rem",
                       }}
                     >
                       ★
-          </Box>
+                    </span>
                   ))}
                 </Box>
               </CardContent>
             </Card>
-);
-
-// Extracted Navigation Component
-const NavigationArrows = ({
-  handlePrev,
-  handleNext,
-}: {
-  handlePrev: () => void;
-  handleNext: () => void;
-}) => (
-  <>
-    <IconButton
-      onClick={handlePrev}
-      sx={{
-        position: "absolute",
-        left: 10,
-        top: "50%",
-        transform: "translateY(-50%)",
-        color: "#00e1ff",
-        backgroundColor: "rgba(0, 225, 255, 0.1)",
-        "&:hover": {
-          backgroundColor: "rgba(0, 225, 255, 0.2)",
-        },
-      }}
-    >
-      <KeyboardArrowLeft fontSize="large" />
-    </IconButton>
-
-    <IconButton
-      onClick={handleNext}
-      sx={{
-        position: "absolute",
-        right: 10,
-        top: "50%",
-        transform: "translateY(-50%)",
-        color: "#00e1ff",
-        backgroundColor: "rgba(0, 225, 255, 0.1)",
-        "&:hover": {
-          backgroundColor: "rgba(0, 225, 255, 0.2)",
-        },
-      }}
-    >
-      <KeyboardArrowRight fontSize="large" />
-    </IconButton>
-  </>
-);
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
 
 export default Testimonials;