53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
|
|
|
|
interface ProcessProps {
|
|
slug: string;
|
|
}
|
|
|
|
const Process = ({ slug }: ProcessProps) => {
|
|
const { caseStudy, loading } = useCaseStudy(slug);
|
|
|
|
if (loading || !caseStudy || !caseStudy.process_steps || caseStudy.process_steps.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="pt-120 pb-120 tp-process bg-black sticky-wrapper">
|
|
<div className="container">
|
|
<div className="row vertical-column-gap">
|
|
<div className="col-12 col-lg-6">
|
|
<div className="process__content sticky-item">
|
|
<h2 className="mt-8 title-anim text-white fw-7 mb-24">
|
|
{caseStudy.title} Process
|
|
</h2>
|
|
<p className="cur-lg text-quinary">
|
|
{caseStudy.excerpt}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-6 col-xxl-5 offset-xxl-1">
|
|
<div className="process__thumb sticky-item">
|
|
{caseStudy.process_steps.map((step) => (
|
|
<div key={step.id} className="process__single">
|
|
<span className="op-text text-white mb-40 cur-lg">
|
|
{String(step.step_number).padStart(2, '0')}
|
|
</span>
|
|
<h5 className="mt-8 text-white mb-24 title-anim">
|
|
{step.title}
|
|
</h5>
|
|
<p className="cur-lg text-quinary">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Process;
|