Add PricingSection component with product blocks
Added a new PricingSection component which includes blocks for 'Starter Kit' and 'Professional Toolbox' products. Each product block specifies pricing, features and a CTA button. Also included a general CTA offering enterprise solutions.
This commit is contained in:
Emil Gulamov
parent
41deaa4fbf
commit
e4df26307d
1 changed files with 195 additions and 0 deletions
195
src/components/PricingSection.astro
Normal file
195
src/components/PricingSection.astro
Normal file
|
|
@ -0,0 +1,195 @@
|
||||||
|
---
|
||||||
|
// import necessary dependencies
|
||||||
|
import SecondaryCTA from "./ui/buttons/SecondaryCTA.astro";
|
||||||
|
/* `title` variable used to customise the heading. */
|
||||||
|
const title: string = "Simple, Transparent Pricing";
|
||||||
|
|
||||||
|
/* `subTitle` variable used to customise the sub-heading text. */
|
||||||
|
const subTitle: string =
|
||||||
|
"Boost efficiency with ScrewFast's clear, value-driven plans.";
|
||||||
|
|
||||||
|
/*
|
||||||
|
In the above, the title and subTitle attributes are variables part of the PricingSection component.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* TypeScript type for product. */
|
||||||
|
type Product = {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
price: string;
|
||||||
|
cents: string;
|
||||||
|
billingFrequency: string;
|
||||||
|
features: Array<string>;
|
||||||
|
purchaseBtnTitle: string;
|
||||||
|
purchaseLink: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const starterKit: Product = {
|
||||||
|
name: "Starter Kit",
|
||||||
|
description: "Best option for DIY projects",
|
||||||
|
price: "$29",
|
||||||
|
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: "$49",
|
||||||
|
cents: ".00",
|
||||||
|
billingFrequency: "USD / monthly",
|
||||||
|
features: [
|
||||||
|
"Premium tool selection",
|
||||||
|
"Priority support",
|
||||||
|
"Exclusive content & deals",
|
||||||
|
"Bulk order discounts",
|
||||||
|
],
|
||||||
|
purchaseBtnTitle: "Get the Professional Toolbox",
|
||||||
|
purchaseLink: "#",
|
||||||
|
};
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
||||||
|
>
|
||||||
|
<!-- Title and description -->
|
||||||
|
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
|
||||||
|
<h2
|
||||||
|
class="text-balanced 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">
|
||||||
|
<!-- Block for the `starterKit` product -->
|
||||||
|
<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-semibold 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-semibold 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>
|
||||||
|
<!-- Block for the `professionalToolbox` product -->
|
||||||
|
<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-semibold 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-semibold 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-neutral-300"
|
||||||
|
>{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-semibold 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>
|
||||||
|
<!-- Extra CTA 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>
|
||||||
|
</div>
|
||||||
Loading…
Add table
Reference in a new issue