update webstack

src/components/custom/sections/CallToAction.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="py-12 px-4 text-center">
+    <div class="w-full max-w-2xl mx-auto">
+      <h2 class="text-5xl leading-tight font-semibold font-heading">
+        {{ cta.title }}
+      </h2>
+      <p class="mt-6 mb-8 text-gray-600 leading-relaxed">
+        {{ cta.excerpt }}
+      </p>
+      <g-link
+        class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
+        :to="cta.link"
+        >{{ cta.button }}</g-link
+      >
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["cta"],
+};
+</script>

src/components/custom/sections/Comparison.vue

@@ -0,0 +1,44 @@
+<template>
+  <section class="py-12 px-4 text-center">
+    <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
+      {{ main.title }}
+    </h2>
+    <p class="text-gray-600">{{ main.description }}</p>
+    <div class="flex flex-wrap items-center -mx-8 mt-12 mb-2">
+      <div
+        class="lg:w-1/3 px-8 mb-8"
+        v-for="(section, index) in sections"
+        :key="index"
+      >
+        <img
+          class="w-1/2 mx-auto mb-8 h-32"
+          :src="section.svg.src"
+          :alt="section.title"
+        />
+        <h3 class="text-2xl mb-4 font-semibold font-heading">
+          <span
+            class="inline-flex items-center justify-center h-12 w-12 mr-2 border rounded-full"
+            >{{ index + 1 }}</span
+          >
+          <span>{{ section.title }}</span>
+        </h3>
+        <p class="text-gray-600">
+          {{ section.excerpt }}
+        </p>
+      </div>
+    </div>
+    <div>
+      <g-link
+        class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
+        :to="main.link"
+        >{{ main.button }}</g-link
+      >
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["main", "sections"],
+};
+</script>

src/components/custom/sections/Features.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="py-12 px-4">
+    <h2 class="text-3xl text-center mb-12 font-semibold font-heading">
+      {{ main.title }}
+    </h2>
+    <div class="flex flex-wrap -mx-4 mb-6">
+      <div
+        v-for="feature in features"
+        :key="feature.id"
+        class="lg:w-1/4 px-4 mb-6"
+      >
+        <g-image class="w-10 h-10" :src="feature.svg.src"></g-image>
+        <h3 class="text-xl my-3 font-semibold font-heading">
+          {{ feature.title }}
+        </h3>
+        <p class="text-sm text-gray-600 leading-relaxed">
+          {{ feature.excerpt }}
+        </p>
+      </div>
+    </div>
+    <div class="text-center">
+      <g-link
+        class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
+        :to="main.link"
+        >{{ main.btn }}</g-link
+      >
+      <p class="text-sm text-gray-400 mt-5">
+        {{ main.excerpt }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["main", "features"]
+};
+</script>

src/components/custom/sections/HowItWorks.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="py-12 px-4">
+    <div class="flex flex-wrap items-center text-center lg:text-left -mx-2">
+      <div class="lg:w-1/2 px-2">
+        <g-image
+          class="g-image g-image--lazy g-image--loading"
+          :src="main.image.src"
+          :alt="main.title"
+        ></g-image>
+      </div>
+      <div class="lg:w-1/2 px-2 lg:pl-16 mt-10 lg:mt-0">
+        <h2 class="text-4xl px-4 mb-4 leading-tight font-semibold font-heading">
+          {{ main.title }}
+        </h2>
+        <div
+          class="p-4 mb-4"
+          :class="{ 'rounded shadow-md': index % 2 !== 0 }"
+          v-for="(howItWorkSec, index) in HIWData"
+          :key="index"
+        >
+          <h3 class="text-2xl mb-2 font-semibold font-heading">
+            {{ howItWorkSec.title }}
+          </h3>
+          <p class="text-gray-600 leading-relaxed">
+            {{ howItWorkSec.excerpt }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["HIWData", "main"],
+};
+</script>

src/components/custom/sections/Roadmap.vue

@@ -0,0 +1,62 @@
+<template>
+  <!-- component -->
+  <div class="container bg-gray-200 mx-auto w-full h-full">
+    <div class="relative wrap overflow-hidden p-10 h-full">
+      <div
+        class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border"
+        style="left: 50%"
+      ></div>
+      <div
+        v-for="(post, index) in roadmap"
+        :key="index"
+        class="mb-8 flex justify-between items-center w-full"
+        :class="{
+          'flex-row-reverse left-timeline': index % 2 !== 0,
+          'right-timeline': index % 2 == 0,
+        }"
+      >
+        <div class="order-1 w-5/12"></div>
+        <div
+          class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full"
+        >
+          <h1 class="mx-auto font-semibold text-lg text-white">
+            {{ index + 1 }}
+          </h1>
+        </div>
+
+        <div
+          class="order-1 rounded-lg shadow-xl w-5/12 px-6 py-4"
+          :class="{
+            'bg-red-400': index % 2 !== 0,
+            'bg-gray-400': index % 2 == 0,
+          }"
+        >
+          <h3
+            class="mb-3 font-bold text-xl"
+            :class="{
+              'text-white': index % 2 !== 0,
+              'text-gray-800': index % 2 == 0,
+            }"
+          >
+            {{ post.title }}
+          </h3>
+          <p
+            class="text-sm leading-snug tracking-wide text-opacity-100"
+            :class="{
+              'text-white': index % 2 !== 0,
+              'text-gray-800': index % 2 == 0,
+            }"
+          >
+            {{ post.excerpt }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["roadmap"],
+};
+</script>

src/components/custom/sections/SignUp.vue

@@ -0,0 +1,28 @@
+<template>
+  <section class="py-8 px-4">
+    <div class="flex flex-wrap items-center -mx-4">
+      <div class="w-full lg:w-4/6 px-4 mb-8 lg:mb-0 text-center lg:text-left">
+        <h2 class="text-xl font-semibold font-heading">
+          {{ signup.title }}
+        </h2>
+      </div>
+      <div class="w-full lg:w-2/6 px-4 text-center">
+        <g-link
+          class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
+          :to="signup.link1"
+          >{{ signup.button1 }}</g-link
+        ><g-link
+          class="text-gray-900 bg-transparent hover:underline"
+          :to="signup.link2"
+          >{{ signup.button2 }}</g-link
+        >
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["signup"],
+};
+</script>

src/components/custom/sections/header/HeaderSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="py-12 px-4 text-center">
+    <div class="w-full max-w-2xl mx-auto">
+      <span class="text-sm font-semibold">{{ header.title }}</span>
+      <h2 class="text-5xl mt-2 mb-6 leading-tight font-semibold font-heading">
+        {{ header.subtitle }}
+      </h2>
+      <p class="mb-8 text-gray-600 leading-relaxed">
+        {{ header.excerpt }}
+      </p>
+      <div>
+        <g-link
+          class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
+          v-if="header.btn1"
+          :to="header.link1"
+          >{{ header.btn1 }}</g-link
+        ><g-link
+          class="text-gray-900 bg-transparent hover:underline"
+          v-if="header.btn2"
+          :to="header.link2"
+          >{{ header.btn2 }}</g-link
+        >
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["header"],
+};
+</script>