first commit

components/otherPages/Portfolio.jsx

@@ -0,0 +1,128 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { caseStudies6 } from "@/data/caseStudies";
+import DropdownSelect from "../common/DropdownSelect";
+const categories = [
+  { label: "All Case" },
+  { label: "Business Consulting" },
+  { label: "Coroporate" },
+  { label: "IT Solution" },
+  { label: "Marketing" },
+  { label: "Startup Consulting" },
+];
+
+export default function Portfolio() {
+  const [activeCategory, setActiveCategory] = useState("All Case");
+  const [filtered, setFiltered] = useState(caseStudies6);
+  useEffect(() => {
+    if (activeCategory == "All Case") {
+      setFiltered(caseStudies6);
+    } else {
+      setFiltered(caseStudies6.filter((elm) => elm.category == activeCategory));
+    }
+  }, [activeCategory]);
+
+  return (
+    <div className="wg-listing tf-spacing-25">
+      <div className="tf-container">
+        <div className="d-flex align-items-center gap_12 mb_95 flex-wrap justify-content-between">
+          <div className="tf-project-filter overflow-x-auto">
+            {categories.map((category, i) => (
+              <div
+                key={i}
+                className={`tf-btns-filter text-1
+                   ${activeCategory === category.label ? "is--active" : "fw-3"}
+                
+                `}
+                onClick={() => setActiveCategory(category.label)}
+              >
+                <h6>{category.label}</h6>
+              </div>
+            ))}
+          </div>
+          <div className="d-flex align-items-center text_mono-gray-5 h6 wrap-sort">
+            Filter By Years:
+            <DropdownSelect
+              addtionalParentClass="align-items-center text_mono-gray-5 h6 wrap-sort"
+              options={["all", "Lastest", "Oldest", "Title ASC", "Title DESC"]}
+            />
+          </div>
+        </div>
+        <div id="loadMore" className="parent tf-grid-layout lg-col-2">
+          {filtered.map((item, index) => (
+            <div
+              key={index}
+              className={`${item.filterClass} tf-filter-item tf-tab-content loadItem`}
+            >
+              <div className="case-studies-item v2 style-1 hover-image hover-border border-element">
+                <Link href={`/single-project/${item.id}`} className="img-style">
+                  <Image
+                    className="lazyload"
+                    data-src={item.imageSrc}
+                    alt="case-studies"
+                    src={item.imageSrc}
+                    width={item.imageWidth}
+                    height={item.imageHeight}
+                  />
+                </Link>
+                <div className="content">
+                  <div className="top d-flex align-items-center justify-content-between mb_17">
+                    <div className="brand">
+                      <Image
+                        alt="brand"
+                        src={item.brandSrc}
+                        width={item.brandWidth}
+                        height={item.brandHeight}
+                      />
+                    </div>
+                    <Link
+                      href={`/single-project/${item.id}`}
+                      className="tf-btn"
+                    >
+                      <span className="icon-arrow-top-right" />
+                      <span className="bg-effect" />
+                    </Link>
+                  </div>
+                  <div className="heading mb_36">
+                    <h5 className="mb_10 title">
+                      <Link
+                        href={`/single-project/${item.id}`}
+                        className="link"
+                      >
+                        {item.title}
+                      </Link>
+                    </h5>
+                    <p className="text_mono-gray-7 text-body-3">
+                      Discover the transformative power of our solutions. Learn
+                      how we've helped businesses of all sizes overcome
+                      challenges.
+                    </p>
+                  </div>
+                  <div className="group-number">
+                    {item.metrics.map((metric, i) => (
+                      <div key={i} className="wrap-number">
+                        <h5 className="number fw-5">{metric.value}</h5>
+                        <p className="font2 text-body-3">{metric.label}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="wd-load d-flex justify-content-center">
+          <button
+            id="loadMoreBtn"
+            className="tf-btn height-3 btn-primary2 mx-auto mt_32"
+          >
+            <span>Show More</span>
+            <span className="bg-effect" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}