53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { processStepsData, commonDescriptions } from '../../data/siteData'
|
|
|
|
export default function ProcessSteps() {
|
|
return (
|
|
<section
|
|
className="relative"
|
|
id="process"
|
|
style={{
|
|
backgroundImage: "url('/src/assets/images/2.jpg')",
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
{/* Overlay */}
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
style={{ background: 'linear-gradient(45deg, #17449e, rgba(0, 0, 0, 0.8))', opacity: 0.9 }}
|
|
/>
|
|
|
|
<div className="container mx-auto px-4 py-24 relative z-10">
|
|
{/* Section Header */}
|
|
<div className="text-center mx-auto">
|
|
<h3 className="text-3xl md:text-4xl font-bold mb-4 font-sans" style={{ color: '#ffffff' }}>
|
|
{commonDescriptions.processTitle}
|
|
</h3>
|
|
<p className="text-white my-3">
|
|
{commonDescriptions.sectionDesc}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Steps */}
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-5 pt-3 text-center">
|
|
{processStepsData.map((step) => (
|
|
<div key={step.id} className="three-grids-columns">
|
|
<div className="icon mb-4">
|
|
<span className="inline-flex items-center justify-center w-[50px] h-[50px] rounded-full bg-secondary text-white text-2xl">
|
|
{step.number}
|
|
</span>
|
|
</div>
|
|
<h4 className="text-[22px] font-semibold mt-5 mb-4 font-sans" style={{ color: '#ffffff' }}>
|
|
{step.title}
|
|
</h4>
|
|
<p className="text-white/70 leading-6">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|