diff --git a/app/(homes)/home-1 copy/page.jsx b/app/(homes)/home-1 copy/page.jsx
new file mode 100644
index 0000000..f9b6781
--- /dev/null
+++ b/app/(homes)/home-1 copy/page.jsx	
@@ -0,0 +1,43 @@
+import Brands from "@/components/common/Brands";
+import Footer1 from "@/components/footers/Footer1";
+import Header1 from "@/components/headers/Header1";
+import HeaderTop1 from "@/components/headers/HeaderTop1";
+import About from "@/components/homes/home-1/About";
+import Blogs from "@/components/homes/home-1/Blogs";
+
+import Contact from "@/components/homes/home-1/Contact";
+import Cta from "@/components/homes/home-1/Cta";
+import Faq from "@/components/homes/home-1/Faq";
+import Hero from "@/components/homes/home-1/Hero";
+import Projects from "@/components/homes/home-1/Projects";
+import Services from "@/components/homes/home-1/Services";
+import Skills from "@/components/homes/home-1/Skills";
+import Team from "@/components/homes/home-1/Team";
+import Testimonials from "@/components/homes/home-1/Testimonials";
+export const metadata = {
+  title: "Home 1 || Xbuild - Constriction nextjs Template",
+  description: "Xbuild - Constriction nextjs Template",
+};
+export default function Home1() {
+  return (
+    <>
+      <HeaderTop1 />
+      <Header1 />
+      <Hero />
+      <About />
+      <Services />
+      <Cta />
+      <Skills />
+      <Testimonials />
+      <Projects />
+      <Faq />
+      <Team />
+      <Contact />
+      <Blogs />
+      <div className="brand-section fix section-padding">
+        <Brands />
+      </div>
+      <Footer1 />
+    </>
+  );
+}
diff --git a/app/(homes)/home-1/page.jsx b/app/(homes)/home-1/page.jsx
index f9b6781..7b7ae33 100644
--- a/app/(homes)/home-1/page.jsx
+++ b/app/(homes)/home-1/page.jsx
@@ -9,7 +9,7 @@ import Contact from "@/components/homes/home-1/Contact";
 import Cta from "@/components/homes/home-1/Cta";
 import Faq from "@/components/homes/home-1/Faq";
 import Hero from "@/components/homes/home-1/Hero";
-import Projects from "@/components/homes/home-1/Projects";
+import Projects from "@/components/project/Projects";
 import Services from "@/components/homes/home-1/Services";
 import Skills from "@/components/homes/home-1/Skills";
 import Team from "@/components/homes/home-1/Team";
@@ -26,17 +26,18 @@ export default function Home1() {
       <Hero />
       <About />
       <Services />
-      <Cta />
       <Skills />
+      <Cta />
       <Testimonials />
       <Projects />
       <Faq />
-      <Team />
-      <Contact />
-      <Blogs />
       <div className="brand-section fix section-padding">
         <Brands />
       </div>
+      {/* <Team /> */}
+      {/* <Contact /> */}
+      <Blogs />
+
       <Footer1 />
     </>
   );
