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,62 @@
+'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: 'process' }>
+
+export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
+  return (
+    <section className="py-24 bg-slate-900 text-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 mb-16 text-center"
+        >
+          {title}
+        </motion.h2>
+
+        <div className="max-w-4xl mx-auto">
+          <div className="flex flex-col md:flex-row gap-8 relative">
+            {/* Linia łącząca na desktopie */}
+            <div className="hidden md:block absolute top-6 left-[10%] right-[10%] h-0.5 bg-slate-800 z-0" />
+            
+            {steps?.map((step: any, index: number) => (
+              <motion.div 
+                key={step.id || index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.15 }}
+                className="flex-1 relative z-10 text-center md:text-left flex flex-col items-center md:items-start"
+              >
+                <div className="w-12 h-12 rounded-full bg-blue-600 border-4 border-slate-900 flex items-center justify-center text-xl font-bold mb-6">
+                  {index + 1}
+                </div>
+                <h3 className="text-xl font-bold mb-3">{step.title}</h3>
+                <p className="text-slate-400 text-center md:text-left">{step.description}</p>
+              </motion.div>
+            ))}
+          </div>
+
+          {ctaText && (
+            <motion.div 
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.6 }}
+              className="mt-16 text-center"
+            >
+              <Link href="/jak-to-dziala" className="inline-block px-8 py-4 border-2 border-slate-700 hover:border-slate-500 rounded-lg text-white font-semibold transition-colors">
+                {ctaText}
+              </Link>
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,20 @@
+import type { Block } from 'payload'
+
+export const Process: Block = {
+  slug: 'process',
+  fields: [
+    { name: 'title', type: 'text', required: true, localized: true },
+    {
+      name: 'steps',
+      type: 'array',
+      minRows: 1,
+      maxRows: 3,
+      localized: true,
+      fields: [
+        { name: 'title', type: 'text', required: true },
+        { name: 'description', type: 'textarea', required: true },
+      ],
+    },
+    { name: 'ctaText', type: 'text', localized: true },
+  ],
+}