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