achat-maison-albi-fr/src/components/sections/pricing/PricingSection.astro

---
// Import SecondaryCTA component for use in this module
import SecondaryCTA from "../ui/buttons/SecondaryCTA.astro";

// Set heading and sub-heading for the pricing section
const title: string = "Simple, Transparent Pricing";
const subTitle: string =
  "Boost efficiency with ScrewFast's clear, value-driven plans.";

// Define TypeScript type for products.
type Product = {
  name: string;
  description: string;
  price: string;
  cents: string;
  billingFrequency: string;
  features: Array<string>;
  purchaseBtnTitle: string;
  purchaseLink: string;
};
// Define two products for display - Starter Kit and Professional Toolbox.
const starterKit: Product = {
  name: "Starter Kit",
  description: "Best option for DIY projects",
  price: "$49",
  cents: ".00",
  billingFrequency: "USD / monthly",
  features: [
    "Key hardware tools",
    "Access to guides & tutorials",
    "Standard support",
  ],
  purchaseBtnTitle: "Get the Starter Kit",
  purchaseLink: "#",
};

const professionalToolbox: Product = {
  name: "Professional Toolbox",
  description: "Best for large scale uses",
  price: "$89",
  cents: ".00",
  billingFrequency: "USD / monthly",
  features: [
    "Premium tool selection",
    "Priority support",
    "Exclusive content & deals",
    "Bulk order discounts",
  ],
  purchaseBtnTitle: "Get the Professional Toolbox",
  purchaseLink: "#",
};
---

<section
  class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
>
  <!-- Section heading and sub-heading -->
  <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
    <h2
      class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
    >
      {title}
    </h2>
    <p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
      {subTitle}
    </p>
  </div>
  <!-- Contains two main product blocks -->
  <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-0">
    <!-- Starter Kit product details -->
    <div
      class="w-full rounded-xl bg-gray-800 p-6 sm:w-1/2 sm:rounded-r-none sm:p-8 lg:w-1/3"
    >
      <div class="mb-4">
        <h3 class="text-2xl font-bold text-neutral-100 sm:text-3xl">
          {starterKit.name}
        </h3>
        <p class="text-indigo-300">{starterKit.description}</p>
      </div>

      <div class="mb-4">
        <span class="text-4xl font-bold text-neutral-200"
          >{starterKit.price}</span
        >
        <span class="text-lg font-bold text-neutral-300"
          >{starterKit.cents}</span
        >
        <span class="ms-3 text-sm text-indigo-200"
          >{starterKit.billingFrequency}</span
        >
      </div>
      <!-- Features list - automatically created by mapping over `features` array -->
      <ul class="mb-6 space-y-2 text-neutral-300">
        {
          starterKit.features.map((feature) => (
            <li class="flex items-center gap-1.5">
              <svg
                class="h-5 w-5 shrink-0"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clip-rule="evenodd"
                />
              </svg>

              <span>{feature}</span>
            </li>
          ))
        }
      </ul>
      <!-- CTA for purchasing the product -->
      <a
        href={starterKit.purchaseLink}
        class="block rounded-lg bg-gray-500 px-8 py-3 text-center text-sm font-bold text-gray-100 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-600 focus-visible:ring active:text-gray-300 md:text-base"
        >{starterKit.purchaseBtnTitle}</a
      >
    </div>
    <!-- Professional Toolbox product details -->
    <div
      class="w-full rounded-xl bg-gradient-to-tr from-[#FF512F] to-[#F09819] p-6 shadow-xl sm:w-1/2 sm:p-8"
    >
      <div
        class="mb-4 flex flex-col items-start justify-between gap-4 lg:flex-row"
      >
        <div>
          <h3 class="text-2xl font-bold text-neutral-100 sm:text-3xl">
            {professionalToolbox.name}
          </h3>
          <p class="text-orange-200">{professionalToolbox.description}</p>
        </div>

        <span
          class="order-first inline-block rounded-full bg-orange-200 bg-opacity-50 px-3 py-1 text-xs font-bold uppercase tracking-wider text-orange-600 lg:order-none"
          >Best value</span
        >
      </div>

      <div class="mb-4">
        <span class="text-6xl font-bold text-neutral-200"
          >{professionalToolbox.price}</span
        >
        <span class="text-lg font-bold text-orange-100"
          >{professionalToolbox.cents}</span
        >
        <span class="ms-3 text-orange-200"
          >{professionalToolbox.billingFrequency}</span
        >
      </div>
      <!-- Features list - automatically created by mapping over `features` array -->
      <ul class="mb-6 space-y-2 text-orange-100">
        {
          professionalToolbox.features.map((feature) => (
            <li class="flex items-center gap-1.5">
              <svg
                class="h-5 w-5 shrink-0"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clip-rule="evenodd"
                />
              </svg>

              <span>{feature}</span>
            </li>
          ))
        }
      </ul>
      <!-- CTA for purchasing the product -->
      <a
        href={professionalToolbox.purchaseLink}
        class="block rounded-lg bg-orange-200 bg-opacity-50 px-8 py-3 text-center text-sm font-bold text-neutral-100 outline-none ring-orange-300 transition duration-100 hover:bg-orange-300 hover:bg-opacity-50 focus-visible:ring active:bg-orange-400 md:text-base"
        >{professionalToolbox.purchaseBtnTitle}</a
      >
    </div>
  </div>
  <!-- Call to action for Enterprise Solutions -->
  <div class="mt-8 flex items-center justify-center gap-x-3 md:mt-12">
    <p class="text-sm text-neutral-600 dark:text-neutral-400">
      Enterprise Solutions?
    </p>

    <SecondaryCTA title="Get a Custom Quote" url="#" />
  </div>
</section>