From 1db237dd7a4829c212e0797fd023f1ef4d950a5c Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Wed, 9 Aug 2023 19:30:55 +0200
Subject: [PATCH 1/5] Refactor the Pricing widget

---
 src/components/widgets/Pricing.astro | 120 ++++++++++-------------
 src/components/widgets/Steps2.astro  |   1 -
 src/pages/pricing.astro              | 138 +++++++++++++--------------
 src/types.d.ts                       |   1 +
 4 files changed, 118 insertions(+), 142 deletions(-)

diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
index aa8cf42..baa35c6 100644
--- a/src/components/widgets/Pricing.astro
+++ b/src/components/widgets/Pricing.astro
@@ -1,48 +1,33 @@
 ---
-import { Icon } from "astro-icon/components";
-import CTA from "~/components/ui/CTA.astro";
-import Headline from "~/components/ui/Headline.astro";
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
-import type { Pricing } from "~/types";
+import { Icon } from 'astro-icon/components';
+import CTA from '~/components/ui/CTA.astro';
+import Headline from '~/components/ui/Headline.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import type { Pricing } from '~/types';
 
 const {
-  title = "",
-  subtitle = "",
-  tagline = "",
+  title = '',
+  subtitle = '',
+  tagline = '',
   prices = [],
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props as Pricing;
 ---
 
-<WidgetWrapper
-  id={id}
-  isDark={isDark}
-  containerClass={`max-w-6xl mx-auto ${classes?.container ?? ""}`}
-  bg={bg}
->
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
   <Headline title={title} subtitle={subtitle} tagline={tagline} />
   <div class="flex items-stretch justify-center">
-    <div
-      class="grid grid-cols-3 gap-3 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"
-    >
+    <div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
       {
         prices &&
-          prices.map(
-            ({
-              title,
-              price,
-              period,
-              items,
-              callToAction,
-              hasRibbon = false,
-              ribbonTitle,
-            }) => (
-              <div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
-                <div class="rounded-md border-gray-200 bg-white px-6 pt-10 pb-8 shadow-xl transition duration-300 ease-in-out dark:border dark:border-slate-800 dark:bg-slate-900 relative flex w-full max-w-sm flex-col justify-between text-center">
+          prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
+            <div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
+              {price && period && (
+                <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
                   {hasRibbon && ribbonTitle && (
                     <div class="absolute right-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
                       <span class="absolute top-[19px] right-[-21px] block w-full rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
@@ -50,48 +35,47 @@ const {
                       </span>
                     </div>
                   )}
-                  <ul class="px-2 py-0">
-                    <li class="text-center text-xl font-medium uppercase leading-6 tracking-wider text-gray-800 dark:text-slate-400">
-                      {title}
-                    </li>
-                    <li class="mt-5 mb-2.5 flex items-center justify-center text-center font-semibold">
-                      <span class="text-5xl">$</span>
-                      <span class="text-6xl">{price}</span>
-                    </li>
-                    <li class="mb-7 text-center text-base font-medium capitalize leading-6 text-gray-600 dark:text-slate-400">
-                      {period}
-                    </li>
-                    {items &&
-                      items.map(({ description, icon }) => (
-                        <li class="mb-1.5 flex items-start text-left text-base leading-7">
-                          <div class="mt-1.5 mr-1.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-primary bg-primary">
-                            {icon && (
-                              <Icon
-                                name={icon}
-                                class="w-5 h-5 font-bold text-white"
-                              />
-                            )}
-                          </div>
-                          {description}
-                        </li>
-                      ))}
-                  </ul>
+                  <div class="px-2 py-0">
+                    {title && (
+                      <h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3>
+                    )}
+                    {subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>}
+                    <div class="my-8">
+                      <div class="flex items-center justify-center text-center mb-1">
+                        <span class="text-5xl">$</span>
+                        <span class="text-6xl font-extrabold">{price}</span>
+                      </div>
+                      <span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
+                    </div>
+                    {items && (
+                      <ul role="list" class="my-8 md:my-10 space-y-2 text-left">
+                        {items.map(
+                          ({ description, icon }) =>
+                            description && (
+                              <li class="mb-1.5 flex items-start space-x-3 leading-7">
+                                <div class="rounded-full bg-primary mt-1">
+                                  <Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5 font-bold p-1 text-white" />
+                                </div>
+                                <span>{description}</span>
+                              </li>
+                            )
+                        )}
+                      </ul>
+                    )}
+                  </div>
                   {callToAction && (
-                    <div class="flex justify-center">
-                      <CTA
-                        callToAction={callToAction}
-                        class={`mt-8 ${
-                          hasRibbon
-                            ? "border-primary-600 bg-primary-600 font-semibold text-white hover:border-primary-800 hover:bg-primary-800 hover:text-white dark:border-primary-700 dark:bg-primary-700 dark:text-white dark:hover:border-primary-900 dark:hover:bg-primary-900"
-                            : ""
-                        }`}
-                      />
+                    <div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}>
+                      {typeof callToAction === 'string' ? (
+                        <Fragment set:html={callToAction} />
+                      ) : (
+                        callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} />
+                      )}
                     </div>
                   )}
                 </div>
-              </div>
-            )
-          )
+              )}
+            </div>
+          ))
       }
     </div>
   </div>
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 9482ff1..3f300ac 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -26,7 +26,6 @@ const {
         title={title}
         subtitle={subtitle}
         tagline={tagline}
-        callToAction={callToAction}
         classes={{
           container: 'text-center md:text-left mb-4 md:mb-8',
           title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 7a5bcdd..a55840a 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -1,105 +1,97 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
-
-import Pricing from '~/components/widgets/Pricing.astro';
+import Prices from '~/components/widgets/Pricing.astro';
 
 const metadata = {
-  title: "Pricing",
+  title: 'Pricing',
 };
 ---
 
 <Layout metadata={metadata}>
-  <Pricing
-    title="Basic Pricing"
-    tagline="Pricing"
-    subtitle="Our prices"
+  <Prices
+    title="Our prices"
+    subtitle="Only pay for what you need"
     prices={[
       {
-        "title": "basic",
-        "price": 29,
-        "period": "Per Month",
-        "items": [
+        title: 'basic',
+        subtitle: 'Optimal choice for personal use',
+        price: 29,
+        period: 'per month',
+        items: [
           {
-            "description": "Etiam in libero",
-            "icon": "tabler:check"
+            description: 'Etiam in libero, et volutpat',
           },
           {
-            "description": "Aenean ac nunc",
-            "icon": "tabler:check"
+            description: 'Aenean ac nunc dolor tristique',
           },
           {
-            "description": "Cras scelerisque accumsan libero, et volutpat dolor tristique at",
-            "icon": "tabler:check"
+            description: 'Cras scelerisque accumsan lib',
           },
           {
-            "description": "In hac habitasse",
-            "icon": "tabler:check"
-          }
+            description: 'In hac habitasse',
+          },
         ],
-        "callToAction": {
-          "targetBlank": true,
-          "text": "Free 7-day trial",
-          "href": "#"
-        }
-      },
-      {
-        "title": "standard",
-        "price": 69,
-        "period": "Per Month",
-        "items": [
-          {
-            "description": "Proin vel laoreet",
-            "icon": "tabler:check"
-          },
-          {
-            "description": "Ut efficitur egestas",
-            "icon": "tabler:check"
-          },
-          {
-            "description": "Pellentesque ut nibh",
-            "icon": "tabler:check"
-          },
-          {
-            "description": "Donec fringilla sem",
-            "icon": "tabler:check"
-          }
-        ],
-        "callToAction": {
-          "targetBlank": true,
-          "text": "Free 15-day trial",
-          "href": "#"
+        callToAction: {
+          targetBlank: true,
+          text: 'Free 7-day trial',
+          href: '#',
         },
-        "hasRibbon": true,
-        "ribbonTitle": "popular"
       },
       {
-        "title": "premium",
-        "price": 199,
-        "period": "Per Month",
-        "items": [
+        title: 'standard',
+        subtitle: 'Optimal choice for small teams',
+        price: 69,
+        period: 'Per Month',
+        items: [
           {
-            "description": "Curabitur suscipit risus",
-            "icon": "tabler:check"
+            description: 'Proin vel laoreet',
           },
           {
-            "description": "Aliquam blandit malesuada",
-            "icon": "tabler:check"
+            description: 'Ut efficitur habitasse egestas',
           },
           {
-            "description": "Suspendisse sit amet",
-            "icon": "tabler:check"
+            description: 'Volutpat hac curabitur',
           },
           {
-            "description": "Suspendisse auctor dui",
-            "icon": "tabler:check"
-          }
+            description: 'Pellentesque blandit ut nibh',
+          },
+          {
+            description: 'Donec fringilla sem',
+          },
         ],
-        "callToAction": {
-          "targetBlank": true,
-          "text": "Free 30-day trial",
-          "href": "#"
-        }
-      }
+        callToAction: {
+          targetBlank: true,
+          text: 'Free 15-day trial',
+          href: '#',
+        },
+        hasRibbon: true,
+        ribbonTitle: 'popular',
+      },
+      {
+        title: 'premium',
+        subtitle: 'Optimal choice for companies',
+        price: 199,
+        period: 'Per Month',
+        items: [
+          {
+            description: 'Curabitur suscipit risus',
+          },
+          {
+            description: 'Aliquam habitasse malesuada',
+          },
+          {
+            description: 'Suspendisse sit amet blandit',
+          },
+          {
+            description: 'Suspendisse auctor blandit dui',
+          },
+        ],
+        callToAction: {
+          targetBlank: true,
+          text: 'Free 30-day trial',
+          href: '#',
+        },
+      },
     ]}
   />
 </Layout>
diff --git a/src/types.d.ts b/src/types.d.ts
index 5298748..6ae93e2 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -135,6 +135,7 @@ export interface Item {
 
 export interface Price {
   title?: string;
+  subtitle?: string;
   description?: string;
   price?: number;
   period?: string;

From c7b6e597d556fd6be87f568f516c35208a22589e Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Thu, 10 Aug 2023 11:03:23 +0200
Subject: [PATCH 2/5] Include Faqs widged on pricing page

---
 src/components/widgets/FAQs.astro | 26 ++++++++----------
 src/pages/pricing.astro           | 44 ++++++++++++++++++++++++++++---
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro
index 159beab..dd7ffec 100644
--- a/src/components/widgets/FAQs.astro
+++ b/src/components/widgets/FAQs.astro
@@ -1,37 +1,33 @@
 ---
-import Headline from "~/components/ui/Headline.astro";
-import ItemGrid from "~/components/ui/ItemGrid.astro";
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
-import type { Faqs } from "~/types";
+import Headline from '~/components/ui/Headline.astro';
+import ItemGrid from '~/components/ui/ItemGrid.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import type { Faqs } from '~/types';
 
 const {
-  title = "",
-  subtitle = "",
-  tagline = "",
+  title = '',
+  subtitle = '',
+  tagline = '',
   items = [],
   columns = 2,
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props as Faqs;
 ---
 
-<WidgetWrapper
-  id={id}
-  isDark={isDark}
-  containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ""}`}
-  bg={bg}
->
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
   <Headline title={title} subtitle={subtitle} tagline={tagline} />
   <ItemGrid
     items={items}
     columns={columns}
     defaultIcon="tabler:chevron-right"
     classes={{
+      container: `${columns === 1 ? 'max-w-4xl' : ''} gap-y-8 md:gap-y-12`,
       panel: 'max-w-none',
-      icon: "flex-shrink-0 mt-1 w-6 h-6 text-primary",
+      icon: 'flex-shrink-0 mt-1 w-6 h-6 text-primary',
     }}
   />
 </WidgetWrapper>
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index a55840a..7926cc8 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
 import Prices from '~/components/widgets/Pricing.astro';
+import FAQs from '~/components/widgets/FAQs.astro';
 
 const metadata = {
   title: 'Pricing',
@@ -8,6 +9,8 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
+  <!-- Pricing Widget ******************* -->
+
   <Prices
     title="Our prices"
     subtitle="Only pay for what you need"
@@ -33,7 +36,7 @@ const metadata = {
         ],
         callToAction: {
           targetBlank: true,
-          text: 'Free 7-day trial',
+          text: 'Get started',
           href: '#',
         },
       },
@@ -61,7 +64,7 @@ const metadata = {
         ],
         callToAction: {
           targetBlank: true,
-          text: 'Free 15-day trial',
+          text: 'Get started',
           href: '#',
         },
         hasRibbon: true,
@@ -88,10 +91,45 @@ const metadata = {
         ],
         callToAction: {
           targetBlank: true,
-          text: 'Free 30-day trial',
+          text: 'Get started',
           href: '#',
         },
       },
     ]}
   />
+
+  <!-- FAQs Widget ******************* -->
+
+  <FAQs
+    title="Pricing FAQs"
+    subtitle="Choosing the right plan is important, and we're here to answer your questions. If you have queries about our pricing options, you're in the right place."
+    columns={1}
+    items={[
+      {
+        title: 'Do the plans come with customer support?',
+        description:
+          'Absolutely, all plans include access to our dedicated customer support to assist you with any queries or concerns.',
+      },
+      {
+        title: 'Is there a trial period for the different plans?',
+        description:
+          "Unfortunately, we don't offer trial periods for the plans. However, you can check out our demo section to preview the quality of our templates.",
+      },
+      {
+        title: 'Can I switch between plans?',
+        description:
+          'Certainly! You can easily upgrade or downgrade your plan, at any time, to find the one that best suits your evolving requirements.',
+      },
+      {
+        title: 'What payment methods do you accept?',
+        description:
+          'We accept major credit cards and online payment methods to ensure a convenient and secure transaction process.',
+      },
+      {
+        title: 'Are there any hidden fees beyond the displayed cost?',
+        description:
+          'No, the subscription cost covers all the features and templates listed under each plan. There are no hidden fees or extra charges.',
+      },
+    ]}
+  />
 </Layout>

From 7a0b780620dc17f554f6a37b81421822939ff108 Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Thu, 10 Aug 2023 11:46:50 +0200
Subject: [PATCH 3/5] Include Steps widget on pricing page

---
 src/pages/pricing.astro | 47 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 7926cc8..69af36b 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -2,6 +2,7 @@
 import Layout from '~/layouts/PageLayout.astro';
 import Prices from '~/components/widgets/Pricing.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
+import Steps from '~/components/widgets/Steps.astro';
 
 const metadata = {
   title: 'Pricing',
@@ -98,6 +99,52 @@ const metadata = {
     ]}
   />
 
+  <!-- Steps Widget ****************** -->
+
+  <Steps
+    title="A guided journey from plans to creativity"
+    tagline="simplified process"
+    isReversed={true}
+    items={[
+      {
+        title: 'Explore plans',
+        icon: 'tabler:number-1',
+      },
+      {
+        title: 'Select a plan',
+        icon: 'tabler:number-2',
+      },
+      {
+        title: 'Sign Up / Log In',
+        icon: 'tabler:number-3',
+      },
+      {
+        title: 'Review order',
+        icon: 'tabler:number-4',
+      },
+      {
+        title: 'Enter payment details',
+        icon: 'tabler:number-5',
+      },
+      {
+        title: 'Confirmation',
+        icon: 'tabler:number-6',
+      },
+      {
+        title: 'Confirmation',
+        icon: 'tabler:number-7',
+      },
+      {
+        title: 'Download and start using the template(s)',
+        icon: 'tabler:number-8',
+      },
+    ]}
+    image={{
+      src: import('~/assets/images/creativity.jpg'),
+      alt: 'Steps image',
+    }}
+  />
+
   <!-- FAQs Widget ******************* -->
 
   <FAQs

From c2b6887d6ddc3c7972038fbaff64bfe6cfc1e134 Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Thu, 10 Aug 2023 12:12:36 +0200
Subject: [PATCH 4/5] Include a Features3 widget in pricing page

---
 src/pages/pricing.astro | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 69af36b..ecfd95b 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -3,6 +3,7 @@ import Layout from '~/layouts/PageLayout.astro';
 import Prices from '~/components/widgets/Pricing.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
 import Steps from '~/components/widgets/Steps.astro';
+import Features3 from '~/components/widgets/Features3.astro';
 
 const metadata = {
   title: 'Pricing',
@@ -99,6 +100,46 @@ const metadata = {
     ]}
   />
 
+  <!-- Features3 Widget ************** -->
+
+  <Features3
+    title="Price-related features"
+    subtitle="To help you make informed decisions on the plans that best fit your budget and project requirements."
+    columns={3}
+    items={[
+      {
+        title: 'Tiered Pricing Plans',
+        description: 'Choose from a range of pricing plans designed to accommodate different budgets and requirements.',
+        icon: 'tabler:template',
+      },
+      {
+        title: 'Transparent Pricing',
+        description: 'Clearly displayed pricing details for each plan, with no hidden costs or unexpected charges.',
+        icon: 'tabler:template',
+      },
+      {
+        title: 'Secure Payment Methods',
+        description: 'Secure payment gateways to protect your financial information during transactions.',
+        icon: 'tabler:template',
+      },
+      {
+        title: 'Instant Access',
+        description: `Immediate access to your chosen plan's features and templates upon subscription.`,
+        icon: 'tabler:template',
+      },
+      {
+        title: 'Upgrade Value',
+        description: 'Upgrade to higher-tier plans to unlock more features and benefits for an enhanced experience.',
+        icon: 'tabler:template',
+      },
+      {
+        title: '24H support',
+        description: 'Questions answered via live chat, email or phone, every calendar day.',
+        icon: 'tabler:template',
+      },
+    ]}
+  />
+
   <!-- Steps Widget ****************** -->
 
   <Steps

From b9da7cf5c687ae1cfa7c4340bf3d982024ede7c4 Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Thu, 10 Aug 2023 12:18:43 +0200
Subject: [PATCH 5/5] Include a CallToAction widget on pricing page

---
 src/pages/pricing.astro | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index ecfd95b..3d0e8a1 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -4,6 +4,7 @@ import Prices from '~/components/widgets/Pricing.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
 import Steps from '~/components/widgets/Steps.astro';
 import Features3 from '~/components/widgets/Features3.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
   title: 'Pricing',
@@ -220,4 +221,15 @@ const metadata = {
       },
     ]}
   />
+
+  <!-- CallToAction Widget *********** -->
+
+  <CallToAction
+    title="Ready to boost your projects?"
+    subtitle="Join our community of satisfied customers who have transformed their work with our templates."
+    callToAction={{
+      text: 'Get started now',
+      href: '/',
+    }}
+  />
 </Layout>