81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import { AnimateIn } from '@/components/AnimateIn'
|
|
|
|
interface Step {
|
|
stepNumber: string
|
|
title: string
|
|
description?: string
|
|
}
|
|
|
|
interface ProcessStepsBlockProps {
|
|
badge?: string
|
|
heading: string
|
|
subheading?: string
|
|
steps?: Step[]
|
|
backgroundImage?: string | { url?: string } | null
|
|
}
|
|
|
|
export function ProcessStepsBlockComponent(props: ProcessStepsBlockProps) {
|
|
const { badge, heading, subheading, steps, backgroundImage } = props
|
|
const bgUrl =
|
|
(typeof backgroundImage === 'object' && backgroundImage?.url) ||
|
|
(typeof backgroundImage === 'string' && backgroundImage) ||
|
|
null
|
|
|
|
return (
|
|
<section
|
|
className="relative py-28 border-b-2 border-dark bg-dark bg-fixed bg-center bg-cover overflow-hidden"
|
|
style={bgUrl ? { backgroundImage: `url('${bgUrl}')` } : undefined}
|
|
>
|
|
{/* Dark overlay for contrast */}
|
|
<div className="absolute inset-0 bg-dark/85 backdrop-blur-[1px]" />
|
|
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl relative z-10">
|
|
<AnimateIn direction="up">
|
|
<div className="max-w-3xl mb-14">
|
|
{badge && (
|
|
<div className="inline-block bg-primary text-dark text-xs font-black uppercase tracking-widest px-3 py-1 mb-4 border border-dark">
|
|
{badge}
|
|
</div>
|
|
)}
|
|
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-white">
|
|
{heading}
|
|
</h2>
|
|
{subheading && (
|
|
<p className="mt-4 text-base text-[#e0e0e0] leading-relaxed font-medium">
|
|
{subheading}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</AnimateIn>
|
|
|
|
{steps && steps.length > 0 && (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 items-stretch">
|
|
{steps.map((step, idx) => (
|
|
<AnimateIn key={idx} delay={idx * 100} direction="up" className="h-full">
|
|
<div
|
|
className="bg-white/95 backdrop-blur-md border-2 border-dark p-6 h-full flex flex-col justify-between border-t-8 border-t-primary hover-lift transition-all shadow-xl"
|
|
>
|
|
<div>
|
|
<div className="text-2xl font-black text-dark bg-primary border border-dark w-10 h-10 flex items-center justify-center mb-5 font-mono">
|
|
{step.stepNumber}
|
|
</div>
|
|
<h4 className="text-sm font-black uppercase tracking-tight text-dark mb-3">
|
|
{step.title}
|
|
</h4>
|
|
{step.description && (
|
|
<p className="text-xs text-[#555555] leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AnimateIn>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|