Init why page header

content/navigation/navigation.md

@@ -5,12 +5,16 @@ navLinks:
     link: /products
     external: false
     expandable: false
+  - name: WHY
+    link: /why
+    external: false
+    expandable: false
   - name: TOKEN
     link: /token
     external: true
     expandable: false
   - name: LEARN
-    link: '' # /dropdown
+    link: "" # /dropdown
     external: false
     expandable: true
     submenu:
@@ -26,7 +30,7 @@ navLinks:
         external: true
 
   - name: ECOSYSTEM
-    link: ''
+    link: ""
     external: false
     expandable: true
     submenu:
@@ -45,7 +49,7 @@ navLinks:
         external: true
 
   - name: MORE
-    link: ''
+    link: ""
     external: false
     expandable: true
     submenu:
@@ -57,12 +61,10 @@ navLinks:
         path: /news
 
       - title: Contact Us
-        path: 'mailto:info@threefold.io'
+        path: "mailto:info@threefold.io"
         external: true
 
 social:
   - icon: telegram-plane
-    link: 'https://t.me/threefoldnews'
+    link: "https://t.me/threefoldnews"
-
-  
 ---

content/page/why/cta/cta.md

@@ -0,0 +1,15 @@
+---
+id: why_cta
+title: Today's Internet
+slogan: Is Broken
+button: ""
+link: ""
+button2: ""
+link2: ""
+button3: ""
+link3: ""
+---
+
+The Internet is controlled by large corporations.
+
+This centralized approach is highly ineffucient, extermrly costly, and unsustainable. Our data isn't owned by us, and it isn't safe.

content/page/why/why.md

@@ -1,3 +1,14 @@
 ---
 id: why
+header_slogan: We need a way of archiving it.
+header_title: We do not need a reason to want a better future.
+header_image: ./why-home.jpg
+header_altImg: threefold
+header_excerpt: Our mission is accelerate the transition of the data economy to a decentralized P2P model and make it possible for every person to learn, partake and succeed.
+solution_image: ./404.png
+cta: why_cta
 ---
+
+<!-- header: home_header
+solution_image: ./home_header.png -->
+<!--  -->

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>

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

@@ -1,10 +1,51 @@
 <template>
-  <section class="py-20 mb-10 px-4 lg:mx-40">
+  <section class="py-15 mb-10 px-4 lg:mx-40">
-    <div class="flex flex-wrap text-center lg:text-left -mx-2">
+    <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">
+        <h2
-          <span class="text-blue-600">{{ slogan }}</span
+          class="text-8xl mb-6 mt-20 leading-none font-extrabold font-heading"
-          > {{ title }}
+        >
+          <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 "";

src/pages/Index.vue

@@ -1,24 +1,23 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
-     <div class="container-fluid mx-20 sm:pxi-0 overflow-x-hidden">
+    <div class="container-fluid mx-20 sm:pxi-0 overflow-x-hidden">
-        <Header
+      <Header
-          :title="$page.markdownPage.header_title"
+        :id="$page.markdownPage.id"
-          :slogan="$page.markdownPage.header_slogan"
+        :title="$page.markdownPage.header_title"
-          :image="$page.markdownPage.header_image"
+        :slogan="$page.markdownPage.header_slogan"
-          :altImg="$page.markdownPage.header_altImg"
+        :image="$page.markdownPage.header_image"
-          :excerpt="$page.markdownPage.header_excerpt"
+        :altImg="$page.markdownPage.header_altImg"
-          :button="$page.markdownPage.button"
+        :excerpt="$page.markdownPage.header_excerpt"
-          :link="$page.markdownPage.link"
+        :button="$page.markdownPage.button"
-        />
+        :link="$page.markdownPage.link"
-      </div>
+      />
+    </div>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <!-- <SolutionsHeader
         v-if="$page.markdownPage.header"
         :header="$page.markdownPage.header"
       /> -->
 
-     
-
       <g-image
         class="m-auto w-2/4"
         v-if="$page.markdownPage.solution_image2"

src/templates/MarkdownPage.vue

@@ -1,18 +1,21 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
+    <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <Header
         v-if="
           $page.markdownPage.id !== 'contact' &&
           $page.markdownPage.header_title &&
           $page.markdownPage.header_title != ''
         "
+        :id="$page.markdownPage.id"
         :title="$page.markdownPage.header_title"
+        :slogan="$page.markdownPage.header_slogan"
         :image="$page.markdownPage.header_image"
         :altImg="$page.markdownPage.header_altImg"
         :excerpt="$page.markdownPage.header_excerpt"
       />
-
+    </div>
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <SignUp
         v-if="$page.markdownPage.signup"
         :signup="$page.markdownPage.signup"
@@ -27,23 +30,24 @@
         :sections="$page.markdownPage.comparisonSecs"
       />
 
+      <g-image
+        class="w-3/4 mx-auto mt-10"
+        v-if="$page.markdownPage.solution_image"
+        :src="$page.markdownPage.solution_image.src"
+      />
+
       <CallToAction
         v-if="$page.markdownPage.cta"
         :cta="$page.markdownPage.cta"
       />
 
-      <g-image 
+      <ShowcaseProducts
-        v-if="$page.markdownPage.solution_image"
-        :src="$page.markdownPage.solution_image.src"
-      />
-
-       <ShowcaseProducts
-        :main="$page.markdownPage.productsMain"
-        :products="$page.markdownPage.productData"
         v-if="
           $page.markdownPage.productData &&
           $page.markdownPage.productData.length > 0
         "
+        :main="$page.markdownPage.productsMain"
+        :products="$page.markdownPage.productData"
       />
     </div>
   </Layout>
@@ -59,6 +63,7 @@
         header_altImg
         header_title
         header_image
+        header_slogan
         solution_image
        productsMain{
           id
@@ -93,6 +98,7 @@
         cta{
           id
           title
+          slogan
           content
           button
           link