images 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 />
     </>
   );

app/(blogs)/news-details/[slug]/page.jsx

@@ -0,0 +1,66 @@
+// app/news-details/[slug]/page.jsx
+
+import BlogDetails from "@/components/blogs/BlogDetails";
+import Footer1 from "@/components/footers/Footer1";
+import Header1 from "@/components/headers/Header1";
+import { allBlogs } from "@/utlis/constant.utils";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+export const metadata = {
+  title: "Blog Details || Xbuild - Construction Next.js Template",
+  description: "Xbuild - Construction Next.js Template",
+};
+
+export async function generateStaticParams() {
+  return allBlogs.map((item) => ({ slug: item.slug }));
+}
+
+export default function Page({ params }) {
+  const newsItem = allBlogs.find((elm) => elm.slug === params.slug);
+
+  if (!newsItem) {
+    notFound(); // Show 404 if not found
+  }
+
+  return (
+    <>
+      <Header1 />
+      <div
+        className="breadcrumb-wrapper bg-cover"
+        style={{ backgroundImage: `url(${newsItem.bannerImage})` }}
+      >
+        <div className="container">
+          <div className="breadcrumb-wrapper-items">
+            <div className="page-heading">
+              <div className="breadcrumb-sub-title">
+                <h1 className="wow fadeInUp" data-wow-delay=".3s">
+                  {newsItem.title}
+                </h1>
+              </div>
+              <ul
+                className="breadcrumb-items wow fadeInUp"
+                data-wow-delay=".5s"
+              >
+                <li>
+                  <Link href={`/`}> Home </Link>
+                </li>
+                <li>
+                  <i className="fa-sharp fa-solid fa-slash-forward" />
+                </li>
+                <li>Blog Details</li>
+              </ul>
+            </div>
+            <div className="breadcrumb-image" />
+          </div>
+        </div>
+      </div>
+      <BlogDetails newsItem={newsItem} />
+      {/* <div className="brand-section fix section-padding pt-0">
+        <Brands />
+      </div> */}
+      <Footer1 />
+    </>
+  );
+}

app/(blogs)/news-grid/page.jsx

