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,47 @@
+'use client'
+import React from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import Link from 'next/link'
+import type { Page } from '../../payload-types'
+
+type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'servicesList' }>
+
+export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
+  return (
+    <section className="py-24 bg-white">
+      <div className="container mx-auto px-4">
+        <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">
+          {services?.map((service: any, index: number) => (
+            <motion.div
+              key={service.id || index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="group"
+            >
+              <Link href="/uslugi" className="block h-full p-8 rounded-2xl bg-slate-50 border border-slate-100 transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:bg-white">
+                <h3 className="text-xl font-bold text-slate-900 mb-4">{service.title}</h3>
+                <p className="text-slate-600 mb-8">{service.description}</p>
+                <div className="flex items-center text-blue-600 font-semibold group-hover:text-blue-700 mt-auto">
+                  {service.linkText}
+                  <ArrowRight size={20} className="ml-2 transition-transform group-hover:translate-x-1" />
+                </div>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}