103 lines
4.1 KiB
JavaScript
103 lines
4.1 KiB
JavaScript
"use client";
|
|
import { projectData } from "@/data/projects";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
export default function Projects5() {
|
|
const isotopRef = useRef(null);
|
|
// Handle filter item click
|
|
|
|
const isotopContainer = useRef();
|
|
const initIsotop = async () => {
|
|
const Isotope = (await import("isotope-layout")).default;
|
|
const imagesloaded = (await import("imagesloaded")).default;
|
|
|
|
// Initialize Isotope in the mounted hook
|
|
isotopRef.current = new Isotope(isotopContainer.current, {
|
|
itemSelector: ".item",
|
|
layoutMode: "masonry", // or 'fitRows', depending on your layout needs
|
|
});
|
|
imagesloaded(isotopContainer.current).on(
|
|
"progress",
|
|
function (instance, image) {
|
|
// Trigger Isotope layout
|
|
isotopRef.current.layout();
|
|
}
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
/////////////////////////////////////////////////////
|
|
// Magnate Animation
|
|
|
|
setTimeout(() => {
|
|
initIsotop();
|
|
}, 100);
|
|
}, []);
|
|
return (
|
|
<section id="snippet-5" className="wrapper !bg-[#ffffff] ">
|
|
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div className="flex flex-wrap mx-[-15px]">
|
|
<div className="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-8">
|
|
<h2 className="!text-[.75rem] uppercase !text-[#aab0bc] !text-center !mb-3 !leading-[1.35]">
|
|
Our Projects
|
|
</h2>
|
|
<h3 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !text-center">
|
|
Check out some of our awesome projects with creative ideas and
|
|
great design.
|
|
</h3>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
<div className="itemgrid grid-view projects-masonry">
|
|
<div
|
|
ref={isotopContainer}
|
|
className="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope"
|
|
>
|
|
{projectData.map((project) => (
|
|
<div
|
|
key={project.projectId}
|
|
className={`project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full ${project.projectType}`}
|
|
>
|
|
<figure className="lift rounded !mb-6">
|
|
<Link href={`/single-project`}>
|
|
<Image
|
|
alt="image"
|
|
src={project.imageUrl}
|
|
width={project.imageWidth}
|
|
height={project.imageHeight}
|
|
/>
|
|
</Link>
|
|
</figure>
|
|
<div className="project-details flex justify-center flex-col">
|
|
<div className="post-header">
|
|
<div
|
|
className="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-2"
|
|
style={{ color: project.categoryColor }}
|
|
>
|
|
<span
|
|
className="before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4"
|
|
style={{ color: project.categoryColor }}
|
|
>
|
|
{project.category}
|
|
</span>
|
|
</div>
|
|
<h3 className="post-title">{project.title}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /.grid */}
|
|
</div>
|
|
{/* /.container */}
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|