diff --git a/src/components/PricingSection.astro b/src/components/PricingSection.astro new file mode 100644 index 0000000..6d2695e --- /dev/null +++ b/src/components/PricingSection.astro @@ -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; + 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: "#", +}; +--- + +
+ +
+

+ {title} +

+

+ {subTitle} +

+
+ +
+ +
+
+

+ {starterKit.name} +

+

{starterKit.description}

+
+ +
+ {starterKit.price} + {starterKit.cents} + {starterKit.billingFrequency} +
+ +
    + { + starterKit.features.map((feature) => ( +
  • + + + + + {feature} +
    • + )) + } +
+ + {starterKit.purchaseBtnTitle} +
+ +
+
+
+

+ {professionalToolbox.name} +

+

{professionalToolbox.description}

+
+ + Best value +
+ +
+ {professionalToolbox.price} + {professionalToolbox.cents} + {professionalToolbox.billingFrequency} +
+ +
    + { + professionalToolbox.features.map((feature) => ( +
  • + + + + + {feature} +
    • + )) + } +
+ + {professionalToolbox.purchaseBtnTitle} +
+
+ +
+

+ Enterprise Solutions? +

+ + +
+