fix: harmonize FinalCTA and section backgrounds with theme palette

src/blocks/Affiliation/Component.tsx

@@ -8,7 +8,7 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation'
 
 export const AffiliationBlock: React.FC<Props> = ({ title, description, logo, linkText }) => {
   return (
-    <section className="py-24 bg-accent/5 border-t border-border">
+    <section className="py-20 md:py-24 bg-background border-t border-border">
       <div className="container mx-auto px-4 max-w-4xl">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}

src/blocks/FAQTeaser/Component.tsx

@@ -8,7 +8,7 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
 
 export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText }) => {
   return (
-    <section className="py-24 bg-accent/5">
+    <section className="py-20 md:py-24 bg-card/40 border-t border-border">
       <div className="container mx-auto px-4 max-w-4xl">
         <motion.h2 
           initial={{ opacity: 0, y: 20 }}

src/blocks/FinalCTA/Component.tsx

@@ -1,49 +1,40 @@
 'use client'
 import React from 'react'
-import { motion } from 'framer-motion'
 import type { Page } from '../../payload-types'
+import { MessageCircle } from 'lucide-react'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'finalCta' }>
 
 export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText }) => {
   return (
-    <section className="py-32 bg-accent text-white text-center">
+    <section className="py-20 md:py-28 bg-card border-y border-border text-center">
-      <div className="container mx-auto px-4 max-w-3xl">
+      <div className="container-premium max-w-3xl mx-auto">
-        <motion.h2 
+        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-accent/10 border border-accent/20 text-accent text-xs sm:text-sm font-semibold tracking-wide mb-6">
-          initial={{ opacity: 0, scale: 0.95 }}
+          <MessageCircle size={16} />
-          whileInView={{ opacity: 1, scale: 1 }}
+          <span>Szybki i bezpośredni kontakt</span>
-          viewport={{ once: true }}
+        </div>
-          transition={{ duration: 0.5 }}
+
-          className="text-4xl md:text-5xl font-bold mb-6"
+        <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-4 leading-tight">
-        >
           {title}
-        </motion.h2>
+        </h2>
+
         {subtitle && (
-          <motion.p 
+          <p className="text-base sm:text-lg md:text-xl text-foreground/75 mb-10 max-w-2xl mx-auto leading-relaxed">
-            initial={{ opacity: 0, y: 10 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.1 }}
-            className="text-xl md:text-2xl text-white/80 mb-12"
-          >
             {subtitle}
-          </motion.p>
+          </p>
         )}
-        <motion.div
+
-          initial={{ opacity: 0, y: 10 }}
+        <div>
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5, delay: 0.2 }}
-        >
           <a 
             href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-block px-10 py-4 bg-green-500 hover:bg-green-600 text-white text-base sm:text-lg font-bold rounded-xl transition-colors shadow-sm"
+            className="inline-flex items-center justify-center gap-2.5 px-8 py-4 bg-green-500 hover:bg-green-600 text-white text-base sm:text-lg font-bold rounded-xl transition-colors shadow-sm"
           >
-            {buttonText}
+            <MessageCircle size={22} />
+            <span>{buttonText}</span>
           </a>
-        </motion.div>
+        </div>
       </div>
     </section>
   )