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>
+  )
+}
@@ -0,0 +1,17 @@
+import type { Block } from 'payload'
+
+export const Testimonials: Block = {
+  slug: 'testimonials',
+  fields: [
+    { name: 'title', type: 'text', required: true, localized: true },
+    {
+      name: 'testimonials',
+      type: 'array',
+      localized: true,
+      fields: [
+        { name: 'quote', type: 'textarea', required: true },
+        { name: 'author', type: 'text', required: true },
+      ],
+    },
+  ],
+}