From d4f7b98a04502d2fc5404b41cbab15fa0d81260e Mon Sep 17 00:00:00 2001
From: hardik <hardik@navigolabs.com>
Date: Wed, 6 Aug 2025 11:18:14 +0000
Subject: [PATCH] added about us page

---
 src/App.tsx                                  |  20 +-
 src/components/landingpage/landingpage.tsx   |  45 +-
 src/components/pages/aboutusPage/aboutus.tsx | 725 +++++++++++++++++++
 src/components/pages/aboutusbase.tsx         |  12 +
 src/index.tsx                                |  23 +-
 src/routes.tsx                               |  83 +--
 6 files changed, 804 insertions(+), 104 deletions(-)
 create mode 100644 src/components/pages/aboutusPage/aboutus.tsx
 create mode 100644 src/components/pages/aboutusbase.tsx

diff --git a/src/App.tsx b/src/App.tsx
index ff474b8..7621fb6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,15 @@
-// import AboutUsPage from "./components/aboutus";
-import AboutUs from "./components/aboutus/aboutus";
-import Footer from "./components/footer/footer";
+// App.js
+import { Outlet } from "react-router-dom";
 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";
+import Footer from "./components/footer/footer";
 
 function App() {
   return (
-    <div>
+    <>
       <Header />
-      <Hero />
-      <Services />
-      <OurWorks />
-      <AboutUs />
-      <Testimonials />
+      <Outlet /> {/* This will be replaced by the current route's element */}
       <Footer />
-    </div>
+    </>
   );
 }
 
diff --git a/src/components/landingpage/landingpage.tsx b/src/components/landingpage/landingpage.tsx
index 03e2ca0..6d109f9 100644
--- a/src/components/landingpage/landingpage.tsx
+++ b/src/components/landingpage/landingpage.tsx
@@ -1,33 +1,30 @@
-
-import React from 'react';
+import React from "react";
 // import AppRoutes from './routes';
 // import Header from './components/landingpage/landingpagecomponents/header';
-import { Box } from '@mui/material';
-import HeroSection from './landingpagecomponents/CarouselSection';
-import WhoWeAre from './landingpagecomponents/whoweare';
-import OurExpertise from './landingpagecomponents/ourexperties';
-import TopBrands from './landingpagecomponents/brands';
-import CaseStudies from './landingpagecomponents/casestudy';
-import StatsSection from './landingpagecomponents/scrollanimationsection';
-import ContactForm from './landingpagecomponents/contactus';
+import { Box } from "@mui/material";
+import AboutUs from "../aboutus/aboutus";
+import Footer from "../footer/footer";
+import Header from "../header/header";
+import Hero from "../hero/hero";
+import OurWorks from "../ourwork/ourwork";
+import Services from "../services/services";
+import Testimonials from "../testomonials/testomonias";
 // import router from './routes';
 
-
 const LandingPage: React.FC = () => {
-    return (
-        <Box>
-            {/* <AnimatedHeader /> */}
-            <HeroSection />
-            <WhoWeAre />
-            <OurExpertise />
-            <TopBrands />
-            <StatsSection/>
-            <CaseStudies/>
-            <ContactForm />
-            
-        </Box>
+  return (
+    <Box>
+      {/* <AnimatedHeader /> */}
 
-    );
+      <Header />
+      <Hero />
+      <Services />
+      <OurWorks />
+      <AboutUs />
+      <Testimonials />
+      <Footer />
+    </Box>
+  );
 };
 
 export default LandingPage;
