feat: improve prcing section styles

Author: mvriu5

package-lock.json

@@ -41,6 +41,7 @@
         "@payloadcms/plugin-seo": "3.86.0",
         "@payloadcms/richtext-lexical": "3.86.0",
         "@tabler/icons-react": "3.41.1",
+        "border-beam": "^1.3.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "graphql": "^16.14.2",

package.json

@@ -198,7 +198,6 @@ const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>>
                 content={block as Extract<PageBlock, { blockType: "smallPricing" }>}
                 locale={options.locale ?? "en"}
                 packages={config.packages}
-                paymentPeriod={config.paymentPeriod}
             />
         )
     },

src/components/PageBlockRenderer.tsx

@@ -10,6 +10,7 @@ import type { AppLocale } from "@/lib/i18n"
 import { cn } from "@/lib/utils"
 import NumberFlow from "@number-flow/react"
 import { IconCheck, IconX } from "@tabler/icons-react"
+import { BorderBeam } from "border-beam"
 import { useState } from "react"
 
 type PricingPeriod = "monthly" | "quarterly" | "yearly"
@@ -32,9 +33,9 @@ export function PricingSection({ content, locale, packages, paymentPeriod }: Pri
         { value: "yearly", label: paymentPeriod.yearlyText },
     ] as const
     const periodSuffix = {
-        monthly: paymentPeriod.monthlyPeriodSuffix,
-        quarterly: paymentPeriod.quarterlyPeriodSuffix,
-        yearly: paymentPeriod.yearlyPeriodSuffix,
+        monthly: "/mo",
+        quarterly: "/qtr",
+        yearly: "/yr",
     }[selectedPeriod]
     const pricingPackages = [
         {
@@ -96,18 +97,14 @@ export function PricingSection({ content, locale, packages, paymentPeriod }: Pri
                             ? Math.max(0, Math.round((1 - pricingPackage.price / (pricingPackage.monthlyPrice * periodMonths)) * 100))
                             : 0
 
-                    return (
+                    const card = (
                         <StaggerItem
                             key={pricingPackage.key}
                             y={14}
                             duration={0.42}
-                            className={cn(
-                                "relative flex h-full min-w-0 flex-col overflow-hidden rounded-3xl border border-white/5 bg-[linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02)_28%,rgba(8,10,20,0.6)_100%)] p-6 md:p-8",
-                                highlighted &&
-                                    "z-10 border-brand/40 bg-[linear-gradient(160deg,rgba(145,232,120,0.14),rgba(255,255,255,0.04)_32%,rgba(8,10,20,0.72)_100%)] transition-[scale] duration-300 md:scale-[1.025] lg:scale-[1.05]"
-                            )}
+                            className="relative flex h-full min-w-0 flex-col overflow-hidden rounded-3xl border border-white/5 bg-[linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02)_28%,rgba(8,10,20,0.6)_100%)] p-6 md:p-8"
                         >
-                            <div className={cn("pointer-events-none absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-white/30 to-transparent", highlighted && "via-brand")} />
+                            <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-white/30 to-transparent" />
                             {discount > 0 && (
                                 <StableBadge
                                     border
@@ -117,24 +114,24 @@ export function PricingSection({ content, locale, packages, paymentPeriod }: Pri
                                 </StableBadge>
                             )}
                             <h3 className={cn("relative z-10 text-2xl font-semibold text-white", discount > 0 && "pr-20")}>{pricingPackage.title}</h3>
-                            {pricingPackage.description && <p className="relative z-10 mt-3 leading-6 text-secondary">{pricingPackage.description}</p>}
 
                             {pricingPackage.price !== null && (
-                                <div className="relative z-10 mt-6">
+                                <div className="relative z-10 mt-2">
                                     <div className="flex flex-wrap items-center gap-2">
                                         <NumberFlow
                                             value={pricingPackage.price}
                                             locales={locale === "de" ? "de-DE" : "en-US"}
                                             format={{ style: "currency", currency: "EUR", trailingZeroDisplay: "stripIfInteger" }}
                                             className="text-4xl font-semibold text-white"
                                         />
+                                        <span className="text-lg font-semibold text-tertiary">{periodSuffix}</span>
                                     </div>
-                                    {periodSuffix && <p className="mt-1 text-sm text-tertiary">{periodSuffix}</p>}
                                 </div>
                             )}
+                            {pricingPackage.description && <p className="relative z-10 leading-6 text-secondary">{pricingPackage.description}</p>}
 
                             {(features.length > 0 || missingFeatures.length > 0) && (
-                                <ul className="relative z-10 mt-8 flex flex-col gap-3">
+                                <ul className="relative z-10 mt-8 flex flex-col gap-2">
                                     {features.map((feature, featureIndex) => (
                                         <li key={feature.id ?? `feature-${featureIndex}`} className="flex items-start gap-3 text-sm text-white">
                                             <IconCheck size={18} className="mt-0.5 shrink-0 text-brand" />
@@ -163,6 +160,14 @@ export function PricingSection({ content, locale, packages, paymentPeriod }: Pri
                             )}
                         </StaggerItem>
                     )
+
+                    return highlighted ? (
+                        <BorderBeam key={pricingPackage.key} size="pulse-inner" colorVariant="colorful" strength={0.7} className="h-full">
+                            {card}
+                        </BorderBeam>
+                    ) : (
+                        card
+                    )
                 })}
             </StaggerContainer>
         </Section>

src/components/sections/PricingSection.tsx

@@ -17,18 +17,17 @@ interface SmallPricingSectionProps {
     content?: SmallPricingLayoutBlock | null
     locale: AppLocale
     packages: SubscriptionConfigData["packages"]
-    paymentPeriod: SubscriptionConfigData["paymentPeriod"]
 }
 
-export function SmallPricingSection({ content, locale, packages, paymentPeriod }: SmallPricingSectionProps) {
+export function SmallPricingSection({ content, locale, packages }: SmallPricingSectionProps) {
     if (!content) return null
 
     const selectedPeriod = content.pricingPeriod
     const periodMonths = selectedPeriod === "quarterly" ? 3 : selectedPeriod === "yearly" ? 12 : 1
     const periodSuffix = {
-        monthly: paymentPeriod.monthlyPeriodSuffix,
-        quarterly: paymentPeriod.quarterlyPeriodSuffix,
-        yearly: paymentPeriod.yearlyPeriodSuffix,
+        monthly: "/mo",
+        quarterly: "/qtr",
+        yearly: "/yr",
     }[selectedPeriod]
     const pricingPackages = [
         {
@@ -72,13 +71,7 @@ export function SmallPricingSection({ content, locale, packages, paymentPeriod }
             funnelType={content.sectionLayout ?? "center"}
             animation={{ preset: "none" }}
         >
-            <Card
-                size="lg"
-                variant="light"
-                radialGradient={content.gradient}
-                gradientDirection={content.gradientDirection}
-                className="mx-auto w-full max-w-5xl p-2!"
-            >
+            <Card size="lg" variant="light" radialGradient={content.gradient} gradientDirection={content.gradientDirection} className="mx-auto w-full max-w-5xl p-2!">
                 <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)) ?? []
@@ -91,36 +84,31 @@ export function SmallPricingSection({ content, locale, packages, paymentPeriod }
                                 : 0
 
                         return (
-                            <StaggerItem
-                                key={pricingPackage.key}
-                                y={10}
-                                duration={0.36}
-                                className="flex min-w-0 flex-col p-5 sm:p-6"
-                            >
-                                <div className="flex items-start justify-between gap-3">
+                            <StaggerItem key={pricingPackage.key} y={10} duration={0.36} className="flex min-w-0 flex-col p-5 sm:p-6">
+                                <div className="flex items-start justify-between gap-2">
                                     <h3 className="text-xl font-semibold text-white">{pricingPackage.title}</h3>
                                     {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}%
                                         </StableBadge>
                                     )}
                                 </div>
-                                {pricingPackage.description && <p className="mt-2 text-sm leading-5 text-secondary">{pricingPackage.description}</p>}
 
                                 {pricingPackage.price !== null && (
-                                    <div className="mt-5">
+                                    <div className="mt-2 flex items-baseline gap-1">
                                         <NumberFlow
                                             value={pricingPackage.price}
                                             locales={locale === "de" ? "de-DE" : "en-US"}
                                             format={{ style: "currency", currency: "EUR", trailingZeroDisplay: "stripIfInteger" }}
                                             className="text-3xl font-semibold text-white"
                                         />
-                                        {periodSuffix && <p className="mt-1 text-xs text-tertiary">{periodSuffix}</p>}
+                                        <span className="text-lg font-semibold 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-2.5">
+                                    <ul className="mt-6 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" />