120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
|
|
const CareersWorkProcess = () => {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const elements = entry.target.querySelectorAll(".wow");
|
|
elements.forEach((el) => {
|
|
const htmlEl = el as HTMLElement;
|
|
const delay = htmlEl.dataset.wowDelay || "0ms";
|
|
setTimeout(() => {
|
|
htmlEl.classList.add("animated");
|
|
htmlEl.classList.add("fadeInUp");
|
|
htmlEl.style.visibility = "visible";
|
|
}, parseFloat(delay.replace("s", "")) * 1000);
|
|
});
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
if (sectionRef.current) {
|
|
observer.observe(sectionRef.current);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
/* ── Icons and hover backgrounds use static images ── */
|
|
const processSteps = [
|
|
{
|
|
id: 1,
|
|
stepText: "Step 01",
|
|
title: "Comprehensive digital development",
|
|
desc: "Expert web, app development and e-commerce solutions.",
|
|
delay: ".3s",
|
|
icon: "/assets/images/services/workprocess/icon/comprehensive.webp",
|
|
hoverBg: "/assets/images/services/workprocess/comprehensive.webp",
|
|
},
|
|
{
|
|
id: 2,
|
|
stepText: "Step 02",
|
|
title: "Strategic online growth solutions",
|
|
desc: "Strategic SEO and digital marketing for growth.",
|
|
delay: ".5s",
|
|
icon: "/assets/images/services/workprocess/icon/strategic.webp",
|
|
hoverBg: "/assets/images/services/workprocess/strategic.webp",
|
|
},
|
|
{
|
|
id: 3,
|
|
stepText: "Step 03",
|
|
title: "Creative design and branding excellence",
|
|
desc: "Creative graphic design and branding strategy services.",
|
|
delay: ".7s",
|
|
icon: "/assets/images/services/workprocess/icon/branding.webp",
|
|
hoverBg: "/assets/images/services/workprocess/branding.webp",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
className="work-process-section-3 section-padding"
|
|
suppressHydrationWarning
|
|
>
|
|
<div className="left-shape">
|
|
<img
|
|
src="/assets/images/services/workprocess/left-img.webp"
|
|
alt="shape"
|
|
/>
|
|
</div>
|
|
|
|
<div className="container">
|
|
{/* Heading */}
|
|
<div className="sec-title-wrapper text-center wow fadeInUp" data-wow-delay=".3s">
|
|
<div className="sec-title">
|
|
<div className="sec-title__shape"></div>
|
|
<h6 className="sec-title__tagline">Strategic Digital Services</h6>
|
|
<h3 className="sec-title__title">Innovation & Growth</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
{processSteps.map((step) => (
|
|
<div
|
|
key={step.id}
|
|
className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
|
|
data-wow-delay={step.delay}
|
|
style={{ visibility: "hidden" }}
|
|
>
|
|
<div
|
|
className="work-process-box-3"
|
|
style={{ "--hover-bg": `url(${step.hoverBg})` } as React.CSSProperties}
|
|
>
|
|
<div className="content">
|
|
<h3>{step.title}</h3>
|
|
<p>{step.desc}</p>
|
|
<div className="icon">
|
|
<img src={step.icon} alt={step.title} style={{ width: "60px", height: "60px", objectFit: "contain" }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CareersWorkProcess;
|