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
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import type { FDFeatureAnnouncementBlock as FDFeatureAnnouncementBlockProps } from '@/payload-types'
|
|
import { FDButton } from '@/components/FDButton'
|
|
|
|
export const FDFeatureAnnouncementBlockComponent: React.FC<FDFeatureAnnouncementBlockProps> = ({
|
|
heading,
|
|
body,
|
|
ctaText,
|
|
ctaLink = '#',
|
|
theme = 'gray',
|
|
anchorId,
|
|
}) => {
|
|
const isDark = theme === 'dark'
|
|
|
|
// Light themes pick up dark: variants from OS preference
|
|
const bgClass =
|
|
isDark
|
|
? 'bg-fd-navy'
|
|
: theme === 'gray'
|
|
? 'bg-fd-gray-light dark:bg-fd-navy'
|
|
: 'bg-white dark:bg-fd-navy'
|
|
|
|
const headingColor = isDark
|
|
? 'text-fd-yellow'
|
|
: 'text-fd-navy dark:text-fd-yellow'
|
|
|
|
const bodyColor = isDark
|
|
? 'text-white'
|
|
: 'text-fd-navy dark:text-white'
|
|
|
|
// In dark mode the section is always navy, so onDark=true for the button
|
|
const onDark = isDark || true // once dark: kicks in bg is navy anyway
|
|
|
|
return (
|
|
<section id={anchorId || undefined} className={`w-full py-20 md:py-28 lg:py-[173px] ${bgClass}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-center gap-8">
|
|
<h2
|
|
className={`w-full max-w-[696px] font-joey-bold text-fd-h1 text-center leading-tight ${headingColor}`}
|
|
>
|
|
{heading}
|
|
</h2>
|
|
|
|
<p
|
|
className={`w-full max-w-[1112px] font-joey text-xl md:text-fd-body-lg text-center leading-relaxed ${bodyColor}`}
|
|
>
|
|
{body}
|
|
</p>
|
|
|
|
{ctaText && (
|
|
<FDButton href={ctaLink || '#'} variant="primary" onDark={isDark}>
|
|
{ctaText}
|
|
</FDButton>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|