Merge pull request 'new segments' (#3) from feature/new_segment into main

Reviewed-on: #3
Reviewed-by: Mihir Motiyani <mihir@midastix.com>

package.json

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

src/App.tsx

@@ -1,16 +1,22 @@
+// 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 />
-      <Footer/>
+      <OurWorks />
+      <AboutUs />
+      <Testimonials />
+      <Footer />
     </div>
   );
 }

src/components/aboutus.tsx

@@ -1,7 +1,14 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
-import { Box, Typography, Container, Grid, Divider, useTheme } from '@mui/material';
+import {
-import { motion, useAnimation } from 'framer-motion';
+  Box,
-import { useInView } from 'react-intersection-observer';
+  Typography,
+  Container,
+  Grid,
+  Divider,
+  useTheme,
+} from "@mui/material";
+import { motion, useAnimation } from "framer-motion";
+import { useInView } from "react-intersection-observer";
 
 // Team member interface
 interface TeamMember {
@@ -21,24 +28,26 @@ interface StatItem {
 
 // Fallback images from reliable sources
 const FALLBACK_IMAGES = {
-  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',
+  heroBg:
-  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',
+    "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",
   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 AboutUsPage: React.FC = () => {
+const AboutUsPagesssssssss: 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]);
 
@@ -46,40 +55,40 @@ const AboutUsPage: 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
@@ -88,9 +97,9 @@ const AboutUsPage: React.FC = () => {
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: 0.2
+        staggerChildren: 0.2,
-      }
+      },
-    }
+    },
   };
 
   const itemVariants = {
@@ -99,9 +108,9 @@ const AboutUsPage: React.FC = () => {
       y: 0,
       opacity: 1,
       transition: {
-        duration: 0.6
+        duration: 0.6,
-      }
+      },
-    }
+    },
   };
 
   const fadeInVariants = {
@@ -109,9 +118,9 @@ const AboutUsPage: React.FC = () => {
     visible: {
       opacity: 1,
       transition: {
-        duration: 1
+        duration: 1,
-      }
+      },
-    }
+    },
   };
 
   const scaleVariants = {
@@ -120,33 +129,35 @@ const AboutUsPage: React.FC = () => {
       scale: 1,
       opacity: 1,
       transition: {
-        duration: 0.5
+        duration: 0.5,
-      }
+      },
-    }
+    },
   };
 
   return (
-    <Box sx={{ 
+    <Box
-      backgroundColor: '#ffffff', 
+      sx={{
-      color: '#1a1a1a',
+        backgroundColor: "#ffffff",
-      '& .accent-brown': {
+        color: "#1a1a1a",
-        color: '#8B4513' // Classic brown
+        "& .accent-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
@@ -154,11 +165,11 @@ const AboutUsPage: 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
@@ -166,15 +177,15 @@ const AboutUsPage: 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 }}
@@ -184,14 +195,14 @@ const AboutUsPage: 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>
@@ -200,15 +211,15 @@ const AboutUsPage: 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 to create
+              Pioneering excellence since 2010. We blend innovation with passion
-              extraordinary digital experiences.
+              to create extraordinary digital experiences.
             </Typography>
           </motion.div>
         </Container>
@@ -230,33 +241,44 @@ const AboutUsPage: 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 variant="body1" sx={{ mb: 3, fontSize: '1.1rem', lineHeight: 1.8 }}>
+                <Typography
-                  Founded in 2010, we are a passionate team of designers, developers, and strategists
+                  variant="body1"
-                  dedicated to pushing the boundaries of digital innovation. Our <span className="accent-brown">black and white</span>
+                  sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
-                  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 variant="body1" sx={{ mb: 3, fontSize: '1.1rem', lineHeight: 1.8 }}>
+                <Typography
-                  We believe in the power of contrast - where bold ideas meet meticulous execution.
+                  variant="body1"
-                  Our <span className="accent-yellow">monochromatic approach</span> isn't just aesthetic; it's a metaphor for how we
+                  sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
-                  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>
@@ -267,21 +289,21 @@ const AboutUsPage: 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;
@@ -294,27 +316,29 @@ const AboutUsPage: React.FC = () => {
       </Container>
 
       {/* Stats Section */}
-      <Box sx={{ 
+      <Box
+        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}
@@ -326,15 +350,15 @@ const AboutUsPage: 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}
@@ -365,18 +389,18 @@ const AboutUsPage: 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>
@@ -392,25 +416,25 @@ const AboutUsPage: 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
@@ -422,17 +446,17 @@ const AboutUsPage: 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 }}>
@@ -441,14 +465,14 @@ const AboutUsPage: 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>
@@ -459,11 +483,13 @@ const AboutUsPage: React.FC = () => {
       </Container>
 
       {/* Mission Section */}
-      <Box sx={{ 
+      <Box
+        sx={{
           py: 10,
-        backgroundColor: '#1a1a1a',
+          backgroundColor: "#1a1a1a",
-        color: '#ffffff'
+          color: "#ffffff",
-      }}>
+        }}
+      >
         <Container maxWidth="lg">
           <motion.div
             initial="hidden"
@@ -478,18 +504,18 @@ const AboutUsPage: 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>
@@ -502,18 +528,22 @@ const AboutUsPage: 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 variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#FFD700' }}>
+                    <Typography
+                      variant="h5"
+                      sx={{ fontWeight: 600, mb: 2, color: "#FFD700" }}
+                    >
                       Vision
                     </Typography>
                     <Typography variant="body1" sx={{ lineHeight: 1.8 }}>
-                      To redefine digital experiences through innovative solutions that stand the
+                      To redefine digital experiences through innovative
-                      test of time. We envision a world where technology enhances human connection
+                      solutions that stand the test of time. We envision a world
-                      without unnecessary complexity.
+                      where technology enhances human connection without
+                      unnecessary complexity.
                     </Typography>
                   </Box>
                 </motion.div>
@@ -524,18 +554,22 @@ const AboutUsPage: 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 variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#8B4513' }}>
+                    <Typography
+                      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. We believe in
+                      Integrity, innovation, and impact guide everything we do.
-                      transparency, pushing boundaries, and creating work that makes a meaningful
+                      We believe in transparency, pushing boundaries, and
-                      difference in people's lives.
+                      creating work that makes a meaningful difference in
+                      people's lives.
                     </Typography>
                   </Box>
                 </motion.div>
@@ -556,42 +590,43 @@ const AboutUsPage: 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 variant="h6" sx={{ mb: 4, maxWidth: '700px', mx: 'auto' }}>
+            <Typography
-              Let's create something extraordinary together. Our team is ready to bring your vision to
+              variant="h6"
-              life with our signature <span className="accent-yellow">black and white</span> approach.
+              sx={{ mb: 4, maxWidth: "700px", mx: "auto" }}
-            </Typography>
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
             >
+              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 }}>
               <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
@@ -604,4 +639,4 @@ const AboutUsPage: React.FC = () => {
   );
 };
 
-export default AboutUsPage;
+export default AboutUsPagesssssssss;

src/components/aboutus/aboutus.tsx

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

src/components/hero/hero.tsx

@@ -1,39 +1,49 @@
-import { Box, Button, Container, Typography } from '@mui/material';
+import { Box, Button, Container, Grid, 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 smart marketing that
+                We help founders grow through bold design, sharp strategy, and
-            drives recognition, engagement and long-term brand loyalty.
+                smart marketing that drives recognition, engagement and
+                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

@@ -0,0 +1,116 @@
+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,41 +1,238 @@
-import { Box, Container, Grid, Typography, Paper } from '@mui/material';
+import {
+  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 = ['Design', 'Development', 'Marketing'];
+const services = [
+  {
+    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={{ py: 10, backgroundColor: '#1B1E2E', color: '#fff' }}>
+    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}>
       <Container maxWidth="lg">
-        <Typography variant="h4" align="center" gutterBottom>
+        <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="bold"
+            gutterBottom
+          >
             Services
           </Typography>
-        <Typography variant="body2" align="center" mb={4}>
+          <Typography variant="subtitle1" align="center" mb={6}>
             We offer design, development & marketing services
           </Typography>
-        <Grid container spacing={4}>
+        </motion.div>
-          {services.map((title) => (
+
-            <Grid item xs={12} md={4} key={title}>
+        {isMobile ? (
-              <Paper
+          <Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
-                elevation={3}
+            <AnimatePresence initial={false}>
-                sx={{
+              <motion.div
-                  p: 4,
+                key={currentIndex}
-                  backgroundColor: '#2A2F3D',
+                drag="x"
-                  color: '#fff',
+                onDragEnd={handleDragEnd}
-                  borderRadius: 2,
+                dragConstraints={{ left: 0, right: 0 }}
-                  textAlign: 'center',
+                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",
                 }}
               >
-                <Typography variant="h6" gutterBottom>
+                <Card
-                  {title}
+                  sx={{
+                    borderRadius: 5,
+                    overflow: "hidden",
+                    height: "100%",
+                    bgcolor: "#fff",
+                    display: "flex",
+                    flexDirection: "column",
+                    maxWidth: 345,
+                    mx: "auto",
+                  }}
+                  elevation={3}
+                >
+                  <Box
+                    sx={{
+                      height: 200,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <CardMedia
+                      component="img"
+                      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">
+                    <Typography variant="body2" color="black">
-                  Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit...
+                      {services[currentIndex].description}
                     </Typography>
-              </Paper>
+                  </CardContent>
-            </Grid>
+                </Card>
+              </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",
+                  }}
+                />
               ))}
-        </Grid>
+            </Box>
+          </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

@@ -0,0 +1,100 @@
+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;