blocks-dusted 0.1.0

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

@@ -0,0 +1,380 @@
+"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;

package/templates/blocks/DD-Pricing/config.ts

@@ -0,0 +1,215 @@
+import type { Block } from 'payload'
+
+export const DDPricing: Block = {
+  slug: 'DD-Pricing',
+  interfaceName: 'DDPricing',
+  labels: {
+    singular: 'Studio Pricing Block',
+    plural: 'Studio Pricing Blocks',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              defaultValue: 'Pricing',
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              defaultValue: 'Simple pricing for modern digital teams',
+              required: true,
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              defaultValue:
+                'Choose the plan that fits your workflow. Scale from solo creators to full production teams.',
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'monthlyLabel',
+                  type: 'text',
+                  defaultValue: 'Pay Monthly',
+                  admin: {
+                    width: '50%',
+                  },
+                },
+                {
+                  name: 'annualLabel',
+                  type: 'text',
+                  defaultValue: 'Pay Annually',
+                  admin: {
+                    width: '50%',
+                  },
+                },
+              ],
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'annualDiscountLabel',
+                  type: 'text',
+                  defaultValue: '-20%',
+                  admin: {
+                    width: '50%',
+                  },
+                },
+                {
+                  name: 'defaultBilling',
+                  type: 'select',
+                  defaultValue: 'monthly',
+                  admin: {
+                    width: '50%',
+                  },
+                  options: [
+                    {
+                      label: 'Monthly',
+                      value: 'monthly',
+                    },
+                    {
+                      label: 'Annual',
+                      value: 'annual',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Pricing Tiers',
+          fields: [
+            {
+              name: 'tiers',
+              type: 'array',
+              minRows: 1,
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'name',
+                      type: 'text',
+                      required: true,
+                      admin: {
+                        width: '33%',
+                      },
+                    },
+                    {
+                      name: 'badge',
+                      type: 'text',
+                      admin: {
+                        width: '33%',
+                      },
+                    },
+                    {
+                      name: 'highlight',
+                      type: 'checkbox',
+                      defaultValue: false,
+                      admin: {
+                        width: '33%',
+                      },
+                    },
+                  ],
+                },
+                {
+                  name: 'tagline',
+                  type: 'text',
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'monthlyPrice',
+                      type: 'number',
+                      defaultValue: 0,
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                    {
+                      name: 'annualPrice',
+                      type: 'number',
+                      defaultValue: 0,
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                  ],
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'cta',
+                      type: 'text',
+                      defaultValue: 'Get Started',
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                    {
+                      name: 'ctaLink',
+                      type: 'text',
+                      defaultValue: '#',
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                  ],
+                },
+                {
+                  name: 'features',
+                  type: 'array',
+                  label: 'Included Features',
+                  fields: [
+                    {
+                      name: 'label',
+                      type: 'text',
+                      required: true,
+                    },
+                  ],
+                },
+                {
+                  name: 'missing',
+                  type: 'array',
+                  label: 'Missing Features',
+                  fields: [
+                    {
+                      name: 'label',
+                      type: 'text',
+                      required: true,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'guaranteeText',
+      type: 'text',
+      defaultValue: 'All paid plans include a',
+    },
+    {
+      name: 'guaranteeHighlight',
+      type: 'text',
+      defaultValue: '14-day money-back guarantee',
+    },
+    {
+      name: 'sectionId',
+      type: 'text',
+    },
+  ],
+}

package/templates/blocks/DD-Pricing/manifest.json

@@ -0,0 +1,78 @@
+{
+  "type": "block",
+  "name": "DD-Pricing",
+  "label": "Studio Pricing Block",
+  "sourceName": "StudioPricingBlock",
+  "portableName": "DD-Pricing",
+  "slug": "DD-Pricing",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioPricingBlock",
+    "originalSlug": "studioPricingBlock",
+    "originalConfigExport": "StudioPricingBlock",
+    "originalComponentExport": "StudioPricingBlock",
+    "originalInterfaceName": "StudioPricingBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Pricing/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Pricing/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDPricing in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Pricing in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDPricing in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Pricing in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDPricing } from '@/blocks/DD-Pricing/config' and add DDPricing to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Pricing in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioPricingBlock.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDPricing",
+  "interfaceName": "DDPricing"
+}