feat(blox): add pricing block

New block with 2–4 column tier grid, monthly/yearly billing toggle
(per-billing price_note_monthly/yearly fields), highlighted tier with
primary tint + scale, per-tier feature checklists (included/excluded +
optional note), and per-tier CTA buttons.

startup-landing-page template wired up with a
3-tier Starter/Pro/Business example.

modules/blox/blox/pricing/client.jsx

@@ -0,0 +1,15 @@
+import {render} from "preact";
+import {PricingBlock} from "./component.jsx";
+
+function renderPricingBlocks() {
+  const blocks = document.querySelectorAll('[data-block-type="pricing"]');
+  blocks.forEach((block) => {
+    const propsData = block.dataset.props;
+    if (propsData) {
+      const props = JSON.parse(propsData);
+      render(<PricingBlock {...props} />, block);
+    }
+  });
+}
+
+renderPricingBlocks();

modules/blox/blox/pricing/component.jsx

@@ -0,0 +1,229 @@
+import {useState} from "preact/hooks";
+import {Icon} from "../../shared/components/Icon.jsx";
+
+const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>`;
+const X_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/></svg>`;
+
+function renderText(text) {
+  if (!text) return "";
+  return String(text)
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(.*?)\*/g, "<em>$1</em>")
+    .replace(/`(.*?)`/g, "<code>$1</code>");
+}
+
+function BillingToggle({billing, setBilling, toggle}) {
+  const isYearly = billing === "yearly";
+  return (
+    <div class="flex items-center justify-center gap-4 mb-10">
+      <span class={`text-sm transition-colors ${isYearly ? "font-normal text-gray-400 dark:text-gray-500" : "font-semibold text-gray-900 dark:text-white"}`}>
+        {toggle.monthly_label || "Monthly"}
+      </span>
+      <button
+        role="switch"
+        aria-checked={isYearly}
+        onClick={() => setBilling(isYearly ? "monthly" : "yearly")}
+        class={`relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${isYearly ? "bg-primary-600" : "bg-gray-300 dark:bg-gray-600"}`}
+      >
+        <span class="sr-only">Toggle billing period</span>
+        <span class={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${isYearly ? "translate-x-5" : "translate-x-0"}`} />
+      </button>
+      <span class={`flex items-center gap-2 text-sm transition-colors ${isYearly ? "font-semibold text-gray-900 dark:text-white" : "font-normal text-gray-400 dark:text-gray-500"}`}>
+        {toggle.yearly_label || "Yearly"}
+        {toggle.yearly_discount && (
+          <span class="inline-flex items-center rounded-full bg-green-50 dark:bg-green-900/20 px-2.5 py-0.5 text-xs font-semibold text-green-700 dark:text-green-400">
+            {toggle.yearly_discount}
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}
+
+function PriceDisplay({price = {}, price_suffix, price_note, price_note_monthly, price_note_yearly, billing}) {
+  const raw = billing === "yearly" && price.yearly != null ? price.yearly : price.monthly;
+  const currency = price.currency ?? "$";
+  const isContact = raw === "" || raw == null;
+  const isFree = String(raw) === "0";
+
+  // billing-aware note: per-billing field → static fallback
+  const note = billing === "yearly"
+    ? (price_note_yearly ?? price_note)
+    : (price_note_monthly ?? price_note);
+
+  if (isContact) {
+    return (
+      <div class="mb-6">
+        <p class="text-3xl font-bold text-gray-900 dark:text-white">
+          {price_note || "Contact us"}
+        </p>
+      </div>
+    );
+  }
+
+  if (isFree) {
+    return (
+      <div class="mb-6">
+        <p class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white">Free</p>
+        {note && <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{note}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div class="mb-6">
+      <div class="flex items-baseline gap-x-1">
+        {currency && <span class="text-2xl font-semibold text-gray-900 dark:text-white">{currency}</span>}
+        <span class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white">{raw}</span>
+        {price_suffix && <span class="text-base text-gray-500 dark:text-gray-400 ml-1">{price_suffix}</span>}
+      </div>
+      {note && <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{note}</p>}
+    </div>
+  );
+}
+
+function FeatureRow({feature}) {
+  const text = typeof feature === "string" ? feature : (feature.text ?? "");
+  const included = typeof feature === "string" ? true : (feature.included !== false);
+  const note = typeof feature === "object" ? feature.note : null;
+
+  return (
+    <li class="flex items-start gap-3">
+      <span
+        class={`mt-0.5 h-5 w-5 flex-shrink-0 ${included ? "text-green-500 dark:text-green-400" : "text-gray-300 dark:text-gray-600"}`}
+        dangerouslySetInnerHTML={{__html: included ? CHECK_SVG : X_SVG}}
+      />
+      <span class={`text-sm leading-6 ${included ? "text-gray-700 dark:text-gray-300" : "text-gray-400 dark:text-gray-500"}`}>
+        {text}
+        {note && <span class="ml-1 text-xs text-gray-400 dark:text-gray-500">({note})</span>}
+      </span>
+    </li>
+  );
+}
+
+function PricingTier({tier, billing, icon_svgs}) {
+  const {
+    name = "",
+    badge = "",
+    description = "",
+    price = {},
+    price_suffix = "",
+    price_note = "",
+    price_note_monthly,
+    price_note_yearly,
+    highlight = false,
+    cta = {},
+    features = [],
+  } = tier;
+
+  const ctaStyle = cta.style || (highlight ? "primary" : "outline");
+  const ctaIconSvg = cta.icon ? (icon_svgs?.[cta.icon] ?? null) : null;
+  const isExternalCta = cta.url && (cta.url.startsWith("http://") || cta.url.startsWith("https://"));
+
+  return (
+    <div
+      class={`relative flex flex-col rounded-3xl p-8 transition-shadow duration-200 ${
+        highlight
+          ? "ring-2 ring-primary-500 shadow-2xl bg-primary-50 dark:bg-primary-900/10 scale-[1.03]"
+          : "ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 hover:shadow-xl"
+      }`}
+    >
+      {badge && (
+        <div class="absolute -top-4 inset-x-0 flex justify-center">
+          <span class="inline-flex items-center rounded-full bg-primary-600 px-4 py-1 text-xs font-semibold text-white shadow-sm">
+            {badge}
+          </span>
+        </div>
+      )}
+
+      <div class="mb-5">
+        <h3 class="text-lg font-bold text-gray-900 dark:text-white">{name}</h3>
+        {description && (
+          <p class="mt-1.5 text-sm text-gray-500 dark:text-gray-400">{description}</p>
+        )}
+      </div>
+
+      <PriceDisplay
+        price={price}
+        price_suffix={price_suffix}
+        price_note={price_note}
+        price_note_monthly={price_note_monthly}
+        price_note_yearly={price_note_yearly}
+        billing={billing}
+      />
+
+      {cta.text && cta.url && (
+        <a
+          href={cta.url}
+          {...(isExternalCta ? {target: "_blank", rel: "noopener noreferrer"} : {})}
+          class={`mb-8 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
+            ctaStyle === "primary"
+              ? "bg-primary-600 text-white hover:bg-primary-700 shadow-sm hover:shadow-md"
+              : "ring-1 ring-inset ring-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20"
+          }`}
+        >
+          {cta.text}
+          {ctaIconSvg && <Icon svg={ctaIconSvg} attributes={{class: "w-4 h-4 flex-shrink-0"}} />}
+        </a>
+      )}
+
+      {features.length > 0 && (
+        <ul class="mt-auto space-y-3 border-t border-gray-100 dark:border-gray-700 pt-6">
+          {features.map((f, i) => <FeatureRow key={i} feature={f} />)}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export const PricingBlock = ({content = {}, design = {}, icon_svgs = {}}) => {
+  const {title, subtitle, billing_toggle = {}, tiers = []} = content;
+
+  const hasYearlyPrices = tiers.some(
+    (t) => t.price?.yearly != null && t.price.yearly !== t.price.monthly
+  );
+  const showToggle = billing_toggle.enabled && hasYearlyPrices;
+
+  const [billing, setBilling] = useState("monthly");
+
+  const colsClass =
+    tiers.length === 1
+      ? "max-w-sm mx-auto"
+      : tiers.length === 2
+      ? "max-w-4xl mx-auto grid-cols-1 sm:grid-cols-2"
+      : "grid-cols-1 md:grid-cols-3";
+
+  return (
+    <div class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
+      <div class="max-w-7xl mx-auto">
+        {(title || subtitle) && (
+          <div class="text-center max-w-3xl mx-auto mb-10 lg:mb-14">
+            {title && (
+              <h2
+                class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white tracking-tight mb-4"
+                dangerouslySetInnerHTML={{__html: renderText(title)}}
+              />
+            )}
+            {subtitle && (
+              <p
+                class="text-lg text-gray-600 dark:text-gray-400"
+                dangerouslySetInnerHTML={{__html: renderText(subtitle)}}
+              />
+            )}
+          </div>
+        )}
+
+        {showToggle && (
+          <BillingToggle billing={billing} setBilling={setBilling} toggle={billing_toggle} />
+        )}
+
+        {/* pt-6 clears space for the absolutely-positioned badge on the highlighted tier */}
+        <div class={`grid gap-8 pt-6 ${colsClass}`}>
+          {tiers.map((tier, i) => (
+            <PricingTier key={i} tier={tier} billing={billing} icon_svgs={icon_svgs} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

modules/blox/blox/pricing/manifest.json

@@ -0,0 +1,15 @@
+{
+  "id": "pricing",
+  "name": "Pricing",
+  "version": "1.0.0",
+  "license": "MIT",
+  "category": "conversion",
+  "intent": ["convert", "inform"],
+  "verticals": ["startup", "saas", "agency", "dev-portfolio", "link-in-bio"],
+  "tags": ["pricing", "plans", "tiers", "billing", "saas", "subscription", "conversion"],
+  "description": "Display pricing tiers with optional monthly/yearly billing toggle, feature checklists, highlighted tiers, badges, and per-tier CTAs",
+  "author": "Hugo Blox",
+  "homepage": "https://hugoblox.com/blocks/",
+  "repository": "https://github.com/HugoBlox/kit",
+  "keywords": ["hugo", "static-site", "pricing", "plans", "saas", "billing"]
+}

modules/blox/layouts/_partials/blox/preact-wrapper.html

@@ -148,6 +148,23 @@
   {{ $props = merge $props (dict "icon_svgs" $icon_svgs) }}
 {{ end }}
 
+{{/* Resolve CTA icons from pricing tiers (content.tiers[*].cta.icon) */}}
+{{ with $block.content.tiers }}
+  {{ range . }}
+    {{ with .cta.icon }}
+      {{ if not (index $icon_svgs .) }}
+        {{ $icon_data := partial "functions/get_icon_data" (dict "name" .) }}
+        {{ if $icon_data }}
+          {{ $icon_svgs = merge $icon_svgs (dict . $icon_data) }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+{{ if gt (len $icon_svgs) 0 }}
+  {{ $props = merge $props (dict "icon_svgs" $icon_svgs) }}
+{{ end }}
+
 {{/* Convert props to JSON for client-side rendering */}}
 {{ $propsJSON := $props | jsonify }}
 

templates/startup-landing-page/content/_index.md

@@ -81,6 +81,95 @@ sections:
         - name: Swappable Blocks
           icon: rectangle-group
           description: Build your pages with blocks - no coding required!
+  - block: pricing
+    id: pricing
+    content:
+      title: "Simple, transparent pricing"
+      subtitle: "Start for free. Upgrade when you're ready. No credit card required."
+      billing_toggle:
+        enabled: true
+        monthly_label: Monthly
+        yearly_label: Yearly
+        yearly_discount: "Save 20%"
+      tiers:
+        - name: Starter
+          description: "Perfect for personal projects and portfolios."
+          price:
+            monthly: "0"
+            yearly: "0"
+            currency: "$"
+          price_note: "Free forever"
+          highlight: false
+          cta:
+            text: Get started free
+            url: https://hugoblox.com/templates/
+            icon: hero/arrow-right
+            style: outline
+          features:
+            - text: "5 pages"
+              included: true
+            - text: "1 GB storage"
+              included: true
+            - text: "Custom domain"
+              included: false
+            - text: Analytics dashboard
+              included: false
+            - text: Priority support
+              included: false
+        - name: Pro
+          badge: Most popular
+          description: "For freelancers and teams building seriously."
+          price:
+            monthly: "19"
+            yearly: "15"
+            currency: "$"
+          price_suffix: /month
+          price_note_monthly: "Billed monthly"
+          price_note_yearly: "Billed annually"
+          highlight: true
+          cta:
+            text: Start free trial
+            url: https://hugoblox.com/templates/
+            icon: hero/arrow-right
+            style: primary
+          features:
+            - text: Unlimited pages
+              included: true
+            - text: "10 GB storage"
+              included: true
+            - text: Custom domain
+              included: true
+            - text: Analytics dashboard
+              included: true
+            - text: Priority support
+              included: false
+        - name: Business
+          description: "Scale with confidence and dedicated support."
+          price:
+            monthly: "49"
+            yearly: "39"
+            currency: "$"
+          price_suffix: /month
+          price_note_monthly: "Billed monthly"
+          price_note_yearly: "Billed annually"
+          highlight: false
+          cta:
+            text: Start free trial
+            url: https://hugoblox.com/templates/
+            icon: hero/arrow-right
+            style: outline
+          features:
+            - text: Unlimited pages
+              included: true
+            - text: "100 GB storage"
+              included: true
+            - text: Custom domain
+              included: true
+            - text: Analytics dashboard
+              included: true
+            - text: Priority support
+              included: true
+
   - block: cta-image-paragraph
     id: solutions
     content: