addbb5457a
In response to the changes made to the directory structure of the project, the code has been refactored to adjust image import paths across various sections. It also involves reorganizing components into appropriate folders based on their roles in the application. Along with this, a new utility file for navigation links has been introduced, and configurations for authorizing remote images have been added to Astro configuration file, suggesting an enhancement in SEO performance.
190 lines
6.3 KiB
Text
190 lines
6.3 KiB
Text
---
|
|
// 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>
|