diff --git a/components/homes/home-1/About.jsx b/components/homes/home-1/About.jsx
index 231a454..bf8fd47 100644
--- a/components/homes/home-1/About.jsx
+++ b/components/homes/home-1/About.jsx
@@ -50,14 +50,6 @@ export default function About() {
                       height={270}
                       alt="img"
                     />
-                    <div className="video-box">
-                      <a
-                        onClick={() => setOpen(true)}
-                        className="video-btn video-popup"
-                      >
-                        <i className="fas fa-play"></i>
-                      </a>
-                    </div>
                   </div>
                   <div className="about-line-shape">
                     <Image
@@ -101,7 +93,7 @@ export default function About() {
                       Release of Letraset sheets containing Lorem Ipsum
                     </li>
                   </ul>
-                  <div className="about-author">
+                  {/* <div className="about-author">
                     <div
                       className="author-image wow fadeInUp"
                       data-wow-delay=".2s"
@@ -125,7 +117,7 @@ export default function About() {
                       className="wow fadeInUp"
                       data-wow-delay=".4s"
                     />
-                  </div>
+                  </div> */}
                 </div>
               </div>
             </div>
diff --git a/components/homes/home-1/About2.jsx b/components/homes/home-1/About2.jsx
new file mode 100644
index 0000000..231a454
--- /dev/null
+++ b/components/homes/home-1/About2.jsx
@@ -0,0 +1,144 @@
+"use client";
+import Image from "next/image";
+import AnimatedText from "@/components/common/AnimatedText";
+import ModalVideo from "react-modal-video";
+import { useState } from "react";
+export default function About() {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <section
+        id="about"
+        className="about-section fix section-padding scrollSpySection"
+      >
+        <div className="about-shape-1 float-bob-x">
+          <Image
+            src="/assets/img/about/about-shape-1.png"
+            width={114}
+            height={419}
+            alt="img"
+          />
+        </div>
+        <div className="about-shape-2 float-bob-x">
+          <Image
+            src="/assets/img/about/about-shape-2.png"
+            width={318}
+            height={408}
+            alt="img"
+          />
+        </div>
+        <div className="container">
+          <div className="about-wrapper">
+            <div className="row g-4">
+              <div className="col-lg-6">
+                <div className="about-image">
+                  <Image
+                    src="/assets/img/about/01.jpg"
+                    alt="img"
+                    width={485}
+                    height={592}
+                    className="wow fadeInLeft"
+                    data-wow-delay=".2s"
+                  />
+                  <div
+                    className="about-image-2 wow fadeInUp"
+                    data-wow-delay=".4s"
+                  >
+                    <Image
+                      src="/assets/img/about/02.jpg"
+                      width={260}
+                      height={270}
+                      alt="img"
+                    />
+                    <div className="video-box">
+                      <a
+                        onClick={() => setOpen(true)}
+                        className="video-btn video-popup"
+                      >
+                        <i className="fas fa-play"></i>
+                      </a>
+                    </div>
+                  </div>
+                  <div className="about-line-shape">
+                    <Image
+                      src="/assets/img/about/about-shape-3.png"
+                      width={30}
+                      height={545}
+                      alt="img"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="col-lg-6">
+                <div className="about-content">
+                  <div className="section-title">
+                    <h6 className="wow fadeInUp">
+                      <i className="fa-regular fa-arrow-left-long"></i>1976
+                      Building conpany
+                      <i className="fa-regular fa-arrow-right-long"></i>
+                    </h6>
+                    <h2 className="splt-txt wow">
+                      <AnimatedText text="Create The Building You Want Here" />
+                    </h2>
+                  </div>
+                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
+                    It is a long established fact that a reader will be
+                    distracted the readable content of a page when looking at
+                    layout the point of using lorem the is Ipsum less normal
+                    distribution of letters.
+                  </p>
+                  <ul className="list-items wow fadeInUp" data-wow-delay=".2s">
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                      Proactively pontificate client-centered relationships
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                      Is there a waiting list for desired work to be started
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                      Release of Letraset sheets containing Lorem Ipsum
+                    </li>
+                  </ul>
+                  <div className="about-author">
+                    <div
+                      className="author-image wow fadeInUp"
+                      data-wow-delay=".2s"
+                    >
+                      <Image
+                        src="/assets/img/about/author.png"
+                        width={68}
+                        height={68}
+                        alt="author-img"
+                      />
+                      <div className="content">
+                        <p>Xbuild, CEO</p>
+                        <h4>Brooklyn Simmons</h4>
+                      </div>
+                    </div>
+                    <Image
+                      src="/assets/img/about/signature.png"
+                      alt="img"
+                      width={85}
+                      height={51}
+                      className="wow fadeInUp"
+                      data-wow-delay=".4s"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>{" "}
+      <ModalVideo
+        channel="youtube"
+        youtube={{ mute: 0, autoplay: 0 }}
+        isOpen={isOpen}
+        videoId="Cn4G2lZ_g2I"
+        onClose={() => setOpen(false)}
+      />{" "}
+    </>
+  );
+}
diff --git a/components/homes/home-1/Cta.jsx b/components/homes/home-1/Cta.jsx
index 7c826ef..43072b4 100644
--- a/components/homes/home-1/Cta.jsx
+++ b/components/homes/home-1/Cta.jsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import AnimatedText from "@/components/common/AnimatedText";
 export default function Cta() {
   return (
-    <section className="cta-banner-section section-padding">
+    <section className="cta-banner-section section-padding pt-0">
       <div className="container">
         <div
           className="cta-banner-wrapper fix bg-cover"
diff --git a/components/homes/home-1/Hero.jsx b/components/homes/home-1/Hero.jsx
index 1d590d9..f0dc34b 100644
--- a/components/homes/home-1/Hero.jsx
+++ b/components/homes/home-1/Hero.jsx
@@ -1,164 +1,82 @@
 "use client";
-import AnimatedText from "@/components/common/AnimatedText";
-import { Autoplay, Navigation } from "swiper/modules";
+import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import Link from "next/link";
-import Image from "next/image";
-import ModalVideo from "react-modal-video";
-import { useState } from "react";
+import "swiper/css";
+import "swiper/css/pagination";
+
 export default function Hero() {
-  const [isOpen, setOpen] = useState(false);
   const swiperOptions = {
-    spaceBetween: 30,
-    speed: 2000,
+    slidesPerView: 1,
     loop: true,
+    speed: 4000,
+    freeMode: true,
     autoplay: {
-      delay: 2000,
+      delay: 0,
       disableOnInteraction: false,
     },
-    navigation: {
-      prevEl: ".array-prevs",
-      nextEl: ".array-nexts",
-    },
-    modules: [Autoplay, Navigation],
-    breakpoints: {
-      1199: {
-        slidesPerView: 2,
-      },
-      991: {
-        slidesPerView: 2,
-      },
-      767: {
-        slidesPerView: 2,
-      },
-      575: {
-        slidesPerView: 1,
-      },
-      0: {
-        slidesPerView: 1,
-      },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
     },
+    modules: [Autoplay, Pagination],
   };
-  const images = [
-    "/assets/img/hero/01.jpg",
-    "/assets/img/hero/02.jpg",
-    "/assets/img/hero/01.jpg",
-    "/assets/img/hero/02.jpg",
-    // Add more image paths as needed
-  ];
-  return (
-    <>
-      <section className="hero-section hero-1 fix section-padding">
-        <div className="line-shape">
-          <Image
-            src="/assets/img/hero/line-shape.png"
-            width={365}
-            height={603}
-            alt="img"
-          />
-        </div>
-        <div className="container-fluid">
-          <div className="row g-4">
-            <div className="col-lg-7">
-              <div className="hero-content">
-                <div className="vector-shape">
-                  <Image
-                    src="/assets/img/hero/vector.png"
-                    width={254}
-                    height={296}
-                    alt="img"
-                  />
-                </div>
-                <div className="vector-shape-2">
-                  <Image
-                    src="/assets/img/hero/vector-2.png"
-                    width={254}
-                    height={296}
-                    alt="img"
-                  />
-                </div>
-                <h1 className="splt-txt wow">
-                  <AnimatedText text="Create the" />
-                  <br /> <AnimatedText text="building you" />
-                  <br /> <AnimatedText text="want here" />
-                </h1>
-                <p className="wow fadeInUp" data-wow-delay=".5s">
-                  Proactively pontificate client-centered relationships visavis
-                  process centric leadership skills. Credibly.
-                </p>
-                <div className="hero-button">
-                  <Link
-                    href={`/about`}
-                    className="theme-btn bg-white wow fadeInUp"
-                    data-wow-delay=".3s"
-                  >
-                    Explore More
-                    <i className="fa-regular fa-arrow-right"></i>
-                  </Link>
-                  <span
-                    className="button-text wow fadeInUp"
-                    data-wow-delay=".5s"
-                  >
-                    <a
-                      onClick={() => setOpen(true)}
-                      className="video-btn video-popup"
-                    >
-                      <i className="fa-solid fa-play"></i>
-                    </a>
-                    <span className="ms-3 d-line">play reel</span>
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div className="col-lg-5">
-              <div className="hero-image-items">
-                <Swiper {...swiperOptions} className="swiper hero-slider">
-                  {images.map((src, index) => (
-                    <SwiperSlide className="swiper-slide" key={index}>
-                      <div className="hero-image">
-                        <Image
-                          width={475}
-                          height={635}
-                          src={src}
-                          alt={`Hero ${index + 1}`}
-                        />
-                      </div>
-                    </SwiperSlide>
-                  ))}
 
-                  <div className="array-button">
-                    <button className="array-prevs">
-                      <Image
-                        src="/assets/img/hero/prev.png"
-                        width={15}
-                        height={11}
-                        alt="img"
-                      />
-                      Previews
-                    </button>
-                    <button className="array-nexts">
-                      Next{" "}
-                      <Image
-                        src="/assets/img/hero/next.png"
-                        width={15}
-                        height={11}
-                        alt="img"
-                      />
-                    </button>
+  const slides = [
+    {
+      id: 1,
+      image: "/assets/img/cta-bg.jpg",
+      title: "Create the building",
+      subtitle: "you want here",
+      text: "Proactively pontificate client-centered relationships visavis process centric leadership skills. Credibly.",
+    },
+    {
+      id: 2,
+      image: "/assets/img/cta-bg.jpg",
+      title: "Design your dream",
+      subtitle: "with us today",
+      text: "Empower your projects with innovative solutions and expert guidance from start to finish.",
+    },
+    {
+      id: 3,
+      image: "/assets/img/cta-bg.jpg",
+      title: "Build your future",
+      subtitle: "with confidence",
+      text: "Delivering excellence through teamwork, integrity, and cutting-edge technology. Credibly",
+    },
+  ];
+
+  return (
+    <Swiper {...swiperOptions} className="hero-swiper">
+      {slides.map((slide) => (
+        <SwiperSlide key={slide.id}>
+          <section
+            className="hero-section hero-1"
+            style={{ backgroundImage: `url(${slide.image})` }}
+          >
+            <div className="container-fluid">
+              <div className="row">
+                <div className="col-lg-12">
+                  <div className="hero-content">
+                    <h1 className="splt-txt">
+                      <span className="break-line">{slide.title}</span>
+                      <span className="break-line">{slide.subtitle}</span>
+                    </h1>
+                    <p>{slide.text}</p>
+                    <div className="hero-button">
+                      <Link href="/about" className="theme-btn bg-white">
+                        Explore More
+                        <i className="fa-regular fa-arrow-right"></i>
+                      </Link>
+                    </div>
                   </div>
-                </Swiper>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-      </section>
-      <ModalVideo
-        channel="youtube"
-        youtube={{ mute: 0, autoplay: 0 }}
-        isOpen={isOpen}
-        videoId="Cn4G2lZ_g2I"
-        onClose={() => setOpen(false)}
-      />{" "}
-    </>
+          </section>
+        </SwiperSlide>
+      ))}
+      <div className="swiper-pagination"></div>
+    </Swiper>
   );
 }
diff --git a/components/homes/home-1/Hero2.jsx b/components/homes/home-1/Hero2.jsx
new file mode 100644
index 0000000..1d590d9
--- /dev/null
+++ b/components/homes/home-1/Hero2.jsx
@@ -0,0 +1,164 @@
+"use client";
+import AnimatedText from "@/components/common/AnimatedText";
+import { Autoplay, Navigation } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import Link from "next/link";
+import Image from "next/image";
+import ModalVideo from "react-modal-video";
+import { useState } from "react";
+export default function Hero() {
+  const [isOpen, setOpen] = useState(false);
+  const swiperOptions = {
+    spaceBetween: 30,
+    speed: 2000,
+    loop: true,
+    autoplay: {
+      delay: 2000,
+      disableOnInteraction: false,
+    },
+    navigation: {
+      prevEl: ".array-prevs",
+      nextEl: ".array-nexts",
+    },
+    modules: [Autoplay, Navigation],
+    breakpoints: {
+      1199: {
+        slidesPerView: 2,
+      },
+      991: {
+        slidesPerView: 2,
+      },
+      767: {
+        slidesPerView: 2,
+      },
+      575: {
+        slidesPerView: 1,
+      },
+      0: {
+        slidesPerView: 1,
+      },
+    },
+  };
+  const images = [
+    "/assets/img/hero/01.jpg",
+    "/assets/img/hero/02.jpg",
+    "/assets/img/hero/01.jpg",
+    "/assets/img/hero/02.jpg",
+    // Add more image paths as needed
+  ];
+  return (
+    <>
+      <section className="hero-section hero-1 fix section-padding">
+        <div className="line-shape">
+          <Image
+            src="/assets/img/hero/line-shape.png"
+            width={365}
+            height={603}
+            alt="img"
+          />
+        </div>
+        <div className="container-fluid">
+          <div className="row g-4">
+            <div className="col-lg-7">
+              <div className="hero-content">
+                <div className="vector-shape">
+                  <Image
+                    src="/assets/img/hero/vector.png"
+                    width={254}
+                    height={296}
+                    alt="img"
+                  />
+                </div>
+                <div className="vector-shape-2">
+                  <Image
+                    src="/assets/img/hero/vector-2.png"
+                    width={254}
+                    height={296}
+                    alt="img"
+                  />
+                </div>
+                <h1 className="splt-txt wow">
+                  <AnimatedText text="Create the" />
+                  <br /> <AnimatedText text="building you" />
+                  <br /> <AnimatedText text="want here" />
+                </h1>
+                <p className="wow fadeInUp" data-wow-delay=".5s">
+                  Proactively pontificate client-centered relationships visavis
+                  process centric leadership skills. Credibly.
+                </p>
+                <div className="hero-button">
+                  <Link
+                    href={`/about`}
+                    className="theme-btn bg-white wow fadeInUp"
+                    data-wow-delay=".3s"
+                  >
+                    Explore More
+                    <i className="fa-regular fa-arrow-right"></i>
+                  </Link>
+                  <span
+                    className="button-text wow fadeInUp"
+                    data-wow-delay=".5s"
+                  >
+                    <a
+                      onClick={() => setOpen(true)}
+                      className="video-btn video-popup"
+                    >
+                      <i className="fa-solid fa-play"></i>
+                    </a>
+                    <span className="ms-3 d-line">play reel</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-5">
+              <div className="hero-image-items">
+                <Swiper {...swiperOptions} className="swiper hero-slider">
+                  {images.map((src, index) => (
+                    <SwiperSlide className="swiper-slide" key={index}>
+                      <div className="hero-image">
+                        <Image
+                          width={475}
+                          height={635}
+                          src={src}
+                          alt={`Hero ${index + 1}`}
+                        />
+                      </div>
+                    </SwiperSlide>
+                  ))}
+
+                  <div className="array-button">
+                    <button className="array-prevs">
+                      <Image
+                        src="/assets/img/hero/prev.png"
+                        width={15}
+                        height={11}
+                        alt="img"
+                      />
+                      Previews
+                    </button>
+                    <button className="array-nexts">
+                      Next{" "}
+                      <Image
+                        src="/assets/img/hero/next.png"
+                        width={15}
+                        height={11}
+                        alt="img"
+                      />
+                    </button>
+                  </div>
+                </Swiper>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <ModalVideo
+        channel="youtube"
+        youtube={{ mute: 0, autoplay: 0 }}
+        isOpen={isOpen}
+        videoId="Cn4G2lZ_g2I"
+        onClose={() => setOpen(false)}
+      />{" "}
+    </>
+  );
+}
diff --git a/components/homes/home-1/Skills.jsx b/components/homes/home-1/Skills.jsx
index b0d0245..13934d9 100644
--- a/components/homes/home-1/Skills.jsx
+++ b/components/homes/home-1/Skills.jsx
@@ -4,7 +4,7 @@ import AnimatedText from "@/components/common/AnimatedText";
 import { skills } from "@/data/skills";
 export default function Skills() {
   return (
-    <section className="skills-section fix section-padding pt-0">
+    <section className="skills-section fix section-padding">
       <div className="shape-1 float-bob-x">
         <Image
           src="/assets/img/skills/shape-1.png"
@@ -61,7 +61,7 @@ export default function Skills() {
                 <div className="section-title">
                   <h6 className="wow fadeInUp">
                     <i className="fa-regular fa-arrow-left-long" />
-                    our skills
+                     Why Choose Us
                     <i className="fa-regular fa-arrow-right-long" />
                   </h6>
                   <h2 className="splt-txt wow">
diff --git a/components/project/Projects.jsx b/components/project/Projects.jsx
index aa4c5b9..bcad90e 100644
--- a/components/project/Projects.jsx
+++ b/components/project/Projects.jsx
@@ -1,11 +1,22 @@
 import { projects } from "@/data/projects";
 import React from "react";
 import Image from "next/image";
+import AnimatedText from "@/components/common/AnimatedText";
 import Link from "next/link";
 export default function Projects() {
   return (
     <section className="project-section section-padding fix">
       <div className="container">
+        <div className="section-title text-center">
+          <h6 className="wow fadeInUp">
+            <i className="fa-regular fa-arrow-left-long" />
+            Who we are
+            <i className="fa-regular fa-arrow-right-long" />
+          </h6>
+          <h2 className="splt-txt wow">
+            <AnimatedText text="Delivers Custom Food" />
+          </h2>
+        </div>
         <div className="row g-4">
           {projects.map((project) => (
             <div
@@ -30,6 +41,12 @@ export default function Projects() {
                     <Link href={`/project-details/${project.id}`}>
                       {project.title}
                     </Link>
+                    <Link
+                      href={`/service-details/${project.id}`}
+                      className="link-btn"
+                    >
+                      <i className="fa-solid fa-arrow-right"></i>
+                    </Link>
                   </h3>
                   <p>{project.description}</p>
                 </div>
diff --git a/components/project/Projects2.jsx b/components/project/Projects2.jsx
new file mode 100644
index 0000000..aa4c5b9
--- /dev/null
+++ b/components/project/Projects2.jsx
@@ -0,0 +1,51 @@
+import { projects } from "@/data/projects";
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+export default function Projects() {
+  return (
+    <section className="project-section section-padding fix">
+      <div className="container">
+        <div className="row g-4">
+          {projects.map((project) => (
+            <div
+              key={project.id}
+              className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
+              data-wow-delay={project.delay}
+            >
+              <div className="project-card-items">
+                <div className="project-image">
+                  {project.images.map((image, index) => (
+                    <Image
+                      key={index}
+                      width={370}
+                      height={331}
+                      src={image}
+                      alt="img"
+                    />
+                  ))}
+                </div>
+                <div className="project-content">
+                  <h3>
+                    <Link href={`/project-details/${project.id}`}>
+                      {project.title}
+                    </Link>
+                  </h3>
+                  <p>{project.description}</p>
+                </div>
+                <div className="shape-img">
+                  <Image
+                    src="/assets/img/project/shape.png"
+                    width={57}
+                    height={54}
+                    alt="img"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/data/projects.js b/data/projects.js
index 73037b0..0b98a60 100644
--- a/data/projects.js
+++ b/data/projects.js
@@ -47,75 +47,69 @@ export const projects = [
   {
     id: 7,
     images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
-    title: "General Construction",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
+    title: "Mission",
     delay: ".2s",
   },
   {
     id: 8,
     images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
-    title: "Architecture & Building",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
+    title: "Vission",
     delay: ".4s",
   },
   {
     id: 9,
     images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
-    title: "Interior Design",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
-    delay: ".6s",
-  },
-  {
-    id: 10,
-    images: ["/assets/img/project/12.jpg", "/assets/img/project/12.jpg"],
-    title: "Combine Electricity",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
-    delay: ".2s",
-  },
-  {
-    id: 11,
-    images: ["/assets/img/project/13.jpg", "/assets/img/project/13.jpg"],
-    title: "Bridge Trangle Core",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
-    delay: ".4s",
-  },
-  {
-    id: 12,
-    images: ["/assets/img/project/14.jpg", "/assets/img/project/14.jpg"],
-    title: "General Construction",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
-    delay: ".6s",
-  },
-  {
-    id: 13,
-    images: ["/assets/img/project/15.jpg", "/assets/img/project/15.jpg"],
-    title: "Contemporary Villa",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
-    delay: ".2s",
-  },
-  {
-    id: 14,
-    images: ["/assets/img/project/16.jpg", "/assets/img/project/16.jpg"],
-    title: "Rubix Carabil Tower",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
-    delay: ".4s",
-  },
-  {
-    id: 15,
-    images: ["/assets/img/project/17.jpg", "/assets/img/project/17.jpg"],
-    title: "Combine Electricity",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
+    title: "Core Values",
     delay: ".6s",
   },
+  // {
+  //   id: 10,
+  //   images: ["/assets/img/project/12.jpg", "/assets/img/project/12.jpg"],
+  //   title: "Combine Electricity",
+  //   description:
+  //     "There are many variations of a passages of Lorem Ipsum available.",
+  //   delay: ".2s",
+  // },
+  // {
+  //   id: 11,
+  //   images: ["/assets/img/project/13.jpg", "/assets/img/project/13.jpg"],
+  //   title: "Bridge Trangle Core",
+  //   description:
+  //     "There are many variations of a passages of Lorem Ipsum available.",
+  //   delay: ".4s",
+  // },
+  // {
+  //   id: 12,
+  //   images: ["/assets/img/project/14.jpg", "/assets/img/project/14.jpg"],
+  //   title: "General Construction",
+  //   description:
+  //     "There are many variations of a passages of Lorem Ipsum available.",
+  //   delay: ".6s",
+  // },
+  // {
+  //   id: 13,
+  //   images: ["/assets/img/project/15.jpg", "/assets/img/project/15.jpg"],
+  //   title: "Contemporary Villa",
+  //   description:
+  //     "There are many variations of a passages of Lorem Ipsum available.",
+  //   delay: ".2s",
+  // },
+  // {
+  //   id: 14,
+  //   images: ["/assets/img/project/16.jpg", "/assets/img/project/16.jpg"],
+  //   title: "Rubix Carabil Tower",
+  //   description:
+  //     "There are many variations of a passages of Lorem Ipsum available.",
+  //   delay: ".4s",
+  // },
+  // {
+  //   id: 15,
+  //   images: ["/assets/img/project/17.jpg", "/assets/img/project/17.jpg"],
+  //   title: "Combine Electricity",
+  //   description:
+  //     "There are many variations of a passages of Lorem Ipsum available.",
+  //   delay: ".6s",
+  // },
 ];
 
 export const projects2 = [
diff --git a/public/assets/scss/_about.scss b/public/assets/scss/_about.scss
index fa28dda..685c905 100644
--- a/public/assets/scss/_about.scss
+++ b/public/assets/scss/_about.scss
@@ -119,7 +119,7 @@
 
         .list-items {
             margin-top: 30px;
-            border-bottom: 1px solid $border-color;
+            // border-bottom: 1px solid $border-color;
             padding-bottom: 30px;
             margin-bottom: 30px;
 
diff --git a/public/assets/scss/_hero.scss b/public/assets/scss/_hero.scss
index 59522e5..fba1f86 100644
--- a/public/assets/scss/_hero.scss
+++ b/public/assets/scss/_hero.scss
@@ -1,15 +1,29 @@
 .hero-1 {
-    background-color: $bg-color;
-    position: relative;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    padding: 190px 0;
+
+    @include breakpoint(max-xxl) {
+        padding: 140px 0;
+    }
+
+    @include breakpoint(max-md) {
+        padding: 100px 0;
+    }
+
+    @include breakpoint(max-sm) {
+        padding: 80px 0;
+    }
 
     .container-fluid {
         padding: 0 150px;
 
-        @include breakpoint (max-xl4){
+        @include breakpoint (max-xl4) {
             padding: 0 40px;
         }
 
-        @include breakpoint (max-xxl){
+        @include breakpoint (max-xxl) {
             padding: 0 25px;
         }
     }
@@ -21,25 +35,25 @@
     }
 
     .hero-content {
-        background-color: $theme-color;
+        // background-color: $theme-color;
         padding: 105px 70px;
-        clip-path: polygon(0% 15%, 0 11%, 11% 0, 85% 0%, 100% 0, 100% 15%, 100% 88%, 91% 100%, 94% 100%, 15% 100%, 0 100%, 0% 85%);
-        max-width: 870px;
+        // clip-path: polygon(0% 15%, 0 11%, 11% 0, 85% 0%, 100% 0, 100% 15%, 100% 88%, 91% 100%, 94% 100%, 15% 100%, 0 100%, 0% 85%);
+        // max-width: 870px;
         position: relative;
 
-        @include breakpoint (max-xxl){
-           padding: 70px 40px;
-        }
-
-        @include breakpoint (max-lg){
-            padding: 70px 50px;
-        }
-
-        @include breakpoint (max-md){
+        @include breakpoint (max-xxl) {
             padding: 70px 40px;
         }
 
-        @include breakpoint (max-sm){
+        @include breakpoint (max-lg) {
+            padding: 70px 50px;
+        }
+
+        @include breakpoint (max-md) {
+            padding: 70px 40px;
+        }
+
+        @include breakpoint (max-sm) {
             padding: 60px 30px;
         }
 
@@ -61,30 +75,34 @@
             color: $white;
             text-transform: uppercase;
 
+            .break-line {
+                display: block;
+            }
+
             br {
-                @include breakpoint (max-xl){
+                @include breakpoint (max-xl) {
                     display: none;
                 }
             }
 
-            @include breakpoint (max-xxl){
-               font-size: 74px;
+            @include breakpoint (max-xxl) {
+                font-size: 74px;
             }
 
-            @include breakpoint (max-xl){
+            @include breakpoint (max-xl) {
                 font-size: 64px;
             }
 
-            @include breakpoint (max-lg){
+            @include breakpoint (max-lg) {
                 font-size: 54px;
             }
 
-            @include breakpoint (max-md){
+            @include breakpoint (max-md) {
                 font-size: 46px;
                 line-height: 126%;
             }
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 font-size: 32px;
             }
         }
@@ -95,15 +113,15 @@
             color: $white;
             margin-top: 20px;
 
-            @include breakpoint (max-lg){
+            @include breakpoint (max-lg) {
                 font-size: 21px;
             }
 
-            @include breakpoint (max-md){
+            @include breakpoint (max-md) {
                 font-size: 19px;
             }
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 font-size: 17px;
             }
         }
@@ -113,14 +131,14 @@
             @include flex;
             gap: 24px;
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 flex-wrap: wrap;
                 margin-top: 30px;
             }
 
             .button-text {
                 .video-btn {
-                    width:55px;
+                    width: 55px;
                     height: 55px;
                     line-height: 55px;
                     display: inline-block;
@@ -141,23 +159,23 @@
         margin-right: -48%;
         position: relative;
 
-        @include breakpoint (max-lg){
+        @include breakpoint (max-lg) {
             margin-right: 0;
         }
 
         .hero-image {
-            @include breakpoint (max-lg){
+            @include breakpoint (max-lg) {
                 height: 600px;
             }
 
-            @include breakpoint (max-md){
+            @include breakpoint (max-md) {
                 height: 520px;
             }
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 height: 420px;
             }
-            
+
             img {
                 @include imgw;
                 object-fit: cover
@@ -170,12 +188,12 @@
             margin-top: 40px;
             position: relative;
 
-            @include breakpoint (max-xl4){
+            @include breakpoint (max-xl4) {
                 gap: 50px;
                 justify-content: start;
             }
 
-            @include breakpoint (max-lg){
+            @include breakpoint (max-lg) {
                 justify-content: center;
             }
 
@@ -189,12 +207,13 @@
                 opacity: 0.5;
                 background: $white;
 
-                @include breakpoint (max-xl4){
-                   display: none;
+                @include breakpoint (max-xl4) {
+                    display: none;
                 }
             }
 
-            .array-prevs,.array-nexts {
+            .array-prevs,
+            .array-nexts {
                 color: $white;
                 font-size: 16px;
                 font-weight: 500;
@@ -215,15 +234,15 @@
     padding: 230px 0 400px;
     position: relative;
 
-    @include breakpoint (max-xxl){
+    @include breakpoint (max-xxl) {
         padding: 235px 0 150px;
     }
 
-    @include breakpoint (max-md){
+    @include breakpoint (max-md) {
         padding: 195px 0 120px;
     }
 
-    @include breakpoint (max-sm){
+    @include breakpoint (max-sm) {
         padding: 175px 0 100px;
     }
 
@@ -238,7 +257,7 @@
         top: 220px;
         left: 89px;
 
-        @include breakpoint (max-xl4){
+        @include breakpoint (max-xl4) {
             left: 0;
 
             img {
@@ -246,7 +265,7 @@
             }
         }
 
-        @include breakpoint (max-xxxl){
+        @include breakpoint (max-xxxl) {
             max-width: 500px;
             left: 0;
 
@@ -255,7 +274,7 @@
             }
         }
 
-        @include breakpoint (max-xxl){
+        @include breakpoint (max-xxl) {
             display: none;
         }
     }
@@ -265,7 +284,7 @@
         top: 220px;
         right: 89px;
 
-        @include breakpoint (max-xxxl){
+        @include breakpoint (max-xxxl) {
             max-width: 500px;
             right: 0;
 
@@ -274,7 +293,7 @@
             }
         }
 
-        @include breakpoint (max-xxl){
+        @include breakpoint (max-xxl) {
             display: none;
         }
 
@@ -304,7 +323,7 @@
                     position: absolute;
                     top: 50%;
                     left: 50%;
-                    transform: translate(-50%,-50%);
+                    transform: translate(-50%, -50%);
                     border: 1px solid $white;
                     content: "";
                 }
@@ -322,7 +341,7 @@
                 position: absolute;
                 top: 50%;
                 left: 50%;
-                transform: translate(-50%,-50%);
+                transform: translate(-50%, -50%);
             }
         }
     }
@@ -333,10 +352,10 @@
         margin-left: 30px;
         margin-top: -35px;
 
-        @include breakpoint (max-xxl){
-          text-align: center;
-          margin-top: 0;
-          margin-left: 0;
+        @include breakpoint (max-xxl) {
+            text-align: center;
+            margin-top: 0;
+            margin-left: 0;
         }
 
         h1 {
@@ -346,19 +365,19 @@
             text-transform: uppercase;
             line-height: 118%;
 
-            @include breakpoint (max-xxl){
+            @include breakpoint (max-xxl) {
                 font-size: 80px;
             }
 
-            @include breakpoint (max-lg){
+            @include breakpoint (max-lg) {
                 font-size: 70px;
             }
 
-            @include breakpoint (max-md){
+            @include breakpoint (max-md) {
                 font-size: 55px;
             }
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 font-size: 42px;
             }
 
@@ -375,7 +394,7 @@
         bottom: 85px;
         right: 28%;
 
-        @include breakpoint (max-xxl){
+        @include breakpoint (max-xxl) {
             position: static;
             text-align: center;
             margin: 30px auto 0;