diff --git a/src/blocks/FDAlternateHeroBlock/Component.tsx b/src/blocks/FDAlternateHeroBlock/Component.tsx index 25569a6..200432d 100644 --- a/src/blocks/FDAlternateHeroBlock/Component.tsx +++ b/src/blocks/FDAlternateHeroBlock/Component.tsx @@ -14,12 +14,24 @@ export const FDAlternateHeroBlockComponent: React.FC = ({ imageCaption, sectionBackground = 'white', }) => { - const media = image as Media | undefined + const media = image as Media | undefined const hasImage = media && typeof media === 'object' && media.url - const isDark = sectionBackground === 'navy' - const bgClass = isDark ? 'bg-fd-navy' : sectionBackground === 'gray' ? 'bg-fd-gray-light' : 'bg-white' - const titleClass = isDark ? 'text-fd-yellow' : 'text-fd-navy' - const bodyClass = isDark ? 'text-white' : 'text-fd-navy' + const isDark = sectionBackground === 'navy' + + const bgClass = + isDark + ? 'bg-fd-navy' + : sectionBackground === 'gray' + ? 'bg-fd-gray-light dark:bg-fd-navy' + : 'bg-white dark:bg-fd-navy' + + const titleClass = isDark + ? 'text-fd-yellow' + : 'text-fd-navy dark:text-fd-yellow' + + const bodyClass = isDark + ? 'text-white' + : 'text-fd-navy dark:text-white' return (
@@ -49,7 +61,7 @@ export const FDAlternateHeroBlockComponent: React.FC = ({ )} - {/* FIX: Full-width image using FDImage with fill, replacing raw */} + {/* Full-width image — no border radius, bleeds edge to edge */} {hasImage && (
diff --git a/src/blocks/FDCtaBannerBlock/Component.tsx b/src/blocks/FDCtaBannerBlock/Component.tsx index c5c386b..47904b7 100644 --- a/src/blocks/FDCtaBannerBlock/Component.tsx +++ b/src/blocks/FDCtaBannerBlock/Component.tsx @@ -1,42 +1,44 @@ -// @ts-nocheck import React from 'react' import type { FDCtaBannerBlock as FDCtaBannerBlockProps } from '@/payload-types' -const bgMap: Record = { +const bgMap: Record = { 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', + 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', + 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-[#e5e5e5]', - 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', + 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', - 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', + 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 = { - small: { py: 'py-10 md:py-14', heading: 'text-2xl md:text-3xl lg:text-4xl', sub: 'text-base md:text-lg' }, - medium: { py: 'py-14 md:py-20 lg:py-[80px]', heading: 'text-3xl md:text-4xl lg:text-5xl', sub: 'text-lg md:text-xl' }, - large: { py: 'py-16 md:py-24 lg:py-[99px]', heading: 'text-4xl md:text-5xl lg:text-[64px]', sub: 'text-xl md:text-2xl' }, + 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 = ({ @@ -50,8 +52,8 @@ export const FDCtaBannerBlockComponent: React.FC = ({ alignment = 'center', size = 'medium', }) => { - const theme = bgMap[sectionBackground] || bgMap.yellow - const sizing = sizeMap[size] || sizeMap.medium + const theme = bgMap[sectionBackground ?? 'yellow'] || bgMap.yellow + const sizing = sizeMap[size ?? 'medium'] || sizeMap.medium const isCenter = alignment === 'center' return ( @@ -75,7 +77,7 @@ export const FDCtaBannerBlockComponent: React.FC = ({ {ctaText && ( {ctaText} @@ -83,7 +85,7 @@ export const FDCtaBannerBlockComponent: React.FC = ({ {secondaryCtaText && secondaryCtaLink && ( {secondaryCtaText} diff --git a/src/blocks/FDCtaSideImageBlock/Component.tsx b/src/blocks/FDCtaSideImageBlock/Component.tsx index f6e76df..5bfd2c8 100644 --- a/src/blocks/FDCtaSideImageBlock/Component.tsx +++ b/src/blocks/FDCtaSideImageBlock/Component.tsx @@ -16,26 +16,32 @@ export const FDCtaSideImageBlockComponent: React.FC = const isDark = theme === 'dark' const hasImage = !!image + // Light theme adapts to OS dark preference → becomes navy bg + const sectionBg = isDark + ? 'bg-fd-navy' + : 'bg-white dark:bg-fd-navy' + + const headingClass = isDark + ? 'text-fd-yellow' + : 'text-fd-navy dark:text-fd-yellow' + + const bodyClass = isDark + ? 'text-white' + : 'text-fd-navy dark:text-white' + const textContent = (
-

+

{heading}

-

+

{body}

{ctaText && ( + // onDark — either explicit dark theme, or dark: mode makes it navy anyway {ctaText} @@ -56,19 +62,12 @@ export const FDCtaSideImageBlockComponent: React.FC = ) : null return ( - // FIX: added md:py-20 so tablet gets correct spacing -
+
{imagePosition === 'left' ? ( - <> - {imageContent} - {textContent} - + <>{imageContent}{textContent} ) : ( - <> - {textContent} - {imageContent} - + <>{textContent}{imageContent} )}
diff --git a/src/blocks/FDFaqBlock/Component.tsx b/src/blocks/FDFaqBlock/Component.tsx index 2ee55ef..2382e77 100644 --- a/src/blocks/FDFaqBlock/Component.tsx +++ b/src/blocks/FDFaqBlock/Component.tsx @@ -10,16 +10,29 @@ export const FDFaqBlockComponent: React.FC = ({ }) => { const [openIndex, setOpenIndex] = useState(null) + // dark theme = always navy. gray/white adapt via dark: OS preference const bgClass = theme === 'dark' ? 'bg-fd-navy' : theme === 'gray' - ? 'bg-fd-gray-light' - : 'bg-white' - const headingColor = theme === 'dark' ? 'text-fd-yellow' : 'text-fd-navy' - const textColor = theme === 'dark' ? 'text-white' : 'text-fd-navy' - const borderColor = theme === 'dark' ? 'border-white/20' : 'border-fd-navy/10' - const proseColor = theme === 'dark' ? 'text-white/80' : 'text-fd-navy/80' + ? 'bg-fd-gray-light dark:bg-fd-navy' + : 'bg-white dark:bg-fd-navy' + + const headingColor = theme === 'dark' + ? 'text-fd-yellow' + : 'text-fd-navy dark:text-fd-yellow' + + const textColor = theme === 'dark' + ? 'text-white' + : 'text-fd-navy dark:text-white' + + const borderColor = theme === 'dark' + ? 'border-white/20' + : 'border-fd-navy/10 dark:border-white/20' + + const proseColor = theme === 'dark' + ? 'text-white/80' + : 'text-fd-navy/80 dark:text-white/80' return (
diff --git a/src/blocks/FDFeatureAnnouncementBlock/Component.tsx b/src/blocks/FDFeatureAnnouncementBlock/Component.tsx index 10c408e..60ab70d 100644 --- a/src/blocks/FDFeatureAnnouncementBlock/Component.tsx +++ b/src/blocks/FDFeatureAnnouncementBlock/Component.tsx @@ -11,21 +11,36 @@ export const FDFeatureAnnouncementBlockComponent: React.FC { const isDark = theme === 'dark' - const bgClass = isDark ? 'bg-fd-navy' : theme === 'gray' ? 'bg-fd-gray' : 'bg-white' - const headingColor = isDark ? 'text-fd-yellow' : 'text-fd-navy' - const bodyColor = isDark ? 'text-white' : 'text-fd-navy' + // 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 (

{heading}

{body}

diff --git a/src/blocks/FDHeaderTextImageBlock/Component.tsx b/src/blocks/FDHeaderTextImageBlock/Component.tsx index acce405..cc9a038 100644 --- a/src/blocks/FDHeaderTextImageBlock/Component.tsx +++ b/src/blocks/FDHeaderTextImageBlock/Component.tsx @@ -3,31 +3,38 @@ import type { FDHeaderTextImageBlock as FDHeaderTextImageBlockProps, Media } fro import { FDImage } from '@/components/FDImage' const bgMap: Record = { - white: 'bg-white', - gray: 'bg-fd-gray-light', - navy: 'bg-fd-navy', + white: 'bg-white dark:bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', + navy: 'bg-fd-navy', } -const textMap: Record = { - navy: 'text-fd-navy', +// Heading: navy→yellow in dark, white stays white +const headingMap: Record = { + navy: 'text-fd-navy dark:text-fd-yellow', + white: 'text-white', +} + +// Body: navy→white in dark, white stays white +const bodyMap: Record = { + navy: 'text-fd-navy dark:text-white', white: 'text-white', } const overlayMap: Record = { - none: '', - navyLight: 'bg-fd-navy/20', - navyMedium: 'bg-fd-navy/40', + none: '', + navyLight: 'bg-fd-navy/20', + navyMedium: 'bg-fd-navy/40', yellowLight: 'bg-fd-yellow/20', - yellowMedium: 'bg-fd-yellow/40', - sepia: 'bg-[#8B7D3C]/30', - blackLight: 'bg-black/20', + yellowMedium:'bg-fd-yellow/40', + sepia: 'bg-[#8B7D3C]/30', + blackLight: 'bg-black/20', blackMedium: 'bg-black/40', } const roundedMap: Record = { - none: '', + none: '', medium: 'rounded-[24px]', - large: 'rounded-[40px]', + large: 'rounded-[40px]', } export const FDHeaderTextImageBlockComponent: React.FC = ({ @@ -40,23 +47,24 @@ export const FDHeaderTextImageBlockComponent: React.FC { - const bg = bgMap[sectionBackground || 'white'] - const txt = textMap[textColor || 'navy'] + const bg = bgMap[sectionBackground || 'white'] + const headClr = headingMap[textColor || 'navy'] + const bodyClr = bodyMap[textColor || 'navy'] const overlay = overlayMap[imageOverlay || 'none'] const rounded = roundedMap[imageRounded || 'large'] - const align = textAlign === 'center' ? 'text-center' : 'text-left' - const media = image as Media + const align = textAlign === 'center' ? 'text-center' : 'text-left' + const media = image as Media return ( -
+
{(heading || body) && (
{heading && ( -

{heading}

+

{heading}

)} {body && ( -

{body}

+

{body}

)}
)} diff --git a/src/blocks/FDIconBarBlock/Component.tsx b/src/blocks/FDIconBarBlock/Component.tsx index 67a6c8a..76e92b5 100644 --- a/src/blocks/FDIconBarBlock/Component.tsx +++ b/src/blocks/FDIconBarBlock/Component.tsx @@ -3,22 +3,28 @@ import type { FDIconBarBlock as FDIconBarBlockProps, Media } from '@/payload-typ import { FDImage } from '@/components/FDImage' const bgMap: Record = { - white: 'bg-white', - gray: 'bg-fd-gray-light', - navy: 'bg-fd-navy', + white: 'bg-white dark:bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', + navy: 'bg-fd-navy', yellow: 'bg-fd-yellow', } -const textColorMap: Record = { - navy: 'text-fd-navy', +const headingMap: Record = { + navy: 'text-fd-navy dark:text-fd-yellow', white: 'text-white', } +const labelMap: Record = { + navy: 'text-fd-navy dark:text-white', + white: 'text-white', +} + +// Icon circle bg — navy circles become yellow-tinted in dark when on a now-navy section const iconBgMap: Record = { - navy: 'bg-fd-navy', + navy: 'bg-fd-navy dark:bg-white/10', yellow: 'bg-fd-yellow', - gray: 'bg-[#e5e5e5]', - none: '', + gray: 'bg-fd-gray-light dark:bg-white/10', + none: '', } export const FDIconBarBlockComponent: React.FC = ({ @@ -28,16 +34,17 @@ export const FDIconBarBlockComponent: React.FC = ({ sectionBackground = 'gray', textColor = 'navy', }) => { - const bg = bgMap[sectionBackground || 'gray'] - const txtColor = textColorMap[textColor || 'navy'] - const iconBg = iconBgMap[iconStyle || 'navy'] + const bg = bgMap[sectionBackground || 'gray'] + const headClr = headingMap[textColor || 'navy'] + const labelClr = labelMap[textColor || 'navy'] + const iconBg = iconBgMap[iconStyle || 'navy'] const hasCircle = iconStyle !== 'none' return ( -
+
{heading && ( -

+

{heading}

)} @@ -61,7 +68,7 @@ export const FDIconBarBlockComponent: React.FC = ({ /> )}
- + {item.label}
diff --git a/src/blocks/FDLocationsGridBlock/Component.tsx b/src/blocks/FDLocationsGridBlock/Component.tsx index 6c3bbf9..ab305bc 100644 --- a/src/blocks/FDLocationsGridBlock/Component.tsx +++ b/src/blocks/FDLocationsGridBlock/Component.tsx @@ -12,18 +12,24 @@ export const FDLocationsGridBlockComponent: React.FC = ({ }) => { const bgClass = sectionBackground === 'navy' ? 'bg-fd-navy' : - sectionBackground === 'gray' ? 'bg-fd-surface-alt' : 'bg-white' + sectionBackground === 'gray' ? 'bg-fd-gray-light dark:bg-fd-navy' : + 'bg-white dark:bg-fd-navy' - const titleClass = sectionBackground === 'navy' ? 'text-fd-yellow' : 'text-fd-navy' - const bodyClass = sectionBackground === 'navy' ? 'text-white' : 'text-fd-navy' + const titleClass = sectionBackground === 'navy' + ? 'text-fd-yellow' + : 'text-fd-navy dark:text-fd-yellow' + + const bodyClass = sectionBackground === 'navy' + ? 'text-white' + : 'text-fd-navy dark:text-white' const hoverBgClass = hoverColor === 'yellow' ? 'bg-fd-yellow' : - hoverColor === 'mint' ? 'bg-fd-mint' : 'bg-fd-navy' + hoverColor === 'mint' ? 'bg-fd-mint' : 'bg-fd-navy' const hoverTextClass = hoverColor === 'yellow' ? 'text-fd-navy' : - hoverColor === 'mint' ? 'text-fd-navy' : 'text-white' + hoverColor === 'mint' ? 'text-fd-navy' : 'text-white' return (
@@ -51,8 +57,8 @@ export const FDLocationsGridBlockComponent: React.FC = ({
{(cards ?? []).map((card, i) => { - const media = card.image as Media | undefined - const isLink = Boolean(card.link) + const media = card.image as Media | undefined + const isLink = Boolean(card.link) const className = `group relative overflow-hidden rounded-[30px] md:rounded-[50px] aspect-[4/3] block ${isLink ? 'cursor-pointer' : ''}` const inner = ( diff --git a/src/blocks/FDPartnersLogosBlock/Component.tsx b/src/blocks/FDPartnersLogosBlock/Component.tsx index 61e908b..b3b422a 100644 --- a/src/blocks/FDPartnersLogosBlock/Component.tsx +++ b/src/blocks/FDPartnersLogosBlock/Component.tsx @@ -8,22 +8,23 @@ export const FDPartnersLogosBlockComponent: React.FC sectionBackground = 'gray', }) => { const bgClass = - sectionBackground === 'navy' - ? 'bg-fd-navy' - : sectionBackground === 'gray' - ? 'bg-fd-surface-alt' - : 'bg-white' + sectionBackground === 'navy' ? 'bg-fd-navy' : + sectionBackground === 'gray' ? 'bg-fd-gray-light dark:bg-fd-navy' : + 'bg-white dark:bg-fd-navy' - const titleClass = sectionBackground === 'navy' ? 'text-fd-yellow' : 'text-fd-navy' + const titleClass = sectionBackground === 'navy' + ? 'text-fd-yellow' + : 'text-fd-navy dark:text-fd-yellow' + // In dark mode, monochrome logos invert to be visible on navy bg const imgFilter = displayMode === 'monochrome' - ? 'grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-500' + ? 'grayscale opacity-40 hover:grayscale-0 hover:opacity-100 dark:invert dark:opacity-50 dark:hover:opacity-100 transition-all duration-500' : 'hover:opacity-80 transition-opacity duration-300' return ( -
-
+
+
{heading && (

{heading} diff --git a/src/blocks/FDPricingCardBlock/Component.tsx b/src/blocks/FDPricingCardBlock/Component.tsx index 9aaea43..bdc0f2e 100644 --- a/src/blocks/FDPricingCardBlock/Component.tsx +++ b/src/blocks/FDPricingCardBlock/Component.tsx @@ -3,14 +3,14 @@ import type { FDPricingCardBlock as FDPricingCardBlockProps } from '@/payload-ty import { FDButton } from '@/components/FDButton' const sectionBgMap: Record = { - white: 'bg-white', + white: 'bg-white dark:bg-fd-navy', navy: 'bg-fd-navy', - gray: 'bg-fd-gray-light', + gray: 'bg-fd-gray-light dark:bg-fd-navy', yellow: 'bg-fd-yellow', } const titleColorMap: Record = { - navy: 'text-fd-navy', + navy: 'text-fd-navy dark:text-fd-yellow', white: 'text-white', yellow: 'text-fd-yellow', } @@ -19,11 +19,41 @@ const cardStyleMap: Record = { - outlined: { bg: 'bg-white', border: 'border-[2px] border-[#d1d5db]', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false }, - navy: { bg: 'bg-fd-navy', border: '', title: 'text-fd-yellow', subtitle: 'text-white', body: 'text-white/80', bullet: 'text-white', isDark: true }, - gray: { bg: 'bg-fd-gray-light', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false }, - yellow: { bg: 'bg-fd-yellow', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false }, - white: { bg: 'bg-white shadow-lg', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false }, + outlined: { + bg: 'bg-white dark:bg-white/10', + border: 'border-[2px] border-gray-200 dark:border-white/20', + title: 'text-fd-navy dark:text-fd-yellow', + subtitle: 'text-fd-navy dark:text-white', + body: 'text-fd-navy/80 dark:text-white/80', + bullet: 'text-fd-navy dark:text-white', + isDark: false, + }, + navy: { + bg: 'bg-fd-navy', border: '', title: 'text-fd-yellow', + subtitle: 'text-white', body: 'text-white/80', bullet: 'text-white', isDark: true, + }, + gray: { + bg: 'bg-fd-gray-light dark:bg-white/10', + border: '', + title: 'text-fd-navy dark:text-white', + subtitle: 'text-fd-navy dark:text-white', + body: 'text-fd-navy/80 dark:text-white/80', + bullet: 'text-fd-navy dark:text-white', + isDark: false, + }, + yellow: { + bg: 'bg-fd-yellow', border: '', title: 'text-fd-navy', + subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false, + }, + white: { + bg: 'bg-white dark:bg-white/10 shadow-lg dark:shadow-none', + border: '', + title: 'text-fd-navy dark:text-fd-yellow', + subtitle: 'text-fd-navy dark:text-white', + body: 'text-fd-navy/80 dark:text-white/80', + bullet: 'text-fd-navy dark:text-white', + isDark: false, + }, } const buttonVariantMap: Record = { @@ -47,13 +77,13 @@ export const FDPricingCardBlockComponent: React.FC = ({ sectionBackground = 'white', titleColor = 'navy', }) => { - const sectionBg = sectionBgMap[sectionBackground || 'white'] + const sectionBg = sectionBgMap[sectionBackground || 'white'] const sectionTitleColor = titleColorMap[titleColor || 'navy'] - const style = cardStyleMap[cardStyle || 'outlined'] - const { variant } = buttonVariantMap[buttonColor || 'yellow'] - const cardCount = cards?.length || 1 - const gridCols = gridColsMap[cardCount] || gridColsMap[3] - const outlineOnDark = style.isDark + const style = cardStyleMap[cardStyle || 'outlined'] + const { variant } = buttonVariantMap[buttonColor || 'yellow'] + const cardCount = cards?.length || 1 + const gridCols = gridColsMap[cardCount] || gridColsMap[3] + const outlineOnDark = style.isDark return (
@@ -63,7 +93,6 @@ export const FDPricingCardBlockComponent: React.FC = ({ {sectionTitle}

)} - {/* FIX: rounded-[32px] → rounded-[70px] per design system */}
{cards?.map((card, index) => (
= columns = '4', }) => { return ( - // FIX: lg:py-24 → lg:py-[99px] (standard section padding) -
+
-

+

{heading}

@@ -27,7 +26,7 @@ export const FDServicesGridBlockComponent: React.FC = const content = (
-

+

{service.title}

@@ -41,7 +40,7 @@ export const FDServicesGridBlockComponent: React.FC = /> )} -

+

{service.description}

diff --git a/src/blocks/FDSpacerBlock/Component.tsx b/src/blocks/FDSpacerBlock/Component.tsx index f3dbff5..cbd32dd 100644 --- a/src/blocks/FDSpacerBlock/Component.tsx +++ b/src/blocks/FDSpacerBlock/Component.tsx @@ -9,10 +9,10 @@ const heightMap: Record = { } const bgMap: Record = { - white: 'bg-white', - navy: 'bg-fd-navy', - gray: 'bg-fd-gray-light', - yellow: 'bg-fd-yellow', + white: 'bg-white dark:bg-fd-navy', + navy: 'bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', + yellow: 'bg-fd-yellow', transparent: 'bg-transparent', } diff --git a/src/blocks/FDStatisticsBlock/Component.tsx b/src/blocks/FDStatisticsBlock/Component.tsx index fc70075..09d641d 100644 --- a/src/blocks/FDStatisticsBlock/Component.tsx +++ b/src/blocks/FDStatisticsBlock/Component.tsx @@ -22,17 +22,24 @@ export const FDStatisticsBlockComponent: React.FC = ({ const bgClass = sectionBackground === 'navy' ? 'bg-fd-navy' : - sectionBackground === 'gray' ? 'bg-fd-surface-alt' : 'bg-white' + sectionBackground === 'gray' ? 'bg-fd-gray-light dark:bg-fd-navy' : + 'bg-white dark:bg-fd-navy' - const titleClass = sectionBackground === 'navy' ? 'text-fd-yellow' : 'text-fd-navy' - const labelClass = sectionBackground === 'navy' ? 'text-white' : 'text-fd-navy' + const titleClass = sectionBackground === 'navy' + ? 'text-fd-yellow' + : 'text-fd-navy dark:text-fd-yellow' + + const labelClass = sectionBackground === 'navy' + ? 'text-white' + : 'text-fd-navy dark:text-white' const getNumberClass = () => { if (numberColor === 'gradient') return 'bg-gradient-to-r from-fd-yellow to-fd-mint bg-clip-text text-transparent' if (numberColor === 'yellow') return 'text-fd-yellow' - if (numberColor === 'mint') return 'text-fd-mint' - if (numberColor === 'white') return 'text-white' - return 'text-fd-navy' + if (numberColor === 'mint') return 'text-fd-mint' + if (numberColor === 'white') return 'text-white' + // navy number adapts in dark mode + return 'text-fd-navy dark:text-white' } return ( @@ -52,7 +59,6 @@ export const FDStatisticsBlockComponent: React.FC = ({ }`} style={{ transitionDelay: `${i * 120}ms` }} > - {/* Intentionally oversized for visual impact — not mapped to fd-* token */} {stat.number} diff --git a/src/blocks/FDTagsBlock/Component.tsx b/src/blocks/FDTagsBlock/Component.tsx index 500bac1..7db7314 100644 --- a/src/blocks/FDTagsBlock/Component.tsx +++ b/src/blocks/FDTagsBlock/Component.tsx @@ -2,10 +2,10 @@ import React from 'react' import type { FDTagsBlock as FDTagsBlockProps } from '@/payload-types' const tagStyleMap: Record = { - navy: { bg: 'bg-fd-navy', text: 'text-fd-yellow', border: '' }, - yellow: { bg: 'bg-fd-yellow', text: 'text-fd-navy', border: '' }, - outlined: { bg: 'bg-transparent', text: 'text-fd-navy', border: 'border-2 border-fd-navy' }, - gray: { bg: 'bg-fd-surface-alt', text: 'text-fd-navy', border: '' }, + navy: { bg: 'bg-fd-navy', text: 'text-fd-yellow', border: '' }, + yellow: { bg: 'bg-fd-yellow', text: 'text-fd-navy', border: '' }, + outlined: { bg: 'bg-transparent', text: 'text-fd-navy dark:text-white', border: 'border-2 border-fd-navy dark:border-white' }, + gray: { bg: 'bg-fd-gray-light dark:bg-white/10', text: 'text-fd-navy dark:text-white', border: '' }, } const tagSizeMap: Record = { @@ -15,15 +15,15 @@ const tagSizeMap: Record = { } const sectionBgMap: Record = { - white: 'bg-white', + white: 'bg-white dark:bg-fd-navy', navy: 'bg-fd-navy', - gray: 'bg-fd-gray-light', + gray: 'bg-fd-gray-light dark:bg-fd-navy', } const headingColorMap: Record = { - white: 'text-fd-navy', + white: 'text-fd-navy dark:text-fd-yellow', navy: 'text-fd-yellow', - gray: 'text-fd-navy', + gray: 'text-fd-navy dark:text-fd-yellow', } export const FDTagsBlockComponent: React.FC = ({ @@ -34,14 +34,14 @@ export const FDTagsBlockComponent: React.FC = ({ alignment = 'left', sectionBackground = 'white', }) => { - const style = tagStyleMap[tagStyle ?? 'navy'] || tagStyleMap.navy - const size = tagSizeMap[tagSize ?? 'large'] || tagSizeMap.large - const sectionBg = sectionBgMap[sectionBackground || 'white'] + const style = tagStyleMap[tagStyle ?? 'navy'] || tagStyleMap.navy + const size = tagSizeMap[tagSize ?? 'large'] || tagSizeMap.large + const sectionBg = sectionBgMap[sectionBackground || 'white'] const headingColor = headingColorMap[sectionBackground || 'white'] - const justify = alignment === 'center' ? 'justify-center' : 'justify-start' + const justify = alignment === 'center' ? 'justify-center' : 'justify-start' return ( -
+
{heading && (

= { - white: 'bg-white', - gray: 'bg-fd-gray-light', + white: 'bg-white dark:bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', navy: 'bg-fd-navy', } const cardMap: Record = { - navy: { bg: 'bg-fd-navy', name: 'text-fd-yellow', role: 'text-white/70', bio: 'text-white/60', icon: 'text-white/40 hover:text-fd-yellow' }, - white: { bg: 'bg-white', name: 'text-fd-navy', role: 'text-fd-navy/60', bio: 'text-fd-navy/60', icon: 'text-fd-navy/40 hover:text-fd-navy' }, - gray: { bg: 'bg-fd-gray-light', name: 'text-fd-navy', role: 'text-fd-navy/60', bio: 'text-fd-navy/60', icon: 'text-fd-navy/40 hover:text-fd-navy' }, + navy: { + bg: 'bg-fd-navy', + name: 'text-fd-yellow', + role: 'text-white/70', + bio: 'text-white/60', + icon: 'text-white/40 hover:text-fd-yellow', + }, + white: { + bg: 'bg-white dark:bg-white/10', + name: 'text-fd-navy dark:text-white', + role: 'text-fd-navy/60 dark:text-white/60', + bio: 'text-fd-navy/60 dark:text-white/60', + icon: 'text-fd-navy/40 hover:text-fd-navy dark:text-white/40 dark:hover:text-white', + }, + gray: { + bg: 'bg-fd-gray-light dark:bg-white/10', + name: 'text-fd-navy dark:text-white', + role: 'text-fd-navy/60 dark:text-white/60', + bio: 'text-fd-navy/60 dark:text-white/60', + icon: 'text-fd-navy/40 hover:text-fd-navy dark:text-white/40 dark:hover:text-white', + }, } const colsMap: Record = { @@ -28,42 +46,38 @@ export const FDTeamBlockComponent: React.FC = ({ cardStyle = 'navy', sectionBackground = 'white', }) => { - const sectionBg = sectionBgMap[sectionBackground ?? 'white'] || sectionBgMap.white - const card = cardMap[cardStyle ?? 'navy'] || cardMap.navy - const gridCols = colsMap[columns ?? '3'] || colsMap['3'] + const sectionBg = sectionBgMap[sectionBackground ?? 'white'] || sectionBgMap.white + const card = cardMap[cardStyle ?? 'navy'] || cardMap.navy + const gridCols = colsMap[columns ?? '3'] || colsMap['3'] const isNavySection = sectionBackground === 'navy' return (
- {/* Header */} {(heading || subheading) && (
{heading && ( -

+

{heading}

)} {subheading && ( -

+

{subheading}

)}
)} - {/* Grid */}
{members?.map((member, i) => { - // FIX: cast photo properly as Media and pass full object to FDImage - const photo = member.photo as Media | undefined + const photo = member.photo as Media | undefined const hasPhoto = photo && typeof photo === 'object' && photo.url return (
- {/* Photo */}
{hasPhoto ? ( = ({ fallbackAlt={member.name} /> ) : ( -
+
@@ -83,7 +97,6 @@ export const FDTeamBlockComponent: React.FC = ({ )}
- {/* Info */}

{member.name}

{member.role}

@@ -94,28 +107,17 @@ export const FDTeamBlockComponent: React.FC = ({

)} - {/* Links */} {(member.email || member.linkedin) && (
{member.email && ( - + )} {member.linkedin && ( - + diff --git a/src/blocks/FDTechPropertiesBlock/Component.tsx b/src/blocks/FDTechPropertiesBlock/Component.tsx index 766a5b1..488991b 100644 --- a/src/blocks/FDTechPropertiesBlock/Component.tsx +++ b/src/blocks/FDTechPropertiesBlock/Component.tsx @@ -3,20 +3,22 @@ import type { FDTechPropertiesBlock as FDTechPropertiesBlockProps } from '@/payl const bgMap: Record = { navy: 'bg-fd-navy', - white: 'bg-white', - gray: 'bg-fd-gray-light', + white: 'bg-white dark:bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', yellow: 'bg-fd-yellow', } +// Category label (small text above value) const catColorMap: Record = { white: 'text-white', - navy: 'text-fd-navy', + navy: 'text-fd-navy dark:text-white/70', } +// Value (large number/text) const valColorMap: Record = { yellow: 'text-fd-yellow', white: 'text-white', - navy: 'text-fd-navy', + navy: 'text-fd-navy dark:text-fd-yellow', } export const FDTechPropertiesBlockComponent: React.FC = ({ @@ -25,15 +27,15 @@ export const FDTechPropertiesBlockComponent: React.FC { - const bg = bgMap[sectionBackground || 'navy'] + const bg = bgMap[sectionBackground || 'navy'] const catColor = catColorMap[categoryColor || 'white'] const valColor = valColorMap[valueColor || 'yellow'] - const count = properties?.length || 1 + const count = properties?.length || 1 const gridCols = count <= 2 ? 'grid-cols-2' : count === 3 ? 'grid-cols-3' : 'grid-cols-2 md:grid-cols-4' return ( -
+
{properties?.map((prop, index) => ( diff --git a/src/blocks/FDTestimonialBlock/Component.tsx b/src/blocks/FDTestimonialBlock/Component.tsx index 679c7c8..ee40d16 100644 --- a/src/blocks/FDTestimonialBlock/Component.tsx +++ b/src/blocks/FDTestimonialBlock/Component.tsx @@ -2,13 +2,36 @@ import React from 'react' import type { FDTestimonialBlock as FDTestimonialBlockProps, Media } from '@/payload-types' import { FDImage } from '@/components/FDImage' -const bgMap: Record = { - gray: { section: 'bg-fd-gray-light', card: 'bg-white', quote: 'text-fd-navy', meta: 'text-fd-navy/60', name: 'text-fd-navy', company: 'text-fd-navy/50' }, - white: { section: 'bg-white', card: 'bg-fd-gray-light', quote: 'text-fd-navy', meta: 'text-fd-navy/60', name: 'text-fd-navy', company: 'text-fd-navy/50' }, - navy: { section: 'bg-fd-navy', card: 'bg-white/10', quote: 'text-white', meta: 'text-white/60', name: 'text-white', company: 'text-white/50' }, +const bgMap: Record = { + gray: { + section: 'bg-fd-gray-light dark:bg-fd-navy', + card: 'bg-white dark:bg-white/10', + quote: 'text-fd-navy dark:text-white', + meta: 'text-fd-navy/60 dark:text-white/60', + name: 'text-fd-navy dark:text-white', + accent: 'text-fd-navy dark:text-fd-yellow', + }, + white: { + section: 'bg-white dark:bg-fd-navy', + card: 'bg-fd-gray-light dark:bg-white/10', + quote: 'text-fd-navy dark:text-white', + meta: 'text-fd-navy/60 dark:text-white/60', + name: 'text-fd-navy dark:text-white', + accent: 'text-fd-navy dark:text-fd-yellow', + }, + navy: { + section: 'bg-fd-navy', + card: 'bg-white/10', + quote: 'text-white', + meta: 'text-white/60', + name: 'text-white', + accent: 'text-fd-yellow', + }, } -/** Avatar helper — uses FDImage with media object correctly */ const Avatar: React.FC<{ media: Media | undefined; name: string; size: number }> = ({ media, name, size }) => { if (!media?.url) return null return ( @@ -33,26 +56,24 @@ export const FDTestimonialBlockComponent: React.FC = ({ layout = 'grid', sectionBackground = 'gray', }) => { - const theme = bgMap[sectionBackground ?? 'gray'] || bgMap.gray + const theme = bgMap[sectionBackground ?? 'gray'] || bgMap.gray const isFeatured = layout === 'featured' - const isNavy = sectionBackground === 'navy' return (
{heading && ( -

+

{heading}

)} {isFeatured && testimonials && testimonials.length > 0 ? ( - // ── Featured layout: first testimonial large, rest below ──────
{/* First testimonial — large */} {(() => { - const t = testimonials[0] + const t = testimonials[0] const avatar = t.avatar as Media | undefined return (
@@ -72,7 +93,6 @@ export const FDTestimonialBlockComponent: React.FC = ({ ) })()} - {/* Remaining testimonials — smaller grid */} {testimonials.length > 1 && (
{testimonials.slice(1).map((t, i) => { @@ -98,14 +118,12 @@ export const FDTestimonialBlockComponent: React.FC = ({ )}
) : ( - // ── Grid layout ───────────────────────────────────────────────
{testimonials?.map((t, i) => { const avatar = t.avatar as Media | undefined return (
- {/* Quote mark */} - +

diff --git a/src/blocks/FDTextBlock/Component.tsx b/src/blocks/FDTextBlock/Component.tsx index 02fb3b1..1184d54 100644 --- a/src/blocks/FDTextBlock/Component.tsx +++ b/src/blocks/FDTextBlock/Component.tsx @@ -3,9 +3,9 @@ import type { FDTextBlock as FDTextBlockProps } from '@/payload-types' import RichText from '@/components/RichText' const bgMap: Record = { - white: 'bg-white', + white: 'bg-white dark:bg-fd-navy', navy: 'bg-fd-navy', - gray: 'bg-fd-gray-light', + gray: 'bg-fd-gray-light dark:bg-fd-navy', yellow: 'bg-fd-yellow', } @@ -22,10 +22,15 @@ const maxWidthMap: Record = { full: '', } +// Navy text color = adapts to dark mode. White/yellow = always explicit. const textColorMap: Record = { - navy: { h1: 'text-fd-navy', h2: 'text-fd-navy', body: 'text-fd-navy' }, - white: { h1: 'text-white', h2: 'text-white', body: 'text-white/90' }, - yellow: { h1: 'text-fd-yellow', h2: 'text-fd-yellow', body: 'text-fd-yellow/90' }, + navy: { + h1: 'text-fd-navy dark:text-fd-yellow', + h2: 'text-fd-navy dark:text-fd-yellow', + body: 'text-fd-navy dark:text-white', + }, + white: { h1: 'text-white', h2: 'text-white', body: 'text-white/90' }, + yellow: { h1: 'text-fd-yellow', h2: 'text-fd-yellow', body: 'text-fd-yellow/90' }, } export const FDTextBlockComponent: React.FC = ({ @@ -37,9 +42,9 @@ export const FDTextBlockComponent: React.FC = ({ sectionBackground = 'white', maxWidth = 'wide', }) => { - const bg = bgMap[sectionBackground || 'white'] - const align = alignMap[alignment || 'left'] - const width = maxWidthMap[maxWidth || 'wide'] + const bg = bgMap[sectionBackground || 'white'] + const align = alignMap[alignment || 'left'] + const width = maxWidthMap[maxWidth || 'wide'] const colors = textColorMap[textColor || 'navy'] const containerAlign = alignment === 'center' ? 'mx-auto' : alignment === 'right' ? 'ml-auto' : '' @@ -47,7 +52,7 @@ export const FDTextBlockComponent: React.FC = ({ if (!heading && !subheading && !body) return null return ( -

+
{heading && ( diff --git a/src/blocks/FDUspChecklistBlock/Component.tsx b/src/blocks/FDUspChecklistBlock/Component.tsx index 38d4c78..669a708 100644 --- a/src/blocks/FDUspChecklistBlock/Component.tsx +++ b/src/blocks/FDUspChecklistBlock/Component.tsx @@ -3,13 +3,18 @@ import type { FDUspChecklistBlock as FDUspChecklistBlockProps, Media } from '@/p import { FDImage } from '@/components/FDImage' const bgMap: Record = { - white: 'bg-white', - gray: 'bg-fd-gray-light', + white: 'bg-white dark:bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', navy: 'bg-fd-navy', } -const textMap: Record = { - navy: 'text-fd-navy', +const headingMap: Record = { + navy: 'text-fd-navy dark:text-fd-yellow', + white: 'text-white', +} + +const bodyMap: Record = { + navy: 'text-fd-navy dark:text-white', white: 'text-white', } @@ -38,19 +43,20 @@ export const FDUspChecklistBlockComponent: React.FC = sectionBackground = 'white', textColor = 'navy', }) => { - const bg = bgMap[sectionBackground || 'white'] - const txt = textMap[textColor || 'navy'] - const media = image as Media | undefined + const bg = bgMap[sectionBackground || 'white'] + const headClr = headingMap[textColor || 'navy'] + const bodyClr = bodyMap[textColor || 'navy'] + const media = image as Media | undefined const hasImage = Boolean(media?.url) const textContent = (
-

{heading}

+

{heading}

{items?.map((item, index) => (
- {item.text} + {item.text}
))}
@@ -70,7 +76,7 @@ export const FDUspChecklistBlockComponent: React.FC = ) : null return ( -
+
{imagePosition === 'left' ? <>{imageContent}{textContent} : <>{textContent}{imageContent}}
diff --git a/src/blocks/FDUspTableBlock/Component.tsx b/src/blocks/FDUspTableBlock/Component.tsx index ef5a854..1de4185 100644 --- a/src/blocks/FDUspTableBlock/Component.tsx +++ b/src/blocks/FDUspTableBlock/Component.tsx @@ -3,18 +3,30 @@ import type { FDUspTableBlock as FDUspTableBlockProps } from '@/payload-types' import RichText from '@/components/RichText' const bgMap: Record = { - white: 'bg-white', - gray: 'bg-fd-gray-light', + white: 'bg-white dark:bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', navy: 'bg-fd-navy', } -const textMap: Record = { - navy: 'text-fd-navy', +// Heading: navy bg → yellow in dark +const headingMap: Record = { + navy: 'text-fd-navy dark:text-fd-yellow', white: 'text-white', } +// Body / row titles: navy bg → white in dark +const textMap: Record = { + navy: 'text-fd-navy dark:text-white', + white: 'text-white', +} + +const proseMap: Record = { + navy: 'text-fd-navy/80 dark:text-white/80', + white: 'text-white/80', +} + const borderMap: Record = { - navy: 'border-fd-navy/10', + navy: 'border-fd-navy/10 dark:border-white/20', white: 'border-white/20', } @@ -41,16 +53,17 @@ export const FDUspTableBlockComponent: React.FC = ({ sectionBackground = 'white', textColor = 'navy', }) => { - const bg = bgMap[sectionBackground || 'white'] - const txt = textMap[textColor || 'navy'] - const border = borderMap[textColor || 'navy'] - const proseOpacity = textColor === 'white' ? 'opacity-80' : 'opacity-80' + const bg = bgMap[sectionBackground || 'white'] + const headClr = headingMap[textColor || 'navy'] + const txt = textMap[textColor || 'navy'] + const prose = proseMap[textColor || 'navy'] + const border = borderMap[textColor || 'navy'] return ( -
+
{heading && ( -

{heading}

+

{heading}

)}
{rows?.map((row, index) => ( @@ -64,7 +77,7 @@ export const FDUspTableBlockComponent: React.FC = ({ {row.title}
-
+
diff --git a/src/blocks/FDWideCardBlock/Component.tsx b/src/blocks/FDWideCardBlock/Component.tsx index 82ad84f..3f0efdf 100644 --- a/src/blocks/FDWideCardBlock/Component.tsx +++ b/src/blocks/FDWideCardBlock/Component.tsx @@ -4,22 +4,22 @@ import { FDButton } from '@/components/FDButton' import { FDImage } from '@/components/FDImage' const cardBgMap: Record = { - navy: { bg: 'bg-fd-navy', heading: 'text-white', body: 'text-white/80', isDark: true }, - yellow: { bg: 'bg-fd-yellow', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false }, - gray: { bg: 'bg-fd-gray-light', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false }, - white: { bg: 'bg-white shadow-xl', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false }, + navy: { bg: 'bg-fd-navy', heading: 'text-white', body: 'text-white/80', isDark: true }, + yellow: { bg: 'bg-fd-yellow', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false }, + gray: { bg: 'bg-fd-gray-light dark:bg-white/10', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false }, + white: { bg: 'bg-white dark:bg-white/10 shadow-xl dark:shadow-none', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false }, } const sectionBgMap: Record = { - white: 'bg-white', - gray: 'bg-fd-gray-light', + white: 'bg-white dark:bg-fd-navy', + gray: 'bg-fd-gray-light dark:bg-fd-navy', navy: 'bg-fd-navy', } const btnVariantMap: Record = { - yellow: { variant: 'primary' }, - navy: { variant: 'outline' }, - white: { variant: 'primary' }, + yellow: { variant: 'primary' }, + navy: { variant: 'outline' }, + white: { variant: 'primary' }, } export const FDWideCardBlockComponent: React.FC = ({ @@ -32,11 +32,11 @@ export const FDWideCardBlockComponent: React.FC = ({ buttonColor = 'yellow', sectionBackground = 'white', }) => { - const card = cardBgMap[cardBackground || 'navy'] + const card = cardBgMap[cardBackground || 'navy'] const sectionBg = sectionBgMap[sectionBackground || 'white'] const { variant } = btnVariantMap[buttonColor || 'yellow'] - const media = image as Media | undefined - const hasImage = media && typeof media === 'object' && media.url + const media = image as Media | undefined + const hasImage = media && typeof media === 'object' && media.url return (
@@ -53,18 +53,13 @@ export const FDWideCardBlockComponent: React.FC = ({ )} {ctaText && (
- + {ctaText}
)}
- {/* FIX: replaced raw with FDImage */} {hasImage && (