feat: integrate built-in forms, refine footer & parallax, dynamic navigation & branding assets
This commit is contained in:
@@ -12,26 +12,37 @@ interface ProcessStepsBlockProps {
|
||||
heading: string
|
||||
subheading?: string
|
||||
steps?: Step[]
|
||||
backgroundImage?: string | { url?: string } | null
|
||||
}
|
||||
|
||||
export function ProcessStepsBlockComponent(props: ProcessStepsBlockProps) {
|
||||
const { badge, heading, subheading, steps } = props
|
||||
const { badge, heading, subheading, steps, backgroundImage } = props
|
||||
const bgUrl =
|
||||
(typeof backgroundImage === 'object' && backgroundImage?.url) ||
|
||||
(typeof backgroundImage === 'string' && backgroundImage) ||
|
||||
'/images/process-parallax.webp'
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-[#f4f4f4] border-b-2 border-[#1f1f1f]">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
|
||||
<section
|
||||
className="relative py-28 border-b-2 border-dark bg-fixed bg-center bg-cover overflow-hidden"
|
||||
style={{ backgroundImage: `url('${bgUrl}')` }}
|
||||
>
|
||||
{/* 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-[#1f1f1f] text-[#FFED00] text-xs font-black uppercase tracking-widest px-3 py-1 mb-4">
|
||||
<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-[#1f1f1f]">
|
||||
<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-[#666666] leading-relaxed font-medium">
|
||||
<p className="mt-4 text-base text-[#e0e0e0] leading-relaxed font-medium">
|
||||
{subheading}
|
||||
</p>
|
||||
)}
|
||||
@@ -43,13 +54,13 @@ export function ProcessStepsBlockComponent(props: ProcessStepsBlockProps) {
|
||||
{steps.map((step, idx) => (
|
||||
<AnimateIn key={idx} delay={idx * 100} direction="up" className="h-full">
|
||||
<div
|
||||
className="bg-white border-2 border-[#1f1f1f] p-6 h-full flex flex-col justify-between border-t-8 border-t-[#FFED00] hover-lift transition-all"
|
||||
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-[#1f1f1f] bg-[#FFED00] border border-[#1f1f1f] w-10 h-10 flex items-center justify-center mb-5 font-mono">
|
||||
<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-[#1f1f1f] mb-3">
|
||||
<h4 className="text-sm font-black uppercase tracking-tight text-dark mb-3">
|
||||
{step.title}
|
||||
</h4>
|
||||
{step.description && (
|
||||
|
||||
Reference in New Issue
Block a user