From 56d6f6c0ccc1e99c6404631203d547798c16809d Mon Sep 17 00:00:00 2001
From: Sergey Bedritsky <sergey.bedritsky@gmail.com>
Date: Tue, 18 May 2021 13:49:03 +0300
Subject: [PATCH 1/5] feat: init Pricing template

---
 .prettierignore                               |  1 +
 docs/content/templates/pricing.md             | 12 +++
 .../components/organisms/PreLaunchHero.vue    | 87 +++++++++++++++++--
 .../components/organisms/PricingBlock.vue     | 85 ++++++++++++++++++
 .../components/templates/Pricing.vue          | 18 ++++
 5 files changed, 196 insertions(+), 7 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 docs/content/templates/pricing.md
 create mode 100644 src/defaultTheme/components/organisms/PricingBlock.vue
 create mode 100644 src/defaultTheme/components/templates/Pricing.vue

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..2e1fa2d52
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+*.md
\ No newline at end of file
diff --git a/docs/content/templates/pricing.md b/docs/content/templates/pricing.md
new file mode 100644
index 000000000..31950d39c
--- /dev/null
+++ b/docs/content/templates/pricing.md
@@ -0,0 +1,12 @@
+---
+template: pricing
+---
+
+:::pricing-block{yml}
+plans:
+  - free:
+    - price: Not working
+  - starter
+  - pro
+:::
+ 
\ No newline at end of file
diff --git a/src/defaultTheme/components/organisms/PreLaunchHero.vue b/src/defaultTheme/components/organisms/PreLaunchHero.vue
index 7794ad1a9..529ee3c98 100644
--- a/src/defaultTheme/components/organisms/PreLaunchHero.vue
+++ b/src/defaultTheme/components/organisms/PreLaunchHero.vue
@@ -3,17 +3,53 @@
     <div class="w-full md:w-1/2 flex flex-col justify-center mb-8 md:mb-0">
       <div class="flex flex-col items-center md:items-start mb-2">
         <span
-          class="mx-2 text-xs mb-4 text-primary-500 px-2.5 py-1.5 leading-none rounded font-semibold uppercase tracking-wide bg-primary-100 dark:bg-primary-900 dark:text-primary-400"
+          class="
+            mx-2
+            text-xs
+            mb-4
+            text-primary-500
+            px-2.5
+            py-1.5
+            leading-none
+            rounded
+            font-semibold
+            uppercase
+            tracking-wide
+            bg-primary-100
+            dark:bg-primary-900
+            dark:text-primary-400
+          "
         >
           🚀 Coming Soon
         </span>
         <h2
-          class="mb-2 text-5xl font-semibold sm:leading-none tracking-tighter text-center text-gray-900 md:text-left dark:text-gray-100 sm:text-6xl lg:text-7xl sm:mb-4"
+          class="
+            mb-2
+            text-5xl
+            font-semibold
+            sm:leading-none
+            tracking-tighter
+            text-center text-gray-900
+            md:text-left
+            dark:text-gray-100
+            sm:text-6xl
+            lg:text-7xl
+            sm:mb-4
+          "
         >
           {{ title }}
         </h2>
         <p
-          class="mb-2 text-base text-center text-gray-700 md:text-left sm:text-xl xl:text-2xl leading-base sm:mb-4 dark:text-gray-300"
+          class="
+            mb-2
+            text-base text-center text-gray-700
+            md:text-left
+            sm:text-xl
+            xl:text-2xl
+            leading-base
+            sm:mb-4
+            dark:text-gray-300
+          "
         >
           {{ description }}
         </p>
@@ -25,15 +61,52 @@
             {{ cta.description }}
           </p>
           <div
-            class="flex flex-col md:flex-row border border-gray-300 placeholder-gray-900 dark:border-gray-700 rounded-md p-1 w-full mb-2"
+            class="
+              flex flex-col
+              md:flex-row
+              border border-gray-300
+              placeholder-gray-900
+              dark:border-gray-700
+              rounded-md
+              p-1
+              w-full
+              mb-2
+            "
           >
             <input
               type="text"
-              :placeholder="cta.placeholder"
-              class="flex-1 py-3 px-3 focus:outline-none bg-transparent dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-600"
+              :placeholder="ctaPlaceholder"
+              class="
+                flex-1
+                py-3
+                px-3
+                focus:outline-none
+                bg-transparent
+                dark:text-gray-100
+                placeholder-gray-400
+                dark:placeholder-gray-600
+              "
             />
             <button