diff --git a/src/components/pages/aboutusPage/aboutus.tsx b/src/components/pages/aboutusPage/aboutus.tsx
new file mode 100644
index 0000000..cc82805
--- /dev/null
+++ b/src/components/pages/aboutusPage/aboutus.tsx
@@ -0,0 +1,725 @@
+import React from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  Grid,
+  Container,
+  Stack,
+  Avatar,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { motion, Variants } from "framer-motion";
+import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+
+const AboutUsPageTwo = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  // Placeholder image URLs (replace with your actual images later)
+  const images = {
+    hero: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
+    team1: "https://randomuser.me/api/portraits/women/44.jpg",
+    team2: "https://randomuser.me/api/portraits/men/32.jpg",
+    team3: "https://randomuser.me/api/portraits/women/68.jpg",
+    office:
+      "https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80",
+    values:
+      "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
+  };
+
+  // Animation variants
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        when: "beforeChildren",
+      },
+    },
+  };
+
+  const fadeUpVariants: Variants = {
+    hidden: { y: 50, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.8,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  const leftSlideVariants: Variants = {
+    hidden: { x: -100, opacity: 0 },
+    visible: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 100,
+        damping: 20,
+        duration: 0.8,
+      },
+    },
+  };
+
+  const rightSlideVariants: Variants = {
+    hidden: { x: 100, opacity: 0 },
+    visible: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 100,
+        damping: 20,
+        duration: 0.8,
+      },
+    },
+  };
+
+  const scaleUpVariants: Variants = {
+    hidden: { scale: 0.8, opacity: 0 },
+    visible: {
+      scale: 1,
+      opacity: 1,
+      transition: {
+        duration: 0.6,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  const teamMembers = [
+    {
+      name: "Alex Johnson",
+      role: "CEO & Founder",
+      image: images.team1,
+      bio: "Visionary leader with 15+ years in digital transformation.",
+    },
+    {
+      name: "Maria Garcia",
+      role: "Creative Director",
+      image: images.team2,
+      bio: "Design expert passionate about user-centered experiences.",
+    },
+    {
+      name: "James Wilson",
+      role: "CTO",
+      image: images.team3,
+      bio: "Tech innovator specializing in scalable architectures.",
+    },
+  ];
+
+  const milestones = [
+    {
+      year: "2012",
+      event: "Company Founded",
+      description: "Started with a small team of 5 people",
+    },
+    {
+      year: "2015",
+      event: "First Major Client",
+      description: "Landed Fortune 500 company as client",
+    },
+    {
+      year: "2018",
+      event: "Expanded Globally",
+      description: "Opened offices in 3 countries",
+    },
+    {
+      year: "2022",
+      event: "Award Winning",
+      description: "Recognized as Top Innovators",
+    },
+  ];
+
+  return (
+    <Box sx={{ backgroundColor: "#0F111A", color: "#fff" }}>
+      {/* Hero Section */}
+      <Box
+        sx={{
+          pt: { xs: 8, md: 12 },
+          pb: { xs: 6, md: 10 },
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        <Container maxWidth="lg">
+          <Grid container spacing={6} alignItems="center">
+            <Grid item xs={12} md={6}>
+              <motion.div
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true, margin: "-100px" }}
+                variants={containerVariants}
+              >
+                <Typography
+                  component={motion.div}
+                  variants={fadeUpVariants}
+                  variant="h1"
+                  sx={{
+                    fontFamily: "'Cormorant Garamond', serif",
+                    fontWeight: 700,
+                    fontSize: { xs: "2.5rem", md: "3.5rem" },
+                    lineHeight: 1.2,
+                    mb: 3,
+                  }}
+                >
+                  Crafting Digital Excellence Since 2012
+                </Typography>
+                <Typography
+                  component={motion.div}
+                  variants={leftSlideVariants}
+                  sx={{
+                    fontFamily: "'Montserrat', sans-serif",
+                    fontSize: { xs: "1rem", md: "1.1rem" },
+                    lineHeight: 1.8,
+                    mb: 4,
+                    color: "rgba(255,255,255,0.85)",
+                  }}
+                >
+                  We're a passionate team of designers, developers, and
+                  strategists dedicated to creating digital experiences that
+                  matter.
+                </Typography>
+                <Button
+                  component={motion.a}
+                  variants={fadeUpVariants}
+                  whileHover={{
+                    scale: 1.05,
+                    boxShadow: "0 0 20px rgba(0, 224, 255, 0.4)",
+                  }}
+                  href="#our-team"
+                  variant="outlined"
+                  endIcon={<ArrowOutwardIcon />}
+                  sx={{
+                    borderColor: "#00E0FF",
+                    color: "#00E0FF",
+                    borderRadius: "30px",
+                    fontWeight: 600,
+                    px: 4,
+                    py: 1.5,
+                    "&:hover": {
+                      backgroundColor: "rgba(0, 224, 255, 0.1)",
+                    },
+                  }}
+                >
+                  Meet Our Team
+                </Button>
+              </motion.div>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Box
+                component={motion.div}
+                initial={{ scale: 0.9, opacity: 0 }}
+                whileInView={{ scale: 1, opacity: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8 }}
+                sx={{
+                  borderRadius: "16px",
+                  overflow: "hidden",
+                  boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
+                  position: "relative",
+                  "&:before": {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    background:
+                      "linear-gradient(135deg, rgba(0, 224, 255, 0.2) 0%, rgba(15, 17, 26, 0.5) 100%)",
+                    zIndex: 1,
+                  },
+                }}
+              >
+                <Box
+                  component="img"
+                  src={images.hero}
+                  alt="Our team collaborating"
+                  sx={{
+                    width: "100%",
+                    height: { xs: "300px", md: "500px" },
+                    objectFit: "cover",
+                  }}
+                />
+              </Box>
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+
+      {/* Values Section */}
+      <Box
+        sx={{
+          py: { xs: 8, md: 10 },
+          backgroundColor: "rgba(0, 224, 255, 0.03)",
+        }}
+      >
+        <Container maxWidth="lg">
+          <Typography
+            component={motion.div}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            variant="h2"
+            sx={{
+              fontFamily: "'Cormorant Garamond', serif",
+              fontWeight: 700,
+              fontSize: { xs: "2rem", md: "2.5rem" },
+              textAlign: "center",
+              mb: 6,
+              "&:after": {
+                content: '""',
+                display: "block",
+                width: "80px",
+                height: "4px",
+                background: "#00E0FF",
+                margin: "20px auto",
+                borderRadius: "2px",
+              },
+            }}
+          >
+            Our Core Values
+          </Typography>
+          <Grid container spacing={4}>
+            {[
+              {
+                title: "Innovation",
+                description:
+                  "We push boundaries to deliver cutting-edge solutions.",
+              },
+              {
+                title: "Integrity",
+                description: "Honest and transparent in all our dealings.",
+              },
+              {
+                title: "Excellence",
+                description: "Committed to the highest quality standards.",
+              },
+              {
+                title: "Collaboration",
+                description: "We believe great things happen together.",
+              },
+            ].map((value, index) => (
+              <Grid item xs={12} sm={6} md={3} key={index}>
+                <Box
+                  component={motion.div}
+                  initial={{ opacity: 0, y: 50 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  sx={{
+                    backgroundColor: "#0F111A",
+                    borderRadius: "8px",
+                    p: 4,
+                    height: "100%",
+                    border: "1px solid rgba(0, 224, 255, 0.1)",
+                    boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
+                    transition: "all 0.3s ease",
+                    "&:hover": {
+                      transform: "translateY(-5px)",
+                      boxShadow: "0 12px 24px rgba(0, 224, 255, 0.1)",
+                      borderColor: "rgba(0, 224, 255, 0.3)",
+                    },
+                  }}
+                >
+                  <Typography
+                    variant="h4"
+                    sx={{
+                      color: "#00E0FF",
+                      mb: 2,
+                      fontFamily: "'Cormorant Garamond', serif",
+                    }}
+                  >
+                    {value.title}
+                  </Typography>
+                  <Typography
+                    variant="body1"
+                    sx={{ color: "rgba(255,255,255,0.8)" }}
+                  >
+                    {value.description}
+                  </Typography>
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Container>
+      </Box>
+
+      {/* Team Section */}
+      <Box id="our-team" sx={{ py: { xs: 8, md: 10 } }}>
+        <Container maxWidth="lg">
+          <Typography
+            component={motion.div}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            variant="h2"
+            sx={{
+              fontFamily: "'Cormorant Garamond', serif",
+              fontWeight: 700,
+              fontSize: { xs: "2rem", md: "2.5rem" },
+              textAlign: "center",
+              mb: 6,
+              "&:after": {
+                content: '""',
+                display: "block",
+                width: "80px",
+                height: "4px",
+                background: "#00E0FF",
+                margin: "20px auto",
+                borderRadius: "2px",
+              },
+            }}
+          >
+            Meet The Team
+          </Typography>
+          <Grid container spacing={4} justifyContent="center">
+            {teamMembers.map((member, index) => (
+              <Grid item xs={12} sm={6} md={4} key={index}>
+                <Box
+                  component={motion.div}
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  whileInView={{ opacity: 1, scale: 1 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  sx={{
+                    textAlign: "center",
+                    "&:hover .team-image": {
+                      transform: "scale(1.05)",
+                      boxShadow: "0 0 30px rgba(0, 224, 255, 0.4)",
+                    },
+                  }}
+                >
+                  <Avatar
+                    src={member.image}
+                    alt={member.name}
+                    className="team-image"
+                    sx={{
+                      width: 200,
+                      height: 200,
+                      mx: "auto",
+                      mb: 3,
+                      border: "3px solid #00E0FF",
+                      transition: "all 0.3s ease",
+                    }}
+                  />
+                  <Typography variant="h5" sx={{ color: "#00E0FF", mb: 1 }}>
+                    {member.name}
+                  </Typography>
+                  <Typography
+                    variant="subtitle1"
+                    sx={{ color: "rgba(255,255,255,0.7)", mb: 2 }}
+                  >
+                    {member.role}
+                  </Typography>
+                  <Typography
+                    variant="body1"
+                    sx={{ color: "rgba(255,255,255,0.8)" }}
+                  >
+                    {member.bio}
+                  </Typography>
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Container>
+      </Box>
+
+      {/* Milestones Section */}
+      <Box
+        sx={{
+          py: { xs: 8, md: 10 },
+          backgroundColor: "rgba(0, 224, 255, 0.03)",
+        }}
+      >
+        <Container maxWidth="lg">
+          <Typography
+            component={motion.div}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            variant="h2"
+            sx={{
+              fontFamily: "'Cormorant Garamond', serif",
+              fontWeight: 700,
+              fontSize: { xs: "2rem", md: "2.5rem" },
+              textAlign: "center",
+              mb: 6,
+              "&:after": {
+                content: '""',
+                display: "block",
+                width: "80px",
+                height: "4px",
+                background: "#00E0FF",
+                margin: "20px auto",
+                borderRadius: "2px",
+              },
+            }}
+          >
+            Our Journey
+          </Typography>
+          <Box
+            component={motion.div}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            variants={containerVariants}
+            sx={{
+              position: "relative",
+              "&:before": {
+                content: '""',
+                position: "absolute",
+                top: 0,
+                left: "50%",
+                transform: "translateX(-50%)",
+                width: "2px",
+                height: "100%",
+                background: "linear-gradient(to bottom, #00E0FF, transparent)",
+                [theme.breakpoints.down("sm")]: {
+                  left: "30px",
+                },
+              },
+            }}
+          >
+            {milestones.map((milestone, index) => (
+              <Box
+                key={index}
+                component={motion.div}
+                variants={
+                  index % 2 === 0 ? leftSlideVariants : rightSlideVariants
+                }
+                sx={{
+                  display: "flex",
+                  justifyContent: {
+                    xs: "flex-start",
+                    sm: index % 2 === 0 ? "flex-start" : "flex-end",
+                  },
+                  mb: 6,
+                  position: "relative",
+                  pl: { xs: "60px", sm: 0 },
+                  pr: { sm: index % 2 === 0 ? 0 : "60px" },
+                }}
+              >
+                <Box
+                  sx={{
+                    width: { xs: "100%", sm: "45%" },
+                    backgroundColor: "#0F111A",
+                    borderRadius: "8px",
+                    p: 4,
+                    border: "1px solid rgba(0, 224, 255, 0.1)",
+                    boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
+                    position: "relative",
+                    "&:before": {
+                      content: '""',
+                      position: "absolute",
+                      top: "30px",
+                      left: {
+                        xs: "-10px",
+                        sm: index % 2 === 0 ? "-10px" : "auto",
+                      },
+                      right: { sm: index % 2 === 0 ? "auto" : "-10px" },
+                      width: "20px",
+                      height: "20px",
+                      borderRadius: "50%",
+                      backgroundColor: "#00E0FF",
+                      [theme.breakpoints.down("sm")]: {
+                        left: "20px",
+                      },
+                    },
+                  }}
+                >
+                  <Typography variant="h4" sx={{ color: "#00E0FF", mb: 1 }}>
+                    {milestone.year}
+                  </Typography>
+                  <Typography variant="h5" sx={{ mb: 1 }}>
+                    {milestone.event}
+                  </Typography>
+                  <Typography
+                    variant="body1"
+                    sx={{ color: "rgba(255,255,255,0.8)" }}
+                  >
+                    {milestone.description}
+                  </Typography>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+
+      {/* Office Tour Section */}
+      <Box sx={{ py: { xs: 8, md: 10 } }}>
+        <Container maxWidth="lg">
+          <Typography
+            component={motion.div}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            variant="h2"
+            sx={{
+              fontFamily: "'Cormorant Garamond', serif",
+              fontWeight: 700,
+              fontSize: { xs: "2rem", md: "2.5rem" },
+              textAlign: "center",
+              mb: 6,
+              "&:after": {
+                content: '""',
+                display: "block",
+                width: "80px",
+                height: "4px",
+                background: "#00E0FF",
+                margin: "20px auto",
+                borderRadius: "2px",
+              },
+            }}
+          >
+            Our Workspace
+          </Typography>
+          <Box
+            component={motion.div}
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            sx={{
+              borderRadius: "16px",
+              overflow: "hidden",
+              boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
+              position: "relative",
+              height: { xs: "300px", md: "500px" },
+              "&:before": {
+                content: '""',
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                background:
+                  "linear-gradient(135deg, rgba(0, 224, 255, 0.1) 0%, rgba(15, 17, 26, 0.3) 100%)",
+                zIndex: 1,
+              },
+            }}
+          >
+            <Box
+              component="img"
+              src={images.office}
+              alt="Our office space"
+              sx={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+              }}
+            />
+            <Box
+              component={motion.div}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.4 }}
+              sx={{
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                backgroundColor: "rgba(0, 224, 255, 0.8)",
+                color: "#0F111A",
+                p: 3,
+                zIndex: 2,
+                textAlign: "center",
+              }}
+            >
+              <Typography variant="h5" sx={{ fontWeight: 700 }}>
+                Where Creativity Happens
+              </Typography>
+              <Typography variant="body1">
+                Our inspiring workspace designed for collaboration and
+                innovation
+              </Typography>
+            </Box>
+          </Box>
+        </Container>
+      </Box>
+
+      {/* CTA Section */}
+      <Box sx={{ py: { xs: 8, md: 10 } }}>
+        <Container maxWidth="md">
+          <Box
+            component={motion.div}
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            sx={{
+              backgroundColor: "rgba(0, 224, 255, 0.1)",
+              borderRadius: "16px",
+              p: { xs: 4, md: 6 },
+              textAlign: "center",
+              border: "1px solid rgba(0, 224, 255, 0.2)",
+              boxShadow: "0 8px 32px rgba(0, 224, 255, 0.1)",
+            }}
+          >
+            <Typography
+              variant="h3"
+              sx={{
+                fontFamily: "'Cormorant Garamond', serif",
+                fontWeight: 700,
+                fontSize: { xs: "2rem", md: "2.5rem" },
+                mb: 3,
+              }}
+            >
+              Ready to Start Your Project?
+            </Typography>
+            <Typography
+              variant="body1"
+              sx={{
+                fontSize: { xs: "1rem", md: "1.1rem" },
+                mb: 4,
+                color: "rgba(255,255,255,0.85)",
+              }}
+            >
+              Let's create something amazing together. Get in touch with our
+              team today.
+            </Typography>
+            <Button
+              component={motion.a}
+              whileHover={{
+                scale: 1.05,
+                boxShadow: "0 0 30px rgba(0, 224, 255, 0.5)",
+              }}
+              whileTap={{ scale: 0.95 }}
+              href="/contact"
+              variant="contained"
+              endIcon={<ArrowOutwardIcon />}
+              sx={{
+                backgroundColor: "#00E0FF",
+                color: "#0F111A",
+                borderRadius: "30px",
+                fontWeight: 600,
+                px: 4,
+                py: 1.5,
+                fontSize: "1rem",
+                "&:hover": {
+                  backgroundColor: "#00c7e6",
+                },
+              }}
+            >
+              Contact Us
+            </Button>
+          </Box>
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default AboutUsPageTwo;
diff --git a/src/components/pages/aboutusbase.tsx b/src/components/pages/aboutusbase.tsx
new file mode 100644
index 0000000..69da4fe
--- /dev/null
+++ b/src/components/pages/aboutusbase.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import { Box } from "@mui/material";
+// import CopyrightFooter from '../../assets/copyright';
+
+export const Aboutusbase: React.FC = () => {
+  return (
+    <Box>
+      <Outlet />
+    </Box>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
index 8785b12..c1b34cb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { CssBaseline, ThemeProvider } from '@mui/material';
-import theme from './theme';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import theme from "./theme";
+import { BrowserRouter } from "react-router-dom";
+import AppRoutes from "./routes";
 
-const root = ReactDOM.createRoot(document.getElementById('root')!);
+const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>
+  <BrowserRouter>
+    <AppRoutes />
+  </BrowserRouter>
 );
diff --git a/src/routes.tsx b/src/routes.tsx
index 8c99464..a969f71 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,56 +1,31 @@
-import { createBrowserRouter, Navigate } from "react-router-dom";
-import Layout from "./components/Layout";
-import LandingPage from "./components/landingpage/landingpage";
-import { LandingBase } from "./components/landingpage/landingpagebase";
-import { MottoBase } from "./components/mottopage/mottobase";
-import MottoSection from "./components/mottopage/MottoSection";
-import AboutUsPage from "./components/aboutus";
+// routes/Routes.jsx
+import { Routes, Route } from "react-router-dom";
+import AboutUs from "./components/aboutus/aboutus";
+import Hero from "./components/hero/hero";
+import OurWorks from "./components/ourwork/ourwork";
+import Services from "./components/services/services";
+import Testimonials from "./components/testomonials/testomonias";
+import AboutUsPageTwo from "./components/pages/aboutusPage/aboutus";
 
-const router = createBrowserRouter([
-    {
-      path: '',
-      element: <Layout />, 
-      children: [
-        {
-          index: true,
-          element: <Navigate to='home' />,
-        },
-        {
-          path: 'home',
-          element: <LandingBase />,
-          children: [
-            {
-              index: true,
-              element: <LandingPage />, 
-            },
-          ],
-        },
-        {
-          path: 'aboutUs',
-          element: <LandingBase />,
-          children: [
-            {
-              index: true,
-              element: <AboutUsPage />, 
-            },
-          ],
-        },
-        {
-          path: 'motto',
-          element: <MottoBase />,
-          children: [
-            {
-              index: true,
-              element: <MottoSection />, 
-            },
-          ],
+const AppRoutes = () => {
+  return (
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <>
+            <Hero />
+            <Services />
+            <OurWorks />
+            <AboutUs />
+            <Testimonials />
+          </>
         }
-        
-        
-      ]
-    },
-    
-  ]);
-  
-  export default router;
-  
\ No newline at end of file
+      />
+      <Route path="/about" element={<AboutUsPageTwo />} />
+      {/* Add more routes here */}
+    </Routes>
+  );
+};
+
+export default AppRoutes;