Projects tab updated

components/project/Projects2.jsx

@@ -1,13 +1,76 @@
+"use client";
+import { useState } from "react";
 import { projectsData } from "@/data/projects";
 import React from "react";
 import Image from "next/image";
-import Link from "next/link";
+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="row g-4">
+        <div className="section-title text-center">
-          {projectsData.map((project) => (
+          <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"
@@ -25,22 +88,6 @@ export default function ProjectsData() {
                     />
                   ))}
                 </div>
-                <div className="project-content">
-                  <h3>
-                    <Link href={`/project-details/${project.id}`}>
-                      {project.title}
-                    </Link>
-                  </h3>
-                  <p>{project.description}</p>
-                </div>
-                <div className="shape-img">
-                  <Image
-                    src="/assets/img/project/shape.png"
-                    width={57}
-                    height={54}
-                    alt="img"
-                  />
-                </div>
               </div>
             </div>
           ))}

data/projects.js

@@ -192,43 +192,200 @@ export const projects3 = [
 
 
 export const projectsData = [
+  // Tab 1 - Desiccated Coconut
   {
     id: 1,
     images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
-    title: "1",
+    title: "Project 1",
     delay: ".2s",
+    category: "Desiccated Coconut",
   },
   {
     id: 2,
     images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
-    title: "2",
+    title: "Project 2",
     delay: ".4s",
+    category: "Desiccated Coconut",
   },
   {
     id: 3,
     images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
-    title: "3",
+    title: "Project 3",
     delay: ".6s",
+    category: "Desiccated Coconut",
   },
-    {
+  {
     id: 4,
     images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
-    title: "4",
+    title: "Project 4",
     delay: ".2s",
+    category: "Desiccated Coconut",
   },
   {
     id: 5,
     images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
-    title: "5",
+    title: "Project 5",
     delay: ".4s",
+    category: "Desiccated Coconut",
   },
   {
     id: 6,
     images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
-    title: "6",
+    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];