@@ -1,7 +1,7 @@
 import Blogs from "@/components/blogs/Blogs";
 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 Image from "next/image";
 import Link from "next/link";
 export const metadata = {
@@ -11,25 +11,25 @@ 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/blog/blog-banner.webp")' }}
       >
-        <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">
               <div className="breadcrumb-sub-title">
                 <h1 className="wow fadeInUp" data-wow-delay=".3s">
-                  Blogs Grid
+                  Blog
                 </h1>
               </div>
               <ul
@@ -42,11 +42,11 @@ export default function page() {
                 <li>
                   <i className="fa-sharp fa-solid fa-slash-forward" />
                 </li>
-                <li>Blogs Grid</li>
+                <li>Blog</li>
               </ul>
             </div>
             <div className="breadcrumb-image">
-              <Image
+              {/* <Image
                 src="/assets/img/breadcrumb-image.png"
                 width={540}
                 height={450}
@@ -60,15 +60,15 @@ export default function page() {
                   height={604}
                   alt="img"
                 />
-              </div>
+              </div> */}
             </div>
           </div>
         </div>
       </div>
       <Blogs />
-      <div className="brand-section fix section-padding pt-0">
+      {/* <div className="brand-section fix section-padding pt-0">
         <Brands />
-      </div>
+      </div> */}
       <Footer1 />
     </>
   );

app/(contact)/contact/page.jsx

@@ -1,31 +1,24 @@
-import Brands from "@/components/common/Brands";
 import ContactForm from "@/components/contact/ContactForm";
 import ContactInfo from "@/components/contact/ContactInfo";
 import Map from "@/components/contact/Map";
 import Footer1 from "@/components/footers/Footer1";
-import Header2 from "@/components/headers/Header2";
+import Header1 from "@/components/headers/Header1";
 import Image from "next/image";
 import Link from "next/link";
+import React from "react";
 export const metadata = {
-  title: "Contact || Xbuild - Constriction nextjs Template",
+  title: "About || Xbuild - Constriction nextjs Template",
   description: "Xbuild - Constriction nextjs Template",
 };
+
 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">
-          <Image
-            src="/assets/img/vector.png"
-            width={84}
-            height={186}
-            alt="img"
-          />
-        </div>
         <div className="container">
           <div className="breadcrumb-wrapper-items">
             <div className="page-heading">
@@ -48,13 +41,6 @@ export default function page() {
               </ul>
             </div>
             <div className="breadcrumb-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"
@@ -67,12 +53,10 @@ export default function page() {
           </div>
         </div>
       </div>
-      <ContactInfo />
+
-      <ContactForm />
+    <ContactInfo/>
-      <Map />
+    <ContactForm/>
-      <div className="brand-section fix section-padding">
+    <Map/>
-        <Brands />
-      </div>
       <Footer1 />
     </>
   );

app/(corporateProfile)/corporate-profile/page.jsx

@@ -0,0 +1,66 @@
+import Footer1 from "@/components/footers/Footer1";
+import Header1 from "@/components/headers/Header1";
+import CorporateProfile from "@/components/homes/home-1/CorporateProfile/corporate-profile";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+export const metadata = {
+  title: "About || Xbuild - Constriction nextjs Template",
+  description: "Xbuild - Constriction nextjs Template",
+};
+
+export default function page() {
+  return (
+    <>
+      <Header1 />
+      <div
+        className="breadcrumb-wrapper bg-cover"
+        style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
+      >
+        <div className="container">
+          <div className="breadcrumb-wrapper-items">
+            <div className="page-heading">
+              <div className="breadcrumb-sub-title">
+                <h1 className="wow fadeInUp" data-wow-delay=".3s">
+                 Corporate Profile
+                </h1>
+              </div>
+              <ul
+                className="breadcrumb-items wow fadeInUp"
+                data-wow-delay=".5s"
+              >
+                <li>
+                  <Link href={`/`}> Home </Link>
+                </li>
+                <li>
+                  <i className="fa-sharp fa-solid fa-slash-forward" />
+                </li>
+                <li>Corporate Profile</li>
+              </ul>
+            </div>
+            <div className="breadcrumb-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"
+                  width={631}
+                  height={604}
+                  alt="img"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    <CorporateProfile/>
+      <Footer1 />
+    </>
+  );
+}

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 />
+    </>
+  );
+}

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";
@@ -21,22 +21,23 @@ export const metadata = {
 export default function Home1() {
   return (
     <>
-      <HeaderTop1 />
+      {/* <HeaderTop1 /> */}
       <Header1 />
       <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 />
     </>
   );

app/(products)/product/page.jsx

@@ -0,0 +1,66 @@
+import Footer1 from "@/components/footers/Footer1";
+import Header1 from "@/components/headers/Header1";
+import Products from "@/components/homes/home-1/Products/product";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+export const metadata = {
+  title: "About || Xbuild - Constriction nextjs Template",
+  description: "Xbuild - Constriction nextjs Template",
+};
+
+export default function page() {
+  return (
+    <>
+      <Header1 />
+      <div
+        className="breadcrumb-wrapper bg-cover"
+        style={{ backgroundImage: 'url("/assets/img/products/products-banner.webp")' }}
+      >
+        <div className="container">
+          <div className="breadcrumb-wrapper-items">
+            <div className="page-heading">
+              <div className="breadcrumb-sub-title">
+                <h1 className="wow fadeInUp" data-wow-delay=".3s">
+                  Products
+                </h1>
+              </div>
+              <ul
+                className="breadcrumb-items wow fadeInUp"
+                data-wow-delay=".5s"
+              >
+                <li>
+                  <Link href={`/`}> Home </Link>
+                </li>
+                <li>
+                  <i className="fa-sharp fa-solid fa-slash-forward" />
+                </li>
+                <li>About Us</li>
+              </ul>
+            </div>
+            <div className="breadcrumb-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"
+                  width={631}
+                  height={604}
+                  alt="img"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    <Products/>
+      <Footer1 />
+    </>
+  );
+}

app/(project)/project/page.jsx

@@ -1,8 +1,7 @@
 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 Projects from "@/components/project/Projects";
+import ProjectsData from "@/components/project/Projects2";
-import Image from "next/image";
 import Link from "next/link";
 export const metadata = {
   title: "Project || Xbuild - Constriction nextjs Template",
@@ -12,19 +11,11 @@ export const metadata = {
 export default function page() {
   return (
     <>
-      <Header2 />
+      <Header1 />
       <div
         className="breadcrumb-wrapper bg-cover"
         style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
       >
-        <div className="shape-image float-bob-y">
-          <Image
-            src="/assets/img/vector.png"
-            width={84}
-            height={186}
-            alt="img"
-          />
-        </div>
         <div className="container">
           <div className="breadcrumb-wrapper-items">
             <div className="page-heading">
@@ -47,29 +38,14 @@ export default function page() {
               </ul>
             </div>
             <div className="breadcrumb-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"
-                  width={631}
-                  height={604}
-                  alt="img"
-                />
-              </div>
             </div>
           </div>
         </div>
       </div>
-      <Projects />
+      <ProjectsData />
-      <div className="brand-section fix section-padding pt-0">
+      {/* <div className="brand-section fix section-padding pt-0">
         <Brands />
-      </div>
+      </div> */}
       <Footer1 />
     </>
   );

app/(turnkey)/turnkey-solutions/page.jsx

@@ -0,0 +1,67 @@
+import Footer1 from "@/components/footers/Footer1";
+import Header1 from "@/components/headers/Header1";
+import Products from "@/components/homes/home-1/Products/product";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import About from "@/components/turnkey-solutions/page";
+export const metadata = {
+  title: "About || Xbuild - Constriction nextjs Template",
+  description: "Xbuild - Constriction nextjs Template",
+};
+
+export default function page() {
+  return (
+    <>
+      <Header1 />
+      <div
+        className="breadcrumb-wrapper bg-cover"
+        style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
+      >
+        <div className="container">
+          <div className="breadcrumb-wrapper-items">
+            <div className="page-heading">
+              <div className="breadcrumb-sub-title">
+                <h1 className="wow fadeInUp" data-wow-delay=".3s">
+                  Turnkey Solutions
+                </h1>
+              </div>
+              <ul
+                className="breadcrumb-items wow fadeInUp"
+                data-wow-delay=".5s"
+              >
+                <li>
+                  <Link href={`/`}> Home </Link>
+                </li>
+                <li>
+                  <i className="fa-sharp fa-solid fa-slash-forward" />
+                </li>
+                <li>Turnkey Solutions</li>
+              </ul>
+            </div>
+            <div className="breadcrumb-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"
+                  width={631}
+                  height={604}
+                  alt="img"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <About />
+      <Products />
+      <Footer1 />
+    </>
+  );
+}

components/about/Achievments.jsx

@@ -24,8 +24,8 @@ export default function Achievments() {
                     <i className="fa-regular fa-arrow-right-long"></i>
                   </h6>
                   <h2 className="splt-txt wow">
-                    <AnimatedText text="Industrial Power," /> <br />
+                    <AnimatedText text="Smart Engineering," /> <br />
-                    <AnimatedText text="Worldwide Influence" />
+                    <AnimatedText text="Seamless Integration" />
                   </h2>
                 </div>
                 <Link
@@ -33,7 +33,7 @@ export default function Achievments() {
                   className="theme-btn bg-white mt-3 mt-md-0 wow fadeInUp"
                   data-wow-delay=".4s"
                 >
-                  MAKE AN APPOINTMENT
+                  EXPLORE OUR CAPABILITIES
                   <i className="fa-regular fa-arrow-right"></i>
                 </Link>
               </div>
@@ -65,7 +65,7 @@ export default function Achievments() {
                       </div>
                       <div className="content">
                         <h2>
-                          <span className="count">{elm.count}</span>k+
+                          <span className="count">{elm.count}</span>
                         </h2>
                         <p>{elm.description}</p>
                       </div>
@@ -89,7 +89,7 @@ export default function Achievments() {
                       </div>
                       <div className="content">
                         <h2>
-                          <span className="count">{elm.count}</span>k+
+                          <span className="count">{elm.count}</span>
                         </h2>
                         <p>{elm.description}</p>
                       </div>

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
@@ -42,18 +42,11 @@ export default function Team() {
               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}
+                    width={305}
-                    height={288}
+                    height={358}
                     alt="Team"
                   />
                 </div>
@@ -63,7 +56,7 @@ export default function Team() {
                       {member.name}
                     </Link>
                   </h5>
-                  <p>{member.role}</p>
+                  {/* <p>{member.role}</p> */}
                   <a href="team-details" className="icon">
                     <i className="fa-solid fa-link" />
                   </a>

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/blogs/BlogDetails.jsx

@@ -1,239 +1,36 @@
+
 "use client";
-import Image from "next/image";
+
-import Comments from "./Comments";
-import CommentForm from "./CommentForm";
-import { links, listItems, recentItems, socialLinks } from "@/data/blogs";
-import Link from "next/link";
 export default function BlogDetails({ newsItem }) {
   return (
     <section className="news-standard fix section-padding">
       <div className="container">
         <div className="row g-4">
-          <div className="col-12 col-lg-8">
+          <div className="col-12">
             <div className="blog-post-details">
               <div className="single-blog-post">
                 <div
                   className="post-featured-thumb bg-cover"
                   style={{
-                    backgroundImage: 'url("/assets/img/news/post-4.jpg")',
+                    backgroundImage: `url(${newsItem.image})`,
                   }}
                 />
                 <div className="post-content">
                   <ul className="post-list d-flex align-items-center">
                     <li>
-                      <i className="fa-regular fa-user" />
+                      <i className="fa-regular fa-user" /> {newsItem.author?.name || "Admin"}
-                      By Admin
                     </li>
                     <li>
-                      <i className="fa-solid fa-calendar-days" />
+                      <i className="fa-solid fa-calendar-days" /> {newsItem.date}
-                      18 Dec, 2024
                     </li>
                     <li>
-                      <i className="fa-solid fa-tag" />
+                      <i className="fa-solid fa-tag" /> {newsItem.category}
-                      Technology
                     </li>
                   </ul>
-                  <h3>{newsItem.title}</h3>
+                  <div
-                  <p className="mb-3">
+                    className="post-description blog-description"
-                    Consectetur adipisicing elit, sed do eiusmod tempor
+                    dangerouslySetInnerHTML={{ __html: newsItem.description }}
-                    incididunt ut labore et dolore of magna aliqua. Ut enim ad
+                  />
-                    minim veniam, made of owl the quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea dolor commodo
-                    consequat. Duis aute irure and dolor in reprehenderit.
-                  </p>
-                  <p className="mb-3">
-                    The is ipsum dolor sit amet consectetur adipiscing elit.
-                    Fusce eleifend porta arcu In hac habitasse the is platea
-                    augue thelorem turpoi dictumst. In lacus libero faucibus at
-                    malesuada sagittis placerat eros sed istincidunt augue ac
-                    ante rutrum sed the is sodales augue consequat.
-                  </p>
-                  <p>
-                    Nulla facilisi. Vestibulum tristique sem in eros eleifend
-                    imperdiet. Donec quis convallis neque. In id lacus pulvinar
-                    lacus, eget vulputate lectus. Ut viverra bibendum lorem, at
-                    tempus nibh mattis in. Sed a massa eget lacus consequat
-                    auctor.
-                  </p>
-                  <div className="hilight-text mt-4 mb-4">
-                    <p>
-                      Pellentesque sollicitudin congue dolor non aliquam. Morbi
-                      volutpat, nisi vel ultricies urnacondimentum, sapien neque
-                      lobortis tortor, quis efficitur mi ipsum eu metus.
-                      Praesent eleifend orci sit amet est vehicula.
-                    </p>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width={36}
-                      height={36}
-                      viewBox="0 0 36 36"
-                      fill="none"
-                    >
-                      <path
-                        d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
-                        stroke="#F55B1F"
-                      />
-                      <path
-                        d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
-                        stroke="#F55B1F"
-                      />
-                    </svg>
-                  </div>
-                  <p className="mt-4 mb-5">
-                    Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et
-                    massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
-                    sapien fringilla, mattis ligula consectetur, ultrices
-                    mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet
-                    augue. Vestibulum auctor ornare leo, non suscipit magna
-                    interdum eu. Curabitur pellentesque nibh nibh, at maximus
-                    ante fermentum sit amet. Pellentesque commodo lacus at
-                    sodales sodales. Quisque sagittis orci ut diam condimentum,
-                    vel euismod erat placerat. In iaculis arcu eros.
-                  </p>
-                  <div className="row g-4">
-                    <div className="col-lg-6">
-                      <div className="details-image">
-                        <Image
-                          src="/assets/img/news/post-5.jpg"
-                          width={370}
-                          height={269}
-                          alt="img"
-                        />
-                      </div>
-                    </div>
-                    <div className="col-lg-6">
-                      <div className="details-image">
-                        <Image
-                          src="/assets/img/news/post-6.jpg"
-                          width={370}
-                          height={269}
-                          alt="img"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <p className="pt-5">
-                    Consectetur adipisicing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore of magna aliqua. Ut enim ad
-                    minim veniam, made of owl the quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea dolor commodo
-                    consequat. Duis aute irure and dolor in
-                    reprehenderit.Consectetur adipisicing elit, sed do eiusmod
-                    tempor incididunt ut labore et dolore of magna aliqua. Ut
-                    enim ad minim veniam, made of owl the quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea dolor
-                    commodo consequat. Duis aute irure and dolor in
-                    reprehenderit.
-                  </p>
-                </div>
-              </div>
-              <div className="row tag-share-wrap mt-4 mb-5">
-                <div className="col-lg-8 col-12">
-                  <div className="tagcloud">
-                    <span>Tags:</span>
-                    <a href="#">Travel</a>
-                    <a href="#">Services</a>
-                    <a href="#">Agency</a>
-                  </div>
-                </div>
-                <div className="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
-                  <div className="social-share">
-                    <span className="me-3">Share:</span>
-                    {socialLinks.map((link, index) => (
-                      <a href={link.href} key={index}>
-                        <i className={link.iconClass} />
-                      </a>
-                    ))}
-                  </div>
-                </div>
-              </div>
-              <div className="comments-area">
-                <div className="comments-heading">
-                  <h3>02 Comments</h3>
-                </div>
-                <Comments />
-              </div>
-              <div className="comment-form-wrap pt-5">
-                <h3>Leave a comments</h3>
-                <CommentForm />
-              </div>
-            </div>
-          </div>
-          <div className="col-12 col-lg-4">
-            <div className="main-sidebar">
-              <div className="single-sidebar-widget">
-                <div className="wid-title">
-                  <h3>Search</h3>
-                </div>
-                <div className="search-widget">
-                  <form onSubmit={(e) => e.preventDefault()}>
-                    <input type="text" placeholder="Search here" />
-                    <button type="submit">
-                      <i className="fa-solid fa-magnifying-glass" />
-                    </button>
-                  </form>
-                </div>
-              </div>
-              <div className="single-sidebar-widget">
-                <div className="wid-title">
-                  <h3>Categories</h3>
-                </div>
-                <div className="news-widget-categories">
-                  <ul>
-                    {listItems.map((item, index) => (
-                      <li key={index} className={item.isActive ? "active" : ""}>
-                        <a href={item.link}>{item.text}</a>{" "}
-                        <span>{item.count}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-              <div className="single-sidebar-widget">
-                <div className="wid-title">
-                  <h3>Recent Post</h3>
-                </div>
-                <div className="recent-post-area">
-                  {recentItems.map((item, index) => (
-                    <div className="recent-items" key={index}>
-                      <div className="recent-thumb">
-                        <Image
-                          src={item.imageSrc}
-                          width={70}
-                          height={70}
-                          alt="img"
-                        />
-                      </div>
-                      <div className="recent-content">
-                        <ul>
-                          <li>
-                            <i className="fa-solid fa-calendar-days" />
-                            {item.date}
-                          </li>
-                        </ul>
-                        <h6>
-                          <Link
-                            href={`/news-details/${item.id}`}
-                            dangerouslySetInnerHTML={{ __html: item.title }}
-                          />
-                        </h6>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div className="single-sidebar-widget">
-                <div className="wid-title">
-                  <h3>Popular Tag</h3>
-                </div>
-                <div className="news-widget-categories">
-                  <div className="tagcloud">
-                    {links.map((link, index) => (
-                      <Link href={link.href} key={index}>
-                        {link.text}
-                      </Link>
-                    ))}
-                  </div>
                 </div>
               </div>
             </div>

components/blogs/BlogDetails2.jsx

@@ -0,0 +1,245 @@
+"use client";
+import Image from "next/image";
+import Comments from "./Comments";
+import CommentForm from "./CommentForm";
+import { links, listItems, recentItems, socialLinks } from "@/data/blogs";
+import Link from "next/link";
+export default function BlogDetails({ newsItem }) {
+  return (
+    <section className="news-standard fix section-padding">
+      <div className="container">
+        <div className="row g-4">
+          <div className="col-12 col-lg-8">
+            <div className="blog-post-details">
+              <div className="single-blog-post">
+                <div
+                  className="post-featured-thumb bg-cover"
+                  style={{
+                    backgroundImage: 'url("/assets/img/news/post-4.jpg")',
+                  }}
+                />
+                <div className="post-content">
+                  <ul className="post-list d-flex align-items-center">
+                    <li>
+                      <i className="fa-regular fa-user" />
+                      By Admin
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-calendar-days" />
+                      18 Dec, 2024
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-tag" />
+                      Technology
+                    </li>
+                  </ul>
+                  <h3>{newsItem.title}</h3>
+                  <p className="mb-3">
+                    Consectetur adipisicing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore of magna aliqua. Ut enim ad
+                    minim veniam, made of owl the quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea dolor commodo
+                    consequat. Duis aute irure and dolor in reprehenderit.
+                  </p>
+                  <p className="mb-3">
+                    The is ipsum dolor sit amet consectetur adipiscing elit.
+                    Fusce eleifend porta arcu In hac habitasse the is platea
+                    augue thelorem turpoi dictumst. In lacus libero faucibus at
+                    malesuada sagittis placerat eros sed istincidunt augue ac
+                    ante rutrum sed the is sodales augue consequat.
+                  </p>
+                  <p>
+                    Nulla facilisi. Vestibulum tristique sem in eros eleifend
+                    imperdiet. Donec quis convallis neque. In id lacus pulvinar
+                    lacus, eget vulputate lectus. Ut viverra bibendum lorem, at
+                    tempus nibh mattis in. Sed a massa eget lacus consequat
+                    auctor.
+                  </p>
+                  <div className="hilight-text mt-4 mb-4">
+                    <p>
+                      Pellentesque sollicitudin congue dolor non aliquam. Morbi
+                      volutpat, nisi vel ultricies urnacondimentum, sapien neque
+                      lobortis tortor, quis efficitur mi ipsum eu metus.
+                      Praesent eleifend orci sit amet est vehicula.
+                    </p>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={36}
+                      height={36}
+                      viewBox="0 0 36 36"
+                      fill="none"
+                    >
+                      <path
+                        d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+                        stroke="#F55B1F"
+                      />
+                      <path
+                        d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+                        stroke="#F55B1F"
+                      />
+                    </svg>
+                  </div>
+                  <p className="mt-4 mb-5">
+                    Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et
+                    massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
+                    sapien fringilla, mattis ligula consectetur, ultrices
+                    mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet
+                    augue. Vestibulum auctor ornare leo, non suscipit magna
+                    interdum eu. Curabitur pellentesque nibh nibh, at maximus
+                    ante fermentum sit amet. Pellentesque commodo lacus at
+                    sodales sodales. Quisque sagittis orci ut diam condimentum,
+                    vel euismod erat placerat. In iaculis arcu eros.
+                  </p>
+                  <div className="row g-4">
+                    <div className="col-lg-6">
+                      <div className="details-image">
+                        <Image
+                          src="/assets/img/news/post-5.jpg"
+                          width={370}
+                          height={269}
+                          alt="img"
+                        />
+                      </div>
+                    </div>
+                    <div className="col-lg-6">
+                      <div className="details-image">
+                        <Image
+                          src="/assets/img/news/post-6.jpg"
+                          width={370}
+                          height={269}
+                          alt="img"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="pt-5">
+                    Consectetur adipisicing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore of magna aliqua. Ut enim ad
+                    minim veniam, made of owl the quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea dolor commodo
+                    consequat. Duis aute irure and dolor in
+                    reprehenderit.Consectetur adipisicing elit, sed do eiusmod
+                    tempor incididunt ut labore et dolore of magna aliqua. Ut
+                    enim ad minim veniam, made of owl the quis nostrud
+                    exercitation ullamco laboris nisi ut aliquip ex ea dolor
+                    commodo consequat. Duis aute irure and dolor in
+                    reprehenderit.
+                  </p>
+                </div>
+              </div>
+              <div className="row tag-share-wrap mt-4 mb-5">
+                <div className="col-lg-8 col-12">
+                  <div className="tagcloud">
+                    <span>Tags:</span>
+                    <a href="#">Travel</a>
+                    <a href="#">Services</a>
+                    <a href="#">Agency</a>
+                  </div>
+                </div>
+                <div className="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
+                  <div className="social-share">
+                    <span className="me-3">Share:</span>
+                    {socialLinks.map((link, index) => (
+                      <a href={link.href} key={index}>
+                        <i className={link.iconClass} />
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="comments-area">
+                <div className="comments-heading">
+                  <h3>02 Comments</h3>
+                </div>
+                <Comments />
+              </div>
+              <div className="comment-form-wrap pt-5">
+                <h3>Leave a comments</h3>
+                <CommentForm />
+              </div>
+            </div>
+          </div>
+          <div className="col-12 col-lg-4">
+            <div className="main-sidebar">
+              <div className="single-sidebar-widget">
+                <div className="wid-title">
+                  <h3>Search</h3>
+                </div>
+                <div className="search-widget">
+                  <form onSubmit={(e) => e.preventDefault()}>
+                    <input type="text" placeholder="Search here" />
+                    <button type="submit">
+                      <i className="fa-solid fa-magnifying-glass" />
+                    </button>
+                  </form>
+                </div>
+              </div>
+              <div className="single-sidebar-widget">
+                <div className="wid-title">
+                  <h3>Categories</h3>
+                </div>
+                <div className="news-widget-categories">
+                  <ul>
+                    {listItems.map((item, index) => (
+                      <li key={index} className={item.isActive ? "active" : ""}>
+                        <a href={item.link}>{item.text}</a>{" "}
+                        <span>{item.count}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+              <div className="single-sidebar-widget">
+                <div className="wid-title">
+                  <h3>Recent Post</h3>
+                </div>
+                <div className="recent-post-area">
+                  {recentItems.map((item, index) => (
+                    <div className="recent-items" key={index}>
+                      <div className="recent-thumb">
+                        <Image
+                          src={item.imageSrc}
+                          width={70}
+                          height={70}
+                          alt="img"
+                        />
+                      </div>
+                      <div className="recent-content">
+                        <ul>
+                          <li>
+                            <i className="fa-solid fa-calendar-days" />
+                            {item.date}
+                          </li>
+                        </ul>
+                        <h6>
+                          <Link
+                            href={`/news-details/${item.id}`}
+                            dangerouslySetInnerHTML={{ __html: item.title }}
+                          />
+                        </h6>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="single-sidebar-widget">
+                <div className="wid-title">
+                  <h3>Popular Tag</h3>
+                </div>
+                <div className="news-widget-categories">
+                  <div className="tagcloud">
+                    {links.map((link, index) => (
+                      <Link href={link.href} key={index}>
+                        {link.text}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/blogs/Blogs.jsx

@@ -1,14 +1,15 @@
 import React from "react";
 import Pagination from "../common/Pagination";
-import { newsItems3 } from "@/data/blogs";
+import { allBlogs } from "@/utlis/constant.utils";
 import Link from "next/link";
 import Image from "next/image";
+
 export default function Blogs() {
   return (
-    <section className="news-section fix section-padding">
+    <section className="news-section2 fix section-padding">
       <div className="container">
         <div className="row g-4">
-          {newsItems3.map((news) => (
+          {allBlogs.slice(-3).map((news) => (
             <div
               key={news.id}
               className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp ${
@@ -18,7 +19,7 @@ export default function Blogs() {
             >
               <div className="news-box-items mt-0">
                 <div className="news-image">
-                  {news.images.map((image, index) => (
+                  {news.images?.map((image, index) => (
                     <Image
                       key={index}
                       src={image}
@@ -34,7 +35,9 @@ export default function Blogs() {
                     <li>{news.date}</li>
                   </ul>
                   <h4>
-                    <Link href={`/news-details/${news.id}`}>{news.title}</Link>
+                    <Link href={`/news-details/${news.slug}`}>
+                      {news.title}
+                    </Link>
                   </h4>
                   <div className="author-items">
                     <div className="author-info">
@@ -50,7 +53,7 @@ export default function Blogs() {
                       </div>
                     </div>
                     <Link
-                      href={`/news-details/${news.id}`}
+                      href={`/news-details/${news.slug}`}
                       className="link-btn"
                     >
                       Read More <i className="fa-solid fa-arrow-right" />
@@ -61,14 +64,9 @@ export default function Blogs() {
             </div>
           ))}
         </div>
-        <div
+
-          className="page-nav-wrap pt-5 text-center wow fadeInUp"
+        {/* Optional pagination if needed */}
-          data-wow-delay=".3s"
+        {/* <Pagination /> */}
-        >
-          <ul>
-            <Pagination />
-          </ul>
-        </div>
       </div>
     </section>
   );

components/footers/Footer1.jsx

@@ -23,9 +23,9 @@ export default function Footer1() {
             data-wow-delay=".2s"
           >
             <Image
-              src="/assets/img/logo/black-logo.svg"
+              src="/assets/img/logo/logo.png"
-              width={149}
+              width={300}
-              height={64}
+              height={60}
               alt="img"
             />
           </Link>

components/headers/Header1 copy.jsx

@@ -0,0 +1,119 @@
+"use client";
+import Nav from "./Nav";
+import Link from "next/link";
+import Offcanvas from "./Offcanvas";
+import { openMobilemenu } from "@/utlis/toggleMobilemenu";
+import Image from "next/image";
+export default function Header1() {
+  return (
+    <>
+      <header className="header-section">
+        <div className="container-fluid">
+          <div className="main-header-wrapper">
+            <div className="logo-image">
+              <Link href={`/`}>
+                <Image
+                  src="/assets/img/logo/black-logo.svg"
+                  width={149}
+                  height={64}
+                  alt="img"
+                />
+              </Link>
+            </div>
+            <div className="main-header-items">
+              <div className="header-contact-info-area">
+                <div className="contact-info-items">
+                  <div className="icon">
+                    <i className="fa-sharp fa-solid fa-location-dot"></i>
+                  </div>
+                  <div className="content">
+                    <p>Office location</p>
+                    <h3>4648 Rocky, New York</h3>
+                  </div>
+                </div>
+                <div className="contact-info-items">
+                  <div className="icon">
+                    <i className="fa-solid fa-envelope"></i>
+                  </div>
+                  <div className="content">
+                    <p>send email</p>
+                    <h3>
+                      <a href="mailto:example@gmail.com">example@gmail.com</a>
+                    </h3>
+                  </div>
+                </div>
+                <div className="contact-info-items style-2">
+                  <div className="icon">
+                    <i className="fa-solid fa-phone-volume"></i>
+                  </div>
+                  <div className="content">
+                    <p>call emergency</p>
+                    <h3>
+                      <a href="tel:+88012365499">+88 0123 654 99</a>
+                    </h3>
+                  </div>
+                </div>
+                <div className="header-button">
+                  <Link href={`/contact`} className="theme-btn">
+                    GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
+                  </Link>
+                </div>
+              </div>
+              <div id="header-sticky" className="header-1">
+                <div className="mega-menu-wrapper">
+                  <div className="header-main">
+                    <div className="logo">
+                      <Link href={`/`} className="header-logo">
+                        <Image
+                          src="/assets/img/logo/black-logo.svg"
+                          alt="logo-img"
+                          width={149}
+                          height={64}
+                        />
+                      </Link>
+                    </div>
+                    <div className="header-left">
+                      <div className="mean__menu-wrapper">
+                        <div className="main-menu">
+                          <nav id="mobile-menu">
+                            <ul>
+                              <Nav />
+                            </ul>
+                          </nav>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="header-right d-flex justify-content-end align-items-center">
+                      <a
+                        href="#0"
+                        onClick={() =>
+                          document
+                            .getElementById("searchWrap")
+                            .classList.add("active")
+                        }
+                        className="search-trigger search-icon"
+                      >
+                        <i className="fal fa-search"></i>
+                      </a>
+                      <div className="header__hamburger d-xl-block my-auto">
+                        <div
+                          onClick={() => openMobilemenu()}
+                          className="sidebar__toggle"
+                        >
+                          <i className="fas fa-bars"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <Offcanvas>
+        <Nav />
+      </Offcanvas>
+    </>
+  );
+}

components/headers/Header1.jsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import Offcanvas from "./Offcanvas";
 import { openMobilemenu } from "@/utlis/toggleMobilemenu";
 import Image from "next/image";
+
 export default function Header1() {
   return (
     <>
@@ -13,62 +14,24 @@ export default function Header1() {
             <div className="logo-image">
               <Link href={`/`}>
                 <Image
-                  src="/assets/img/logo/black-logo.svg"
+                  src="/assets/img/logo/logo.png"
-                  width={149}
+                  width={300}
-                  height={64}
+                  height={60}
                   alt="img"
                 />
               </Link>
             </div>
             <div className="main-header-items">
-              <div className="header-contact-info-area">
-                <div className="contact-info-items">
-                  <div className="icon">
-                    <i className="fa-sharp fa-solid fa-location-dot"></i>
-                  </div>
-                  <div className="content">
-                    <p>Office location</p>
-                    <h3>4648 Rocky, New York</h3>
-                  </div>
-                </div>
-                <div className="contact-info-items">
-                  <div className="icon">
-                    <i className="fa-solid fa-envelope"></i>
-                  </div>
-                  <div className="content">
-                    <p>send email</p>
-                    <h3>
-                      <a href="mailto:example@gmail.com">example@gmail.com</a>
-                    </h3>
-                  </div>
-                </div>
-                <div className="contact-info-items style-2">
-                  <div className="icon">
-                    <i className="fa-solid fa-phone-volume"></i>
-                  </div>
-                  <div className="content">
-                    <p>call emergency</p>
-                    <h3>
-                      <a href="tel:+88012365499">+88 0123 654 99</a>
-                    </h3>
-                  </div>
-                </div>
-                <div className="header-button">
-                  <Link href={`/contact`} className="theme-btn">
-                    GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
-                  </Link>
-                </div>
-              </div>
               <div id="header-sticky" className="header-1">
                 <div className="mega-menu-wrapper">
                   <div className="header-main">
                     <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>
@@ -83,27 +46,23 @@ export default function Header1() {
                         </div>
                       </div>
                     </div>
-                    <div className="header-right d-flex justify-content-end align-items-center">
+              <div className="header-right d-flex justify-content-end align-items-center">
-                      <a
+  <div className="header-button">
-                        href="#0"
+<Link
-                        onClick={() =>
+  href="/contact"
-                          document
+  className="theme-btn d-inline-flex align-items-center justify-content-center gap-2"
-                            .getElementById("searchWrap")
+>
-                            .classList.add("active")
+  <span className="text-nowrap">GET A QUOTE</span>
-                        }
+  <i className="fa-regular fa-arrow-right"></i>
-                        className="search-trigger search-icon"
+</Link>
-                      >
+  </div>
-                        <i className="fal fa-search"></i>
+  <div className="header__hamburger my-auto ms-3">
-                      </a>
+    <div onClick={() => openMobilemenu()} className="sidebar__toggle">
-                      <div className="header__hamburger d-xl-block my-auto">
+      <i className="fas fa-bars"></i>
-                        <div
+    </div>
-                          onClick={() => openMobilemenu()}
+  </div>
-                          className="sidebar__toggle"
+</div>
-                        >
+
-                          <i className="fas fa-bars"></i>
-                        </div>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>

components/homes/home-1/About.jsx

@@ -13,7 +13,7 @@ export default function About() {
       >
         <div className="about-shape-1 float-bob-x">
           <Image
-            src="/assets/img/about/about-shape-1.png"
+            src="/assets/img/about/top-right.webp"
             width={114}
             height={419}
             alt="img"
@@ -21,7 +21,7 @@ export default function About() {
         </div>
         <div className="about-shape-2 float-bob-x">
           <Image
-            src="/assets/img/about/about-shape-2.png"
+            src="/assets/img/about/bottom-left.webp"
             width={318}
             height={408}
             alt="img"
@@ -33,7 +33,7 @@ export default function About() {
               <div className="col-lg-6">
                 <div className="about-image">
                   <Image
-                    src="/assets/img/about/01.jpg"
+                    src="/assets/img/home/about/about-big-image.webp"
                     alt="img"
                     width={485}
                     height={592}
@@ -45,23 +45,17 @@ export default function About() {
                     data-wow-delay=".4s"
                   >
                     <Image
-                      src="/assets/img/about/02.jpg"
+                      src="/assets/img/about/about-small-image.webp"
                       width={260}
                       height={270}
+                      style={{ height: '200px', objectFit: 'cover' }}
                       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"
+                      src="/assets/img/about/right-side-scale-img.webp"
                       width={30}
                       height={545}
                       alt="img"
@@ -73,35 +67,37 @@ export default function About() {
                 <div className="about-content">
                   <div className="section-title">
                     <h6 className="wow fadeInUp">
-                      <i className="fa-regular fa-arrow-left-long"></i>1976
+                      <i className="fa-regular fa-arrow-left-long"></i>About Us
-                      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" />
+                      <AnimatedText text="Engineering the Future of Coconut Processing" />
                     </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
+                    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.
-                    distracted the readable content of a page when looking at
+                  </p>
-                    layout the point of using lorem the is Ipsum less normal
+                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
-                    distribution of letters.
+                    Our engineering capabilities include:
                   </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
+                      Complete plant design & optimization
                     </li>
                     <li>
                       <i className="fa-solid fa-circle-check"></i>
-                      Is there a waiting list for desired work to be started
+                      Custom-built coconut machinery for various capacities
                     </li>
                     <li>
                       <i className="fa-solid fa-circle-check"></i>
-                      Release of Letraset sheets containing Lorem Ipsum
+                      Upgradation and automation of existing setups
                     </li>
                   </ul>
-                  <div className="about-author">
+                  <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"
@@ -125,7 +121,7 @@ export default function About() {
                       className="wow fadeInUp"
                       data-wow-delay=".4s"
                     />
-                  </div>
+                  </div> */}
                 </div>
               </div>
             </div>

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)}
+      />{" "}
+    </>
+  );
+}

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>Pioneers in Coconut Processing
+                      <i className="fa-regular fa-arrow-right-long"></i>
+                    </h6>
+                    <h2 className="splt-txt wow">
+                      <AnimatedText text="Driven by Engineering Excellence" />
+                    </h2>
+                  </div>
+                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
+                    At Cibus Industries, we specialize in delivering innovative, end-to-end coconut processing solutions built for today’s high-demand food industry. Our engineering team has decades of experience designing reliable, performance-driven machinery that supports every stage of coconut processing - from deshelling to drying, grinding, and packaging. We don’t just build machines. We create tailored systems that drive efficiency, scalability, and sustainability.
+                  </p>
+                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
+                    Our Core Engineering Strengths:
+                  </p>
+                  <ul className="list-items wow fadeInUp" data-wow-delay=".2s">
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                      End-to-End Plant Design & Process Optimization
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                      Customized Coconut Machinery for Any Scale
+                    </li>
+                    <li>
+                      <i className="fa-solid fa-circle-check"></i>
+                       System Upgrades & Smart Automation
+                    </li>
+                  </ul>
+                  <p className="mt-md-0 wow fadeInUp" data-wow-delay=".4s">
+                    Let us help you maximize productivity and minimize downtime with industry-leading technology.
+                  </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)}
+      />{" "}
+    </>
+  );
+}

components/homes/home-1/Blogs.jsx

@@ -1,17 +1,27 @@
-import { newsImageItems, newsItems } from "@/data/blogs";
+import { allBlogs } from "@/utlis/constant.utils";
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import AnimatedText from "@/components/common/AnimatedText";
+
+function truncateWords(text, wordLimit) {
+  const words = text.split(" ");
+  return words.length > wordLimit
+    ? words.slice(0, wordLimit).join(" ") + "..."
+    : text;
+}
+
 export default function Blogs() {
+  const [leftBlog, ...rightBlogs] = allBlogs.slice(0, 3);
+
   return (
     <section
       id="blog"
-      className="news-section fix section-padding fix section-bg-2  scrollSpySection"
+      className="news-section fix section-padding fix scrollSpySection"
     >
       <div className="shape-1 float-bob-y">
         <Image
-          src="/assets/img/news/shape-1.png"
+          src="/assets/img/blog/blog-left.webp"
           width={165}
           height={116}
           alt="img"
@@ -19,7 +29,7 @@ export default function Blogs() {
       </div>
       <div className="shape-2 float-bob-x">
         <Image
-          src="/assets/img/news/shape-2.png"
+          src="/assets/img/blog/blog-right.webp"
           width={165}
           height={116}
           alt="img"
@@ -36,43 +46,49 @@ export default function Blogs() {
             <AnimatedText text="Latest News & Blog" />
           </h2>
         </div>
+
         <div className="row">
           <div className="col-lg-6 wow fadeInUp" data-wow-delay=".2s">
-            {newsImageItems.map((item) => (
+            {leftBlog && (
               <div
-                key={item.id}
+                key={leftBlog.id}
                 className="news-image-items bg-cover"
-                style={{ backgroundImage: `url("${item.backgroundImage}")` }}
+                style={{ backgroundImage: `url("${leftBlog.image}")` }}
               >
                 <div className="news-content">
                   <ul>
                     <li>
                       <i className="fa-regular fa-user" />
-                      {item.author}
+                      {leftBlog.author.name}
                     </li>
                     <li>
                       <i className="fa-solid fa-tag" />
-                      {item.category}
+                      {leftBlog.category}
                     </li>
                   </ul>
                   <h3>
-                    <Link href={`/news-details/${item.id}`}>
+                    <Link href={`/news-details/${leftBlog.slug}`}>
-                      {item.title.split("<br />").map((line, index) => (
+                      {truncateWords(leftBlog.title.replace(/<[^>]+>/g, ""), 12)
-                        <React.Fragment key={index}>
+                        .split("<br />")
-                          {line}
+                        .map((line, index) => (
-                          <br />
+                          <React.Fragment key={index}>
-                        </React.Fragment>
+                            {line}
-                      ))}
+                            <br />
+                          </React.Fragment>
+                        ))}
                     </Link>
                   </h3>
-                  <p className="text-white">{item.description}</p>
+                  <p className="text-white">
+                    {truncateWords(leftBlog.description.replace(/<[^>]+>/g, ""), 70)}
+                  </p>
                 </div>
               </div>
-            ))}
+            )}
           </div>
+
           <div className="col-lg-6">
             <div className="news-right-items">
-              {newsItems.map((item) => (
+              {rightBlogs.map((item) => (
                 <div
                   key={item.id}
                   className="news-card-items wow fadeInUp"
@@ -82,7 +98,7 @@ export default function Blogs() {
                     <ul>
                       <li>
                         <i className="fa-regular fa-user" />
-                        {item.author}
+                        {item.author.name}
                       </li>
                       <li>
                         <i className="fa-solid fa-tag" />
@@ -90,16 +106,15 @@ export default function Blogs() {
                       </li>
                     </ul>
                     <h4>
-                      <Link href={`/news-details/${item.id}`}>
+                      <Link href={`/news-details/${item.slug}`}>
-                        {item.title}
+                        {truncateWords(item.title.replace(/<[^>]+>/g, ""), 6)}
                       </Link>
                     </h4>
                     <p>
-                      Pellentesque vitae consectetur ante <br />
+                      {truncateWords(item.description.replace(/<[^>]+>/g, ""), 10)}
-                      Integer non eros...
                     </p>
                     <Link
-                      href={`/news-details/${item.id}`}
+                      href={`/news-details/${item.slug}`}
                       className="link-btn"
                     >
                       Read More <i className="fa-regular fa-arrow-right-long" />
@@ -107,7 +122,7 @@ export default function Blogs() {
                   </div>
                   <div className="news-image">
                     <Image
-                      src={item.imgSrc}
+                      src={item.image}
                       width={247}
                       height={258}
                       alt="img"

components/homes/home-1/CorporateProfile/corporate-profile.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import Image from "next/image";
+
+export default function CorporateProfile() {
+    return (
+        <section className="news-standard fix section-padding">
+            <div className="container">
+                <div className="row g-4">
+                    <div className="col-12">
+                        <div className="blog-post-details">
+                            <div className="single-blog-post">
+                                <div
+                                    className="post-featured-thumb bg-cover"
+                                    style={{
+                                        backgroundImage: `url("/assets/img/news/post-3.jpg")`,
+                                        height: "400px",
+                                        backgroundSize: "cover",
+                                        backgroundPosition: "center",
+                                        borderRadius: "10px"
+                                    }}
+                                />
+
+                                <div className="post-content">
+
+                                    <h3>Revolutionizing Coconut Processing: The Rise of Turnkey Plants</h3>
+                                    <p>
+                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut ab asperiores rem nostrum at eveniet, atque repellendus voluptates nemo odio facilis doloremque earum error fuga. Sint totam dolores rerum nulla doloremque sit molestiae, ut, eligendi fuga culpa illum adipisci earum, beatae officiis laboriosam dolorem. Nam optio id vel asperiores, laboriosam soluta eaque at, amet, minus quaerat tempore esse repudiandae ipsa? Deserunt corporis minus unde possimus modi eum magnam doloremque iusto saepe necessitatibus cupiditate eos, perferendis, quibusdam magni ut quas, nesciunt quis consequuntur? Enim quidem voluptatibus possimus pariatur ipsam eveniet deleniti culpa consectetur dignissimos expedita, a laborum minima inventore, ab neque?
+                                    </p>
+
+                                    <div className="hilight-text mt-4 mb-4">
+                                        <p>
+                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, nam voluptatem! Suscipit et, fugiat pariatur tempora beatae at assumenda sed quae minus voluptatum ratione quis. Quam provident modi earum. Aut molestiae totam illo necessitatibus aliquam adipisci nulla, quidem eveniet odit amet, perspiciatis sunt libero fuga dolores! Inventore tempora, vel quis magni ut optio. Officia inventore nostrum, voluptatem atque harum dolores!
+                                        </p>
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+                                            <path d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z" stroke="#F55B1F" />
+                                            <path d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z" stroke="#F55B1F" />
+                                        </svg>
+                                    </div>
+
+
+                                    <p className="mt-3">
+                                      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam similique autem debitis nulla qui quis, soluta illo rerum consequatur explicabo delectus dolores esse doloremque nesciunt ratione accusantium, quo dignissimos voluptate vero a sunt dolor odit, voluptatem minima? Ex nesciunt, numquam, maxime repudiandae rerum dolore illo ipsam nam vel omnis quaerat incidunt. Non consequuntur sit in ipsum perspiciatis molestias nulla esse neque quam officiis, itaque dolorum, dolor maiores quos ipsa cupiditate temporibus, natus quibusdam voluptate atque qui. Quibusdam placeat sint excepturi consequuntur, obcaecati soluta fugit perspiciatis, nam dolor dolore nobis. Nesciunt repellendus hic dolorem nulla ad voluptatem modi. Vitae, consectetur iste.
+                                    </p>
+
+
+                                    <p className="mt-3">
+                                       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam voluptatem, sint molestias recusandae id cumque laborum beatae nam quibusdam. Est expedita corporis numquam voluptatum vitae similique ipsam nihil minima dolore voluptatibus ipsum tempore, corrupti obcaecati natus esse molestiae sunt nostrum suscipit magnam asperiores sint culpa atque labore! Iure architecto molestias amet obcaecati. Sapiente consequatur laborum expedita, eos dolores doloribus esse incidunt ratione, fugit molestiae fuga quia tempore reprehenderit architecto laudantium cupiditate? Explicabo natus, voluptatibus veniam adipisci reiciendis mollitia officia, ad doloremque ea, beatae provident quae. Alias minus ullam commodi vel modi. Odit vero velit repudiandae labore pariatur, ad harum nihil.
+                                    </p>
+
+                                    <div className="row mt-5 mb-5">
+                                        <div className="col-lg-6">
+                                            <div className="details-image">
+                                                <Image
+                                                    src="/assets/img/news/post-5.jpg"
+                                                    width={370}
+                                                    height={269}
+                                                    alt="img"
+                                                />
+                                            </div>
+                                        </div>
+                                        <div className="col-lg-6 col-md-12">
+                                            <div className="details-image">
+                                                <Image
+                                                    src="/assets/img/news/post-5.jpg"
+                                                    width={370}
+                                                    height={269}
+                                                    alt="img"
+                                                />
+                                            </div>
+
+
+                                        </div>
+                                    </div>
+
+
+
+                                    <p className="mt-3">
+                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ex vero praesentium odio impedit dicta magnam fugit facere ullam recusandae placeat nesciunt corrupti modi dignissimos veniam iusto molestiae fuga, maxime obcaecati doloribus, consectetur voluptates unde? Deserunt quasi possimus fugiat nobis cupiditate est porro laborum aperiam maiores doloribus repellendus recusandae eos, quae at expedita, accusantium aspernatur itaque molestiae distinctio odit earum dolore eligendi praesentium. Alias repellendus eos explicabo, dolorem laudantium quis. Debitis facere sed delectus doloribus, commodi velit officia eius amet eos, nihil pariatur accusamus iure voluptatibus provident vel at cum ut aliquam ipsam voluptatem inventore atque cupiditate porro cumque. Officia.
+                                    </p>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

components/homes/home-1/Cta.jsx

@@ -4,24 +4,23 @@ 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"
-          style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
+          style={{ backgroundImage: 'url("/assets/img/home/launch/ready-to-launch-bg.webp")' }}
         >
           <h2 className="splt-txt wow">
-            <AnimatedText text="Looking For Best Partner" /> <br />
+            <AnimatedText text="Ready to Launch Your " /> <br />
-            <AnimatedText text="For Your" />{" "}
             <b>
-              <AnimatedText text="Next Construction" />
+              <AnimatedText text="Coconut Machinery" />
             </b>{" "}
             <br />
-            <AnimatedText text="Works?" />
+            <AnimatedText text="Project?" />
           </h2>
           <div className="cta-img wow fadeInUp" data-wow-delay=".4s">
             <Image
-              src="/assets/img/cta-img.png"
+              src="/assets/img/home/launch/ready-to-launch.webp"
               width={223}
               height={256}
               alt="img"

components/homes/home-1/Faq.jsx

@@ -6,10 +6,10 @@ export default function Faq() {
   return (
     <section
       className="faq-section fix section-padding section-bg-2 bg-cover"
-      style={{ backgroundImage: 'url("/assets/img/faq/bg-shape.png")' }}
+      style={{ backgroundImage: 'url("/assets/img/faq/faq-bg.webp")' }}
     >
       <div className="track-shape float-bob-x">
-        <Image src="/assets/img/track.png" width={163} height={79} alt="img" />
+        <Image src="/assets/img/faq/faq-bottom.webp" width={163} height={79} alt="img" />
       </div>
       <div className="container">
         <div className="faq-wrapper">
@@ -23,25 +23,22 @@ export default function Faq() {
                     <i className="fa-regular fa-arrow-right-long" />
                   </h6>
                   <h2 className="splt-txt wow">
-                    <AnimatedText text="Your Frequently Ask & " /> <br />
+                    <AnimatedText text="Your Frequently Asked " /> <br />
                     <AnimatedText text="Questions" />
                   </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
+                  Have questions about our coconut processing machinery or turnkey solutions? We’ve compiled answers to the most common queries to help you make informed decisions. Whether you're just getting started or looking to scale up, we've got the answers you need.
-                  the readable content of a page when looking at layout the
-                  point of using lorem the is Ipsum less normal distribution of
-                  letters.
                 </p>
                 <div className="icon-items wow fadeInUp" data-wow-delay=".2s">
                   <div className="icon">
                     <i className="fa-regular fa-check" />
                   </div>
                   <div className="content">
-                    <h5>UNIQUE PROJECTS</h5>
+                    <h5>ENGINEERED FOR PERFORMANCE</h5>
                     <span>
-                      It is a long established fact that a reader will be
+                      We deliver machines built for peak performance, safety, and longevity.
-                      distracted the readable content of a page when
+                      From selection to support, we’re with you at every step.
                     </span>
                   </div>
                 </div>
@@ -50,10 +47,10 @@ export default function Faq() {
                     <i className="fa-regular fa-check" />
                   </div>
                   <div className="content">
-                    <h5>UNIQUE PROJECTS</h5>
+                    <h5>TAILORED TO YOUR NEEDS</h5>
                     <span>
-                      It is a long established fact that a reader will be
+                      Our solutions are customized to your production goals.
-                      distracted the readable content of a page when
+                      We support both small units and full-scale plants.
                     </span>
                   </div>
                 </div>
@@ -70,9 +67,8 @@ export default function Faq() {
                     >
                       <h5 className="accordion-header">
                         <button
-                          className={`accordion-button ${
+                          className={`accordion-button ${faq.expanded ? "" : "collapsed"
-                            faq.expanded ? "" : "collapsed"
+                            }`}
-                          }`}
                           type="button"
                           data-bs-toggle="collapse"
                           data-bs-target={`#faq${faq.id}`}
@@ -84,9 +80,8 @@ export default function Faq() {
                       </h5>
                       <div
                         id={`faq${faq.id}`}
-                        className={`accordion-collapse collapse ${
+                        className={`accordion-collapse collapse ${faq.expanded ? "show" : ""
-                          faq.expanded ? "show" : ""
+                          }`}
-                        }`}
                         data-bs-parent="#accordion"
                       >
                         <div className="accordion-body">{faq.answer}</div>

components/homes/home-1/Hero.jsx

@@ -1,164 +1,88 @@
 "use client";
-import AnimatedText from "@/components/common/AnimatedText";
+import { Autoplay, Pagination } from "swiper/modules";
-import { Autoplay, Navigation } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import Link from "next/link";
-import Image from "next/image";
+import "swiper/css";
-import ModalVideo from "react-modal-video";
+import "swiper/css/pagination";
-import { useState } from "react";
+
 export default function Hero() {
-  const [isOpen, setOpen] = useState(false);
   const swiperOptions = {
-    spaceBetween: 30,
+    slidesPerView: 1,
-    speed: 2000,
     loop: true,
+    speed: 1000,
+    freeMode: true,
     autoplay: {
-      delay: 2000,
+      delay: 4000,
       disableOnInteraction: false,
     },
-    navigation: {
+    pagination: {
-      prevEl: ".array-prevs",
+      el: "bullets",
-      nextEl: ".array-nexts",
+      clickable: true,
-    },
-    modules: [Autoplay, Navigation],
-    breakpoints: {
-      1199: {
-        slidesPerView: 2,
-      },
-      991: {
-        slidesPerView: 2,
-      },
-      767: {
-        slidesPerView: 2,
-      },
-      575: {
-        slidesPerView: 1,
-      },
-      0: {
-        slidesPerView: 1,
-      },
     },
+    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">
+  const slides = [
-                    <button className="array-prevs">
+    {
-                      <Image
+      id: 1,
-                        src="/assets/img/hero/prev.png"
+      image: "/assets/img/home/banner/banner-1.webp",
-                        width={15}
+      title: "Smart Coconut",
-                        height={11}
+      subtitle: "Solutions",
-                        alt="img"
+      text: "Efficient machines for deshelling to drying coconut.",
-                      />
+      buttonText: "Get A Quote",
-                      Previews
+      buttonLink: "/about",
-                    </button>
+    },
-                    <button className="array-nexts">
+    {
-                      Next{" "}
+      id: 2,
-                      <Image
+      image: "/assets/img/home/banner/banner-2.webp",
-                        src="/assets/img/hero/next.png"
+      title: "Future-Ready",
-                        width={15}
+      subtitle: "Engineering",
-                        height={11}
+      text: "Automation and precision for coconut processing plants.",
-                        alt="img"
+      buttonText: "Discover Our Innovations",
-                      />
+      buttonLink: "/about",
-                    </button>
+    },
+    {
+      id: 3,
+      image: "/assets/img/home/banner/banner-3.webp",
+      title: "Global Processing",
+      subtitle: "Impact",
+      text: "Trusted coconut machinery in 20+ countries worldwide.",
+      buttonText: "Explore Global Projects",
+      buttonLink: "/about",
+    },
+  ];
+
+  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={slide.buttonLink} className="theme-btn bg-white">
+                        {slide.buttonText}
+                        <i className="fa-regular fa-arrow-right"></i>
+                      </Link>
+                    </div>
                   </div>
-                </Swiper>
+                </div>
               </div>
             </div>
-          </div>
+          </section>
-        </div>
+        </SwiperSlide>
-      </section>
+      ))}
-      <ModalVideo
+      <div className="swiper-pagination"></div>
-        channel="youtube"
+    </Swiper>
-        youtube={{ mute: 0, autoplay: 0 }}
-        isOpen={isOpen}
-        videoId="Cn4G2lZ_g2I"
-        onClose={() => setOpen(false)}
-      />{" "}
-    </>
   );
 }

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)}
+      />{" "}
+    </>
+  );
+}

components/homes/home-1/Products/product.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import Pagination from "@/components/common/Pagination";
+import { services } from "@/data/services";
+import { products } from "@/data/services";
+import Link from "next/link";
+import Image from "next/image";
+import AnimatedText from "@/components/common/AnimatedText";
+export default function   Products() {
+  return (
+    <section className="service-section fix section-padding">
+      <div className="container">
+        <div className="section-title text-center">
+          <h6 className="wow fadeInUp">
+            <i className="fa-regular fa-arrow-left-long"></i>Product Range
+            <i className="fa-regular fa-arrow-right-long"></i>
+          </h6>
+          <h2 className="splt-txt wow">
+            <AnimatedText text="Explore Our Advanced " /> <br />
+            <AnimatedText text="Coconut Processing Solutions" />
+          </h2>
+        </div>
+        <div className="row">
+          {products.map((product) => (
+            <div
+              key={product.id}
+              className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
+              data-wow-delay={product.delay}
+            >
+              <div className="service-box-items items-bg">
+                <div className="service-thumb">
+                  <Image
+                    src={product.image}
+                    width={346}
+                    height={236}
+                    alt="img"
+                  />
+                  <div className="icon">
+                    <Image
+                      src={product.icon}
+                      width={32}
+                      height={32}
+                      alt="img"
+                    />
+                  </div>
+                </div>
+                <div className="service-content">
+                  {/* <h2 className="number">{product.number}</h2>     */}
+                  <h3>
+                    <Link href={`/service-details/${product.id}`}>
+                      {product.title}
+                    </Link>
+                  </h3>
+                  <p>{product.description}</p>
+                  <Link
+                    href={`/service-details/${product.id}`}
+                    className="link-btn"
+                  >
+                    Explore More <i className="fa-solid fa-arrow-right" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {/* <div
+          className="page-nav-wrap pt-5 text-center wow fadeInUp"
+          data-wow-delay=".3s"
+        >
+          <ul>
+            <Pagination />
+          </ul>
+        </div> */}
+      </div>
+    </section>
+  );
+}

components/homes/home-1/Services.jsx

@@ -48,18 +48,18 @@ export default function Services() {
     <section
       id="services"
       className="service-section fix section-padding bg-cover  scrollSpySection"
-      style={{ backgroundImage: "url(/assets/img/service/service-bg.jpg)" }}
+      style={{ backgroundImage: "url(/assets/img/home/explore/explore-bg.webp)" }}
     >
       <div className="container">
         <div className="section-title text-center">
           <h6 className="wow fadeInUp">
-            <i className="fa-regular fa-arrow-left-long"></i>WHAT WE OFFER
+            <i className="fa-regular fa-arrow-left-long"></i>EXPLORE
             <i className="fa-regular fa-arrow-right-long"></i>
           </h6>
           <h2 className="text-white splt-txt wow">
-            <AnimatedText text="Create The Building " />
+            <AnimatedText text="Explore Machinery " />
             <br />
-            <AnimatedText text="You Want Here" />
+            <AnimatedText text="and Solutions" />
           </h2>
         </div>
         <div className="array-button">

components/homes/home-1/Skills.jsx

@@ -4,10 +4,10 @@ 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"
+          src="/assets/img/home/build/left-centre-element.webp"
           width={135}
           height={99}
           alt="img"
@@ -15,10 +15,14 @@ export default function Skills() {
       </div>
       <div className="shape-2 float-bob-y">
         <Image
-          src="/assets/img/skills/shape-2.png"
+          src="/assets/img/home/build/right.webp"
           width={310}
           height={344}
           alt="img"
+          style={{
+            opacity: 0.3,
+            zIndex: -1,
+          }}
         />
       </div>
       <div className="container">
@@ -29,14 +33,14 @@ export default function Skills() {
                 <div className="col-lg-7 wow fadeInUp" data-wow-delay=".2s">
                   <div className="skills-image">
                     <Image
-                      src="/assets/img/skills/01.jpg"
+                      src="/assets/img/home/build/build-on-innovation-left.webp"
                       width={324}
                       height={520}
                       alt="img"
                     />
                     <div className="logo-shape">
                       <Image
-                        src="/assets/img/skills/logo.png"
+                        src="/assets/img/home/build/logo.webp"
                         width={153}
                         height={167}
                         alt="img"
@@ -47,7 +51,7 @@ export default function Skills() {
                 <div className="col-lg-5 wow fadeInUp" data-wow-delay=".4s">
                   <div className="skills-image">
                     <Image
-                      src="/assets/img/skills/02.jpg"
+                      src="/assets/img/home/build/build-on-innovation-right.webp"
                       width={227}
                       height={520}
                       alt="img"
@@ -61,7 +65,7 @@ export default function Skills() {
                 <div className="section-title">
                   <h6 className="wow fadeInUp">
                     <i className="fa-regular fa-arrow-left-long" />
-                    our skills
+                    Built on Innovation, Powered by Trust
                     <i className="fa-regular fa-arrow-right-long" />
                   </h6>
                   <h2 className="splt-txt wow">
@@ -69,10 +73,7 @@ export default function Skills() {
                   </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
+                  We specialize in building solutions that meet your exact needs. From machinery fabrication to installation and commissioning, we offer end-to-end support that ensures smooth plant operations.
-                  the readable content of a page when looking at layout the
-                  point of using lorem the is Ipsum less normal distribution of
-                  letters.
                 </p>
                 <div className="skill-feature-items">
                   {skills.map((skill, index) => (

components/homes/home-1/Testimonials.jsx

@@ -31,7 +31,7 @@ export default function Testimonials() {
       </div>
       <div className="building-shape float-bob-x">
         <Image
-          src="/assets/img/testimonial/building-shape.png"
+          src="/assets/img/home/testimonial/testimonial-bg.webp"
           width={931}
           height={520}
           alt="img"
@@ -39,7 +39,7 @@ export default function Testimonials() {
       </div>
       <div className="testimonial-image">
         <Image
-          src="/assets/img/testimonial/testimonial-image.jpg"
+          src="/assets/img/home/testimonial/testimonial-right.webp"
           width={745}
           height={708}
           alt="img"
@@ -57,7 +57,7 @@ export default function Testimonials() {
                     <i className="fa-regular fa-arrow-right-long" />
                   </h6>
                   <h2 className="text-white splt-txt wow">
-                    <AnimatedText text="What Client’s Say" /> <br />
+                    <AnimatedText text="Hear What Our Partners Say " /> <br />
                     <AnimatedText text="About Us!" />
                   </h2>
                 </div>
@@ -89,7 +89,7 @@ export default function Testimonials() {
                   <div className="client-image-area">
                     <div className="client-img">
                       <Image
-                        src="/assets/img/testimonial/client-1.png"
+                        src="/assets/img/home/testimonial/testimonial-1.webp"
                         alt="img"
                         width={81}
                         height={89}
@@ -97,7 +97,7 @@ export default function Testimonials() {
                     </div>
                     <div className="client-img">
                       <Image
-                        src="/assets/img/testimonial/client-2.png"
+                        src="/assets/img/home/testimonial/testimonial-2.webp"
                         alt="img"
                         width={81}
                         height={89}
@@ -105,7 +105,7 @@ export default function Testimonials() {
                     </div>
                     <div className="client-img">
                       <Image
-                        src="/assets/img/testimonial/client-3.png"
+                        src="/assets/img/home/testimonial/testimonial-3.webp"
                         alt="img"
                         width={81}
                         height={89}

components/homes/home-1/turnkey-solutions.jsx

@@ -0,0 +1,140 @@
+"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 TurnKey() {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <section
+
+      
+        id="turnkey-solutions"
+        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>Our Solutions    
+                      <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)}
+      />{" "}
+    </>
+  );
+}

components/project/Projects.jsx

@@ -1,11 +1,24 @@
 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" />
+            <br />
+            <AnimatedText text="Processing Solutions" />
+          </h2>
+        </div>
         <div className="row g-4">
           {projects.map((project) => (
             <div
@@ -30,6 +43,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>

components/project/Projects2.jsx

@@ -0,0 +1,98 @@
+"use client";
+import { useState } from "react";
+import { projectsData } from "@/data/projects";
+import React from "react";
+import Image from "next/image";
+import AnimatedText from "../common/AnimatedText";
+
+const tabOptions = [
+  { key: "desiccated", label: "Desiccated Coconut" },
+  { key: "virgin", label: "Virgin Coconut Oil" },
+  { key: "pare", label: "Pare Water Processing" },
+];
+
+export default function ProjectsData() {
+  const [activeTab, setActiveTab] = useState("desiccated");
+
+  const filteredProjects = projectsData.filter(
+  (project) =>
+    project.category &&
+    project.category.toLowerCase().includes(activeTab)
+);
+
+
+  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" />
+            Projects
+            <i className="fa-regular fa-arrow-right-long" />
+          </h6>
+          <h2 className="splt-txt wow">
+            <AnimatedText text="projects" />
+          </h2>
+
+          {/* Tabs */}
+          <div className="project-tabs mt-4 d-flex justify-content-center gap-4">
+            {tabOptions.map((tab) => (
+              <button
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+                className={`nav-link ${
+                  activeTab === tab.key ? "active fw-bold text-dark" : ""
+                }`}
+                style={{
+                  border: "none",
+                  background: "transparent",
+                  fontSize: "1rem",
+                  position: "relative",
+                }}
+              >
+                {tab.label}
+                {activeTab === tab.key && (
+                  <div
+                    style={{
+                      height: "3px",
+                      backgroundColor: "#ff5502",
+                      width: "100%",
+                      position: "absolute",
+                      bottom: "-4px",
+                      left: 0,
+                      borderRadius: "2px",
+                    }}
+                  />
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="row g-4 mt-5">
+          {filteredProjects.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>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/turnkey-solutions/page.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>Our Solutions
+                      <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)}
+      />{" "}
+    </>
+  );
+}

data/blogs.js

@@ -3,18 +3,18 @@ export const newsItems = [
     id: 1,
     imgSrc: "/assets/img/news/02.jpg",
     title: "Supervisor Disapproved of Latest Work.",
-    description: "Pellentesque vitae consectetur ante \nInteger non eros...",
+    description: "If you're still using outdated deshellers, you may be losing time and yield...",
     author: "By Admin",
-    category: "Maintenance",
+    category: "Machine Insights",
     delay: ".2s",
   },
   {
     id: 2,
     imgSrc: "/assets/img/news/03.jpg",
     title: "Supervisor Disapproved of Latest Work.",
-    description: "Pellentesque vitae consectetur ante \nInteger non eros...",
+    description: " Selecting the wrong dryer can lead to uneven drying and product rejection...",
     author: "By Admin",
-    category: "Maintenance",
+    category: "Operational Tips",
     delay: ".4s",
   },
 ];
@@ -23,11 +23,10 @@ export const newsImageItems = [
   {
     id: 3,
     backgroundImage: "/assets/img/news/01.jpg",
-    title: "Helping Companies in Their <br />Green Transition",
+    title: " Revolutionizing Coconut Processing: The Rise of Turnkey Plants",
-    description:
+    description: " Turnkey coconut processing plants are helping manufacturers scale faster and reduce operational...",
-      "Pellentesque vitae consectetur ante Integer non eros id quam dapibus tincidunt non sed dolor Praesent maximus ...",
     author: "By Admin",
-    category: "Maintenance",
+    category: "Coconut Tech",
   },
 ];
 
@@ -64,9 +63,9 @@ export const newsItems2 = [
   },
 ];
 
-export const newsItems3 = [
+export const BlogData = [
   {
-    id: 7,
+    slug: "latest-work-disapproved-supervisor",
     images: ["/assets/img/news/04.jpg", "/assets/img/news/04.jpg"],
     category: "Construction",
     date: "07 July 2024",
@@ -78,7 +77,7 @@ export const newsItems3 = [
     delay: ".2s",
   },
   {
-    id: 8,
+    slug: "manager-disapproved-most-recent-work",
     images: ["/assets/img/news/05.jpg", "/assets/img/news/05.jpg"],
     category: "Building",
     date: "07 July 2024",
@@ -91,7 +90,7 @@ export const newsItems3 = [
     active: true,
   },
   {
-    id: 9,
+    slug: "manager-found-latest-work-unsatisfactory",
     images: ["/assets/img/news/06.jpg", "/assets/img/news/06.jpg"],
     category: "Industry",
     date: "07 July 2024",
@@ -102,42 +101,6 @@ export const newsItems3 = [
     },
     delay: ".6s",
   },
-  {
-    id: 10,
-    images: ["/assets/img/news/07.jpg", "/assets/img/news/07.jpg"],
-    category: "Industry",
-    date: "07 July 2024",
-    title: "Manager Found Latest Work Unsatisfactory.",
-    author: {
-      name: "Guy Hawkins",
-      image: "/assets/img/news/author-3.png",
-    },
-    delay: ".2s",
-  },
-  {
-    id: 11,
-    images: ["/assets/img/news/08.jpg", "/assets/img/news/08.jpg"],
-    category: "Industry",
-    date: "07 July 2024",
-    title: "Manager Found Latest Work Unsatisfactory.",
-    author: {
-      name: "Guy Hawkins",
-      image: "/assets/img/news/author-3.png",
-    },
-    delay: ".4s",
-  },
-  {
-    id: 12,
-    images: ["/assets/img/news/09.jpg", "/assets/img/news/09.jpg"],
-    category: "Industry",
-    date: "07 July 2024",
-    title: "Manager Found Latest Work Unsatisfactory.",
-    author: {
-      name: "Guy Hawkins",
-      image: "/assets/img/news/author-3.png",
-    },
-    delay: ".6s",
-  },
 ];
 
 export const newsItems4 = [
@@ -203,7 +166,6 @@ export const allNews = [
   ...newsItems,
   ...newsImageItems,
   ...newsItems2,
-  ...newsItems3,
   ...newsItems4,
   ...recentItems,
 ];

data/facts.js

@@ -36,32 +36,33 @@ export const counterItems = [
 export const achievements = [
   {
     id: 1,
-    icon: "/assets/img/icon/21.svg",
+    icon: "/assets/img/icon/24.svg",
-    count: "45",
+    count: "20+",
-    description: "project Complete",
+    description: "Countries Served",
-    delay: ".2s",
+    delay: ".4s",
+    style: "style-2",
   },
   {
     id: 2,
-    icon: "/assets/img/icon/22.svg",
-    count: "25",
-    description: "Active On Clients",
-    delay: ".4s",
-  },
-  {
-    id: 3,
     icon: "/assets/img/icon/23.svg",
-    count: "2.5",
+    count: "99.5%",
-    description: "Experience Team",
+    description: "Equipment Uptime",
     delay: ".2s",
     style: "style-2",
   },
   {
-    id: 4,
+    id: 3,
-    icon: "/assets/img/icon/24.svg",
+    icon: "/assets/img/icon/22.svg",
-    count: "2.4",
+    count: "120+",
-    description: "Winning Awards",
+    description: "Machinery Delivered",
     delay: ".4s",
-    style: "style-2",
   },
+  {
+    id: 4,
+    icon: "/assets/img/icon/21.svg",
+    count: "98%",
+    description: "Client Satisfaction",
+    delay: ".2s",
+  },
+
 ];

data/faq.js

@@ -1,41 +1,41 @@
 export const faqs = [
   {
     id: 1,
-    question: "How long should a business plan be?",
+    question: "What coconut processing machinery does Cibus offer?",
     answer:
-      "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.",
+      "We offer a wide range of coconut machinery, including deshelling machines, dryers, pulverizers, conveyors, and complete turnkey processing lines. Each machine is designed to optimize productivity, minimize waste, and ensure hygiene standards.",
     delay: ".1s",
     expanded: false,
   },
   {
     id: 2,
-    question: "What are the different stages of a construction project?",
+    question: "How do I choose the right coconut dryer for my facility?",
     answer:
-      "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.",
+      "Choosing the right dryer depends on your production capacity, moisture removal requirements, energy sources, and available space. Our team will assess your specific needs and recommend the most efficient and cost-effective drying solution.",
     delay: ".3s",
     expanded: true,
   },
   {
     id: 3,
-    question: "What are the different stages of a construction project?",
+    question: "Can your deshelling machines integrate with existing production lines?",
     answer:
-      "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.",
+      "Absolutely. Our deshelling machines are designed to be modular and flexible, making them easy to integrate into existing coconut processing lines. We also offer customization to ensure seamless operation.",
     delay: ".5s",
     expanded: false,
   },
   {
     id: 4,
-    question: "What are the different stages of a construction project?",
+    question: "Do you offer on-site installation and post-sales service?",
     answer:
-      "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.",
+      "Yes, we provide full on-site installation, commissioning, and operator training. Our after-sales support includes maintenance, spare parts supply, and remote troubleshooting to ensure continuous uptime.",
     delay: ".6s",
     expanded: false,
   },
   {
     id: 5,
-    question: "What are the different stages of a construction project?",
+    question: "What capacities are available for your processing machines?",
     answer:
-      "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.",
+      "Our machines are available in a variety of capacities to suit small, medium, and large-scale operations — ranging from 100 coconuts/hour to industrial-scale units handling several tons per day. We can also custom-build equipment to match your output goals.",
     delay: ".7s",
     expanded: false,
   },

data/menu.js

@@ -1,64 +1,76 @@
 export const menuData = [
   {
     label: "Home",
-    href: "#",
+    href: "/",
-    iconClass: "fa-regular fa-plus",
+    // iconClass: "fa-regular fa-plus",
     className: "has-dropdown active menu-thumb",
-    submenu: [
+    // submenu: [
-      {
+    //   {
-        homeMenuItems: [
+    //     homeMenuItems: [
-          {
+    //       {
-            imageSrc: "/assets/img/header/home-1.jpg",
+    //         imageSrc: "/assets/img/header/home-1.jpg",
-            title: "Home 01",
+    //         title: "Home 01",
-            buttons: [
+    //         buttons: [
-              { label: "Multi Page", href: "/" },
+    //           { label: "Multi Page", href: "/" },
-              { label: "One Page", href: "/home-1-one-page" },
+    //           { label: "One Page", href: "/home-1-one-page" },
-            ],
+    //         ],
-          },
+    //       },
-          {
+    //       {
-            imageSrc: "/assets/img/header/home-2.jpg",
+    //         imageSrc: "/assets/img/header/home-2.jpg",
-            title: "Home 02",
+    //         title: "Home 02",
-            buttons: [
+    //         buttons: [
-              { label: "Multi Page", href: "/home-2" },
+    //           { label: "Multi Page", href: "/home-2" },
-              { label: "One Page", href: "/home-2-one-page" },
+    //           { label: "One Page", href: "/home-2-one-page" },
-            ],
+    //         ],
-          },
+    //       },
-        ],
+    //     ],
-      },
+    //   },
-    ],
+    // ],
   },
   {
     label: "About Us",
     href: "/about",
-  },
-  {
-    label: "Pages",
-    href: "#",
     iconClass: "fa-regular fa-plus",
-    className: "has-dropdown",
     submenu: [
+      { label: "Corporate Profile", href: "/corporate-profile" },
+    ],
+  },
+  // {
+  //   label: "Pages",
+  //   href: "#",
+  //   iconClass: "fa-regular fa-plus",
+  //   className: "has-dropdown",
+  //   submenu: [
+  //     {
+  //       label: "Our Team",
+  //       href: "#",
+  //       iconClass: "fas fa-angle-down",
+  //       submenu: [
+  //         { label: "Our Team", href: "/team" },
+  //         { label: "Team Details", href: "/team-details/1" },
+  //       ],
+  //     },
+  //     { label: "Pricing", href: "/pricing" },
+  //     { label: "Faq's", href: "/faq" },
+  //     { label: "404 Page", href: "/404" },
+  //   ],
+  // },
+  // {
+  //   label: "Services",
+  //   href: "#",
+  //   iconClass: "fa-regular fa-plus",
+  //   submenu: [
+  //     { label: "Services", href: "/service" },
+  //     { label: "Service Details", href: "/service-details/1" },
+  //   ],
+  // },
+    {
+    label: "Products",
+    href: "/product",
+  },
       {
-        label: "Our Team",
+    label: "Turnkey Solutions",
-        href: "#",
+    href: "/turnkey-solutions",
-        iconClass: "fas fa-angle-down",
-        submenu: [
-          { label: "Our Team", href: "/team" },
-          { label: "Team Details", href: "/team-details/1" },
-        ],
-      },
-      { label: "Pricing", href: "/pricing" },
-      { label: "Faq's", href: "/faq" },
-      { label: "404 Page", href: "/404" },
-    ],
-  },
-  {
-    label: "Services",
-    href: "#",
-    iconClass: "fa-regular fa-plus",
-    submenu: [
-      { label: "Services", href: "/service" },
-      { label: "Service Details", href: "/service-details/1" },
-    ],
   },
   {
     label: "Projects",

data/projects.js

@@ -46,109 +46,346 @@ export const projectItems = [
 export const projects = [
   {
     id: 7,
-    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    images: ["/assets/img/home/who-we-are/who-we-are-1.webp", "/assets/img/home/who-we-are/who-we-are-1.webp"],
-    title: "General Construction",
+    title: "Mission",
-    description:
+    delay: ".2s",
-      "There are many variations of a passages of Lorem Ipsum available.",
+  },
+  {
+    id: 8,
+    images: ["/assets/img/home/who-we-are/who-we-are-2.webp", "/assets/img/home/who-we-are/who-we-are-2.webp"],
+    title: "Vission",
+    delay: ".4s",
+  },
+  {
+    id: 9,
+    images: ["/assets/img/home/who-we-are/who-we-are-3.webp", "/assets/img/home/who-we-are/who-we-are-3.webp"],
+    title: "Core Values",
+    delay: ".6s",
+  },
+]
+  export const projects2 = [
+  {
+    id: 7,
+    images: ["/assets/img/project/09.jpg"],
+    title: "Mission",
     delay: ".2s",
   },
   {
     id: 8,
     images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
-    title: "Architecture & Building",
+    title: "Vission",
-    description:
-      "There are many variations of a passages of Lorem Ipsum available.",
     delay: ".4s",
   },
   {
     id: 9,
     images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
-    title: "Interior Design",
+    title: "Core Values",
-    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.",
     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 = [
+export const projects3 = [
   {
     id: 16,
-    title: "Building Renovation",
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
-    bgClass: "",
+    title: "Mission",
-    delay: "",
+    delay: ".2s",
   },
   {
     id: 17,
-    title: "Building Renovation",
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
-    bgClass: "bg-1",
+    title: "Vission",
-    delay: ".2s",
-  },
-  {
-    id: 18,
-    title: "Building Renovation",
-    bgClass: "bg-2 active",
     delay: ".4s",
   },
   {
-    id: 19,
+    id: 18,
-    title: "Building Renovation",
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
-    bgClass: "bg-3",
+    title: "Core Values",
     delay: ".6s",
+  },
+    {
+    id: 19,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Mission",
+    delay: ".2s",
   },
   {
     id: 20,
-    title: "Building Renovation",
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
-    bgClass: "bg-4",
+    title: "Vission",
-    delay: ".8s",
+    delay: ".4s",
+  },
+  {
+    id: 21,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Core Values",
+    delay: ".6s",
+  },
+    {
+    id: 22,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Mission",
+    delay: ".2s",
+  },
+  {
+    id: 23,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Vission",
+    delay: ".4s",
+  },
+  {
+    id: 24,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Core Values",
+    delay: ".6s",
   },
 ];
 
-export const allProjects = [...projectItems, ...projects, projects2];
+
+
+export const projectsData = [
+  // Tab 1 - Desiccated Coconut
+  {
+    id: 1,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 1",
+    delay: ".2s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 2,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 2",
+    delay: ".4s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 3,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 3",
+    delay: ".6s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 4,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 4",
+    delay: ".2s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 5,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 5",
+    delay: ".4s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 6,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 6",
+    delay: ".6s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 7,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 7",
+    delay: ".2s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 8,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 8",
+    delay: ".4s",
+    category: "Desiccated Coconut",
+  },
+  {
+    id: 9,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 9",
+    delay: ".6s",
+    category: "Desiccated Coconut",
+  },
+
+  // Tab 2 - Virgin Coconut Oil
+  {
+    id: 10,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 10",
+    delay: ".2s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 11,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 11",
+    delay: ".4s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 12,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 12",
+    delay: ".6s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 13,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 13",
+    delay: ".2s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 14,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 14",
+    delay: ".4s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 15,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 15",
+    delay: ".6s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 16,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 16",
+    delay: ".2s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 17,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 17",
+    delay: ".4s",
+    category: "Virgin Coconut Oil",
+  },
+  {
+    id: 18,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 18",
+    delay: ".6s",
+    category: "Virgin Coconut Oil",
+  },
+
+  // Tab 3 - Pare Water Processing
+  {
+    id: 19,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 19",
+    delay: ".2s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 20,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 20",
+    delay: ".4s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 21,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 21",
+    delay: ".6s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 22,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 22",
+    delay: ".2s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 23,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 23",
+    delay: ".4s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 24,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 24",
+    delay: ".6s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 25,
+    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    title: "Project 25",
+    delay: ".2s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 26,
+    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    title: "Project 26",
+    delay: ".4s",
+    category: "Pare Water Processing",
+  },
+  {
+    id: 27,
+    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    title: "Project 27",
+    delay: ".6s",
+    category: "Pare Water Processing",
+  },
+];
+
+export const allProjects = [...projectItems, ...projects, projects2, projects3];

data/services.js

@@ -1,67 +1,67 @@
 export const serviceItems = [
   {
     id: 1,
-    imgSrc: "/assets/img/service/01.jpg",
+    imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
-    iconSrc: "/assets/img/icon/01.svg",
+    iconSrc: "/assets/img/home/explore/icon-1.webp",
     number: "01",
-    title: "Building Construction",
+    title: "Coconut Shell Removal System",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
   },
   {
     id: 2,
-    imgSrc: "/assets/img/service/02.jpg",
+    imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
-    iconSrc: "/assets/img/icon/02.svg",
+    iconSrc: "/assets/img/home/explore/icon-2.webp",
     number: "02",
-    title: "Architecture Design",
+    title: "Energy-Efficient Coconut Dryer",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
   },
   {
     id: 3,
-    imgSrc: "/assets/img/service/03.jpg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
-    iconSrc: "/assets/img/icon/03.svg",
+    iconSrc: "/assets/img/home/explore/icon-3.webp",
     number: "03",
-    title: "Building Renovation",
+    title: "Coconut Processing Machinery",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Custom-engineered coconut processing machinery tailored to your production line.",
   },
   {
     id: 4,
-    imgSrc: "/assets/img/service/04.jpg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
-    iconSrc: "/assets/img/icon/04.svg",
+    iconSrc: "/assets/img/home/explore/icon-4.webp",
     number: "04",
-    title: "Quality Materials",
+    title: "Coconut Processing Equipment",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
   },
   {
     id: 5,
-    imgSrc: "/assets/img/service/01.jpg",
+    imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
-    iconSrc: "/assets/img/icon/01.svg",
+    iconSrc: "/assets/img/home/explore/icon-1.webp",
     number: "01",
-    title: "Building Construction",
+    title: "Coconut Shell Removal System",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
   },
   {
     id: 6,
-    imgSrc: "/assets/img/service/02.jpg",
+    imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
-    iconSrc: "/assets/img/icon/02.svg",
+    iconSrc: "/assets/img/home/explore/icon-2.webp",
     number: "02",
-    title: "Architecture Design",
+    title: "Energy-Efficient Coconut Dryer",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
   },
   {
     id: 7,
-    imgSrc: "/assets/img/service/03.jpg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
-    iconSrc: "/assets/img/icon/03.svg",
+    iconSrc: "/assets/img/home/explore/icon-3.webp",
     number: "03",
-    title: "Building Renovation",
+    title: "Coconut Processing Machinery",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Custom-engineered coconut processing machinery tailored to your production line.",
   },
   {
     id: 8,
-    imgSrc: "/assets/img/service/04.jpg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
-    iconSrc: "/assets/img/icon/04.svg",
+    iconSrc: "/assets/img/home/explore/icon-4.webp",
     number: "04",
-    title: "Quality Materials",
+    title: "Coconut Processing Equipment",
-    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
   },
 ];
 
@@ -228,9 +228,129 @@ export const services2 = [
   },
 ];
 
+
+export const products = [
+  {
+    id: 28,
+    image: "/assets/img/products/coconut-deshelling.webp",
+    icon: "/assets/img/products/icon-1.webp",
+    number: "01",
+    title: "Coconut Deshelling Machine",
+    description: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient, precision-engineered deshellers built for continuous production lines.",
+    delay: ".2s",
+  },
+  {
+    id: 29,
+    image: "/assets/img/products/coconut-dryer.webp",
+    icon: "/assets/img/products/icon-2.webp",
+    number: "02",
+    title: "Coconut Dryer (Hot Air / Tray Type)",
+    description: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
+    delay: ".4s",
+  },
+  {
+    id: 30,
+    image: "/assets/img/products/coconut-grinder.webp",
+    icon: "/assets/img/products/icon-3.webp",
+    number: "03",
+    title: "Coconut Pulverizer & Grinder",
+    description: "Grind dried coconut into fine powder with consistent output, low power consumption, minimal maintenance, high efficiency, and smooth operation.",
+    delay: ".6s",
+  },
+  {
+    id: 31,
+    image: "/assets/img/products/coconut-milk-extractor.webp",
+    icon: "/assets/img/products/icon-4.webp",
+    number: "04",
+    title: "Coconut Milk Extractor",
+    description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant, easy-to-clean machinery suitable for both small and industrial-scale operations.",
+    delay: ".2s",
+  },
+  {
+    id: 32,
+    image: "/assets/img/products/coconut-oil.webp",
+    icon: "/assets/img/products/icon-5.webp",
+    number: "05",
+    title: "Virgin Coconut Oil (VCO) Processing Equipment",
+    description: "From cold press systems to filtration and bottling, complete VCO machinery for value-added production.",
+    delay: ".4s",
+  },
+  {
+    id: 33,
+    image: "/assets/img/products/coconut-water.webp",
+    icon: "/assets/img/products/icon-6.webp",
+    number: "06",
+    title: "Coconut Water Processing Unit",
+    description: "Sterilize, filter, and bottle coconut water with our modular, easy-to-maintain setups. Designed for scalability, these systems ensure purity and extended shelf stability.",
+    delay: ".6s",
+  },
+];
+
+export const products2 = [
+  {
+    id: 34,
+    image: "/assets/img/service/01.jpg",
+    icon: "/assets/img/icon/01.svg",
+    number: "01",
+    title: "Coconut Deshelling Machine",
+    description: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient, precision-engineered deshellers built for continuous production lines.",
+    delay: ".2s",
+  },
+  {
+    id: 35,
+    image: "/assets/img/service/02.jpg",
+    icon: "/assets/img/icon/02.svg",
+    number: "02",
+    title: "Coconut Dryer (Hot Air / Tray Type)",
+    description: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
+    delay: ".4s",
+  },
+  {
+    id: 36,
+    image: "/assets/img/service/03.jpg",
+    icon: "/assets/img/icon/03.svg",
+    number: "03",
+    title: "Coconut Pulverizer & Grinder",
+    description: "Grind dried coconut into fine powder with consistent output, low power consumption, minimal maintenance, high efficiency, and smooth operation.",
+    delay: ".6s",
+  },
+  {
+    id: 37,
+    image: "/assets/img/service/06.jpg",
+    icon: "/assets/img/icon/07.svg",
+    number: "04",
+    title: "Coconut Milk Extractor",
+    description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant, easy-to-clean machinery suitable for both small and industrial-scale operations.",
+    delay: ".2s",
+  },
+  {
+    id: 38,
+    image: "/assets/img/service/07.jpg",
+    icon: "/assets/img/icon/08.svg",
+    number: "05",
+    title: "Virgin Coconut Oil (VCO) Processing Equipment",
+    description: "From cold press systems to filtration and bottling, complete VCO machinery for value-added production.",
+    delay: ".4s",
+  },
+  {
+    id: 39,
+    image: "/assets/img/service/08.jpg",
+    icon: "/assets/img/icon/09.svg",
+    number: "06",
+    title: "Coconut Water Processing Unit",
+    description: "Sterilize, filter, and bottle coconut water with our modular, easy-to-maintain setups. Designed for scalability, these systems ensure purity and extended shelf stability.",
+    delay: ".6s",
+  },
+];
+
+
 export const allServices = [
   ...serviceItems,
   ...serviceItems2,
   ...services,
   ...services2,
+  ...products,
+  ...products2,
 ];
+
+

data/skills.js

@@ -1,16 +1,16 @@
 export const skills = [
   {
-    title: "General Consulting",
+    title: "German-Grade Engineering Precision",
     percentage: 85,
     delay: ".2s",
   },
   {
-    title: "Design & Build",
+    title: "Scalable Designs to Fit All Budgets",
     percentage: 90,
     delay: ".4s",
   },
   {
-    title: "Construction Management",
+    title: "Minimal Maintenance with Maximum Uptime",
     percentage: 75,
     delay: ".2s",
   },

data/team.js

@@ -105,7 +105,7 @@ export const teamMembers2 = [
   {
     id: 5,
     image: "/assets/img/team/05.jpg",
-    name: "Shikhon Islam",
+    name: " At a Glance",
     role: "Sr. engineer",
     socials: [
       {
@@ -130,7 +130,7 @@ export const teamMembers2 = [
   {
     id: 6,
     image: "/assets/img/team/06.jpg",
-    name: "Jenny Wilson",
+    name: "Factory & Workflows",
     role: "Sr. engineer",
     socials: [
       {
@@ -156,7 +156,7 @@ export const teamMembers2 = [
   {
     id: 7,
     image: "/assets/img/team/07.jpg",
-    name: "Kawser Ahmed",
+    name: "Engineering & Innovation",
     role: "Sr. engineer",
     socials: [
       {
@@ -181,7 +181,7 @@ export const teamMembers2 = [
   {
     id: 8,
     image: "/assets/img/team/08.jpg",
-    name: "Ronald Richards",
+    name: "Sustainability Impact",
     role: "Sr. engineer",
     socials: [
       {

data/testimonials.js

@@ -1,7 +1,7 @@
 export const testimonials = [
-  "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock !",
+  "Cibus Industry brought our processing operations to a whole new level. Their turnkey solutions were delivered on time and exceeded all performance expectations. !",
-  "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock !",
+  "The quality of engineering and attention to detail from the Cibus team is unmatched. Their machinery runs seamlessly and has significantly reduced our maintenance needs. !",
-  "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock !",
+  "Choosing Cibus was the best decision we made for scaling up our coconut processing line. Their after-sales support and training made the transition effortless. !",
 ];
 
 export const testimonials2 = [

public/assets/css/main.css

@@ -11,7 +11,8 @@ Version: 1.0.0
   --body: #fff;
   --black: #000;
   --white: #fff;
-  --theme: #f55b1f;
+  /* --theme: #f55b1f; */
+  --theme: #F26522;
   --theme2: #f55b1f;
   --header: #121315;
   --text: #666666;
@@ -20,96 +21,68 @@ Version: 1.0.0
   --bg: #1e2023;
   --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13);
 }
-
 .theme-btn {
   background-color: var(--theme);
   color: var(--white);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 16px;
   font-weight: 700;
-  padding: 24px 50px;
+  padding: 16px 36px;
   border-radius: 0;
   text-transform: uppercase;
-  -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   position: relative;
   z-index: 1;
+  white-space: nowrap;
+  gap: 10px; /* Spacing between text and icon */
   line-height: 1;
 }
-.theme-btn::before {
+
-  content: "";
+.theme-btn i {
-  background-color: var(--header);
+  font-size: 16px;
-  width: 0;
+  line-height: 1;
-  height: 50%;
+  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  z-index: -1;
 }
+
+.theme-btn:hover {
+  color: var(--white);
+}
+
+.theme-btn::before,
 .theme-btn::after {
   content: "";
   background-color: var(--header);
   width: 0;
   height: 50%;
   position: absolute;
+  z-index: -1;
+  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+
+.theme-btn::before {
+  top: 0;
+  left: 0;
+}
+
+.theme-btn::after {
   bottom: 0;
   right: 0;
-  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  z-index: -1;
-}
-.theme-btn i {
-  margin-left: 10px;
-}
-.theme-btn:hover {
-  color: var(--white);
 }
+
 .theme-btn:hover::before,
 .theme-btn:hover::after {
   width: 100%;
 }
-.theme-btn.bg-white {
+
-  background-color: var(--white);
-  color: var(--header);
-}
-.theme-btn.bg-white:hover {
-  color: var(--white);
-}
 @media (max-width: 767px) {
   .theme-btn {
-    padding: 20px 32px;
+    padding: 14px 28px;
-  }
-}
-@media (max-width: 575px) {
-  .theme-btn {
-    padding: 18px 30px;
     font-size: 14px;
   }
 }
 
-.link-btn {
-  display: inline-block;
-  color: var(--text);
-  text-align: center;
-  font-family: "DM Sans";
-  font-size: 16px;
-  font-weight: 600;
-  text-transform: capitalize;
-}
-.link-btn i {
-  margin-left: 10px;
-  transform: rotate(-40deg);
-  transition: all 0.4s ease-in-out;
-}
-.link-btn:hover {
-  color: var(--theme);
-}
-.link-btn:hover i {
-  margin-left: 10px;
-  transform: rotate(0);
-}
 
 /* --------------------------------------------
     Template Default Fonts & Fonts Styles
@@ -5844,7 +5817,8 @@ input.main-search-input::placeholder {
 }
 
 .section-bg {
-  background-color: var(--bg);
+  /* background-color: var(--bg); */
+background-color: #0b2273;
 }
 
 .section-bg-2 {