From 15ef9ee3e034eafa60f316b8523fb7fca2c57c8d Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Thu, 27 Jul 2023 14:51:46 -0400
Subject: [PATCH] Start rearranging and simplifying widgets

---
 src/components/widgets/Content.astro   |  10 +-
 src/components/widgets/FAQs.astro      |  91 +++++----------
 src/components/widgets/Features.astro  | 102 ++++++----------
 src/components/widgets/Features2.astro | 103 +++++++---------
 src/components/widgets/Header.astro    |   1 +
 src/components/widgets/Pricing.astro   |  98 ++++++++++++++++
 src/components/widgets/Stats.astro     |  10 +-
 src/components/widgets/Steps.astro     |  75 +++++-------
 src/components/widgets/Steps2.astro    |   8 +-
 src/pages/index.astro                  | 155 ++++++++++++-------------
 src/pages/pricing.astro                |  96 ++++++++++++++-
 11 files changed, 419 insertions(+), 330 deletions(-)
 create mode 100644 src/components/widgets/Pricing.astro

diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index 3993cc7..ec7f878 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -11,7 +11,7 @@ interface Item {
 export interface Props {
   title?: string;
   subtitle?: string;
-  highlight?: string;
+  tagline?: string;
   content?: string;
   items?: Array<Item>;
   image?: string | any; // TODO: find HTMLElementProps
@@ -22,7 +22,7 @@ export interface Props {
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
-  highlight,
+  tagline,
   content = await Astro.slots.render('content'),
   items = [],
   image = await Astro.slots.render('image'),
@@ -34,12 +34,12 @@ const {
 <section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-slate-800 py-16 md:py-20 not-prose']}>
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
-      (title || subtitle || highlight) && (
+      (title || subtitle || tagline) && (
         <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
-          {highlight && (
+          {tagline && (
             <p
               class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
-              set:html={highlight}
+              set:html={tagline}
             />
           )}
           {title && (
diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro
index 7dec748..159beab 100644
--- a/src/components/widgets/FAQs.astro
+++ b/src/components/widgets/FAQs.astro
@@ -1,66 +1,37 @@
 ---
-import { Icon } from 'astro-icon/components';
-
-interface Item {
-  question: string;
-  answer: string;
-}
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  highlight?: string;
-  items: Array<Array<Item>>;
-}
+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 = await Astro.slots.render('title'),
-  subtitle = await Astro.slots.render('subtitle'),
-  highlight,
+  title = "",
+  subtitle = "",
+  tagline = "",
   items = [],
-} = Astro.props;
+  columns = 2,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render("bg"),
+} = Astro.props as Faqs;
 ---
 
-<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20 not-prose">
-  <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
-    {
-      (title || subtitle || highlight) && (
-        <div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
-          {highlight && (
-            <p
-              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
-              set:html={highlight}
-            />
-          )}
-          {title && (
-            <h2
-              class="max-w-lg mb-4 text-3xl font-bold leading-none md:tracking-tight sm:text-4xl md:mx-auto font-heading"
-              set:html={title}
-            />
-          )}
-          {subtitle && <p class="max-w-3xl mx-auto text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
-        </div>
-      )
-    }
-  </div>
-  <div class="max-w-7xl sm:mx-auto">
-    <div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
-      {
-        items &&
-          items.map((subitems) => (
-            <div class="space-y-8">
-              {subitems.map(({ question, answer }) => (
-                <div>
-                  <h3 class="mb-4 text-xl font-bold">
-                    <Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary inline-block" />
-                    {question}
-                  </h3>
-                  {answer && <div class="text-muted dark:text-gray-400" set:html={answer} />}
-                </div>
-              ))}
-            </div>
-          ))
-      }
-    </div>
-  </div>
-</div>
+<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={{
+      panel: 'max-w-none',
+      icon: "flex-shrink-0 mt-1 w-6 h-6 text-primary",
+    }}
+  />
+</WidgetWrapper>
diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro
index 59edd25..46d9bc0 100644
--- a/src/components/widgets/Features.astro
+++ b/src/components/widgets/Features.astro
@@ -1,71 +1,43 @@
 ---
-import { Icon } from 'astro-icon/components';
-
-interface Item {
-  title: string;
-  description: string;
-  icon?: string;
-}
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  highlight?: string;
-  items: Array<Array<Item>>;
-}
+import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import ItemGrid from "~/components/ui/ItemGrid.astro";
+import Headline from "~/components/ui/Headline.astro";
+import type { Features } from "~/types";
 
 const {
-  title = await Astro.slots.render('title'),
-  subtitle = await Astro.slots.render('subtitle'),
-  highlight,
+  title = await Astro.slots.render("title"),
+  subtitle = await Astro.slots.render("subtitle"),
+  tagline = await Astro.slots.render("tagline"),
   items = [],
-} = Astro.props;
+  columns = 2,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render("bg"),
+} = Astro.props as Features;
 ---
 
-<section class="scroll-mt-16 not-prose" id="features">
-  <div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
-    {
-      (title || subtitle || highlight) && (
-        <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
-          {highlight && (
-            <p
-              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
-              set:html={highlight}
-            />
-          )}
-          {title && (
-            <h2
-              class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
-              set:html={title}
-            />
-          )}
-
-          {subtitle && (
-            <p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
-          )}
-        </div>
-      )
-    }
-    <div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
-      {
-        items.map((subitems) => (
-          <div class="space-y-8 sm:px-8">
-            {subitems.map(({ title, description, icon }) => (
-              <div class="flex flex-row max-w-md">
-                <div class="mb-4 mr-4">
-                  <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary dark:bg-blue-700">
-                    {icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
-                  </div>
-                </div>
-                <div>
-                  <h3 class="mb-3 text-xl font-bold">{title}</h3>
-                  <p class="text-muted dark:text-slate-400" set:html={description} />
-                </div>
-              </div>
-            ))}
-          </div>
-        ))
-      }
-    </div>
-  </div>
-</section>
+<WidgetWrapper
+  id={id}
+  isDark={isDark}
+  containerClass={`max-w-5xl ${classes?.container ?? ""}`}
+  bg={bg}
+>
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline}
+  />
+  <ItemGrid
+    items={items}
+    columns={columns}
+    classes={{
+      container: "",
+      title: "md:text-[1.3rem]",
+      icon: "text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0",
+      ...((classes?.items as {}) ?? {}),
+    }}
+  />
+</WidgetWrapper>
diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro
index 8ab1f4a..68a3807 100644
--- a/src/components/widgets/Features2.astro
+++ b/src/components/widgets/Features2.astro
@@ -1,69 +1,46 @@
 ---
-import { Icon } from 'astro-icon/components';
-
-interface Item {
-  title?: string;
-  description?: string;
-  icon?: string;
-}
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  highlight?: string;
-  items: Array<Item>;
-}
+import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import Headline from "~/components/ui/Headline.astro";
+import ItemGrid2 from "~/components/ui/ItemGrid2.astro";
+import type { Features } from "~/types";
 
 const {
-  title = await Astro.slots.render('title'),
-  subtitle = await Astro.slots.render('subtitle'),
-  highlight,
+  title = await Astro.slots.render("title"),
+  subtitle = await Astro.slots.render("subtitle"),
+  tagline = await Astro.slots.render("tagline"),
   items = [],
-} = Astro.props;
+  columns = 3,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render("bg"),
+} = Astro.props as Features;
 ---
 
-<section class="relative not-prose">
-  <div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
-  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 -mb-12">
-    <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
-      {
-        (title || subtitle || highlight) && (
-          <div class="mb-8 md:mx-auto text-center max-w-3xl">
-            {highlight && (
-              <p
-                class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
-                set:html={highlight}
-              />
-            )}
-            {title && (
-              <h2
-                class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
-                set:html={title}
-              />
-            )}
-
-            {subtitle && (
-              <p
-                class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400"
-                set:html={subtitle}
-              />
-            )}
-          </div>
-        )
-      }
-      <div class={`grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 my-12 dark:text-white items-stretch`}>
-        {
-          items.map(({ title, description, icon }) => (
-            <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
-              <div class="flex items-center">
-                <Icon name={icon} class="w-10 h-10" />
-                <div class="ml-4 text-xl font-bold">{title}</div>
-              </div>
-              {description && <p class="text-muted dark:text-gray-400 text-md mt-4" set:html={description} />}
-            </div>
-          ))
-        }
-      </div>
-    </div>
-  </div>
-</section>
+<WidgetWrapper
+  id={id}
+  isDark={isDark}
+  containerClass={classes?.container}
+  bg={bg}
+>
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline}
+  />
+  <ItemGrid2
+    items={items}
+    columns={columns}
+    classes={{
+      container: "gap-4 md:gap-6",
+      panel:
+            'rounded-lg shadow-[0_4px_30px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur border border-[#ffffff29] bg-white dark:bg-slate-900 p-6',
+      // panel:
+      //   "text-center bg-page items-center md:text-left rtl:md:text-right md:items-start p-6 p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-800",
+      icon: "w-12 h-12 mb-6 text-primary",
+      ...((classes?.items as {}) ?? {}),
+    }}
+  />
+</WidgetWrapper>
diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index ce96c7e..9988db8 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -16,6 +16,7 @@ interface Link {
 
 interface ActionLink extends Link {
   class?: string;
+  type?: string;
 }
 
 interface MenuLink extends Link {
diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
new file mode 100644
index 0000000..aa8cf42
--- /dev/null
+++ b/src/components/widgets/Pricing.astro
@@ -0,0 +1,98 @@
+---
+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 = "",
+  prices = [],
+
+  id,
+  isDark = false,
+  classes = {},
+  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}
+>
+  <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"
+    >
+      {
+        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">
+                  {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-['']">
+                        {ribbonTitle}
+                      </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>
+                  {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>
+                  )}
+                </div>
+              </div>
+            )
+          )
+      }
+    </div>
+  </div>
+</WidgetWrapper>
diff --git a/src/components/widgets/Stats.astro b/src/components/widgets/Stats.astro
index a3f4235..9c1ae16 100644
--- a/src/components/widgets/Stats.astro
+++ b/src/components/widgets/Stats.astro
@@ -7,25 +7,25 @@ interface Item {
 export interface Props {
   title?: string;
   subtitle?: string;
-  highlight?: string;
+  tagline?: string;
   items?: Array<Item>;
 }
 
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
-  highlight,
+  tagline,
   items = [],
 } = Astro.props;
 ---
 
 <div class="px-4 py-4 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl not-prose">
   {
-    (title || subtitle || highlight) && (
+    (title || subtitle || tagline) && (
       <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
-        {highlight && (
+        {tagline && (
           <p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
-            {highlight}
+            {tagline}
           </p>
         )}
         {title && (
diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro
index 60e470d..936f6ac 100644
--- a/src/components/widgets/Steps.astro
+++ b/src/components/widgets/Steps.astro
@@ -1,58 +1,37 @@
 ---
-import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
-
-interface Item {
-  title: string;
-  description?: string;
-  icon?: string;
-}
-
-export interface Props {
-  title?: string;
-  items: Array<Item>;
-  image?: string | any; // TODO: find HTMLElementProps
-}
+import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import Timeline from "~/components/ui/Timeline.astro";
+import Headline from "~/components/ui/Headline.astro";
+import type { Steps } from "~/types";
 
 const {
-  title = await Astro.slots.render('title'),
+  title = await Astro.slots.render("title"),
+  subtitle = await Astro.slots.render("subtitle"),
+  tagline = await Astro.slots.render("tagline"),
   items = [],
-  image = await Astro.slots.render('image'),
-} = Astro.props;
+  image = await Astro.slots.render("image"),
+  isReversed = false,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render("bg"),
+} = Astro.props as Steps;
 ---
 
-<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl not-prose">
-  <div class="grid gap-6 row-gap-10 md:grid-cols-2">
-    <div class="md:py-4 md:pr-16 mb-4 md:mb-0">
-      {title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
-      {
-        items &&
-          items.length &&
-          items.map(({ title, description, icon }, index) => (
-            <div class="flex">
-              <div class="flex flex-col items-center mr-4">
-                <div>
-                  {index !== items.length - 1 ? (
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary dark:border-blue-700 border-2">
-                      {icon && <Icon name={icon} class="w-6 h-6 text-primary dark:text-slate-200" />}
-                    </div>
-                  ) : (
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary border-2 bg-primary dark:bg-blue-700 dark:border-blue-700">
-                      <Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
-                    </div>
-                  )}
-                </div>
-                <div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
-              </div>
-              <div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
-                {title && <p class="mb-2 text-xl font-bold dark:text-slate-300" set:html={title} />}
-                {description && <p class="text-muted dark:text-slate-400" set:html={description} />}
-              </div>
-            </div>
-          ))
-      }
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl ${classes?.container ?? ""}`} bg={bg}>
+  <div class:list={["flex flex-col gap-8 md:gap-12 md:flex-row", { "md:flex-row-reverse": isReversed }]}>
+    <div class="md:py-4 md:basis-1/2 md:self-center">
+      <Headline
+        title={title}
+        subtitle={subtitle}
+        tagline={tagline}
+        classes={{ container: "text-left", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }}
+      />
+      <Timeline items={items} classes={classes?.items as {}} />
     </div>
-    <div class="relative">
+    <div class="relative md:basis-1/2">
       {
         image &&
           (typeof image === 'string' ? (
@@ -71,4 +50,4 @@ const {
       }
     </div>
   </div>
-</section>
+</WidgetWrapper>
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index b93d3d0..f930e71 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -11,7 +11,7 @@ interface Item {
 export interface Props {
   title?: string;
   subtitle?: string;
-  highlight?: string;
+  tagline?: string;
   callToAction?: string | CallToAction;
   items: Array<Item>;
 }
@@ -19,7 +19,7 @@ export interface Props {
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
-  highlight,
+  tagline,
   callToAction = await Astro.slots.render('callToAction'),
   items = [],
 } = Astro.props;
@@ -66,10 +66,10 @@ const {
           <div class="w-full lg:w-1/2 px-0 sm:px-8 mb-12">
             <div>
               {
-                highlight && (
+                tagline && (
                   <p
                     class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
-                    set:html={highlight}
+                    set:html={tagline}
                   />
                 )
               }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b9efb44..9640487 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -49,57 +49,54 @@ const meta = {
   <!-- Features Widget *************** -->
 
   <Features
-    highlight="Features"
+    id="features"
+    tagline="Features"
     title="What you get with AstroWind"
     subtitle="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae."
     items={[
-      [
-        {
-          title: 'Astro + Tailwind CSS Integration',
-          description:
-            'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
-          icon: 'tabler:brand-tailwind',
-        },
-        {
-          title: 'Ready-to-use Components',
-          description:
-            'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
-          icon: 'tabler:components',
-        },
-        {
-          title: 'Best Practices',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
-          icon: 'tabler:list-check',
-        },
-      ],
-      [
-        {
-          title: 'Excellent Page Speed',
-          description:
-            'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
-          icon: 'tabler:rocket',
-        },
-        {
-          title: 'Search Engine Optimization (SEO)',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
-          icon: 'tabler:arrows-right-left',
-        },
-        {
-          title: 'Open to new ideas and contributions',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
-          icon: 'tabler:bulb',
-        },
-      ],
+      {
+        title: 'Astro + Tailwind CSS Integration',
+        description:
+          'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
+        icon: 'tabler:brand-tailwind',
+      },
+      {
+        title: 'Ready-to-use Components',
+        description:
+          'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
+        icon: 'tabler:components',
+      },
+      {
+        title: 'Best Practices',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+        icon: 'tabler:list-check',
+      },
+      {
+        title: 'Excellent Page Speed',
+        description:
+          'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
+        icon: 'tabler:rocket',
+      },
+      {
+        title: 'Search Engine Optimization (SEO)',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+        icon: 'tabler:arrows-right-left',
+      },
+      {
+        title: 'Open to new ideas and contributions',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+        icon: 'tabler:bulb',
+      },
     ]}
   />
 
   <!-- Content Widget **************** -->
 
   <Content
-    highlight="Inside template"
+    tagline="Inside template"
     title="And what's inside? ..."
     items={[
       {
@@ -200,7 +197,7 @@ const meta = {
   <Features2
     title="Most used widgets"
     subtitle="Provides frequently used components for building websites using Tailwind CSS"
-    highlight="Components"
+    tagline="Components"
     items={[
       {
         title: 'Headers',
@@ -257,7 +254,11 @@ const meta = {
         icon: 'flat-color-icons:database',
       },
     ]}
-  />
+  >
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Features2>
 
   <!-- HighlightedPosts Widget ******* -->
 
@@ -274,42 +275,38 @@ const meta = {
   <FAQs
     title="Frequently Asked Questions"
     subtitle="Duis turpis dui, fringilla mattis sem nec, fringilla euismod neque. Morbi tincidunt lacus nec tortor scelerisque pulvinar."
-    highlight="FAQs"
+    tagline="FAQs"
     items={[
-      [
-        {
-          question: 'What do I need to start?',
-          answer:
-            'Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds. Many say exploration is part of our destiny, but it’s actually our duty to future generations.',
-        },
-        {
-          question: 'How to install the Astro + Tailwind CSS template?',
-          answer:
-            "Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.",
-        },
-        {
-          question: "What's something that you don't understand?",
-          answer:
-            "A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.",
-        },
-      ],
-      [
-        {
-          question: "What's an example of when you changed your mind?",
-          answer:
-            "Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.",
-        },
-        {
-          question: 'What is something that you would like to try again?',
-          answer:
-            "A business big enough that it could be listed on the NASDAQ goes belly up. Disappears! It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.",
-        },
-        {
-          question: 'If you could only ask one question to each person you meet, what would that question be?',
-          answer:
-            "This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.",
-        },
-      ],
+      {
+        title: 'What do I need to start?',
+        description:
+          'Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds. Many say exploration is part of our destiny, but it’s actually our duty to future generations.',
+      },
+      {
+        title: 'How to install the Astro + Tailwind CSS template?',
+        description:
+          "Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.",
+      },
+      {
+        title: "What's something that you don't understand?",
+        description:
+          "A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.",
+      },
+      {
+        title: "What's an example of when you changed your mind?",
+        description:
+          "Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.",
+      },
+      {
+        title: 'What is something that you would like to try again?',
+        description:
+          "A business big enough that it could be listed on the NASDAQ goes belly up. Disappears! It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.",
+      },
+      {
+        title: 'If you could only ask one question to each person you meet, what would that question be?',
+        description:
+          "This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.",
+      },
     ]}
   />
 
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index a4bd960..6fb9d10 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -1,11 +1,105 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
 
+import Pricing from '~/components/widgets/Pricing.astro';
+
 const meta = {
   title: "Pricing",
 };
 ---
 
 <Layout {meta}>
-  Pricing
+  <Pricing
+    title="Basic Pricing"
+    tagline="Pricing"
+    subtitle="Our prices"
+    prices={[
+      {
+        "title": "basic",
+        "price": 29,
+        "period": "Per Month",
+        "items": [
+          {
+            "description": "Etiam in libero",
+            "icon": "tabler:check"
+          },
+          {
+            "description": "Aenean ac nunc",
+            "icon": "tabler:check"
+          },
+          {
+            "description": "Cras scelerisque accumsan libero, et volutpat dolor tristique at",
+            "icon": "tabler:check"
+          },
+          {
+            "description": "In hac habitasse",
+            "icon": "tabler:check"
+          }
+        ],
+        "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": "#"
+        },
+        "hasRibbon": true,
+        "ribbonTitle": "popular"
+      },
+      {
+        "title": "premium",
+        "price": 199,
+        "period": "Per Month",
+        "items": [
+          {
+            "description": "Curabitur suscipit risus",
+            "icon": "tabler:check"
+          },
+          {
+            "description": "Aliquam blandit malesuada",
+            "icon": "tabler:check"
+          },
+          {
+            "description": "Suspendisse sit amet",
+            "icon": "tabler:check"
+          },
+          {
+            "description": "Suspendisse auctor dui",
+            "icon": "tabler:check"
+          }
+        ],
+        "callToAction": {
+          "targetBlank": true,
+          "text": "Free 30-day trial",
+          "href": "#"
+        }
+      }
+    ]}
+  />
 </Layout>