home page project updated

app/(homes)/home-1/page.jsx

@@ -14,6 +14,7 @@ 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";
+import ProjectsData from "@/components/homes/home-1/project";
 export const metadata = {
   title: "Home 1 || Xbuild - Constriction nextjs Template",
   description: "Xbuild - Constriction nextjs Template",
@@ -28,6 +29,7 @@ export default function Home1() {
       <Services />
       <Skills />
       <Cta />
+      <ProjectsData />
       <Testimonials />
       <Team />
       {/* <Projects /> */}

components/footers/Footer1.jsx

@@ -2,6 +2,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { services2 } from "@/data/services";
+import { allProducts } from "@/utlis/constant.utils";
 import { footerLinks } from "@/data/menu";
 import { Gallery, Item } from "react-photoswipe-gallery";
 import { galleryImages } from "@/data/gallery";
@@ -116,9 +117,9 @@ export default function Footer1() {
                   <h5>Our Products</h5>
                 </div>
                 <ul className="list-area">
-                  {services2.map((elm, i) => (
+                  {allProducts.map((elm, i) => (
                     <li key={i}>
-                      <Link href={`/product`}>
+                      <Link href={`/product-details/${elm.slug}`}>
                         <i className="fa-solid fa-chevrons-right" />
                         {elm.title}
                       </Link>

components/homes/home-1/project.jsx

@@ -0,0 +1,146 @@
+"use client";
+import { useState } from "react";
+import { projectsData } from "@/data/projects";
+import React from "react";
+import Image from "next/image";
+import AnimatedText from "@/components/common/AnimatedText";
+import Link from "next/link";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+const tabOptions = [
+  { key: "desiccated", label: "Coconut Milk Extraction" },
+  { key: "virgin", label: "Coconut Dryer Projects" },
+  { key: "pare", label: "Coconut Pulverizing & Grinding" },
+];
+
+export default function ProjectsHomePreview() {
+  const [activeTab, setActiveTab] = useState("desiccated");
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxImages, setLightboxImages] = useState([]);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  // Filter and limit projects based on tab
+  const filteredProjects = projectsData
+    .filter(
+      (project) =>
+        project.category &&
+        project.category.toLowerCase().includes(activeTab)
+    )
+    .slice(0, 6); // Limit to 6 per tab
+
+  // Get all image URLs from filtered projects
+  const imageList = filteredProjects.map((project) => project.images[0]);
+
+  // Handle lightbox opening
+  const handleImageClick = (imageSrc) => {
+    const index = imageList.findIndex((img) => img === imageSrc);
+    const slides = imageList.map((img) => ({ src: img }));
+    setLightboxImages(slides);
+    setCurrentImageIndex(index >= 0 ? index : 0);
+    setLightboxOpen(true);
+  };
+
+  return (
+    <section className="project-section section-padding3 fix">
+      <div className="container">
+        {/* Section Title */}
+        <div className="section-title text-center">
+          <h6>
+            <i className="fa-regular fa-arrow-left-long" />
+            Our Global Footprint
+            <i className="fa-regular fa-arrow-right-long" />
+          </h6>
+          <h2 className="splt-txt">
+            <AnimatedText text=" Featured Turnkey Coconut" />
+            <br />
+            <AnimatedText text=" Processing 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>
+
+        {/* Project Cards */}
+        <div className="row g-4 mt-5">
+          {filteredProjects.map((project) => (
+            <div key={project.id} className="col-xl-4 col-lg-6 col-md-6">
+              <div className="project-card-items">
+                <div
+                  className="project-image"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => handleImageClick(project.images[0])}
+                >
+                  <Image
+                    width={370}
+                    height={331}
+                    src={project.images[0]}
+                    alt={project.title}
+                    style={{
+                      width: "100%",
+                      height: "auto",
+                      display: "block",
+                      background: "transparent",
+                      transition: "none",
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Lightbox */}
+        {lightboxOpen && (
+          <Lightbox
+            open={lightboxOpen}
+            close={() => setLightboxOpen(false)}
+            slides={lightboxImages}
+            index={currentImageIndex}
+          />
+        )}
+
+        {/* View More Button */}
+        <div className="text-center mt-5">
+          <Link
+            href="/projects"
+            className="theme-btn theme-color wow fadeInUp"
+            data-wow-delay=".6s"
+          >
+            View More Projects
+            <i className="fa-regular fa-arrow-right" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

public/assets/css/main.css

@@ -5857,6 +5857,20 @@ background-color: #0b2273;
   }
 }
 
+.section-padding3 {
+  padding: 0 0 120px;
+}
+@media (max-width: 1199px) {
+  .section-padding2 {
+    padding: 0 0 100px ;
+  }
+}
+@media (max-width: 991px) {
+  .section-padding2 {
+    padding: 0 0 80px;
+  }
+}
+
 .service-section {
   position: relative;
   z-index: 9;

public/assets/scss/_section.scss

@@ -102,5 +102,20 @@
     padding: 80px 0 0;
   }
 }
+
+.section-padding3 {
+  padding: 0 0 120px;
+}
+@media (max-width: 1199px) {
+  .section-padding2 {
+    padding: 0 0 100px ;
+  }
+}
+@media (max-width: 991px) {
+  .section-padding2 {
+    padding: 0 0 80px;
+  }
+}
+
 //>>>>> Basic Css End <<<<<//