feat: implement homepage blocks, animations and sticky whatsapp CTA

2026-08-31 23:04:48 +02:00
parent d728108b3e
commit 0a1e74dbe4
26 changed files with 1056 additions and 43 deletions
@@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import type { Page } from '../../payload-types'
+
+type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
+
+export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText }) => {
+  return (
+    <section className="py-24 bg-slate-50">
+      <div className="container mx-auto px-4 max-w-4xl">
+        <motion.h2 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-3xl md:text-5xl font-bold text-slate-900 mb-12 text-center"
+        >
+          {title}
+        </motion.h2>
+
+        <div className="space-y-6 mb-12">
+          {questions?.map((q: any, index: number) => (
+            <motion.div 
+              key={q.id || index}
+              initial={{ opacity: 0, y: 10 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: index * 0.1 }}
+              className="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-100"
+            >
+              <h3 className="text-xl font-bold text-slate-900 mb-3">{q.question}</h3>
+              <p className="text-slate-600">{q.answer}</p>
+            </motion.div>
+          ))}
+        </div>
+
+        {linkText && (
+          <div className="text-center">
+            <Link href="/faq" className="inline-block text-blue-600 font-semibold hover:text-blue-700 underline underline-offset-4">
+              {linkText}
+            </Link>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}