feat: complete POI Clean House website with Karcher theme, blog, interactive animations and full CMS configuration

2026-08-26 02:49:44 +02:00
commit 9acdfe05d3
57 changed files with 11415 additions and 0 deletions
@@ -0,0 +1,69 @@
+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[]
+}
+
+export function ProcessStepsBlockComponent(props: ProcessStepsBlockProps) {
+  const { badge, heading, subheading, steps } = props
+
+  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">
+        <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">
+                {badge}
+              </div>
+            )}
+            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-[#1f1f1f]">
+              {heading}
+            </h2>
+            {subheading && (
+              <p className="mt-4 text-base text-[#666666] 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 border-2 border-[#1f1f1f] p-6 h-full flex flex-col justify-between border-t-8 border-t-[#FFED00] hover-lift transition-all"
+                >
+                  <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">
+                      {step.stepNumber}
+                    </div>
+                    <h4 className="text-sm font-black uppercase tracking-tight text-[#1f1f1f] mb-3">
+                      {step.title}
+                    </h4>
+                    {step.description && (
+                      <p className="text-xs text-[#555555] leading-relaxed">
+                        {step.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </AnimateIn>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}