blocks-dusted 0.1.0 → 0.1.2

package/templates/blocks/DD-Pricing/Component.tsx

@@ -1,380 +1,372 @@
-"use client";
-
-import React, { useState } from "react";
-import Link from "next/link";
-import { Check, X } from "lucide-react";
-
-export type BillingCycle = "monthly" | "annual";
-
-interface PricingFeature {
-  id?: string | null;
-  label?: string | null;
-}
-
-interface PricingTier {
-  id?: string | null;
-  name?: string | null;
-  tagline?: string | null;
-  monthlyPrice?: number | null;
-  annualPrice?: number | null;
-  cta?: string | null;
-  ctaLink?: string | null;
-  highlight?: boolean | null;
-  badge?: string | null;
-  features?: PricingFeature[] | null;
-  missing?: PricingFeature[] | null;
-}
-
-interface StudioPricingBlockProps {
-  eyebrow?: string | null;
-  heading?: string | null;
-  description?: string | null;
-  defaultBilling?: BillingCycle | null;
-  annualDiscountLabel?: string | null;
-  monthlyLabel?: string | null;
-  annualLabel?: string | null;
-  tiers?: PricingTier[] | null;
-  guaranteeText?: string | null;
-  guaranteeHighlight?: string | null;
-  sectionId?: string | null;
-  customCSS?: string | null;
-  [key: string]: unknown;
-}
-
-const DEFAULT_TIERS: PricingTier[] = [
-  {
-    id: "free",
-    name: "Free",
-    tagline: "Start building today",
-    monthlyPrice: 0,
-    annualPrice: 0,
-    cta: "Get Started Free",
-    ctaLink: "/account",
-    highlight: false,
-    badge: null,
-    features: [
-      { label: "Access to all free components" },
-      { label: "Access to free templates" },
-      { label: "Community Discord access" },
-      { label: "MIT license for personal use" },
-      { label: "Basic documentation" },
-      { label: "Copy JSX code" },
-    ],
-    missing: [
-      { label: "Pro components & templates" },
-      { label: "Source files (Figma, PSD)" },
-      { label: "Payload CMS blocks" },
-      { label: "Priority support" },
-      { label: "Commercial license" },
-    ],
-  },
-  {
-    id: "pro",
-    name: "Pro",
-    tagline: "For individual developers",
-    monthlyPrice: 49,
-    annualPrice: 39,
-    cta: "Get Pro Access",
-    ctaLink: "/account",
-    highlight: true,
-    badge: "Most Popular",
-    features: [
-      { label: "Everything in Free" },
-      { label: "120+ premium components" },
-      { label: "24+ full website templates" },
-      { label: "Payload CMS v3 blocks" },
-      { label: "Figma source files" },
-      { label: "Commercial license (1 project)" },
-      { label: "Priority email support" },
-      { label: "Lifetime updates" },
-      { label: "Early access to new releases" },
-    ],
-    missing: [
-      { label: "Unlimited commercial projects" },
-      { label: "Team seats" },
-      { label: "White-label license" },
-    ],
-  },
-  {
-    id: "team",
-    name: "Team",
-    tagline: "For studios & agencies",
-    monthlyPrice: 129,
-    annualPrice: 99,
-    cta: "Get Team Access",
-    ctaLink: "/account",
-    highlight: false,
-    badge: null,
-    features: [
-      { label: "Everything in Pro" },
-      { label: "Unlimited commercial projects" },
-      { label: "Up to 10 team seats" },
-      { label: "White-label license" },
-      { label: "Custom Payload CMS schemas" },
-      { label: "Dedicated Slack channel" },
-      { label: "1-on-1 onboarding call" },
-      { label: "Invoice & billing management" },
-      { label: "SLA support guarantee" },
-    ],
-    missing: [],
-  },
-];
-
-export function DDPricing({
-  eyebrow,
-  heading,
-  description,
-  defaultBilling = "monthly",
-  annualDiscountLabel = "-20%",
-  monthlyLabel = "Pay Monthly",
-  annualLabel = "Pay Annually",
-  tiers,
-  guaranteeText = "All paid plans include a",
-  guaranteeHighlight = "14-day money-back guarantee",
-  sectionId,
-}: StudioPricingBlockProps) {
-  const [billing, setBilling] = useState<BillingCycle>(
-    defaultBilling === "annual" ? "annual" : "monthly",
-  );
-  const pricingTiers = tiers && tiers.length > 0 ? tiers : DEFAULT_TIERS;
-
-  return (
-    <section
-      id={sectionId ?? undefined}
-      className="studio-pricing-block px-6 pb-20 pt-32 text-stone-700 dark:text-stone-50"
-    >
-      <div className="mx-auto max-w-3xl text-center">
-        {eyebrow && (
-          <p className="mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-stone-700 dark:text-stone-500">
-            {eyebrow}
-          </p>
-        )}
-
-        {heading && (
-          <h2 className="mx-auto mb-4 max-w-3xl text-4xl font-black tracking-tight text-stone-700 dark:text-stone-50 md:text-5xl">
-            {heading}
-          </h2>
-        )}
-
-        {description && (
-          <p className="mx-auto mb-10 max-w-2xl text-sm leading-relaxed text-stone-500 md:text-base">
-            {description}
-          </p>
-        )}
-
-        <div className="inline-flex items-center gap-1 rounded-xl border border-stone-100 dark:border-stone-800 bg-stone-200 dark:bg-stone-900 p-1">
-          <button
-            type="button"
-            onClick={() => setBilling("monthly")}
-            className={`cursor-pointer whitespace-nowrap rounded-lg px-5 py-2 text-sm font-medium transition-all ${
-              billing === "monthly"
-                ? "bg-stone-50 text-stone-900"
-                : "text-stone-500 "
-            }`}
-          >
-            {monthlyLabel}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setBilling("annual")}
-            className={`flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-lg px-5 py-2 text-sm font-medium transition-all ${
-              billing === "annual"
-                ? "bg-stone-50 text-stone-900"
-                : "text-stone-500 hover:text-stone-700"
-            }`}
-          >
-            {annualLabel}
-            {annualDiscountLabel && (
-              <span
-                className={`rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
-                  billing === "annual"
-                    ? "bg-lime-500 text-stone-50"
-                    : "bg-lime-900/60 text-lime-400"
-                }`}
-              >
-                {annualDiscountLabel}
-              </span>
-            )}
-          </button>
-        </div>
-      </div>
-
-      <div className="mx-auto mt-16 max-w-6xl">
-        <div className="grid grid-cols-1 items-start gap-5 md:grid-cols-3">
-          {pricingTiers.map((tier, index) => {
-            const isHighlighted = tier.highlight === true;
-            const monthlyPrice =
-              typeof tier.monthlyPrice === "number" ? tier.monthlyPrice : 0;
-            const annualPrice =
-              typeof tier.annualPrice === "number"
-                ? tier.annualPrice
-                : monthlyPrice;
-            const price = billing === "annual" ? annualPrice : monthlyPrice;
-            const tierId = tier.id ?? tier.name ?? String(index);
-
-            return (
-              <div
-                key={tierId}
-                className={`relative flex flex-col rounded-2xl border p-7 ${
-                  isHighlighted
-                    ? "dark:border-white dark:bg-stone-50/50"
-                    : "border-stone-200 dark:border-stone-800 bg-stone-50/50 dark:bg-stone-900/50"
-                }`}
-                style={{ cornerShape: "squircle" } as React.CSSProperties}
-              >
-                {tier.badge && (
-                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                    <span className="whitespace-nowrap rounded-full border border-indigo-400 bg-indigo-900/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-stone-300 shadow-md">
-                      {tier.badge}
-                    </span>
-                  </div>
-                )}
-
-                <div className="mb-6">
-                  {tier.name && (
-                    <p className="mb-1 text-base font-semibold uppercase tracking-widest text-stone-500">
-                      {tier.name}
-                    </p>
-                  )}
-
-                  {tier.tagline && (
-                    <p className="mb-5 text-[11.5px] text-stone-500">
-                      {tier.tagline}
-                    </p>
-                  )}
-
-                  <div className="flex items-end gap-1">
-                    <span
-                      className={`text-5xl text-stone-900 dark:text-stone-50 font-bold tracking-tight ${
-                        isHighlighted
-                          ? "text-stone-900 dark:text-stone-50"
-                          : "text-stone-50 dark:text-stone-50"
-                      }`}
-                    >
-                      {price === 0 ? "Free" : `$${price}`}
-                    </span>
-
-                    {price > 0 && (
-                      <span className="mb-2 text-sm text-stone-500">
-                        /{billing === "annual" ? "mo, billed annually" : "mo"}
-                      </span>
-                    )}
-                  </div>
-
-                  {billing === "annual" && price > 0 && (
-                    <p
-                      className={`mt-1 text-xs ${isHighlighted ? "text-stone-800 dark:text-stone-500" : "text-stone-800 dark:text-stone-600"}`}
-                    >
-                      ${monthlyPrice}/mo if billed monthly
-                    </p>
-                  )}
-                </div>
-
-                <Link
-                  href={tier.ctaLink ?? "#"}
-                  className={`mb-7 flex w-full cursor-pointer items-center justify-center rounded-xl py-3 text-sm font-semibold transition-all hover:shadow-2xl ${
-                    isHighlighted
-                      ? "bg-indigo-900 text-stone-50 hover:bg-indigo-800"
-                      : tierId === "free"
-                        ? "border border-indigo-700 bg-indigo-800 text-stone-200 hover:bg-indigo-700"
-                        : "bg-indigo-50 text-indigo-900 hover:bg-indigo-100"
-                  }`}
-                  style={{ cornerShape: "squircle" } as React.CSSProperties}
-                >
-                  {tier.cta ?? "Get Started"}
-                </Link>
-
-                <div
-                  className={`mb-6 h-px ${isHighlighted ? "bg-stone-800 dark:bg-stone-200" : "bg-stone-200 dark:bg-stone-800"}`}
-                />
-
-                <ul className="flex-1 space-y-3">
-                  {(tier.features ?? []).map((feature, featureIndex) => {
-                    const label = feature.label;
-                    if (!label) return null;
-
-                    return (
-                      <li
-                        key={feature.id ?? `${label}-${featureIndex}`}
-                        className="flex items-start gap-2.5"
-                      >
-                        <div
-                          className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full ${
-                            isHighlighted
-                              ? "bg-stone-800 dark:bg-stone-200"
-                              : "bg-stone-200 dark:bg-stone-800"
-                          }`}
-                        >
-                          <Check
-                            className={`h-2.5 w-2.5 ${
-                              isHighlighted
-                                ? "text-stone-700 dark:text-stone-200"
-                                : "text-stone-800 dark:text-stone-300"
-                            }`}
-                          />
-                        </div>
-                        <span
-                          className={`text-sm leading-snug ${
-                            isHighlighted
-                              ? "text-stone-700 dark:text-stone-200"
-                              : "text-stone-800 dark:text-stone-300"
-                          }`}
-                        >
-                          {label}
-                        </span>
-                      </li>
-                    );
-                  })}
-
-                  {(tier.missing ?? []).map((feature, featureIndex) => {
-                    const label = feature.label;
-                    if (!label) return null;
-
-                    return (
-                      <li
-                        key={feature.id ?? `${label}-${featureIndex}`}
-                        className="flex items-start gap-2.5 opacity-40"
-                      >
-                        <div
-                          className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full ${
-                            isHighlighted
-                              ? "bg-stone-800 dark:bg-stone-200"
-                              : "bg-stone-200 dark:bg-stone-800"
-                          }`}
-                        >
-                          <X className="h-2.5 w-2.5 text-stone-700 dark:text-stone-400" />
-                        </div>
-                        <span
-                          className={`text-sm leading-snug ${
-                            isHighlighted
-                              ? "text-stone-700 dark:text-stone-200"
-                              : "text-stone-800 dark:text-stone-300"
-                          }`}
-                        >
-                          {label}
-                        </span>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            );
-          })}
-        </div>
-
-        {(guaranteeText || guaranteeHighlight) && (
-          <p className="mt-16 text-center text-xs text-stone-500 dark:text-stone-600">
-            {guaranteeText}{" "}
-            {guaranteeHighlight && (
-              <strong className="text-stone-500">{guaranteeHighlight}</strong>
-            )}
-            . No questions asked.
-          </p>
-        )}
-      </div>
-    </section>
-  );
-}
-
-export default DDPricing;
+'use client'
+
+import React, { useState } from 'react'
+import Link from 'next/link'
+import { Check, X } from 'lucide-react'
+
+export type BillingCycle = 'monthly' | 'annual'
+
+interface PricingFeature {
+  id?: string | null
+  label?: string | null
+}
+
+interface PricingTier {
+  id?: string | null
+  name?: string | null
+  tagline?: string | null
+  monthlyPrice?: number | null
+  annualPrice?: number | null
+  cta?: string | null
+  ctaLink?: string | null
+  highlight?: boolean | null
+  badge?: string | null
+  features?: PricingFeature[] | null
+  missing?: PricingFeature[] | null
+}
+
+interface StudioPricingBlockProps {
+  eyebrow?: string | null
+  heading?: string | null
+  description?: string | null
+  defaultBilling?: BillingCycle | null
+  annualDiscountLabel?: string | null
+  monthlyLabel?: string | null
+  annualLabel?: string | null
+  tiers?: PricingTier[] | null
+  guaranteeText?: string | null
+  guaranteeHighlight?: string | null
+  sectionId?: string | null
+  customCSS?: string | null
+  [key: string]: unknown
+}
+
+const DEFAULT_TIERS: PricingTier[] = [
+  {
+    id: 'free',
+    name: 'Free',
+    tagline: 'Start building today',
+    monthlyPrice: 0,
+    annualPrice: 0,
+    cta: 'Get Started Free',
+    ctaLink: '/account',
+    highlight: false,
+    badge: null,
+    features: [
+      { label: 'Access to all free components' },
+      { label: 'Access to free templates' },
+      { label: 'Community Discord access' },
+      { label: 'MIT license for personal use' },
+      { label: 'Basic documentation' },
+      { label: 'Copy JSX code' },
+    ],
+    missing: [
+      { label: 'Pro components & templates' },
+      { label: 'Source files (Figma, PSD)' },
+      { label: 'Payload CMS blocks' },
+      { label: 'Priority support' },
+      { label: 'Commercial license' },
+    ],
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    tagline: 'For individual developers',
+    monthlyPrice: 49,
+    annualPrice: 39,
+    cta: 'Get Pro Access',
+    ctaLink: '/account',
+    highlight: true,
+    badge: 'Most Popular',
+    features: [
+      { label: 'Everything in Free' },
+      { label: '120+ premium components' },
+      { label: '24+ full website templates' },
+      { label: 'Payload CMS v3 blocks' },
+      { label: 'Figma source files' },
+      { label: 'Commercial license (1 project)' },
+      { label: 'Priority email support' },
+      { label: 'Lifetime updates' },
+      { label: 'Early access to new releases' },
+    ],
+    missing: [
+      { label: 'Unlimited commercial projects' },
+      { label: 'Team seats' },
+      { label: 'White-label license' },
+    ],
+  },
+  {
+    id: 'team',
+    name: 'Team',
+    tagline: 'For studios & agencies',
+    monthlyPrice: 129,
+    annualPrice: 99,
+    cta: 'Get Team Access',
+    ctaLink: '/account',
+    highlight: false,
+    badge: null,
+    features: [
+      { label: 'Everything in Pro' },
+      { label: 'Unlimited commercial projects' },
+      { label: 'Up to 10 team seats' },
+      { label: 'White-label license' },
+      { label: 'Custom Payload CMS schemas' },
+      { label: 'Dedicated Slack channel' },
+      { label: '1-on-1 onboarding call' },
+      { label: 'Invoice & billing management' },
+      { label: 'SLA support guarantee' },
+    ],
+    missing: [],
+  },
+]
+
+export function DDPricing({
+  eyebrow,
+  heading,
+  description,
+  defaultBilling = 'monthly',
+  annualDiscountLabel = '-20%',
+  monthlyLabel = 'Pay Monthly',
+  annualLabel = 'Pay Annually',
+  tiers,
+  guaranteeText = 'All paid plans include a',
+  guaranteeHighlight = '14-day money-back guarantee',
+  sectionId,
+}: StudioPricingBlockProps) {
+  const [billing, setBilling] = useState<BillingCycle>(
+    defaultBilling === 'annual' ? 'annual' : 'monthly',
+  )
+  const pricingTiers = tiers && tiers.length > 0 ? tiers : DEFAULT_TIERS
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className="studio-pricing-block px-6 pb-20 pt-32 text-stone-700 dark:text-stone-50"
+    >
+      <div className="mx-auto max-w-3xl text-center">
+        #BlockName-DDPricing
+        {eyebrow && (
+          <p className="mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-stone-700 dark:text-stone-500">
+            {eyebrow}
+          </p>
+        )}
+
+        {heading && (
+          <h2 className="mx-auto mb-4 max-w-3xl text-4xl font-black tracking-tight text-stone-700 dark:text-stone-50 md:text-5xl">
+            {heading}
+          </h2>
+        )}
+
+        {description && (
+          <p className="mx-auto mb-10 max-w-2xl text-sm leading-relaxed text-stone-500 md:text-base">
+            {description}
+          </p>
+        )}
+
+        <div className="inline-flex items-center gap-1 rounded-xl border border-stone-100 dark:border-stone-800 bg-stone-200 dark:bg-stone-900 p-1">
+          <button
+            type="button"
+            onClick={() => setBilling('monthly')}
+            className={`cursor-pointer whitespace-nowrap rounded-lg px-5 py-2 text-sm font-medium transition-all ${
+              billing === 'monthly' ? 'bg-stone-50 text-stone-900' : 'text-stone-500 '
+            }`}
+          >
+            {monthlyLabel}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setBilling('annual')}
+            className={`flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-lg px-5 py-2 text-sm font-medium transition-all ${
+              billing === 'annual'
+                ? 'bg-stone-50 text-stone-900'
+                : 'text-stone-500 hover:text-stone-700'
+            }`}
+          >
+            {annualLabel}
+            {annualDiscountLabel && (
+              <span
+                className={`rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
+                  billing === 'annual'
+                    ? 'bg-lime-500 text-stone-50'
+                    : 'bg-lime-900/60 text-lime-400'
+                }`}
+              >
+                {annualDiscountLabel}
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="mx-auto mt-16 max-w-6xl">
+        <div className="grid grid-cols-1 items-start gap-5 md:grid-cols-3">
+          {pricingTiers.map((tier, index) => {
+            const isHighlighted = tier.highlight === true
+            const monthlyPrice = typeof tier.monthlyPrice === 'number' ? tier.monthlyPrice : 0
+            const annualPrice =
+              typeof tier.annualPrice === 'number' ? tier.annualPrice : monthlyPrice
+            const price = billing === 'annual' ? annualPrice : monthlyPrice
+            const tierId = tier.id ?? tier.name ?? String(index)
+
+            return (
+              <div
+                key={tierId}
+                className={`relative flex flex-col rounded-2xl border p-7 ${
+                  isHighlighted
+                    ? 'dark:border-white dark:bg-stone-50/50'
+                    : 'border-stone-200 dark:border-stone-800 bg-stone-50/50 dark:bg-stone-900/50'
+                }`}
+                style={{ cornerShape: 'squircle' } as React.CSSProperties}
+              >
+                {tier.badge && (
+                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                    <span className="whitespace-nowrap rounded-full border border-indigo-400 bg-indigo-900/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-stone-300 shadow-md">
+                      {tier.badge}
+                    </span>
+                  </div>
+                )}
+
+                <div className="mb-6">
+                  {tier.name && (
+                    <p className="mb-1 text-base font-semibold uppercase tracking-widest text-stone-500">
+                      {tier.name}
+                    </p>
+                  )}
+
+                  {tier.tagline && (
+                    <p className="mb-5 text-[11.5px] text-stone-500">{tier.tagline}</p>
+                  )}
+
+                  <div className="flex items-end gap-1">
+                    <span
+                      className={`text-5xl text-stone-900 dark:text-stone-50 font-bold tracking-tight ${
+                        isHighlighted
+                          ? 'text-stone-900 dark:text-stone-50'
+                          : 'text-stone-50 dark:text-stone-50'
+                      }`}
+                    >
+                      {price === 0 ? 'Free' : `$${price}`}
+                    </span>
+
+                    {price > 0 && (
+                      <span className="mb-2 text-sm text-stone-500">
+                        /{billing === 'annual' ? 'mo, billed annually' : 'mo'}
+                      </span>
+                    )}
+                  </div>
+
+                  {billing === 'annual' && price > 0 && (
+                    <p
+                      className={`mt-1 text-xs ${isHighlighted ? 'text-stone-800 dark:text-stone-500' : 'text-stone-800 dark:text-stone-600'}`}
+                    >
+                      ${monthlyPrice}/mo if billed monthly
+                    </p>
+                  )}
+                </div>
+
+                <Link
+                  href={tier.ctaLink ?? '#'}
+                  className={`mb-7 flex w-full cursor-pointer items-center justify-center rounded-xl py-3 text-sm font-semibold transition-all hover:shadow-2xl ${
+                    isHighlighted
+                      ? 'bg-indigo-900 text-stone-50 hover:bg-indigo-800'
+                      : tierId === 'free'
+                        ? 'border border-indigo-700 bg-indigo-800 text-stone-200 hover:bg-indigo-700'
+                        : 'bg-indigo-50 text-indigo-900 hover:bg-indigo-100'
+                  }`}
+                  style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                >
+                  {tier.cta ?? 'Get Started'}
+                </Link>
+
+                <div
+                  className={`mb-6 h-px ${isHighlighted ? 'bg-stone-800 dark:bg-stone-200' : 'bg-stone-200 dark:bg-stone-800'}`}
+                />
+
+                <ul className="flex-1 space-y-3">
+                  {(tier.features ?? []).map((feature, featureIndex) => {
+                    const label = feature.label
+                    if (!label) return null
+
+                    return (
+                      <li
+                        key={feature.id ?? `${label}-${featureIndex}`}
+                        className="flex items-start gap-2.5"
+                      >
+                        <div
+                          className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full ${
+                            isHighlighted
+                              ? 'bg-stone-800 dark:bg-stone-200'
+                              : 'bg-stone-200 dark:bg-stone-800'
+                          }`}
+                        >
+                          <Check
+                            className={`h-2.5 w-2.5 ${
+                              isHighlighted
+                                ? 'text-stone-700 dark:text-stone-200'
+                                : 'text-stone-800 dark:text-stone-300'
+                            }`}
+                          />
+                        </div>
+                        <span
+                          className={`text-sm leading-snug ${
+                            isHighlighted
+                              ? 'text-stone-700 dark:text-stone-200'
+                              : 'text-stone-800 dark:text-stone-300'
+                          }`}
+                        >
+                          {label}
+                        </span>
+                      </li>
+                    )
+                  })}
+
+                  {(tier.missing ?? []).map((feature, featureIndex) => {
+                    const label = feature.label
+                    if (!label) return null
+
+                    return (
+                      <li
+                        key={feature.id ?? `${label}-${featureIndex}`}
+                        className="flex items-start gap-2.5 opacity-40"
+                      >
+                        <div
+                          className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full ${
+                            isHighlighted
+                              ? 'bg-stone-800 dark:bg-stone-200'
+                              : 'bg-stone-200 dark:bg-stone-800'
+                          }`}
+                        >
+                          <X className="h-2.5 w-2.5 text-stone-700 dark:text-stone-400" />
+                        </div>
+                        <span
+                          className={`text-sm leading-snug ${
+                            isHighlighted
+                              ? 'text-stone-700 dark:text-stone-200'
+                              : 'text-stone-800 dark:text-stone-300'
+                          }`}
+                        >
+                          {label}
+                        </span>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </div>
+            )
+          })}
+        </div>
+
+        {(guaranteeText || guaranteeHighlight) && (
+          <p className="mt-16 text-center text-xs text-stone-500 dark:text-stone-600">
+            {guaranteeText}{' '}
+            {guaranteeHighlight && <strong className="text-stone-500">{guaranteeHighlight}</strong>}
+            . No questions asked.
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default DDPricing