286 lines
11 KiB
JavaScript
286 lines
11 KiB
JavaScript
import Isotope from "isotope-layout";
|
|
import Link from "next/link";
|
|
import { Fragment, useEffect, useRef, useState } from "react";
|
|
|
|
const CaseStudies = () => {
|
|
const isotope = useRef();
|
|
const [filterKey, setFilterKey] = useState("*");
|
|
const [visibleItems, setVisibleItems] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
isotope.current = new Isotope(".image_load", {
|
|
itemSelector: ".grid-item",
|
|
percentPosition: true,
|
|
masonry: {
|
|
columnWidth: ".grid-item",
|
|
},
|
|
});
|
|
|
|
setVisibleItems(document.querySelectorAll(".grid-item"));
|
|
}, 1000);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isotope.current) {
|
|
const filterSelector = filterKey === "*" ? "*" : `.${filterKey}`;
|
|
isotope.current.arrange({ filter: filterSelector });
|
|
|
|
const items = document.querySelectorAll(".grid-item");
|
|
const visible = Array.from(items).filter(item =>
|
|
filterKey === "*" ? true : item.classList.contains(filterKey)
|
|
);
|
|
setVisibleItems(visible);
|
|
}
|
|
}, [filterKey]);
|
|
|
|
const handleFilterKeyChange = (key) => () => {
|
|
setFilterKey(key);
|
|
};
|
|
|
|
const activeBtn = (value) =>
|
|
value === filterKey ? "current_menu_item" : "";
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className="row case-study-bg">
|
|
<div className="col-lg-12">
|
|
<div className="consen-section-title upper text-center pb-5">
|
|
<div className="consen-section-title">
|
|
<h2>Our Open <span>positions</span></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="portfolio-shape">
|
|
<div className="port-shape-thumb rotateme">
|
|
<img src="/assets/images/elements/element-3.webp" alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-12">
|
|
<div className="portfolio_nav text-center">
|
|
<div className="portfolio_menu">
|
|
<ul className="menu-filtering list-unstyled">
|
|
|
|
<li
|
|
className={`c-pointer mb-3 ${activeBtn("*")}`}
|
|
onClick={handleFilterKeyChange("*")}
|
|
style={{ display: "inline-block", margin: "0 10px" }}
|
|
>
|
|
All Items
|
|
</li>
|
|
<div className="d-flex justify-content-center flex-wrap mb-3">
|
|
<li
|
|
className={`c-pointer mx-2 ${activeBtn("web")}`}
|
|
onClick={handleFilterKeyChange("web")}
|
|
>
|
|
Website Development
|
|
</li>
|
|
<li
|
|
className={`c-pointer mx-2 ${activeBtn("dm")}`}
|
|
onClick={handleFilterKeyChange("dm")}
|
|
>
|
|
Social Media & Digital Marketing
|
|
</li>
|
|
<li
|
|
className={`c-pointer mx-2 ${activeBtn("seo")}`}
|
|
onClick={handleFilterKeyChange("seo")}
|
|
>
|
|
Search Engine Optimization (SEO)
|
|
</li>
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-center flex-wrap">
|
|
<li
|
|
className={`c-pointer mx-2 ${activeBtn("mad")}`}
|
|
onClick={handleFilterKeyChange("mad")}
|
|
>
|
|
Mobile App Development
|
|
|
|
</li>
|
|
<li
|
|
className={`c-pointer mx-2 ${activeBtn("uiux")}`}
|
|
onClick={handleFilterKeyChange("uiux")}
|
|
>
|
|
UI/UX Designing
|
|
|
|
</li>
|
|
<li
|
|
className={`c-pointer mx-2 ${activeBtn("grap")}`}
|
|
onClick={handleFilterKeyChange("grap")}
|
|
>
|
|
Graphic Designing
|
|
|
|
</li>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row image_load d-flex flex-wrap justify-content-center">
|
|
<div className="col-lg-4 col-md-6 grid-item web">
|
|
<div className="case-study-single-box">
|
|
<div className="case-study-thumb2">
|
|
<img src="/assets/images/careers/web-dev.webp" alt="Website Development Careers" />
|
|
<div className="case-study-content">
|
|
<div className="case-study-content-inner3">
|
|
<h6>5 Feb, 2025</h6>
|
|
<div className="case-study-title">
|
|
<h7 className="full-time"> Full Time </h7>
|
|
<h3>
|
|
<Link legacyBehavior href="/service/website-development-company">
|
|
<a className="changeColor">Website Development Careers</a>
|
|
</Link>
|
|
</h3>
|
|
<div className="big-box">
|
|
<Link legacyBehavior href="#"><a>Apply</a></Link>
|
|
<Link legacyBehavior href="/contact"><a>Contact</a></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-4 col-md-6 grid-item seo">
|
|
<div className="case-study-single-box">
|
|
<div className="case-study-thumb2">
|
|
<img src="/assets/images/careers/seo.webp" alt="Search Engine Optimization Careers
|
|
" />
|
|
<div className="case-study-content">
|
|
<div className="case-study-content-inner3">
|
|
<h6>5 Feb, 2025</h6>
|
|
<div className="case-study-title">
|
|
<h7 className="full-time"> Full Time </h7>
|
|
<h3>
|
|
<Link legacyBehavior href="/service/search-engine-optimization-seo-content-writing">
|
|
<a className="changeColor">Search Engine Optimization Careers
|
|
</a>
|
|
</Link>
|
|
</h3>
|
|
<div className="big-box">
|
|
<Link legacyBehavior href="#"><a>Apply</a></Link>
|
|
<Link legacyBehavior href="/contact"><a>Contact</a></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-4 col-md-6 grid-item dm">
|
|
<div className="case-study-single-box">
|
|
<div className="case-study-thumb2">
|
|
<img src="/assets/images/careers/social-media.webp" alt="Social Media Marketing Career" />
|
|
<div className="case-study-content">
|
|
<div className="case-study-content-inner3">
|
|
<h6>5 Feb, 2025</h6>
|
|
<div className="case-study-title">
|
|
<h7 className="full-time"> Full Time </h7>
|
|
<h3>
|
|
<Link legacyBehavior href="/service/digital-solutions">
|
|
<a className="changeColor">Social Media Marketing Career</a>
|
|
</Link>
|
|
</h3>
|
|
<div className="big-box">
|
|
<Link legacyBehavior href="#"><a>Apply</a></Link>
|
|
<Link legacyBehavior href="/contact"><a>Contact</a></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="col-lg-4 col-md-6 grid-item mad">
|
|
<div className="case-study-single-box">
|
|
<div className="case-study-thumb2">
|
|
<img src="/assets/images/careers/mobile.webp" alt="Mobile App Development Careers" />
|
|
<div className="case-study-content">
|
|
<div className="case-study-content-inner3">
|
|
<h6>5 Feb, 2025</h6>
|
|
<div className="case-study-title">
|
|
<h7 className="full-time"> Full Time </h7>
|
|
<h3>
|
|
<Link legacyBehavior href="/service/digital-solutions">
|
|
<a className="changeColor">Mobile App Development Careers</a>
|
|
</Link>
|
|
</h3>
|
|
<div className="big-box">
|
|
<Link legacyBehavior href="#"><a>Apply</a></Link>
|
|
<Link legacyBehavior href="/contact"><a>Contact</a></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="col-lg-4 col-md-6 grid-item uiux">
|
|
<div className="case-study-single-box">
|
|
<div className="case-study-thumb2">
|
|
<img src="/assets/images/careers/ui-ux.webp" alt="UI/UX Designing Careers" />
|
|
<div className="case-study-content">
|
|
<div className="case-study-content-inner3">
|
|
<h6>5 Feb, 2025</h6>
|
|
<div className="case-study-title">
|
|
<h7 className="full-time"> Full Time </h7>
|
|
<h3>
|
|
<Link legacyBehavior href="/service/digital-solutions">
|
|
<a className="changeColor">UI/UX Designing Careers</a>
|
|
</Link>
|
|
</h3>
|
|
<div className="big-box">
|
|
<Link legacyBehavior href="#"><a>Apply</a></Link>
|
|
<Link legacyBehavior href="/contact"><a>Contact</a></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-4 col-md-6 grid-item grap">
|
|
<div className="case-study-single-box">
|
|
<div className="case-study-thumb2">
|
|
<img src="/assets/images/careers/graphic.webp" alt="Graphic Designing Careers" />
|
|
<div className="case-study-content">
|
|
<div className="case-study-content-inner3">
|
|
<h6>5 Feb, 2025</h6>
|
|
<div className="case-study-title">
|
|
<h7 className="full-time"> Full Time </h7>
|
|
<h3>
|
|
<Link legacyBehavior href="/service/digital-solutions">
|
|
<a className="changeColor">Graphic Designing Careers</a>
|
|
</Link>
|
|
</h3>
|
|
<div className="big-box">
|
|
<Link legacyBehavior href="#"><a>Apply</a></Link>
|
|
<Link legacyBehavior href="/contact"><a>Contact</a></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{visibleItems.length === 0 && (
|
|
<div className="text-center py-5">
|
|
<h5>No Results Found</h5>
|
|
</div>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default CaseStudies;
|