fix: harmonize FinalCTA and section backgrounds with theme palette

This commit is contained in:
MichalC
2026-09-01 23:11:13 +02:00
parent 1f0b9ea0fb
commit 66c62f8a31
3 changed files with 21 additions and 30 deletions
+1 -1
View File
@@ -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 }}
+1 -1
View File
@@ -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 }}
+19 -28
View File
@@ -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">
<div className="container mx-auto px-4 max-w-3xl">
<motion.h2
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="text-4xl md:text-5xl font-bold mb-6"
>
<section className="py-20 md:py-28 bg-card border-y border-border text-center">
<div className="container-premium max-w-3xl mx-auto">
<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">
<MessageCircle size={16} />
<span>Szybki i bezpośredni kontakt</span>
</div>
<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
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"
>
<p className="text-base sm:text-lg md:text-xl text-foreground/75 mb-10 max-w-2xl mx-auto leading-relaxed">
{subtitle}
</motion.p>
</p>
)}
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<div>
<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>
)