Init why page header

src/components/custom/Navbar/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fixed inset-0 h-16 bg-white">
     <header
-      class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
+      class="inline-flex items-center justify-between flex-wrap container-fluid mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
       :class="{
         'opacity-100': !disableScroll && scrollPosition > headerHeight,
         'opacity-0': !disableScroll && scrollPosition < headerHeight,
@@ -336,6 +336,13 @@ export default {
 };
 </script>
 <style scoped>
+.container-fluid {
+  width: 100%;
+  padding-right: 160px;
+  padding-left: 160px;
+  margin-right: auto;
+  margin-left: auto;
+}
 input:focus,
 button:focus {
   outline: 0;
@@ -361,5 +368,10 @@ a.active--exact.active {
   .navbar {
     width: 100%;
   }
+
+  .container-fluid {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
 }
-</style>
+</style>

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

@@ -1,10 +1,51 @@
 <template>
-  <section class="py-20 mb-10 px-4 lg:mx-40">
-    <div class="flex flex-wrap text-center lg:text-left -mx-2">
+  <section class="py-15 mb-10 px-4 lg:mx-40">
+    <div
+      class="flex flex-wrap text-center lg:text-left -mx-2"
+      v-if="id == 'why'"
+    >
+      <div class="lg:w-3/5 px-2"><g-image :src="img" :alt="altImg" /></div>
+      <div class="lg:w-2/5 px-2 py-20 lg:pr-20 lg:mt-10 order-1 lg:order-none">
+        <h1
+          class="flex text-center uppercase mb-6 mt-20 leading-none text-5xl font-light font-heading"
+        >
+          {{ title }}
+        </h1>
+        <span
+          class="flex text-center uppercase mb-6 leading-none text-5xl font-black font-heading"
+        >
+          {{ slogan }}
+        </span>
+
+        <div
+          class="mb-8 text-center text-2xl text-gray-800"
+          v-html="excerpt"
+        ></div>
+        <div v-if="button">
+          <a
+            v-if="link.includes('http')"
+            target="_blank"
+            class="nline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+            :href="link"
+            >{{ button }}</a
+          >
+          <a
+            v-else
+            class="nline-block bg-blue-900 text-md learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+            :href="link"
+            >{{ button }}</a
+          >
+          <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap text-center lg:text-left -mx-2" v-else>
       <div class="lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
-        <h2 class="text-8xl mb-6 mt-20 leading-none font-extrabold font-heading">
-          <span class="text-blue-600">{{ slogan }}</span
-          > {{ title }}
+        <h2
+          class="text-8xl mb-6 mt-20 leading-none font-extrabold font-heading"
+        >
+          <span class="text-blue-600">{{ slogan }}</span> {{ title }}
         </h2>
         <div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
         <div v-if="button">
@@ -31,7 +72,16 @@
 
 <script>
 export default {
-  props: ["title", "slogan", "excerpt", "altImg", "image", "button", "link"],
+  props: [
+    "title",
+    "id",
+    "slogan",
+    "excerpt",
+    "altImg",
+    "image",
+    "button",
+    "link",
+  ],
   computed: {
     img: function () {
       if (!this.image) return "";