114 lines
4.7 KiB
TypeScript
114 lines
4.7 KiB
TypeScript
import React from 'react'
|
|
import type { FDPricingCardBlock as FDPricingCardBlockProps } from '@/payload-types'
|
|
import { FDButton } from '@/components/FDButton'
|
|
|
|
const sectionBgMap: Record<string, string> = {
|
|
white: 'bg-white',
|
|
navy: 'bg-fd-navy',
|
|
gray: 'bg-fd-gray-light',
|
|
yellow: 'bg-fd-yellow',
|
|
}
|
|
|
|
const titleColorMap: Record<string, string> = {
|
|
navy: 'text-fd-navy',
|
|
white: 'text-white',
|
|
yellow: 'text-fd-yellow',
|
|
}
|
|
|
|
const cardStyleMap: Record<string, {
|
|
bg: string; border: string; title: string
|
|
subtitle: string; body: string; bullet: string; isDark: boolean
|
|
}> = {
|
|
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 },
|
|
}
|
|
|
|
const buttonVariantMap: Record<string, { variant: 'primary' | 'outline' }> = {
|
|
yellow: { variant: 'primary' },
|
|
navy: { variant: 'primary' },
|
|
outlinedNavy: { variant: 'outline' },
|
|
outlinedWhite: { variant: 'outline' },
|
|
}
|
|
|
|
const gridColsMap: Record<number, string> = {
|
|
1: 'lg:grid-cols-1 max-w-[500px] mx-auto',
|
|
2: 'lg:grid-cols-2',
|
|
3: 'lg:grid-cols-3',
|
|
}
|
|
|
|
export const FDPricingCardBlockComponent: React.FC<FDPricingCardBlockProps> = ({
|
|
sectionTitle,
|
|
cards,
|
|
cardStyle = 'outlined',
|
|
buttonColor = 'yellow',
|
|
sectionBackground = 'white',
|
|
titleColor = 'navy',
|
|
}) => {
|
|
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
|
|
|
|
return (
|
|
<section className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
{sectionTitle && (
|
|
<h2 className={`font-joey-heavy text-fd-h1 text-center mb-10 md:mb-14 ${sectionTitleColor}`}>
|
|
{sectionTitle}
|
|
</h2>
|
|
)}
|
|
{/* FIX: rounded-[32px] → rounded-[70px] per design system */}
|
|
<div className={`grid grid-cols-1 ${gridCols} gap-6 md:gap-8`}>
|
|
{cards?.map((card, index) => (
|
|
<div
|
|
key={index}
|
|
className={`${style.bg} ${style.border} rounded-[70px] px-8 md:px-10 py-10 md:py-12 flex flex-col gap-5`}
|
|
>
|
|
<h3 className={`font-joey-heavy text-fd-h2 leading-tight ${style.title}`}>
|
|
{card.title}
|
|
</h3>
|
|
{card.subtitle && (
|
|
<p className={`font-joey-bold text-fd-h3 leading-tight ${style.subtitle}`}>
|
|
{card.subtitle}
|
|
</p>
|
|
)}
|
|
{card.description && (
|
|
<p className={`font-joey text-fd-body-lg leading-relaxed ${style.body}`}>
|
|
{card.description}
|
|
</p>
|
|
)}
|
|
{card.bulletPoints && card.bulletPoints.length > 0 && (
|
|
<ul className={`flex flex-col gap-2 ${style.bullet}`}>
|
|
{card.bulletPoints.map((point, i) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<span className="mt-2 w-2 h-2 rounded-full bg-current flex-shrink-0" />
|
|
<span className="font-joey text-fd-body-lg">{point.text}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{card.ctaText && (
|
|
<div className="mt-auto pt-4">
|
|
<FDButton
|
|
href={card.ctaLink || '#'}
|
|
variant={variant}
|
|
onDark={variant === 'outline' ? outlineOnDark : style.isDark}
|
|
>
|
|
{card.ctaText}
|
|
</FDButton>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|