TwoTierPricing

A two tier pricing component.

Props

title (required)

type: string

The main title.

description (required)

type: string

The description text.

tiers (required)

type: array

A list of pricing tiers to display.

Properties:

name (string, required): The name of the pricing tier
description (string, required): A brief description of the tier
price (number, required): The price of the tier
benefits (string[], required): An array of benefits included in the tier
cta (object, required): The call-to-action button for the tier
- title (string, required): The button text
- href (string, required): The URL the button links to
featured (boolean, required): Whether this tier should be visually highlighted as featured

Example

import { TwoTierPricing } from "@dlcastillop/starlight-marketing-components";

<TwoTierPricing
  title="Get everything, forever."
  description="Get lifetime access to all the code available today, plus any new content we add in the future, for a simple one-time price."
  tiers={[
    {
      name: "SEO in Next.js",
      description: "The best choice if your main framework is Next.js.",
      benefits: [
        "Generate the metadata for each page",
        "Generate the sitemap.xml file for the site",
        "Generate the robots.txt file for the site",
        "Generate the JSON-LD structured data",
        "Support via GitHub issues",
        "One-time purchase and lifetime updates",
        "7-day money-back guarantee, no questions asked",
      ],
      price: 3,
      cta: {
        title: "Get SEO in Next.js",
        href: "https://dlcastillop.lemonsqueezy.com/buy/5890f19d-479e-4886-b364-c5fdd2ca1704",
      },
      featured: false,
    },
    {
      name: "SEO Bundle",
      description:
        "The best choice if you build apps with both Next.js and Astro.",
      benefits: [
        "Includes SEO in Next.js and SEO in Astro",
        "Generate the metadata and the JSON-LD structured data for each page",
        "Generate sitemap.xml and robots.txt for the site",
        "Support via GitHub issues",
        "One-time purchase and lifetime updates for both products",
        "7-day money-back guarantee, no questions asked",
      ],
      price: 5,
      cta: {
        title: "Get SEO Bundle",
        href: "https://dlcastillop.lemonsqueezy.com/buy/c252f4af-3c3c-46ec-a05d-41fe6d64f3e5",
      },
      featured: true,
    },
  ]}
/>