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,41 @@
+'use client'
+import React from 'react'
+import { motion } from 'framer-motion'
+import { Quote } from 'lucide-react'
+import type { Page } from '../../payload-types'
+
+type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials' }>
+
+export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
+  return (
+    <section className="py-24 bg-white">
+      <div className="container mx-auto px-4 max-w-6xl">
+        <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-16 text-center"
+        >
+          {title}
+        </motion.h2>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {testimonials?.map((t: any, index: number) => (
+            <motion.div 
+              key={t.id || index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="bg-slate-50 p-8 rounded-2xl relative"
+            >
+              <Quote className="absolute top-6 right-6 text-slate-200" size={40} />
+              <p className="text-slate-700 italic mb-6 relative z-10">"{t.quote}"</p>
+              <div className="font-semibold text-slate-900">— {t.author}</div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}