feat: enhance small pricing section

Author: mvriu5

src/components/sections/SmallPricingSection.tsx

@@ -17,17 +17,18 @@ interface SmallPricingSectionProps {
     content?: SmallPricingLayoutBlock | null
     locale: AppLocale
     packages: SubscriptionConfigData["packages"]
+    paymentPeriod: SubscriptionConfigData["paymentPeriod"]
 }
 
-export function SmallPricingSection({ content, locale, packages }: SmallPricingSectionProps) {
+export function SmallPricingSection({ content, locale, packages, paymentPeriod }: SmallPricingSectionProps) {
     if (!content) return null
 
     const selectedPeriod = content.pricingPeriod
     const periodMonths = selectedPeriod === "quarterly" ? 3 : selectedPeriod === "yearly" ? 12 : 1
     const periodSuffix = {
-        monthly: "/mo",
-        quarterly: "/qtr",
-        yearly: "/yr",
+        monthly: paymentPeriod.monthlyPeriodSuffix,
+        quarterly: paymentPeriod.quarterlyPeriodSuffix,
+        yearly: paymentPeriod.yearlyPeriodSuffix,
     }[selectedPeriod]
     const pricingPackages = [
         {
@@ -72,10 +73,7 @@ export function SmallPricingSection({ content, locale, packages }: SmallPricingS
             animation={{ preset: "none" }}
         >
             <Card size="lg" variant="light" radialGradient={content.gradient} gradientDirection={content.gradientDirection} className="mx-auto w-full max-w-5xl p-2!">
-                <div
-                    aria-hidden="true"
-                    className="pointer-events-none absolute inset-y-0 left-1/3 hidden w-1/3 bg-[radial-gradient(ellipse_at_top,oklch(1_0_0/0.1),transparent_68%)] md:block"
-                />
+                <div aria-hidden="true" className="pointer-events-none absolute inset-y-0 left-1/3 hidden w-1/3 bg-[radial-gradient(ellipse_at_top,oklch(1_0_0/0.1),transparent_68%)] md:block" />
                 <StaggerContainer className="relative z-10 grid grid-cols-1 md:grid-cols-3" delayChildren={0.04} staggerChildren={0.08}>
                     {pricingPackages.map((pricingPackage) => {
                         const features = pricingPackage.content?.features?.filter((feature) => Boolean(feature.text)) ?? []
@@ -90,9 +88,14 @@ export function SmallPricingSection({ content, locale, packages }: SmallPricingS
 
                         return (
                             <StaggerItem key={pricingPackage.key} y={10} duration={0.36} className="relative flex min-w-0 flex-col overflow-hidden p-5 sm:p-6">
-                                {highlighted && <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,oklch(1_0_0/0.1),transparent_68%)] md:hidden" />}
+                                {highlighted && (
+                                    <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,oklch(1_0_0/0.1),transparent_68%)] md:hidden" />
+                                )}
                                 <div className="flex items-start justify-between gap-2">
-                                    <h3 className="text-xl font-semibold text-white">{pricingPackage.title}</h3>
+                                    <div className="min-w-0">
+                                        <h3 className="text-xl font-semibold text-white">{pricingPackage.title}</h3>
+                                        {pricingPackage.description && <p className="text-sm leading-5 text-secondary">{pricingPackage.description}</p>}
+                                    </div>
                                     {discount > 0 && (
                                         <StableBadge border className="shrink-0 border-brand/25! bg-brand/15! px-2 py-1 text-xs font-semibold tracking-wider text-brand!">
                                             -{discount}%
@@ -108,13 +111,12 @@ export function SmallPricingSection({ content, locale, packages }: SmallPricingS
                                             format={{ style: "currency", currency: "EUR", trailingZeroDisplay: "stripIfInteger" }}
                                             className="text-3xl font-semibold text-white"
                                         />
-                                        <span className="text-lg font-semibold text-tertiary">{periodSuffix}</span>
+                                        <span className="text-base text-tertiary">{periodSuffix}</span>
                                     </div>
                                 )}
-                                {pricingPackage.description && <p className="text-sm leading-5 text-secondary">{pricingPackage.description}</p>}
 
                                 {(features.length > 0 || missingFeatures.length > 0) && (
-                                    <ul className="mt-6 flex flex-col gap-1.5">
+                                    <ul className="mt-4 flex flex-col gap-1.5">
                                         {features.map((feature, featureIndex) => (
                                             <li key={feature.id ?? `feature-${featureIndex}`} className="flex items-start gap-2 text-sm text-white">
                                                 <IconCheck size={16} className="mt-0.5 shrink-0 text-brand" />

src/components/ui/PageBlockRenderer.tsx

@@ -183,7 +183,9 @@ const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>>
         const config = options.subscriptionConfig
         if (!config?.packages) return null
 
-        return <SmallPricingSection content={block as Extract<PageBlock, { blockType: "smallPricing" }>} locale={options.locale ?? "en"} packages={config.packages} />
+        return (
+            <SmallPricingSection content={block as Extract<PageBlock, { blockType: "smallPricing" }>} locale={options.locale ?? "en"} packages={config.packages} paymentPeriod={config.paymentPeriod} />
+        )
     },
     contact: (block, options) => <ContactSection content={block as Extract<PageBlock, { blockType: "contact" }>} locale={options.locale ?? "en"} />,
     compareApplication: (block) => <CompareApplicationSection content={block as Extract<PageBlock, { blockType: "compareApplication" }>} />,