package.json

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

src/App.tsx

@@ -1,22 +1,16 @@
-// import AboutUsPage from "./components/aboutus";
-import AboutUs from "./components/aboutus/aboutus";
 import Footer from "./components/footer/footer";
 import Header from "./components/header/header";
 import Hero from "./components/hero/hero";
-import OurWorks from "./components/ourwork/ourwork";
 import Services from "./components/services/services";
-import Testimonials from "./components/testomonials/testomonias";
+
 
 function App() {
   return (
     <div>
-      <Header />
+      <Header/>
       <Hero />
       <Services />
-      <OurWorks />
+      <Footer/>
-      <AboutUs />
-      <Testimonials />
-      <Footer />
     </div>
   );
 }

src/components/aboutus.tsx

@@ -1,14 +1,7 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
-import {
+import { Box, Typography, Container, Grid, Divider, useTheme } from '@mui/material';
-  Box,
+import { motion, useAnimation } from 'framer-motion';
-  Typography,
+import { useInView } from 'react-intersection-observer';
-  Container,
-  Grid,
-  Divider,
-  useTheme,
-} from "@mui/material";
-import { motion, useAnimation } from "framer-motion";
-import { useInView } from "react-intersection-observer";
 
 // Team member interface
 interface TeamMember {
@@ -28,26 +21,24 @@ interface StatItem {
 
 // Fallback images from reliable sources
 const FALLBACK_IMAGES = {
-  heroBg:
+  heroBg: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80',
-    "https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80",
+  aboutImg: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80',
-  aboutImg:
-    "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80",
   team: [
-    "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
+    'https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
-    "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
+    'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
-    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
+    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
-    "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
+    'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
-  ],
+  ]
 };
 
-const AboutUsPagesssssssss: React.FC = () => {
+const AboutUsPage: React.FC = () => {
   const theme = useTheme();
   const controls = useAnimation();
   const [ref, inView] = useInView({ threshold: 0.1 });
 
   useEffect(() => {
     if (inView) {
-      controls.start("visible");
+      controls.start('visible');
     }
   }, [controls, inView]);
 
@@ -55,40 +46,40 @@ const AboutUsPagesssssssss: React.FC = () => {
   const teamMembers: TeamMember[] = [
     {
       id: 1,
-      name: "Alex Johnson",
+      name: 'Alex Johnson',
-      role: "CEO & Founder",
+      role: 'CEO & Founder',
-      bio: "Visionary leader with 15+ years of industry experience driving innovation and growth.",
+      bio: 'Visionary leader with 15+ years of industry experience driving innovation and growth.',
-      image: FALLBACK_IMAGES.team[0],
+      image: FALLBACK_IMAGES.team[0]
     },
     {
       id: 2,
-      name: "Sarah Williams",
+      name: 'Sarah Williams',
-      role: "CTO",
+      role: 'CTO',
-      bio: "Tech enthusiast who transforms complex problems into elegant solutions.",
+      bio: 'Tech enthusiast who transforms complex problems into elegant solutions.',
-      image: FALLBACK_IMAGES.team[1],
+      image: FALLBACK_IMAGES.team[1]
     },
     {
       id: 3,
-      name: "Michael Chen",
+      name: 'Michael Chen',
-      role: "Lead Designer",
+      role: 'Lead Designer',
-      bio: "Creativity meets functionality in every pixel Michael touches.",
+      bio: 'Creativity meets functionality in every pixel Michael touches.',
-      image: FALLBACK_IMAGES.team[2],
+      image: FALLBACK_IMAGES.team[2]
     },
     {
       id: 4,
-      name: "Emily Rodriguez",
+      name: 'Emily Rodriguez',
-      role: "Marketing Director",
+      role: 'Marketing Director',
-      bio: "Storyteller who connects brands with their perfect audiences.",
+      bio: 'Storyteller who connects brands with their perfect audiences.',
-      image: FALLBACK_IMAGES.team[3],
+      image: FALLBACK_IMAGES.team[3]
-    },
+    }
   ];
 
   // Stats data
   const stats: StatItem[] = [
-    { id: 1, value: "10+", label: "Years Experience" },
+    { id: 1, value: '10+', label: 'Years Experience' },
-    { id: 2, value: "200+", label: "Clients Worldwide" },
+    { id: 2, value: '200+', label: 'Clients Worldwide' },
-    { id: 3, value: "50+", label: "Awards Won" },
+    { id: 3, value: '50+', label: 'Awards Won' },
-    { id: 4, value: "99%", label: "Client Satisfaction" },
+    { id: 4, value: '99%', label: 'Client Satisfaction' }
   ];
 
   // Animation variants
@@ -97,9 +88,9 @@ const AboutUsPagesssssssss: React.FC = () => {
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: 0.2,
+        staggerChildren: 0.2
-      },
+      }
-    },
+    }
   };
 
   const itemVariants = {
@@ -108,9 +99,9 @@ const AboutUsPagesssssssss: React.FC = () => {
       y: 0,
       opacity: 1,
       transition: {
-        duration: 0.6,
+        duration: 0.6
-      },
+      }
-    },
+    }
   };
 
   const fadeInVariants = {
@@ -118,9 +109,9 @@ const AboutUsPagesssssssss: React.FC = () => {
     visible: {
       opacity: 1,
       transition: {
-        duration: 1,
+        duration: 1
-      },
+      }
-    },
+    }
   };
 
   const scaleVariants = {
@@ -129,35 +120,33 @@ const AboutUsPagesssssssss: React.FC = () => {
       scale: 1,
       opacity: 1,
       transition: {
-        duration: 0.5,
+        duration: 0.5
-      },
+      }
-    },
+    }
   };
 
   return (
-    <Box
+    <Box sx={{ 
-      sx={{
+      backgroundColor: '#ffffff', 
-        backgroundColor: "#ffffff",
+      color: '#1a1a1a',
-        color: "#1a1a1a",
+      '& .accent-brown': {
-        "& .accent-brown": {
+        color: '#8B4513' // Classic brown
-          color: "#8B4513", // Classic brown
       },
-        "& .accent-yellow": {
+      '& .accent-yellow': {
-          color: "#FFD700", // Gold yellow
+        color: '#FFD700' // Gold yellow
-        },
+      }
-      }}
+    }}>
-    >
       {/* Hero Section */}
       <Box
         sx={{
-          height: "80vh",
+          height: '80vh',
-          display: "flex",
+          display: 'flex',
-          alignItems: "center",
+          alignItems: 'center',
-          justifyContent: "center",
+          justifyContent: 'center',
-          position: "relative",
+          position: 'relative',
-          overflow: "hidden",
+          overflow: 'hidden',
-          bgcolor: "black",
+          bgcolor: 'black',
-          color: "white",
+          color: 'white'
         }}
       >
         <motion.div
@@ -165,11 +154,11 @@ const AboutUsPagesssssssss: React.FC = () => {
           animate={{ opacity: 0.7 }}
           transition={{ duration: 1.5 }}
           style={{
-            position: "absolute",
+            position: 'absolute',
-            width: "100%",
+            width: '100%',
-            height: "100%",
+            height: '100%',
-            background: "linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7))",
+            background: 'linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7))',
-            zIndex: 1,
+            zIndex: 1
           }}
         />
         <motion.div
@@ -177,15 +166,15 @@ const AboutUsPagesssssssss: React.FC = () => {
           animate={{ scale: 1 }}
           transition={{ duration: 3 }}
           style={{
-            position: "absolute",
+            position: 'absolute',
-            width: "100%",
+            width: '100%',
-            height: "100%",
+            height: '100%',
             backgroundImage: `url(${FALLBACK_IMAGES.heroBg})`,
-            backgroundSize: "cover",
+            backgroundSize: 'cover',
-            backgroundPosition: "center",
+            backgroundPosition: 'center'
           }}
         />
-        <Container maxWidth="lg" sx={{ position: "relative", zIndex: 2 }}>
+        <Container maxWidth="lg" sx={{ position: 'relative', zIndex: 2 }}>
           <motion.div
             initial={{ y: -50, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
@@ -195,14 +184,14 @@ const AboutUsPagesssssssss: React.FC = () => {
               variant="h1"
               component="h1"
               sx={{
-                fontSize: { xs: "3rem", md: "4.5rem" },
+                fontSize: { xs: '3rem', md: '4.5rem' },
                 fontWeight: 700,
-                textAlign: "center",
+                textAlign: 'center',
                 mb: 2,
-                textTransform: "uppercase",
+                textTransform: 'uppercase',
-                "& span": {
+                '& span': {
-                  color: "#FFD700", // Yellow accent
+                  color: '#FFD700' // Yellow accent
-                },
+                }
               }}
             >
               Our <span>Story</span>
@@ -211,15 +200,15 @@ const AboutUsPagesssssssss: React.FC = () => {
               variant="h5"
               component="p"
               sx={{
-                maxWidth: "800px",
+                maxWidth: '800px',
-                mx: "auto",
+                mx: 'auto',
-                textAlign: "center",
+                textAlign: 'center',
                 fontWeight: 300,
-                letterSpacing: "1px",
+                letterSpacing: '1px'
               }}
             >
-              Pioneering excellence since 2010. We blend innovation with passion
+              Pioneering excellence since 2010. We blend innovation with passion to create
-              to create extraordinary digital experiences.
+              extraordinary digital experiences.
             </Typography>
           </motion.div>
         </Container>
@@ -241,44 +230,33 @@ const AboutUsPagesssssssss: React.FC = () => {
                   sx={{
                     fontWeight: 700,
                     mb: 3,
-                    position: "relative",
+                    position: 'relative',
-                    "&:after": {
+                    '&:after': {
                       content: '""',
-                      position: "absolute",
+                      position: 'absolute',
                       bottom: -10,
                       left: 0,
-                      width: "80px",
+                      width: '80px',
-                      height: "4px",
+                      height: '4px',
-                      backgroundColor: "#8B4513", // Brown accent
+                      backgroundColor: '#8B4513' // Brown accent
-                    },
+                    }
                   }}
                 >
                   Who We Are
                 </Typography>
               </motion.div>
               <motion.div variants={itemVariants}>
-                <Typography
+                <Typography variant="body1" sx={{ mb: 3, fontSize: '1.1rem', lineHeight: 1.8 }}>
-                  variant="body1"
+                  Founded in 2010, we are a passionate team of designers, developers, and strategists
-                  sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
+                  dedicated to pushing the boundaries of digital innovation. Our <span className="accent-brown">black and white</span>
-                >
+                  philosophy reflects our commitment to clarity, simplicity, and timeless design.
-                  Founded in 2010, we are a passionate team of designers,
-                  developers, and strategists dedicated to pushing the
-                  boundaries of digital innovation. Our{" "}
-                  <span className="accent-brown">black and white</span>
-                  philosophy reflects our commitment to clarity, simplicity, and
-                  timeless design.
                 </Typography>
               </motion.div>
               <motion.div variants={itemVariants}>
-                <Typography
+                <Typography variant="body1" sx={{ mb: 3, fontSize: '1.1rem', lineHeight: 1.8 }}>
-                  variant="body1"
+                  We believe in the power of contrast - where bold ideas meet meticulous execution.
-                  sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
+                  Our <span className="accent-yellow">monochromatic approach</span> isn't just aesthetic; it's a metaphor for how we
-                >
+                  distill complex problems into elegant solutions.
-                  We believe in the power of contrast - where bold ideas meet
-                  meticulous execution. Our{" "}
-                  <span className="accent-yellow">monochromatic approach</span>{" "}
-                  isn't just aesthetic; it's a metaphor for how we distill
-                  complex problems into elegant solutions.
                 </Typography>
               </motion.div>
             </motion.div>
@@ -289,21 +267,21 @@ const AboutUsPagesssssssss: React.FC = () => {
               whileInView={{ x: 0, opacity: 1 }}
               viewport={{ once: true }}
               transition={{ duration: 0.8 }}
-              style={{ overflow: "hidden", borderRadius: "8px" }}
+              style={{ overflow: 'hidden', borderRadius: '8px' }}
             >
               <Box
                 component="img"
                 src={FALLBACK_IMAGES.aboutImg}
                 alt="Our team"
                 sx={{
-                  width: "100%",
+                  width: '100%',
-                  height: "auto",
+                  height: 'auto',
-                  objectFit: "cover",
+                  objectFit: 'cover',
-                  filter: "grayscale(100%) contrast(120%)",
+                  filter: 'grayscale(100%) contrast(120%)',
-                  transition: "filter 0.5s ease",
+                  transition: 'filter 0.5s ease',
-                  "&:hover": {
+                  '&:hover': {
-                    filter: "grayscale(50%) contrast(110%) sepia(30%)",
+                    filter: 'grayscale(50%) contrast(110%) sepia(30%)'
-                  },
+                  }
                 }}
                 onError={(e) => {
                   const target = e.target as HTMLImageElement;
@@ -316,29 +294,27 @@ const AboutUsPagesssssssss: React.FC = () => {
       </Container>
 
       {/* Stats Section */}
-      <Box
+      <Box sx={{ 
-        sx={{
         py: 10, 
-          backgroundColor: "#f5f5f5",
+        backgroundColor: '#f5f5f5',
-          "& .stat-item": {
+        '& .stat-item': {
-            borderRight: "1px solid #8B4513",
+          borderRight: '1px solid #8B4513',
-            "&:last-child": {
+          '&:last-child': {
-              borderRight: "none",
+            borderRight: 'none'
           },
-            [theme.breakpoints.down("sm")]: {
+          [theme.breakpoints.down('sm')]: {
-              borderRight: "none",
+            borderRight: 'none',
-              borderBottom: "1px solid #8B4513",
+            borderBottom: '1px solid #8B4513',
-              paddingBottom: "20px",
+            paddingBottom: '20px',
-              marginBottom: "20px",
+            marginBottom: '20px',
-              "&:last-child": {
+            '&:last-child': {
-                borderBottom: "none",
+              borderBottom: 'none',
               marginBottom: 0,
-                paddingBottom: 0,
+              paddingBottom: 0
-              },
+            }
-            },
+          }
-          },
+        }
-        }}
+      }}>
-      >
         <Container maxWidth="lg">
           <motion.div
             ref={ref}
@@ -350,15 +326,15 @@ const AboutUsPagesssssssss: React.FC = () => {
               {stats.map((stat) => (
                 <Grid item xs={6} sm={3} key={stat.id} className="stat-item">
                   <motion.div variants={itemVariants}>
-                    <Box sx={{ textAlign: "center" }}>
+                    <Box sx={{ textAlign: 'center' }}>
                       <Typography
                         variant="h2"
                         component="div"
                         sx={{
                           fontWeight: 700,
                           mb: 1,
-                          color: "#8B4513", // Brown
+                          color: '#8B4513', // Brown
-                          fontSize: { xs: "2.5rem", sm: "3rem" },
+                          fontSize: { xs: '2.5rem', sm: '3rem' }
                         }}
                       >
                         {stat.value}
@@ -389,18 +365,18 @@ const AboutUsPagesssssssss: React.FC = () => {
             sx={{
               fontWeight: 700,
               mb: 6,
-              textAlign: "center",
+              textAlign: 'center',
-              position: "relative",
+              position: 'relative',
-              "&:after": {
+              '&:after': {
                 content: '""',
-                position: "absolute",
+                position: 'absolute',
                 bottom: -10,
-                left: "50%",
+                left: '50%',
-                transform: "translateX(-50%)",
+                transform: 'translateX(-50%)',
-                width: "80px",
+                width: '80px',
-                height: "4px",
+                height: '4px',
-                backgroundColor: "#8B4513", // Brown
+                backgroundColor: '#8B4513' // Brown
-              },
+              }
             }}
           >
             Meet The <span className="accent-yellow">Team</span>
@@ -416,25 +392,25 @@ const AboutUsPagesssssssss: React.FC = () => {
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
                 whileHover={{ y: -10 }}
-                style={{ height: "100%" }}
+                style={{ height: '100%' }}
               >
                 <Box
                   sx={{
-                    height: "100%",
+                    height: '100%',
-                    display: "flex",
+                    display: 'flex',
-                    flexDirection: "column",
+                    flexDirection: 'column',
-                    alignItems: "center",
+                    alignItems: 'center',
-                    textAlign: "center",
+                    textAlign: 'center',
                     p: 3,
-                    borderRadius: "8px",
+                    borderRadius: '8px',
-                    boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+                    boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
-                    transition: "all 0.3s ease",
+                    transition: 'all 0.3s ease',
-                    backgroundColor: "#ffffff",
+                    backgroundColor: '#ffffff',
-                    border: "1px solid #e0e0e0",
+                    border: '1px solid #e0e0e0',
-                    "&:hover": {
+                    '&:hover': {
-                      boxShadow: "0 8px 30px rgba(0,0,0,0.15)",
+                      boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
-                      transform: "translateY(-5px)",
+                      transform: 'translateY(-5px)'
-                    },
+                    }
                   }}
                 >
                   <Box
@@ -446,17 +422,17 @@ const AboutUsPagesssssssss: React.FC = () => {
                       target.src = FALLBACK_IMAGES.team[index];
                     }}
                     sx={{
-                      width: "150px",
+                      width: '150px',
-                      height: "150px",
+                      height: '150px',
-                      borderRadius: "50%",
+                      borderRadius: '50%',
-                      objectFit: "cover",
+                      objectFit: 'cover',
                       mb: 3,
-                      filter: "grayscale(100%)",
+                      filter: 'grayscale(100%)',
-                      transition: "filter 0.5s ease",
+                      transition: 'filter 0.5s ease',
-                      border: "3px solid #8B4513",
+                      border: '3px solid #8B4513',
-                      "&:hover": {
+                      '&:hover': {
-                        filter: "grayscale(0%)",
+                        filter: 'grayscale(0%)'
-                      },
+                      }
                     }}
                   />
                   <Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
@@ -465,14 +441,14 @@ const AboutUsPagesssssssss: React.FC = () => {
                   <Typography
                     variant="subtitle1"
                     sx={{
-                      color: "#FFD700", // Yellow
+                      color: '#FFD700', // Yellow
                       mb: 2,
-                      fontWeight: 500,
+                      fontWeight: 500
                     }}
                   >
                     {member.role}
                   </Typography>
-                  <Typography variant="body2" sx={{ mb: 2, color: "#555555" }}>
+                  <Typography variant="body2" sx={{ mb: 2, color: '#555555' }}>
                     {member.bio}
                   </Typography>
                 </Box>
@@ -483,13 +459,11 @@ const AboutUsPagesssssssss: React.FC = () => {
       </Container>
 
       {/* Mission Section */}
-      <Box
+      <Box sx={{ 
-        sx={{
         py: 10, 
-          backgroundColor: "#1a1a1a",
+        backgroundColor: '#1a1a1a',
-          color: "#ffffff",
+        color: '#ffffff'
-        }}
+      }}>
-      >
         <Container maxWidth="lg">
           <motion.div
             initial="hidden"
@@ -504,18 +478,18 @@ const AboutUsPagesssssssss: React.FC = () => {
                 sx={{
                   fontWeight: 700,
                   mb: 6,
-                  textAlign: "center",
+                  textAlign: 'center',
-                  position: "relative",
+                  position: 'relative',
-                  "&:after": {
+                  '&:after': {
                     content: '""',
-                    position: "absolute",
+                    position: 'absolute',
                     bottom: -10,
-                    left: "50%",
+                    left: '50%',
-                    transform: "translateX(-50%)",
+                    transform: 'translateX(-50%)',
-                    width: "80px",
+                    width: '80px',
-                    height: "4px",
+                    height: '4px',
-                    backgroundColor: "#FFD700", // Yellow
+                    backgroundColor: '#FFD700' // Yellow
-                  },
+                  }
                 }}
               >
                 Our <span className="accent-yellow">Mission</span>
@@ -528,22 +502,18 @@ const AboutUsPagesssssssss: React.FC = () => {
                     sx={{
                       p: 4,
                       borderLeft: `4px solid #FFD700`,
-                      backgroundColor: "#2a2a2a",
+                      backgroundColor: '#2a2a2a',
-                      boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+                      boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
-                      height: "100%",
+                      height: '100%'
                     }}
                   >
-                    <Typography
+                    <Typography variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#FFD700' }}>
-                      variant="h5"
-                      sx={{ fontWeight: 600, mb: 2, color: "#FFD700" }}
-                    >
                       Vision
                     </Typography>
                     <Typography variant="body1" sx={{ lineHeight: 1.8 }}>
-                      To redefine digital experiences through innovative
+                      To redefine digital experiences through innovative solutions that stand the
-                      solutions that stand the test of time. We envision a world
+                      test of time. We envision a world where technology enhances human connection
-                      where technology enhances human connection without
+                      without unnecessary complexity.
-                      unnecessary complexity.
                     </Typography>
                   </Box>
                 </motion.div>
@@ -554,22 +524,18 @@ const AboutUsPagesssssssss: React.FC = () => {
                     sx={{
                       p: 4,
                       borderLeft: `4px solid #8B4513`,
-                      backgroundColor: "#2a2a2a",
+                      backgroundColor: '#2a2a2a',
-                      boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+                      boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
-                      height: "100%",
+                      height: '100%'
                     }}
                   >
-                    <Typography
+                    <Typography variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#8B4513' }}>
-                      variant="h5"
-                      sx={{ fontWeight: 600, mb: 2, color: "#8B4513" }}
-                    >
                       Values
                     </Typography>
                     <Typography variant="body1" sx={{ lineHeight: 1.8 }}>
-                      Integrity, innovation, and impact guide everything we do.
+                      Integrity, innovation, and impact guide everything we do. We believe in
-                      We believe in transparency, pushing boundaries, and
+                      transparency, pushing boundaries, and creating work that makes a meaningful
-                      creating work that makes a meaningful difference in
+                      difference in people's lives.
-                      people's lives.
                     </Typography>
                   </Box>
                 </motion.div>
@@ -590,43 +556,42 @@ const AboutUsPagesssssssss: React.FC = () => {
           <Box
             sx={{
               p: 6,
-              borderRadius: "8px",
+              borderRadius: '8px',
-              background: "linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)",
+              background: 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)',
-              color: "white",
+              color: 'white',
-              textAlign: "center",
+              textAlign: 'center',
-              border: "1px solid #8B4513",
+              border: '1px solid #8B4513',
-              boxShadow: "0 8px 30px rgba(139, 69, 19, 0.3)",
+              boxShadow: '0 8px 30px rgba(139, 69, 19, 0.3)'
             }}
           >
             <Typography variant="h3" sx={{ fontWeight: 700, mb: 3 }}>
               Ready to work with us?
             </Typography>
-            <Typography
+            <Typography variant="h6" sx={{ mb: 4, maxWidth: '700px', mx: 'auto' }}>
-              variant="h6"
+              Let's create something extraordinary together. Our team is ready to bring your vision to
-              sx={{ mb: 4, maxWidth: "700px", mx: "auto" }}
+              life with our signature <span className="accent-yellow">black and white</span> approach.
-            >
-              Let's create something extraordinary together. Our team is ready
-              to bring your vision to life with our signature{" "}
-              <span className="accent-yellow">black and white</span> approach.
             </Typography>
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
               <Box
                 component="button"
                 sx={{
                   px: 6,
                   py: 2,
-                  fontSize: "1rem",
+                  fontSize: '1rem',
                   fontWeight: 600,
-                  backgroundColor: "#FFD700",
+                  backgroundColor: '#FFD700',
-                  color: "#1a1a1a",
+                  color: '#1a1a1a',
-                  border: "none",
+                  border: 'none',
-                  borderRadius: "4px",
+                  borderRadius: '4px',
-                  cursor: "pointer",
+                  cursor: 'pointer',
-                  transition: "all 0.3s ease",
+                  transition: 'all 0.3s ease',
-                  "&:hover": {
+                  '&:hover': {
-                    backgroundColor: "#ffffff",
+                    backgroundColor: '#ffffff',
-                    color: "#1a1a1a",
+                    color: '#1a1a1a'
-                  },
+                  }
                 }}
               >
                 Get in Touch
@@ -639,4 +604,4 @@ const AboutUsPagesssssssss: React.FC = () => {
   );
 };
 
-export default AboutUsPagesssssssss;
+export default AboutUsPage;

src/components/aboutus/aboutus.tsx

@@ -1,44 +0,0 @@
-import { Box, Typography, Button } from "@mui/material";
-import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
-
-const AboutUs = () => {
-  return (
-    <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
-        </Typography>
-        <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>
-        <Button
-          variant="outlined"
-          endIcon={<ArrowOutwardIcon />}
-          sx={{
-            mt: 2,
-            borderColor: "#00FFD1",
-            color: "#00FFD1",
-            borderRadius: "30px",
-            fontWeight: "bold",
-            px: 4,
-            "&:hover": {
-              backgroundColor: "#00FFD1",
-              color: "#000",
-            },
-          }}
-        >
-          GET IN TOUCH
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-export default AboutUs;

src/components/header/header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   AppBar,
   Toolbar,
@@ -14,44 +14,34 @@ import {
   Box,
   Container,
   ListItemButton,
-} from "@mui/material";
+} from '@mui/material';
-import MenuIcon from "@mui/icons-material/Menu";
+import MenuIcon from '@mui/icons-material/Menu';
-import { motion } from "framer-motion";
+import { motion } from 'framer-motion';
 
-const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"];
+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 isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   const toggleDrawer = () => {
     setMobileOpen(!mobileOpen);
   };
 
   const drawer = (
-    <Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
+    <Box sx={{ width: 250 }} onClick={toggleDrawer}>
         <List>
         {navItems.map((item) => (
             <ListItemButton component="a" href="#" key={item}>
-            <ListItemText primary={item} sx={{ color: "#fff" }} />
+                <ListItemText primary={item} />
             </ListItemButton>
         ))}
         <ListItem disablePadding>
             <Button
             variant="outlined"
             fullWidth
-            sx={{
+            sx={{ borderColor: '#00E0FF', color: '#00E0FF', m: 2 }}
-              borderColor: "#00E0FF",
-              color: "#00E0FF",
-              backgroundColor: "transparent",
-              borderRadius: "8px",
-              m: 2,
-              "&:hover": {
-                backgroundColor: "#00E0FF",
-                color: "#000",
-              },
-            }}
             >
             Contact Us
             </Button>
@@ -60,19 +50,13 @@ const Header = () => {
     </Box>
     );
 
+
   return (
-    <AppBar
+    <AppBar position="sticky" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
-      position="sticky"
-      sx={{ backgroundColor: "#000", boxShadow: "none" }}
-    >
       <Container maxWidth="lg">
-        <Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
+        <Toolbar sx={{ justifyContent: 'space-between' }}>
-          <motion.div
+          <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
-            initial={{ opacity: 0, y: -10 }}
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-          >
-            <Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}>
               QUADRA EDGE
             </Typography>
           </motion.div>
@@ -80,19 +64,14 @@ const Header = () => {
           {isMobile ? (
             <>
               <IconButton color="inherit" edge="end" onClick={toggleDrawer}>
-                <MenuIcon sx={{ color: "#fff" }} />
+                <MenuIcon />
               </IconButton>
-              <Drawer
+              <Drawer anchor="right" open={mobileOpen} onClose={toggleDrawer}>
-                anchor="right"
-                open={mobileOpen}
-                onClose={toggleDrawer}
-                sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
-              >
                 {drawer}
               </Drawer>
             </>
           ) : (
-            <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
+            <Box sx={{ display: 'flex', gap: 3, alignItems: 'center' }}>
               {navItems.map((item, index) => (
                 <motion.div
                   key={item}
@@ -100,18 +79,7 @@ const Header = () => {
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: 0.1 * index }}
                 >
-                  <Typography
+                  <Typography variant="body1" component="a" href="#" sx={{ color: '#fff', textDecoration: 'none' }}>
-                    variant="body1"
-                    component="a"
-                    href="#"
-                    sx={{
-                      color: "#fff",
-                      textDecoration: "none",
-                      "&:hover": {
-                        color: "#00E0FF",
-                      },
-                    }}
-                  >
                     {item}
                   </Typography>
                 </motion.div>
@@ -124,16 +92,12 @@ const Header = () => {
                 <Button
                   variant="outlined"
                   sx={{
-                    borderColor: "#00E0FF",
+                    borderColor: '#00E0FF',
-                    color: "#00E0FF",
+                    color: '#00E0FF',
-                    backgroundColor: "transparent",
+                    textTransform: 'none',
-                    borderRadius: "8px",
+                    '&:hover': {
-                    textTransform: "none",
+                      backgroundColor: '#00E0FF',
-                    padding: "8px 24px",
+                      color: '#000',
-                    "&:hover": {
-                      backgroundColor: "#00E0FF",
-                      color: "#000",
-                      borderColor: "#00E0FF",
                     },
                   }}
                 >

src/components/hero/hero.tsx

@@ -1,49 +1,39 @@
-import { Box, Button, Container, Grid, Typography } from "@mui/material";
+import { Box, Button, Container, Typography } from '@mui/material';
-import { motion } from "framer-motion";
+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 }}>
+    <Box sx={{ backgroundColor: '#0F111A', color: '#fff', py: 10 }}>
       <Container maxWidth="lg">
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
         >
-          <Grid container>
-            <Grid item md={6}>
           <Typography variant="h3" fontWeight="bold" gutterBottom>
             We Create <br />
             Brands That Stick
           </Typography>
-            </Grid>
-            <Grid item md={6}>
           <Typography variant="body1" maxWidth="sm">
-                We help founders grow through bold design, sharp strategy, and
+            We help founders grow through bold design, sharp strategy, and smart marketing that
-                smart marketing that drives recognition, engagement and
+            drives recognition, engagement and long-term brand loyalty.
-                long-term brand loyalty.
           </Typography>
           <Button
             variant="outlined"
             sx={{
               mt: 4,
-                  borderColor: "#00E0FF",
+              borderColor: '#00E0FF',
-                  color: "#00E0FF",
+              color: '#00E0FF',
-                  "&:hover": {
+              '&:hover': {
-                    backgroundColor: "#00E0FF",
+                backgroundColor: '#00E0FF',
-                    color: "#000",
+                color: '#000',
               },
             }}
           >
             Get in Touch
           </Button>
-            </Grid>
-          </Grid>
         </motion.div>
       </Container>
-      <Box width="100%">
-        <img src={backgroundImg} alt="" width={"100%"} />
-      </Box>
     </Box>
   );
 }

src/components/ourwork/ourwork.tsx

@@ -1,116 +0,0 @@
-import {
-  Box,
-  Card,
-  CardContent,
-  CardMedia,
-  Grid,
-  Typography,
-  Button,
-} from "@mui/material";
-import portfolioImg from "../ourwork/Rectangle 6.png";
-
-const works = [
-  {
-    title: "Project Name",
-    image: portfolioImg,
-  },
-  {
-    title: "Project Name",
-    image: portfolioImg,
-  },
-  {
-    title: "Project Name",
-    image: portfolioImg,
-  },
-];
-
-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>
-
-      <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
-                  sx={{
-                    backgroundColor: "#000",
-                    color: "#00FFD1",
-                    fontWeight: "bold",
-                    "&:hover": {
-                      backgroundColor: "#333",
-                    },
-                    borderRadius: "30px",
-                  }}
-                >
-                  VIEW DEMO
-                </Button>
-              </CardContent>
-            </Card>
-          </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>
-  );
-};
-
-export default OurWorks;

src/components/services/services.tsx

@@ -1,238 +1,41 @@
-import {
+import { Box, Container, Grid, Typography, Paper } from '@mui/material';
-  Box,
-  Card,
-  CardContent,
-  CardMedia,
-  Typography,
-  Container,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-import { motion, AnimatePresence, PanInfo } from "framer-motion";
-import { useState } from "react";
-import serviceImage from "../services/Image Wrapper.png";
 
-const services = [
+const services = ['Design', 'Development', 'Marketing'];
-  {
-    title: "Design",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
-    image: `${serviceImage}`,
-  },
-  {
-    title: "Development",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
-    image: `${serviceImage}`,
-  },
-  {
-    title: "Marketing",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
-    image: `${serviceImage}`,
-  },
-];
-
-const Services = () => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  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));
-    }
-  };
 
+export default function Services() {
   return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}>
+    <Box sx={{ py: 10, backgroundColor: '#1B1E2E', color: '#fff' }}>
       <Container maxWidth="lg">
-        <motion.div
+        <Typography variant="h4" align="center" gutterBottom>
-          initial={{ opacity: 0, y: -20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          viewport={{ once: true }}
-        >
-          <Typography
-            variant="h4"
-            align="center"
-            fontWeight="bold"
-            gutterBottom
-          >
           Services
         </Typography>
-          <Typography variant="subtitle1" align="center" mb={6}>
+        <Typography variant="body2" align="center" mb={4}>
           We offer design, development & marketing services
         </Typography>
-        </motion.div>
+        <Grid container spacing={4}>
-
+          {services.map((title) => (
-        {isMobile ? (
+            <Grid item xs={12} md={4} key={title}>
-          <Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
+              <Paper
-            <AnimatePresence initial={false}>
-              <motion.div
-                key={currentIndex}
-                drag="x"
-                onDragEnd={handleDragEnd}
-                dragConstraints={{ left: 0, right: 0 }}
-                initial={{ x: 300, opacity: 0 }}
-                animate={{ x: 0, opacity: 1 }}
-                exit={{ x: -300, opacity: 0 }}
-                transition={{ type: "spring", stiffness: 300, damping: 30 }}
-                style={{
-                  position: "absolute",
-                  width: "100%",
-                  padding: "0 16px",
-                }}
-              >
-                <Card
-                  sx={{
-                    borderRadius: 5,
-                    overflow: "hidden",
-                    height: "100%",
-                    bgcolor: "#fff",
-                    display: "flex",
-                    flexDirection: "column",
-                    maxWidth: 345,
-                    mx: "auto",
-                  }}
                 elevation={3}
-                >
-                  <Box
                 sx={{
-                      height: 200,
+                  p: 4,
-                      display: "flex",
+                  backgroundColor: '#2A2F3D',
-                      alignItems: "center",
+                  color: '#fff',
-                      justifyContent: "center",
+                  borderRadius: 2,
-                      overflow: "hidden",
+                  textAlign: 'center',
                 }}
               >
-                    <CardMedia
+                <Typography variant="h6" gutterBottom>
-                      component="img"
+                  {title}
-                      image={services[currentIndex].image}
-                      alt={services[currentIndex].title}
-                      sx={{
-                        objectFit: "contain",
-                        width: "100%",
-                        height: "100%",
-                      }}
-                    />
-                  </Box>
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography
-                      variant="h6"
-                      fontWeight="bold"
-                      gutterBottom
-                      color="black"
-                    >
-                      {services[currentIndex].title}
                 </Typography>
-                    <Typography variant="body2" color="black">
+                <Typography variant="body2">
-                      {services[currentIndex].description}
+                  Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit...
                 </Typography>
-                  </CardContent>
+              </Paper>
-                </Card>
+            </Grid>
-              </motion.div>
-            </AnimatePresence>
-
-            {/* Dots indicator */}
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "center",
-                mt: 2,
-                gap: 1,
-              }}
-            >
-              {services.map((_, index) => (
-                <Box
-                  key={index}
-                  onClick={() => setCurrentIndex(index)}
-                  sx={{
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
-                    cursor: "pointer",
-                  }}
-                />
           ))}
-            </Box>
+        </Grid>
-          </Box>
-        ) : (
-          <Box
-            sx={{
-              display: "grid",
-              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
-              gap: 4,
-            }}
-          >
-            {services.map((service, index) => (
-              <motion.div
-                key={index}
-                whileHover={{ y: -5 }}
-                transition={{ duration: 0.3 }}
-              >
-                <Card
-                  sx={{
-                    borderRadius: 5,
-                    overflow: "hidden",
-                    height: "100%",
-                    bgcolor: "#fff",
-                    display: "flex",
-                    flexDirection: "column",
-                  }}
-                  elevation={3}
-                >
-                  <Box
-                    sx={{
-                      height: 200,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      overflow: "hidden",
-                    }}
-                  >
-                    <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"
-                    >
-                      {service.title}
-                    </Typography>
-                    <Typography variant="body2" color="black">
-                      {service.description}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </Box>
-        )}
       </Container>
     </Box>
   );
-};
+}
-
-export default Services;

src/components/testomonials/testomonias.tsx

@@ -1,100 +0,0 @@
-import {
-  Avatar,
-  Box,
-  Card,
-  CardContent,
-  Grid,
-  Typography,
-} from "@mui/material";
-import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";
-
-const testimonials = [
-  {
-    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: "John Dae",
-    role: "Sr Manager",
-    company: "Wells Fargo",
-    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: "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,
-  },
-];
-
-const Testimonials = () => {
-  return (
-    <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 -- hear directly from our clients
-        </Typography>
-      </Box>
-
-      <Grid container spacing={4} justifyContent="center">
-        {testimonials.map((t, idx) => (
-          <Grid item xs={12} sm={6} md={4} key={idx}>
-            <Card
-              sx={{
-                borderRadius: 3,
-                maxWidth: 320,
-                margin: "0 auto",
-                textAlign: "center",
-                py: 3,
-              }}
-            >
-              <Avatar
-                src={testimonialImg}
-                alt={t.name}
-                sx={{ width: 100, height: 100, margin: "0 auto", mb: 2 }}
-              />
-              <CardContent>
-                <Typography variant="subtitle1" fontWeight="bold">
-                  {t.name} ,{" "}
-                  <span style={{ fontWeight: "normal" }}>{t.role}</span>
-                </Typography>
-                <Typography variant="body2" color="text.secondary" mb={1}>
-                  {t.company}
-                </Typography>
-                <Typography variant="body2" color="text.secondary" mb={2}>
-                  {t.feedback}
-                </Typography>
-                <Box>
-                  {Array.from({ length: 5 }).map((_, i) => (
-                    <span
-                      key={i}
-                      style={{
-                        color: i < t.rating ? "#00FFD1" : "#ccc",
-                        fontSize: "1.2rem",
-                      }}
-                    >
-                      ★
-                    </span>
-                  ))}
-                </Box>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
-  );
-};
-
-export default Testimonials;