56 lines
1.8 KiB
TypeScript
56 lines
1.8 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;
|
|
}
|
|
|
|
const processSteps = caseStudy.process_steps;
|
|
|
|
return (
|
|
<section className="case-study-process luxury-process pt-120 pb-120">
|
|
<div className="container">
|
|
<div className="row vertical-column-gap-lg">
|
|
<div className="col-12 col-lg-5">
|
|
<div className="process-content">
|
|
<h2 className="process-title">
|
|
Implementation Process
|
|
</h2>
|
|
<p className="process-description">
|
|
{caseStudy.excerpt || 'Our systematic approach ensures successful project delivery.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-7">
|
|
<div className="process-steps-list">
|
|
{processSteps.map((step, index) => (
|
|
<div key={step.id} className="process-step-item">
|
|
<div className="step-number">
|
|
{String(step.step_number).padStart(2, '0')}
|
|
</div>
|
|
<div className="step-content">
|
|
<h4 className="step-title">{step.title}</h4>
|
|
<p className="step-description">{step.description}</p>
|
|
</div>
|
|
{index < processSteps.length - 1 && (
|
|
<div className="step-connector"></div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Process;
|