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,69 @@
+'use client'
+import React from 'react'
+import { motion } from 'framer-motion'
+import type { Page } from '../../payload-types'
+import Link from 'next/link'
+
+type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
+
+export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, secondaryCta, yearsOfExperience }) => {
+  return (
+    <section className="relative overflow-hidden bg-slate-900 text-white py-24 lg:py-32">
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-900/40 to-slate-900 z-0" />
+      <div className="container mx-auto px-4 relative z-10 flex flex-col items-center text-center">
+        <motion.h1 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-4xl md:text-6xl font-bold mb-6 max-w-4xl"
+        >
+          {title}
+        </motion.h1>
+        
+        <motion.p 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+          className="text-xl md:text-2xl text-slate-300 mb-10 max-w-2xl"
+        >
+          {subtitle}
+        </motion.p>
+        
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="flex flex-col sm:flex-row gap-4 mb-12"
+        >
+          <a 
+            href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg transition-colors flex items-center justify-center gap-2"
+          >
+            {primaryCta}
+          </a>
+          {secondaryCta?.text && secondaryCta?.url && (
+            <Link 
+              href={secondaryCta.url}
+              className="px-8 py-4 bg-transparent border-2 border-slate-600 hover:border-slate-400 text-white font-semibold rounded-lg transition-colors"
+            >
+              {secondaryCta.text}
+            </Link>
+          )}
+        </motion.div>
+
+        {yearsOfExperience && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            className="text-sm text-slate-400 uppercase tracking-widest"
+          >
+            {yearsOfExperience}
+          </motion.div>
+        )}
+      </div>
+    </section>
+  )
+}