-              class="inline-block font-semibold text-center items-center flex-none px-6 py-3 text-lg leading-6 rounded-md text-white transition-colors duration-200 border border-transparent border-l-0 bg-primary-500 hover:bg-primary-600 focus:outline-none"
+              class="
+                inline-block
+                font-semibold
+                text-center
+                items-center
+                flex-none
+                px-6
+                py-3
+                text-lg
+                leading-6
+                rounded-md
+                text-white
+                transition-colors
+                duration-200
+                border border-transparent border-l-0
+                bg-primary-500
+                hover:bg-primary-600
+                focus:outline-none
+              "
             >
               {{ cta.label }}
             </button>
diff --git a/src/defaultTheme/components/organisms/PricingBlock.vue b/src/defaultTheme/components/organisms/PricingBlock.vue
new file mode 100644
index 000000000..c7edf1b53
--- /dev/null
+++ b/src/defaultTheme/components/organisms/PricingBlock.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    {{ selectedPlan }}
+    <button
+      v-for="(value, plan) in mock.plans"
+      :key="plan"
+      :class="{
+        'bg-red-500': selectedPlan === plan
+      }"
+      @click="selectedPlan = plan"
+    >
+      {{ plan }}
+    </button>
+    <div
+      v-for="(value, tier) in mock.tiers"
+      :key="tier"
+      :class="{
+        'bg-red-500': selectedTier === tier
+      }"
+      @click="selectedTier = tier"
+    >
+      {{ value.title }}
+    </div>
+    <div>TOTAL: {{ mock.tiers[selectedTier].price[selectedPlan] }}</div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    plans: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup() {
+    const mock = {
+      plans: {
+        monthly: {},
+        annual: {
+          selected: true
+        }
+      },
+      tiers: {
+        free: {
+          price: {
+            monthly: 0,
+            annual: 0
+          },
+          title: 'Free',
+          description: 'Our Free plan'
+        },
+        starter: {
+          price: {
+            monthly: 10,
+            annual: 100
+          },
+          title: 'Starter',
+          description: 'Our Starter plan',
+          selected: true
+        },
+        pro: {
+          price: {
+            monthly: 100,
+            annual: 1000
+          },
+          title: 'Pro',
+          description: 'Our Pro plan'
+        }
+      }
+    }
+    let selectedPlan = null
+    let selectedTier = null
+    Object.keys(mock.plans).forEach(plan => {
+      if (mock.plans[plan].selected) selectedPlan = plan
+    })
+    Object.keys(mock.tiers).forEach(tier => {
+      if (mock.tiers[tier].selected) selectedTier = tier
+    })
+    return { mock, selectedPlan, selectedTier }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/templates/Pricing.vue b/src/defaultTheme/components/templates/Pricing.vue
new file mode 100644
index 000000000..e5694320b
--- /dev/null
+++ b/src/defaultTheme/components/templates/Pricing.vue
@@ -0,0 +1,18 @@
+<template>
+  <AppContainer fluid :footer="false">
+    <NuxtContent :document="page" />
+  </AppContainer>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    page: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>

From 0244ad8d6b990ae1ea0f4fb69a505e6ba819a66a Mon Sep 17 00:00:00 2001
From: Sergey Bedritsky <sergey.bedritsky@gmail.com>
Date: Wed, 19 May 2021 19:05:30 +0300
Subject: [PATCH 2/5] feat: Pricing template

---
 docs/content/templates/pricing.md             |  55 +++-
 .../components/atoms/icons/IconCheck.vue      |  10 +-
 .../components/organisms/PreLaunchHero.vue    |   1 +
 .../components/organisms/PricingBlock.vue     | 255 +++++++++++++-----
 4 files changed, 244 insertions(+), 77 deletions(-)

diff --git a/docs/content/templates/pricing.md b/docs/content/templates/pricing.md
index 31950d39c..b23ae04aa 100644
--- a/docs/content/templates/pricing.md
+++ b/docs/content/templates/pricing.md
@@ -3,10 +3,57 @@ template: pricing
 ---
 
 :::pricing-block{yml}
+
 plans:
-  - free:
-    - price: Not working
-  - starter
-  - pro
+  monthly:
+    base: true
+    title: Month
+    label: Monthly
+  annual:
+    title: Year
+    label: Yearly
+    preSelected: true
+    divider: 12
+
+tiers:
+  free:
+    price: 
+      monthly: 0
+      annual: 0
+    title: Free
+    description: Our Free plan description
+    features:
+      - Feature One
+      - Feature Two
+  starter:
+    preSelected: true
+    price: 
+      monthly: 10
+      annual: 100
+    title: Starter
+    description: Our Starter plan pretty long multiline description
+    features:
+      - All Free Tier features
+      - Feature Three
+      - Feature Four
+  pro:
+    price: 
+      monthly: 100
+      annual: 1000
+    title: Pro
+    description: Our Pro plan description
+    features:
+      - All Starter Tier features
+      - Feature Five
+      - Feature Six
+
+meta: 
+  currency: $
+  featuresTitle: 'Included features:'
+  buttonText: Choose plan
+  preSelectedBadge: Popular
+  checkoutText: 'Total:'
+  checkoutButtonText: Checkout
+
 :::
  
\ No newline at end of file
diff --git a/src/defaultTheme/components/atoms/icons/IconCheck.vue b/src/defaultTheme/components/atoms/icons/IconCheck.vue
index a3f46bc15..5268b5cfa 100644
--- a/src/defaultTheme/components/atoms/icons/IconCheck.vue
+++ b/src/defaultTheme/components/atoms/icons/IconCheck.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M19.5 6L9 18L4.5 13.5"
-      stroke="currentColor"
-      stroke-width="1.55625"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
   </svg>
 </template>
diff --git a/src/defaultTheme/components/organisms/PreLaunchHero.vue b/src/defaultTheme/components/organisms/PreLaunchHero.vue
index 529ee3c98..ef2bc0779 100644
--- a/src/defaultTheme/components/organisms/PreLaunchHero.vue
+++ b/src/defaultTheme/components/organisms/PreLaunchHero.vue
@@ -106,6 +106,7 @@
                 bg-primary-500
                 hover:bg-primary-600
                 focus:outline-none
+                select-none
               "
             >
               {{ cta.label }}
diff --git a/src/defaultTheme/components/organisms/PricingBlock.vue b/src/defaultTheme/components/organisms/PricingBlock.vue
index c7edf1b53..26bf204ac 100644
--- a/src/defaultTheme/components/organisms/PricingBlock.vue
+++ b/src/defaultTheme/components/organisms/PricingBlock.vue
@@ -1,27 +1,171 @@
 <template>
-  <div>
-    {{ selectedPlan }}
-    <button
-      v-for="(value, plan) in mock.plans"
-      :key="plan"
-      :class="{
-        'bg-red-500': selectedPlan === plan
-      }"
-      @click="selectedPlan = plan"
-    >
-      {{ plan }}
-    </button>
-    <div
-      v-for="(value, tier) in mock.tiers"
-      :key="tier"
-      :class="{
-        'bg-red-500': selectedTier === tier
-      }"
-      @click="selectedTier = tier"
-    >
-      {{ value.title }}
+  <div class="px-2 my-12 md:my-24">
+    <div class="flex items-center justify-center my-2 md:my-8">
+      <div class="bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
+        <button
+          v-for="(plan, planName) in plans"
+          :key="planName"
+          class="
+            inline-block
+            font-medium
+            text-center
+            items-center
+            flex-none
+            px-2
+            py-1
+            text-sm
+            rounded-md
+            border border-transparent border-l-0
+            focus:outline-none
+            select-none
+          "
+          :class="[
+            selectedPlan === planName
+              ? 'bg-white dark:bg-gray-600 shadow-sm text-gray-700 dark:text-gray-300'
+              : 'text-gray-500 dark:text-gray-400'
+          ]"
+          @click="selectedPlan = planName"
+        >
+          {{ plan.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col md:flex-row justify-center items-center md:items-stretch flex-wrap my-2 md:my-8">
+      <div v-for="(tier, tierName) in tiers" :key="tierName" class="w-full md:w-1/3 p-2 max-w-md">
+        <div
+          class="border rounded-lg flex flex-col p-4 h-full relative"
+          :class="[
+            selectedTier === tierName
+              ? 'bg-primary-500 border-primary-500 text-white'
+              : 'border-gray-200 dark:border-gray-700'
+          ]"
+        >
+          <span
+            v-if="tier.preSelected"
+            class="
+              absolute
+              top-0
+              left-1/2
+              transform
+              -translate-x-1/2 -translate-y-1/2
+              text-xs text-primary-500
+              px-2.5
+              py-1.5
+              leading-none
+              rounded
+              font-semibold
+              uppercase
+              tracking-wide
+              bg-primary-100
+              dark:bg-primary-900
+              dark:text-primary-400
+            "
+          >
+            {{ meta.preSelectedBadge }}
+          </span>
+
+          <div class="flex justify-center text-2xl font-semibold my-2 text-center">
+            {{ tier.title }}
+          </div>
+          <div
+            class="flex justify-center text-center mb-8"
+            :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500']"
+          >
+            {{ tier.description }}
+          </div>
+
+          <div class="flex justify-center mb-8">
+            <div class="font-medium" :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']">
+              {{ meta.currency }}
+            </div>
+            <div class="font-bold text-5xl leading-none tracking-tighter">
+              {{ plans[selectedPlan] && plans[selectedPlan].divider ? getBasePricing(tier) : tier.price[selectedPlan] }}
+            </div>
+            <div
+              class="self-end lowercase font-medium"
+              :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']"
+            >
+              /{{ plans[basePlan].title }}
+            </div>
+          </div>
+
+          <div class="mb-8">
+            <div class="font-medium mb-2">{{ meta.featuresTitle }}</div>
+            <ul>
+              <li
+                v-for="feature in tier.features"
+                :key="feature"
+                class="flex items-center py-0.5"
+                :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500 dark:text-gray-400']"
+              >
+                <IconCheck class="w-4 h-4 mr-2" />
+                <span>{{ feature }}</span>
+              </li>
+            </ul>
+          </div>
+          <div class="flex items-end flex-1">
+            <button
+              class="
+                inline-block
+                w-full
+                font-semibold
+                text-center
+                items-center
+                flex-none
+                px-6
+                py-3
+                text-lg
+                leading-6
+                rounded-md
+                border border-transparent border-l-0
+                focus:outline-none
+                select-none
+              "
+              :class="[
+                selectedTier === tierName
+                  ? 'bg-primary-50 hover:bg-primary-100 text-primary-500'
+                  : 'bg-primary-500 hover:bg-primary-600 text-white'
+              ]"
+              @click="selectedTier = tierName"
+            >
+              {{ meta.buttonText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-center">
+      <div class="flex flex-col items-center mb-4">
+        <div class="text-gray-500">{{ meta.checkoutText }}</div>
+        <div class="font-bold text-4xl tracking-tighter">
+          {{ tiers[selectedTier].price[selectedPlan] }}{{ meta.currency }}
+        </div>
+      </div>
+      <button
+        class="
+          inline-block
+          font-semibold
+          text-center
+          items-center
+          flex-none
+          px-6
+          py-3
+          text-lg
+          leading-6
+          rounded-md
+          border border-transparent border-l-0
+          focus:outline-none
+          select-none
+          bg-primary-500
+          hover:bg-primary-600
+          text-white
+        "
+      >
+        {{ meta.checkoutButtonText }}
+      </button>
     </div>
-    <div>TOTAL: {{ mock.tiers[selectedTier].price[selectedPlan] }}</div>
   </div>
 </template>
 
@@ -31,55 +175,36 @@ import { defineComponent } from '@nuxtjs/composition-api'
 export default defineComponent({
   props: {
     plans: {
-      type: Array,
-      default: () => []
+      type: Object,
+      default: () => {}
+    },
+    tiers: {
+      type: Object,
+      default: () => {}
+    },
+    meta: {
+      type: Object,
+      default: () => {}
     }
   },
-  setup() {
-    const mock = {
-      plans: {
-        monthly: {},
-        annual: {
-          selected: true
-        }
-      },
-      tiers: {
-        free: {
-          price: {
-            monthly: 0,
-            annual: 0
-          },
-          title: 'Free',
-          description: 'Our Free plan'
-        },
-        starter: {
-          price: {
-            monthly: 10,
-            annual: 100
-          },
-          title: 'Starter',
-          description: 'Our Starter plan',
-          selected: true
-        },
-        pro: {
-          price: {
-            monthly: 100,
-            annual: 1000
-          },
-          title: 'Pro',
-          description: 'Our Pro plan'
-        }
-      }
-    }
+  setup(props) {
     let selectedPlan = null
+    let basePlan = null
     let selectedTier = null
-    Object.keys(mock.plans).forEach(plan => {
-      if (mock.plans[plan].selected) selectedPlan = plan
+    function getBasePricing(tier) {
+      const price = tier.price[selectedPlan] / props.plans[selectedPlan].divider
+      return price > 0 ? price.toFixed(2) : 0
+    }
+    Object.keys(props.plans).forEach(plan => {
+      if (props.plans[plan] && props.plans[plan].preSelected) selectedPlan = plan
+    })
+    Object.keys(props.plans).forEach(plan => {
+      if (props.plans[plan] && props.plans[plan].base) basePlan = plan
     })
-    Object.keys(mock.tiers).forEach(tier => {
-      if (mock.tiers[tier].selected) selectedTier = tier
+    Object.keys(props.tiers).forEach(tier => {
+      if (props.tiers[tier] && props.tiers[tier].preSelected) selectedTier = tier
     })
-    return { mock, selectedPlan, selectedTier }
+    return { selectedPlan, selectedTier, getBasePricing, basePlan }
   }
 })
 </script>

From 404d13386c7cf7f686fe128e5f0b3f6377d3c671 Mon Sep 17 00:00:00 2001
From: Sergey Bedritsky <sergey.bedritsky@gmail.com>
Date: Wed, 19 May 2021 19:20:53 +0300
Subject: [PATCH 3/5] fix: improvements

---
 .../components/organisms/PricingBlock.vue        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/defaultTheme/components/organisms/PricingBlock.vue b/src/defaultTheme/components/organisms/PricingBlock.vue
index 26bf204ac..adccec054 100644
--- a/src/defaultTheme/components/organisms/PricingBlock.vue
+++ b/src/defaultTheme/components/organisms/PricingBlock.vue
@@ -76,17 +76,17 @@
           </div>
 
           <div class="flex justify-center mb-8">
-            <div class="font-medium" :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']">
+            <div class="font-medium mr-1" :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']">
               {{ meta.currency }}
             </div>
-            <div class="font-bold text-5xl leading-none tracking-tighter">
+            <div class="font-bold text-5xl leading-none tracking-tighter mr-1">
               {{ plans[selectedPlan] && plans[selectedPlan].divider ? getBasePricing(tier) : tier.price[selectedPlan] }}
             </div>
             <div
               class="self-end lowercase font-medium"
               :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']"
             >
-              /{{ plans[basePlan].title }}
+              / {{ plans[basePlan].title }}
             </div>
           </div>
 
@@ -138,9 +138,13 @@
 
     <div class="flex flex-col items-center">
       <div class="flex flex-col items-center mb-4">
-        <div class="text-gray-500">{{ meta.checkoutText }}</div>
-        <div class="font-bold text-4xl tracking-tighter">
-          {{ tiers[selectedTier].price[selectedPlan] }}{{ meta.currency }}
+        <div class="text-gray-500 mb-1">{{ meta.checkoutText }}</div>
+        <div class="flex items-baseline">
+          <div class="flex font-bold text-4xl tracking-tighter mr-1">
+            <span class="">{{ meta.currency }}</span>
+            <span class="">{{ tiers[selectedTier].price[selectedPlan] }}</span>
+          </div>
+          <div class="text-gray-600 dark:text-gray-500">/ {{ plans[selectedPlan].title }}</div>
         </div>
       </div>
       <button

From c57d2192b361ae9688f377e319dd7a4331940e37 Mon Sep 17 00:00:00 2001
From: Sergey Bedritsky <sergey.bedritsky@gmail.com>
Date: Thu, 20 May 2021 20:43:31 +0300
Subject: [PATCH 4/5] fix: update pricing

---
 docs/content/templates/pricing.md             |   3 +-
 .../components/organisms/PricingBlock.vue     | 124 ++-------------
 .../components/organisms/PricingGrid.vue      | 149 ++++++++++++++++++
 .../templates/{Pricing.vue => Marketing.vue}  |   2 +-
 4 files changed, 163 insertions(+), 115 deletions(-)
 create mode 100644 src/defaultTheme/components/organisms/PricingGrid.vue
 rename src/defaultTheme/components/templates/{Pricing.vue => Marketing.vue} (85%)

diff --git a/docs/content/templates/pricing.md b/docs/content/templates/pricing.md
index b23ae04aa..eb36a6935 100644
--- a/docs/content/templates/pricing.md
+++ b/docs/content/templates/pricing.md
@@ -1,5 +1,6 @@
 ---
-template: pricing
+template: marketing
+footer: false
 ---
 
 :::pricing-block{yml}
diff --git a/src/defaultTheme/components/organisms/PricingBlock.vue b/src/defaultTheme/components/organisms/PricingBlock.vue
index adccec054..9e371194f 100644
--- a/src/defaultTheme/components/organisms/PricingBlock.vue
+++ b/src/defaultTheme/components/organisms/PricingBlock.vue
@@ -31,110 +31,14 @@
       </div>
     </div>
 
-    <div class="flex flex-col md:flex-row justify-center items-center md:items-stretch flex-wrap my-2 md:my-8">
-      <div v-for="(tier, tierName) in tiers" :key="tierName" class="w-full md:w-1/3 p-2 max-w-md">
-        <div
-          class="border rounded-lg flex flex-col p-4 h-full relative"
-          :class="[
-            selectedTier === tierName
-              ? 'bg-primary-500 border-primary-500 text-white'
-              : 'border-gray-200 dark:border-gray-700'
-          ]"
-        >
-          <span
-            v-if="tier.preSelected"
-            class="
-              absolute
-              top-0
-              left-1/2
-              transform
-              -translate-x-1/2 -translate-y-1/2
-              text-xs text-primary-500
-              px-2.5
-              py-1.5
-              leading-none
-              rounded
-              font-semibold
-              uppercase
-              tracking-wide
-              bg-primary-100
-              dark:bg-primary-900
-              dark:text-primary-400
-            "
-          >
-            {{ meta.preSelectedBadge }}
-          </span>
-
-          <div class="flex justify-center text-2xl font-semibold my-2 text-center">
-            {{ tier.title }}
-          </div>
-          <div
-            class="flex justify-center text-center mb-8"
-            :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500']"
-          >
-            {{ tier.description }}
-          </div>
-
-          <div class="flex justify-center mb-8">
-            <div class="font-medium mr-1" :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']">
-              {{ meta.currency }}
-            </div>
-            <div class="font-bold text-5xl leading-none tracking-tighter mr-1">
-              {{ plans[selectedPlan] && plans[selectedPlan].divider ? getBasePricing(tier) : tier.price[selectedPlan] }}
-            </div>
-            <div
-              class="self-end lowercase font-medium"
-              :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']"
-            >
-              / {{ plans[basePlan].title }}
-            </div>
-          </div>
-
-          <div class="mb-8">
-            <div class="font-medium mb-2">{{ meta.featuresTitle }}</div>
-            <ul>
-              <li
-                v-for="feature in tier.features"
-                :key="feature"
-                class="flex items-center py-0.5"
-                :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500 dark:text-gray-400']"
-              >
-                <IconCheck class="w-4 h-4 mr-2" />
-                <span>{{ feature }}</span>
-              </li>
-            </ul>
-          </div>
-          <div class="flex items-end flex-1">
-            <button
-              class="
-                inline-block
-                w-full
-                font-semibold
-                text-center
-                items-center
-                flex-none
-                px-6
-                py-3
-                text-lg
-                leading-6
-                rounded-md
-                border border-transparent border-l-0
-                focus:outline-none
-                select-none
-              "
-              :class="[
-                selectedTier === tierName
-                  ? 'bg-primary-50 hover:bg-primary-100 text-primary-500'
-                  : 'bg-primary-500 hover:bg-primary-600 text-white'
-              ]"
-              @click="selectedTier = tierName"
-            >
-              {{ meta.buttonText }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <PricingGrid
+      :tiers="tiers"
+      :plans="plans"
+      :meta="meta"
+      :selected-plan="selectedPlan"
+      :selected-tier="selectedTier"
+      @selectTier="selectedTier = $event"
+    />
 
     <div class="flex flex-col items-center">
       <div class="flex flex-col items-center mb-4">
@@ -193,22 +97,16 @@ export default defineComponent({
   },
   setup(props) {
     let selectedPlan = null
-    let basePlan = null
     let selectedTier = null
-    function getBasePricing(tier) {
-      const price = tier.price[selectedPlan] / props.plans[selectedPlan].divider
-      return price > 0 ? price.toFixed(2) : 0
-    }
+
     Object.keys(props.plans).forEach(plan => {
       if (props.plans[plan] && props.plans[plan].preSelected) selectedPlan = plan
     })
-    Object.keys(props.plans).forEach(plan => {
-      if (props.plans[plan] && props.plans[plan].base) basePlan = plan
-    })
     Object.keys(props.tiers).forEach(tier => {
       if (props.tiers[tier] && props.tiers[tier].preSelected) selectedTier = tier
     })
-    return { selectedPlan, selectedTier, getBasePricing, basePlan }
+
+    return { selectedPlan, selectedTier }
   }
 })
 </script>
diff --git a/src/defaultTheme/components/organisms/PricingGrid.vue b/src/defaultTheme/components/organisms/PricingGrid.vue
new file mode 100644
index 000000000..dff9fbb08
--- /dev/null
+++ b/src/defaultTheme/components/organisms/PricingGrid.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="flex flex-col md:flex-row justify-center items-center md:items-stretch flex-wrap my-2 md:my-8">
+    <div v-for="(tier, tierName) in tiers" :key="tierName" class="w-full md:w-1/3 p-2 max-w-md">
+      <div
+        class="border rounded-lg flex flex-col p-4 h-full relative"
+        :class="[
+          selectedTier === tierName
+            ? 'bg-primary-500 border-primary-500 text-white'
+            : 'border-gray-200 dark:border-gray-700'
+        ]"
+      >
+        <span
+          v-if="tier.preSelected"
+          class="
+            absolute
+            top-0
+            left-1/2
+            transform
+            -translate-x-1/2 -translate-y-1/2
+            text-xs text-primary-500
+            px-2.5
+            py-1.5
+            leading-none
+            rounded
+            font-semibold
+            uppercase
+            tracking-wide
+            bg-primary-100
+            dark:bg-primary-900
+            dark:text-primary-400
+          "
+        >
+          {{ meta.preSelectedBadge }}
+        </span>
+
+        <div class="flex justify-center text-2xl font-semibold my-2 text-center">
+          {{ tier.title }}
+        </div>
+        <div
+          class="flex justify-center text-center mb-8"
+          :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500']"
+        >
+          {{ tier.description }}
+        </div>
+
+        <div class="flex justify-center mb-8">
+          <div class="font-medium mr-1" :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']">
+            {{ meta.currency }}
+          </div>
+          <div class="font-bold text-5xl leading-none tracking-tighter mr-1">
+            {{ plans[selectedPlan] && plans[selectedPlan].divider ? getBasePricing(tier) : tier.price[selectedPlan] }}
+          </div>
+          <div
+            class="self-end lowercase font-medium"
+            :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']"
+          >
+            / {{ plans[basePlan].title }}
+          </div>
+        </div>
+
+        <div class="mb-8">
+          <div class="font-medium mb-2">{{ meta.featuresTitle }}</div>
+          <ul>
+            <li
+              v-for="feature in tier.features"
+              :key="feature"
+              class="flex items-center py-0.5"
+              :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500 dark:text-gray-400']"
+            >
+              <IconCheck class="w-4 h-4 mr-2" />
+              <span>{{ feature }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="flex items-end flex-1">
+          <button
+            class="
+              inline-block
+              w-full
+              font-semibold
+              text-center
+              items-center
+              flex-none
+              px-6
+              py-3
+              text-lg
+              leading-6
+              rounded-md
+              border border-transparent border-l-0
+              focus:outline-none
+              select-none
+            "
+            :class="[
+              selectedTier === tierName
+                ? 'bg-primary-50 hover:bg-primary-100 text-primary-500'
+                : 'bg-primary-500 hover:bg-primary-600 text-white'
+            ]"
+            @click="$emit('selectTier', tierName)"
+          >
+            {{ meta.buttonText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    tiers: {
+      type: Object,
+      default: () => {}
+    },
+    meta: {
+      type: Object,
+      default: () => {}
+    },
+    plans: {
+      type: Object,
+      default: () => {}
+    },
+    selectedTier: {
+      type: String,
+      default: ''
+    },
+    selectedPlan: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    let basePlan = null
+
+    function getBasePricing(tier) {
+      const price = tier.price[props.selectedPlan] / props.plans[props.selectedPlan].divider
+      return price > 0 ? price.toFixed(2) : 0
+    }
+
+    Object.keys(props.plans).forEach(plan => {
+      if (props.plans[plan] && props.plans[plan].base) basePlan = plan
+    })
+
+    return { getBasePricing, basePlan }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/templates/Pricing.vue b/src/defaultTheme/components/templates/Marketing.vue
similarity index 85%
rename from src/defaultTheme/components/templates/Pricing.vue
rename to src/defaultTheme/components/templates/Marketing.vue
index e5694320b..c89a5620f 100644
--- a/src/defaultTheme/components/templates/Pricing.vue
+++ b/src/defaultTheme/components/templates/Marketing.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppContainer fluid :footer="false">
+  <AppContainer fluid :footer="page.footer">
     <NuxtContent :document="page" />
   </AppContainer>
 </template>

From 8a6499a366954367a8ae301bc741b30db0c5b251 Mon Sep 17 00:00:00 2001
From: Sergey Bedritsky <sergey.bedritsky@gmail.com>
Date: Fri, 21 May 2021 13:32:28 +0300
Subject: [PATCH 5/5] feat: InfoLabel component

---
 .../components/atoms/InfoLabel.vue            | 32 +++++++++++++++++++
 .../components/organisms/PreLaunchHero.vue    | 21 +-----------
 .../components/organisms/PricingGrid.vue      | 26 +++------------
 3 files changed, 37 insertions(+), 42 deletions(-)
 create mode 100644 src/defaultTheme/components/atoms/InfoLabel.vue

diff --git a/src/defaultTheme/components/atoms/InfoLabel.vue b/src/defaultTheme/components/atoms/InfoLabel.vue
new file mode 100644
index 000000000..d2c1c3462
--- /dev/null
+++ b/src/defaultTheme/components/atoms/InfoLabel.vue
@@ -0,0 +1,32 @@
+<template>
+  <span
+    class="
+      text-xs text-primary-500
+      px-2.5
+      py-1.5
+      leading-none
+      rounded
+      font-semibold
+      uppercase
+      tracking-wide
+      bg-primary-100
+      dark:bg-primary-900
+      dark:text-primary-400
+    "
+  >
+    {{ label }}
+  </span>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/organisms/PreLaunchHero.vue b/src/defaultTheme/components/organisms/PreLaunchHero.vue
index ef2bc0779..e13d470d8 100644
--- a/src/defaultTheme/components/organisms/PreLaunchHero.vue
+++ b/src/defaultTheme/components/organisms/PreLaunchHero.vue
@@ -2,26 +2,7 @@
   <section class="flex flex-col md:flex-row d-container-content py-12 md:py-24">
     <div class="w-full md:w-1/2 flex flex-col justify-center mb-8 md:mb-0">
       <div class="flex flex-col items-center md:items-start mb-2">
-        <span
-          class="
-            mx-2
-            text-xs
-            mb-4
-            text-primary-500
-            px-2.5
-            py-1.5
-            leading-none
-            rounded
-            font-semibold
-            uppercase
-            tracking-wide
-            bg-primary-100
-            dark:bg-primary-900
-            dark:text-primary-400
-          "
-        >
-          🚀 Coming Soon
-        </span>
+        <InfoLabel label="🚀 Coming Soon" class="mx-2 mb-4" />
         <h2
           class="
             mb-2
diff --git a/src/defaultTheme/components/organisms/PricingGrid.vue b/src/defaultTheme/components/organisms/PricingGrid.vue
index dff9fbb08..b0c7a8b67 100644
--- a/src/defaultTheme/components/organisms/PricingGrid.vue
+++ b/src/defaultTheme/components/organisms/PricingGrid.vue
@@ -9,29 +9,11 @@
             : 'border-gray-200 dark:border-gray-700'
         ]"
       >
-        <span
+        <InfoLabel
           v-if="tier.preSelected"
-          class="
-            absolute
-            top-0
-            left-1/2
-            transform
-            -translate-x-1/2 -translate-y-1/2
-            text-xs text-primary-500
-            px-2.5
-            py-1.5
-            leading-none
-            rounded
-            font-semibold
-            uppercase
-            tracking-wide
-            bg-primary-100
-            dark:bg-primary-900
-            dark:text-primary-400
-          "
-        >
-          {{ meta.preSelectedBadge }}
-        </span>
+          :label="meta.preSelectedBadge"
+          class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        />
 
         <div class="flex justify-center text-2xl font-semibold my-2 text-center">
           {{ tier.title }}