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,83 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Plus, Minus } from 'lucide-react'
+import { AnimateIn } from '@/components/AnimateIn'
+
+interface FaqItem {
+  question: string
+  answer: string
+}
+
+interface FaqAccordionBlockProps {
+  badge?: string
+  heading: string
+  subheading?: string
+  items?: FaqItem[]
+}
+
+export function FaqAccordionBlockComponent(props: FaqAccordionBlockProps) {
+  const { badge, heading, subheading, items } = props
+  const [openIndex, setOpenIndex] = useState<number | null>(0)
+
+  const toggle = (idx: number) => {
+    setOpenIndex(openIndex === idx ? null : idx)
+  }
+
+  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-4xl">
+        <AnimateIn direction="up">
+          <div className="max-w-3xl mb-14 text-center mx-auto">
+            {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>
+
+        {items && items.length > 0 && (
+          <div className="space-y-3">
+            {items.map((item, idx) => {
+              const isOpen = openIndex === idx
+              return (
+                <AnimateIn key={idx} delay={idx * 100} direction="up">
+                  <div
+                    className="border-2 border-[#1f1f1f] bg-white transition-all hover-lift"
+                  >
+                    <button
+                      type="button"
+                      onClick={() => toggle(idx)}
+                      className="w-full flex items-center justify-between p-6 text-left hover:bg-[#f8f8f8] transition-colors"
+                    >
+                      <span className="text-sm sm:text-base font-black uppercase text-[#1f1f1f] pr-4">
+                        {item.question}
+                      </span>
+                      <div className="h-7 w-7 flex items-center justify-center bg-[#FFED00] text-[#1f1f1f] border border-[#1f1f1f] shrink-0 font-bold">
+                        {isOpen ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+                      </div>
+                    </button>
+                    {isOpen && (
+                      <div className="px-6 pb-6 pt-2 text-sm text-[#444444] leading-relaxed border-t-2 border-[#f0f0f0]">
+                        {item.answer}
+                      </div>
+                    )}
+                  </div>
+                </AnimateIn>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}