Merge pull request #217 from widgeter/main

Fill out pricing page

src/components/widgets/FAQs.astro

@@ -1,37 +1,33 @@
 ---
-import Headline from "~/components/ui/Headline.astro";
+import Headline from '~/components/ui/Headline.astro';
-import ItemGrid from "~/components/ui/ItemGrid.astro";
+import ItemGrid from '~/components/ui/ItemGrid.astro';
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Faqs } from "~/types";
+import type { Faqs } from '~/types';
 
 const {
-  title = "",
+  title = '',
-  subtitle = "",
+  subtitle = '',
-  tagline = "",
+  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
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
-  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>

src/components/widgets/Pricing.astro

@@ -1,48 +1,33 @@
 ---
-import { Icon } from "astro-icon/components";
+import { Icon } from 'astro-icon/components';
-import CTA from "~/components/ui/CTA.astro";
+import CTA from '~/components/ui/CTA.astro';
-import Headline from "~/components/ui/Headline.astro";
+import Headline from '~/components/ui/Headline.astro';
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Pricing } from "~/types";
+import type { Pricing } from '~/types';
 
 const {
-  title = "",
+  title = '',
-  subtitle = "",
+  subtitle = '',
-  tagline = "",
+  tagline = '',
   prices = [],
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props as Pricing;
 ---
 
-<WidgetWrapper
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
-  id={id}
-  isDark={isDark}
-  containerClass={`max-w-6xl mx-auto ${classes?.container ?? ""}`}
-  bg={bg}
->
   <Headline title={title} subtitle={subtitle} tagline={tagline} />
   <div class="flex items-stretch justify-center">
-    <div
+    <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">
-      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"
-    >
       {
         prices &&
-          prices.map(
+          prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
-            ({
-              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">
+              {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">
+                  <div 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 && (
-                      {title}
+                      <h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3>
-                    </li>
+                    )}
-                    <li class="mt-5 mb-2.5 flex items-center justify-center text-center font-semibold">
+                    {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">{price}</span>
+                        <span class="text-6xl font-extrabold">{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}
+                      <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">
+                    <div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}>
-                      <CTA
+                      {typeof callToAction === 'string' ? (
-                        callToAction={callToAction}
+                        <Fragment set:html={callToAction} />
-                        class={`mt-8 ${
+                      ) : (
-                          hasRibbon
+                        callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} />
-                            ? "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>
                   )}
                 </div>
+              )}
             </div>
-            )
+          ))
-          )
       }
     </div>
   </div>

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',

src/pages/pricing.astro

@@ -1,105 +1,235 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
-
+import Prices from '~/components/widgets/Pricing.astro';
-import Pricing 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",
+  title: 'Pricing',
 };
 ---
 
 <Layout metadata={metadata}>
-  <Pricing
+  <!-- Pricing Widget ******************* -->
-    title="Basic Pricing"
+
-    tagline="Pricing"
+  <Prices
-    subtitle="Our prices"
+    title="Our prices"
+    subtitle="Only pay for what you need"
     prices={[
       {
-        "title": "basic",
+        title: 'basic',
-        "price": 29,
+        subtitle: 'Optimal choice for personal use',
-        "period": "Per Month",
+        price: 29,
-        "items": [
+        period: 'per month',
+        items: [
           {
-            "description": "Etiam in libero",
+            description: 'Etiam in libero, et volutpat',
-            "icon": "tabler:check"
           },
           {
-            "description": "Aenean ac nunc",
+            description: 'Aenean ac nunc dolor tristique',
-            "icon": "tabler:check"
           },
           {
-            "description": "Cras scelerisque accumsan libero, et volutpat dolor tristique at",
+            description: 'Cras scelerisque accumsan lib',
-            "icon": "tabler:check"
           },
           {
-            "description": "In hac habitasse",
+            description: 'In hac habitasse',
-            "icon": "tabler:check"
+          },
-          }
         ],
-        "callToAction": {
+        callToAction: {
-          "targetBlank": true,
+          targetBlank: true,
-          "text": "Free 7-day trial",
+          text: 'Get started',
-          "href": "#"
+          href: '#',
-        }
+        },
       },
       {
-        "title": "standard",
+        title: 'standard',
-        "price": 69,
+        subtitle: 'Optimal choice for small teams',
-        "period": "Per Month",
+        price: 69,
-        "items": [
+        period: 'Per Month',
+        items: [
           {
-            "description": "Proin vel laoreet",
+            description: 'Proin vel laoreet',
-            "icon": "tabler:check"
           },
           {
-            "description": "Ut efficitur egestas",
+            description: 'Ut efficitur habitasse egestas',
-            "icon": "tabler:check"
           },
           {
-            "description": "Pellentesque ut nibh",
+            description: 'Volutpat hac curabitur',
-            "icon": "tabler:check"
           },
           {
-            "description": "Donec fringilla sem",
+            description: 'Pellentesque blandit ut nibh',
-            "icon": "tabler:check"
+          },
-          }
+          {
+            description: 'Donec fringilla sem',
+          },
         ],
-        "callToAction": {
+        callToAction: {
-          "targetBlank": true,
+          targetBlank: true,
-          "text": "Free 15-day trial",
+          text: 'Get started',
-          "href": "#"
+          href: '#',
         },
-        "hasRibbon": true,
+        hasRibbon: true,
-        "ribbonTitle": "popular"
+        ribbonTitle: 'popular',
       },
       {
-        "title": "premium",
+        title: 'premium',
-        "price": 199,
+        subtitle: 'Optimal choice for companies',
-        "period": "Per Month",
+        price: 199,
-        "items": [
+        period: 'Per Month',
+        items: [
           {
-            "description": "Curabitur suscipit risus",
+            description: 'Curabitur suscipit risus',
-            "icon": "tabler:check"
           },
           {
-            "description": "Aliquam blandit malesuada",
+            description: 'Aliquam habitasse malesuada',
-            "icon": "tabler:check"
           },
           {
-            "description": "Suspendisse sit amet",
+            description: 'Suspendisse sit amet blandit',
-            "icon": "tabler:check"
           },
           {
-            "description": "Suspendisse auctor dui",
+            description: 'Suspendisse auctor blandit dui',
-            "icon": "tabler:check"
+          },
-          }
         ],
-        "callToAction": {
+        callToAction: {
-          "targetBlank": true,
+          targetBlank: true,
-          "text": "Free 30-day trial",
+          text: 'Get started',
-          "href": "#"
+          href: '#',
-        }
+        },
-      }
+      },
     ]}
   />
+
+  <!-- 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
+    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
+    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.',
+      },
+    ]}
+  />
+
+  <!-- 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>

src/types.d.ts

@@ -135,6 +135,7 @@ export interface Item {
 
 export interface Price {
   title?: string;
+  subtitle?: string;
   description?: string;
   price?: number;
   period?: string;