about page structure updated

app/(about)/about/page.jsx

@@ -2,8 +2,8 @@ import Achievments from "@/components/about/Achievments";
 import Team from "@/components/about/Team";
 import Brands from "@/components/common/Brands";
 import Footer1 from "@/components/footers/Footer1";
-import Header2 from "@/components/headers/Header2";
+import Header1 from "@/components/headers/Header1";
-import About from "@/components/homes/home-1/About";
+import About from "@/components/homes/home-1/AboutPage";
 
 import Testimonials from "@/components/homes/home-1/Testimonials";
 import Image from "next/image";
@@ -17,19 +17,19 @@ export const metadata = {
 export default function page() {
   return (
     <>
-      <Header2 />
+      <Header1 />
       <div
         className="breadcrumb-wrapper bg-cover"
-        style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
+        style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
       >
-        <div className="shape-image float-bob-y">
+        {/* <div className="shape-image float-bob-y">
           <Image
             src="/assets/img/vector.png"
             width={84}
             height={186}
             alt="img"
           />
-        </div>
+        </div> */}
         <div className="container">
           <div className="breadcrumb-wrapper-items">
             <div className="page-heading">
@@ -52,13 +52,13 @@ export default function page() {
               </ul>
             </div>
             <div className="breadcrumb-image">
-              <Image
+              {/* <Image
                 src="/assets/img/breadcrumb-image.png"
                 width={540}
                 height={450}
                 alt="img"
                 className="float-bob-x"
-              />
+              /> */}
               <div className="bar-shape">
                 <Image
                   src="/assets/img/breadcrumb-bar.png"
@@ -73,12 +73,12 @@ export default function page() {
       </div>
       <About />
       <Achievments />
-      <Testimonials />
+      {/* <Testimonials /> */}
 
       <Team />
-      <div className="brand-section fix section-padding pt-0">
+      {/* <div className="brand-section fix section-padding pt-0">
         <Brands />
-      </div>
+      </div> */}
       <Footer1 />
     </>
   );

components/about/Team.jsx

@@ -22,7 +22,7 @@ export default function Team() {
         />
       </div>
       <div className="container">
-        <div className="section-title text-center">
+        {/* <div className="section-title text-center">
           <h6 className="wow fadeInUp">
             <i className="fa-regular fa-arrow-left-long" />
             our team members
@@ -31,7 +31,7 @@ export default function Team() {
           <h2 className="splt-txt wow">
             <AnimatedText text="Our Professional Team" />
           </h2>
-        </div>
+        </div> */}
         <div className="row">
           {teamMembers2.map((member) => (
             <div

components/about/Team2.jsx

@@ -0,0 +1,78 @@
+import { teamMembers2 } from "@/data/team";
+import Link from "next/link";
+import Image from "next/image";
+import AnimatedText from "../common/AnimatedText";
+export default function Team() {
+  return (
+    <section className="team-section section-padding">
+      <div className="shape-1 float-bob-y">
+        <Image
+          src="/assets/img/team/shape-1.png"
+          width={161}
+          height={250}
+          alt="img"
+        />
+      </div>
+      <div className="shape-2">
+        <Image
+          src="/assets/img/team/shape-2.png"
+          width={352}
+          height={428}
+          alt="img"
+        />
+      </div>
+      <div className="container">
+        <div className="section-title text-center">
+          <h6 className="wow fadeInUp">
+            <i className="fa-regular fa-arrow-left-long" />
+            our team members
+            <i className="fa-regular fa-arrow-right-long" />
+          </h6>
+          <h2 className="splt-txt wow">
+            <AnimatedText text="Our Professional Team" />
+          </h2>
+        </div>
+        <div className="row">
+          {teamMembers2.map((member) => (
+            <div
+              key={member.id}
+              className={`col-xl-3 col-lg-4 col-md-6 col-sm-6 wow fadeInUp${
+                member.active ? " active" : ""
+              }`}
+              data-wow-delay={member.delay}
+            >
+              <div className="team-box-items">
+                <div className="social-icon d-grid align-items-center">
+                  {member.socials.map((link, index) => (
+                    <a key={index} href={link.href}>
+                      <i className={link.iconClass} />
+                    </a>
+                  ))}
+                </div>
+                <div className="team-image">
+                  <Image
+                    src={member.image}
+                    width={240}
+                    height={288}
+                    alt="Team"
+                  />
+                </div>
+                <div className="team-content">
+                  <h5>
+                    <Link href={`/team-details/${member.id}`}>
+                      {member.name}
+                    </Link>
+                  </h5>
+                  <p>{member.role}</p>
+                  <a href="team-details" className="icon">
+                    <i className="fa-solid fa-link" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/headers/Header1.jsx

@@ -28,10 +28,10 @@ export default function Header1() {
                     <div className="logo">
                       <Link href={`/`} className="header-logo">
                         <Image
-                          src="/assets/img/logo/black-logo.svg"
+                          src="/assets/img/logo/logo.png"
                           alt="logo-img"
-                          width={149}
+                          width={300}
-                          height={64}
+                          height={60}
                         />
                       </Link>
                     </div>

components/homes/home-1/AboutPage.jsx

@@ -0,0 +1,138 @@
+"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>
+                  <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>About Us
+                      <i className="fa-regular fa-arrow-right-long"></i>
+                    </h6>
+                    <h2 className="splt-txt wow">
+                      <AnimatedText text="Engineering the Future of Coconut Processing" />
+                    </h2>
+                  </div>
+                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
+                     We are pioneers in designing and delivering high-performance coconut processing equipment built for modern food processing industries. With decades of expertise, we offer complete turnkey solutions - from coconut deshelling to drying, grinding, and packaging.
+                  </p>
+                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
+                    Our engineering capabilities include:
+                  </p>
+                  <ul className="list-items wow fadeInUp" data-wow-delay=".2s">
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                     Complete plant design & optimization
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                      Custom-built coconut machinery for various capacities
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                      Upgradation and automation of existing setups
+                    </li>
+                  </ul>
+                  <p className="mt-md-0 wow fadeInUp" data-wow-delay=".4s">
+                     Let us help you boost your production efficiency and minimize downtime.
+                  </p>
+                  {/* <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)}
+      />{" "}
+    </>
+  );
+}

public/assets/scss/_header.scss

@@ -957,7 +957,7 @@
 		@include before;
 		z-index: -1;
 		opacity: 0.85;
-		background: $header-color;
+		// background: $header-color;
 	}
 
 	.shape-image {