feat: integrate built-in forms, refine footer & parallax, dynamic navigation & branding assets

This commit is contained in:
2026-08-26 11:40:04 +02:00
parent cb67badf53
commit 51a3d6fdb8
32 changed files with 929 additions and 651 deletions
+20 -9
View File
@@ -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 && (