init how-it-works page & rm duplicated ids

src/components/marketing/sections/cta-sections/ShowcaseProducts.vue

@@ -109,6 +109,35 @@
       </div>
     </div>
 
+    <!-- How it works -->
+    <div
+      class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center"
+      v-else-if="id == 'how-it-works'"
+    >
+      <div
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :href="product.link"
+        class="
+          mx-auto
+          my-3
+          rounded
+          overflow-hidden
+          transition
+          duration-500
+          bg-gray-100
+        "
+      >
+        <a :href="product.link">
+          <g-image :src="img(product.image)" />
+          <div class="font-bold text-xl py-5 mx-4">
+            {{ product.title }}
+          </div>
+        </a>
+      </div>
+    </div>
+
     <!-- why -->
     <div
       class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"

src/templates/MarkdownPage.vue

@@ -174,7 +174,7 @@
         :products="$page.markdownPage.appData"
         :main="$page.markdownPage.appsMain"
       /> -->
-      <!-- <ShowcaseProducts
+      <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
           $page.markdownPage.productData.length > 0
@@ -182,7 +182,7 @@
         :id="$page.markdownPage.id"
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
-      /> -->
+      />
 
       <!-- <Partenerships
         v-if="