89f6ab505d
Typography: - Raise all fd-* token minimums in globals.css for larger mobile text (fd-h1: 28→40px, fd-h2: 22→32px, fd-h3: 18→22px, body-lg: 15→18px, body: 14→16px) - Strip all text-[x] sm:text-fd-* overrides from 25 block components — tokens now handle full range, no block-level hacks - Change RichText enableGutter default to false — fixes rich text indenting in FAQ, TextBlock, posts, and form confirmations Layout fixes (mobile): - FDContactBlock: 3-column grid on all screen sizes - FDHeroBlock: full-width buttons on mobile - FDServicesGridBlock: px-3 padding on description text under images - FDWideCardBlock: image now padded inside card, object-contain, no longer bleeds edge-to-edge - FDCtaSideImageBlock: consistent mobile order (heading → image → body → button) regardless of imagePosition setting; extra mt-4 between body and button on mobile - FDTestimonialBlock: quote text sizes migrated to fd-h3/fd-body-lg tokens
102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
import React from 'react'
|
|
import type { FDCtaBannerBlock as FDCtaBannerBlockProps } from '@/payload-types'
|
|
|
|
const bgMap: Record<string, {
|
|
section: string; heading: string; sub: string
|
|
primaryBtn: string; secondaryBtn: string
|
|
}> = {
|
|
yellow: {
|
|
section: 'bg-fd-yellow',
|
|
heading: 'text-fd-navy',
|
|
sub: 'text-fd-navy/70',
|
|
primaryBtn: 'bg-fd-navy hover:bg-fd-navy/90 text-white',
|
|
secondaryBtn: 'border-2 border-fd-navy text-fd-navy hover:bg-fd-navy/10',
|
|
},
|
|
navy: {
|
|
section: 'bg-fd-navy',
|
|
heading: 'text-fd-yellow',
|
|
sub: 'text-white/70',
|
|
primaryBtn: 'bg-fd-yellow hover:bg-fd-yellow/90 text-fd-navy',
|
|
secondaryBtn: 'border-2 border-white text-white hover:bg-white/10',
|
|
},
|
|
gray: {
|
|
section: 'bg-fd-gray-light dark:bg-fd-navy',
|
|
heading: 'text-fd-navy dark:text-fd-yellow',
|
|
sub: 'text-fd-navy/70 dark:text-white/70',
|
|
primaryBtn: 'bg-fd-navy hover:bg-fd-navy/90 text-white dark:bg-fd-yellow dark:hover:bg-fd-yellow/90 dark:text-fd-navy',
|
|
secondaryBtn: 'border-2 border-fd-navy text-fd-navy hover:bg-fd-navy/10 dark:border-white dark:text-white dark:hover:bg-white/10',
|
|
},
|
|
white: {
|
|
section: 'bg-white dark:bg-fd-navy',
|
|
heading: 'text-fd-navy dark:text-fd-yellow',
|
|
sub: 'text-fd-navy/70 dark:text-white/70',
|
|
primaryBtn: 'bg-fd-navy hover:bg-fd-navy/90 text-white dark:bg-fd-yellow dark:hover:bg-fd-yellow/90 dark:text-fd-navy',
|
|
secondaryBtn: 'border-2 border-fd-navy text-fd-navy hover:bg-fd-navy/10 dark:border-white dark:text-white dark:hover:bg-white/10',
|
|
},
|
|
}
|
|
|
|
const sizeMap: Record<string, { py: string; heading: string; sub: string }> = {
|
|
small: { py: 'py-10 md:py-14', heading: 'text-fd-h2', sub: 'text-fd-body' },
|
|
medium: { py: 'py-14 md:py-20 lg:py-[80px]', heading: 'text-fd-h1', sub: 'text-fd-body-lg' },
|
|
large: { py: 'py-16 md:py-24 lg:py-[99px]', heading: 'text-fd-display', sub: 'text-fd-body-lg' },
|
|
}
|
|
|
|
export const FDCtaBannerBlockComponent: React.FC<FDCtaBannerBlockProps> = ({
|
|
heading,
|
|
subheading,
|
|
ctaText,
|
|
ctaLink = '/kontakt',
|
|
secondaryCtaText,
|
|
secondaryCtaLink,
|
|
sectionBackground = 'yellow',
|
|
alignment = 'center',
|
|
size = 'medium',
|
|
anchorId,
|
|
}) => {
|
|
const theme = bgMap[sectionBackground ?? 'yellow'] || bgMap.yellow
|
|
const sizing = sizeMap[size ?? 'medium'] || sizeMap.medium
|
|
const isCenter = alignment === 'center'
|
|
|
|
return (
|
|
<section id={anchorId || undefined} className={`w-full ${sizing.py} ${theme.section}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
<div className={`flex flex-col gap-6 md:gap-8 items-center text-center min-[820px]:${isCenter ? 'items-center text-center' : 'items-start text-left'} max-w-[800px] ${isCenter ? 'mx-auto' : ''}`}>
|
|
|
|
<div className={`flex flex-col gap-3 items-center min-[820px]:${isCenter ? 'items-center' : 'items-start'}`}>
|
|
<h2 className={`font-joey-heavy leading-tight ${sizing.heading} ${theme.heading}`}>
|
|
{heading}
|
|
</h2>
|
|
{subheading && (
|
|
<p className={`font-joey leading-relaxed ${sizing.sub} ${theme.sub}`}>
|
|
{subheading}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{(ctaText || secondaryCtaText) && (
|
|
<div className={`flex flex-col sm:flex-row gap-4 w-full sm:w-auto ${isCenter ? 'justify-center' : ''}`}>
|
|
{ctaText && (
|
|
<a
|
|
href={ctaLink || '#'}
|
|
className={`inline-flex items-center justify-center px-8 py-3 rounded-full font-joey-bold text-fd-btn transition-colors w-full sm:w-auto ${theme.primaryBtn}`}
|
|
>
|
|
{ctaText}
|
|
</a>
|
|
)}
|
|
{secondaryCtaText && secondaryCtaLink && (
|
|
<a
|
|
href={secondaryCtaLink}
|
|
className={`inline-flex items-center justify-center px-8 py-3 rounded-full font-joey-bold text-fd-btn transition-colors w-full sm:w-auto ${theme.secondaryBtn}`}
|
|
>
|
|
{secondaryCtaText}
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|