Add brandPanel

content/page/home/brandPanel2/brandPanel2.md

@@ -1,17 +1,10 @@
 ---
-id: grid_solution
+id: p4p
-title: THE THREEFOLD GRID IS THE ONLY TRUE SOLUTION
+title: BUILT BY AND FOR
-subtitle: ''
+subtitle: HUMANITY
-sourceUrl: https://threefold.io/info/threefold#/threefold__grid_why
+sourceUrl: '#'
 btnTxt: Know More
-sourceUrl2: https://explorer.threefold.io/
+image: p4p_new.png # src/assets/brandPanel/..
-btnTxt2: Live Stats
-image: grid_solution.png # src/assets/brandPanel/..
 ---
 
-We did what nobody else has done. We rebuilt the architecture from the ground up – a unique stateless operating system and an automation layer to remove all intermediaries and enable anyone to connect hardware, anywhere around the world. A real, long-lasting solution, not just a bandaid approach.
+The ThreeFold Grid is formed by people connecting capacity to our network.  These people are known as farmers.  Together with a growing number of farmers, we have achieved a new internet which allows everyone to learn, partake and succeed
-
-<br/>
-Without the ThreeFold Grid, the peer-to-peer Internet the world needs is not possible.
-
-<!--  to remove all intermediaries and enable anyone to connect hardware, anywhere around the world. A real, long-lasting solution, not just a bandaid approach. -->

content/page/home/home.md

@@ -15,7 +15,7 @@ cta2: home_cta2
 productsMain: product
 productData: [nodes_home, tokens_home, storage_home]
 brandPanel: fix_internet
-brandPanel2: grid_solution
+brandPanel2: p4p
 cta3: home_cta3
 cta4: home_cta4
 cta5: home_cta5

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

@@ -165,7 +165,7 @@
 
       <!-- home -->
       <div
-        v-else-if="id == 'home'"
+        v-else-if="id == 'home' && !brandPanel2"
         class="flex flex-wrap lg:text-left text-center lg:pt-16 lg:px-16"
       >
         <div class="lg:w-1/2 lg:px-6 self-center">
@@ -251,6 +251,80 @@
         </div>
       </div>
 
+      <div
+        v-else-if="id == 'home' && brandPanel2"
+        class="flex flex-wrap lg:text-left text-center lg:pt-16 lg:px-16"
+      >
+        <div class="lg:w-1/2 lg:px-6 self-center">
+          <g-image class="w-1/2 mx-auto" :src="image" :alt="brand.title" />
+        </div>
+        <div class="lg:w-1/2 lg:px-10 order-1 lg:order-none lg:self-center">
+          <div class="text-center">
+            <h2
+              class="
+                lg:text-5xl
+                mb-8
+                font-light
+                uppercase
+                leading-none
+                font-heading
+              "
+            >
+              {{ brand.title }}
+              <span class="block font-bold" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="pb-6 text-xl leading-tight tracking-wide"
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt.includes('http')"
+              target="_blank"
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-white
+                lg:text-lg
+                learn-button
+                hover:bg-gray-400
+                bo
+                px-12
+                py-1
+                mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+
+            <a
+              v-else
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-white
+                lg:text-lg
+                learn-button
+                hover:bg-gray-400
+                bo
+                px-12
+                py-1
+                lg:mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+      </div>
+
       <!-- About us -->
       <div
         v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"
@@ -387,7 +461,16 @@
         v-else-if="id == 'grid' && !brandPanel2 && !brandPanel3"
         class="flex flex-wrap text-left lg:px-16"
       >
-        <div class="lg:w-1/2 lg:mt-10 order-1 lg:order-none text-left lg:self-center">
+        <div
+          class="
+            lg:w-1/2
+            lg:mt-10
+            order-1
+            lg:order-none
+            text-left
+            lg:self-center
+          "
+        >
           <div class="px-2">
             <h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
@@ -406,7 +489,6 @@
               v-html="brand.content"
             ></div>
             <a
-              
               class="
                 capitalize
                 inline-block
@@ -428,7 +510,6 @@
               >{{ brand.btnTxt }}</a
             >
             <a
-              
               class="
                 capitalize
                 inline-block
@@ -462,7 +543,9 @@
         <div class="lg:w-1/2 self-center">
           <g-image class="w-3/4" :src="image" :alt="brand.title" />
         </div>
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center  ">
+        <div
+          class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center"
+        >
           <div class="px-2">
             <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
               {{ brand.title }}
@@ -472,7 +555,6 @@
               v-html="brand.content"
             ></div>
             <a
-              
               class="
                 capitalize
                 inline-block
@@ -494,7 +576,6 @@
               >{{ brand.btnTxt }}</a
             >
             <a
-              
               class="
                 capitalize
                 inline-block
@@ -522,7 +603,9 @@
         v-else-if="id == 'grid' && brandPanel3"
         class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
+        <div
+          class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center"
+        >
           <div class="">
             <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
               {{ brand.title }}
@@ -584,7 +667,9 @@
         v-else-if="id == 'grid' && brandPanel4"
         class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
+        <div
+          class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center"
+        >
           <div class="">
             <h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
               {{ brand.title }}
@@ -645,7 +730,16 @@
         v-else-if="id == 'token' && !brandPanel2 && !brandPanel3"
         class="flex flex-wrap text-left mt-24 lg:px-16"
       >
-        <div class="lg:w-1/2 lg:mt-5 order-1 lg:order-none text-left lg:self-center">
+        <div
+          class="
+            lg:w-1/2
+            lg:mt-5
+            order-1
+            lg:order-none
+            text-left
+            lg:self-center
+          "
+        >
           <div class="px-2">
             <h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
@@ -654,13 +748,7 @@
               }}</span>
             </h2>
             <div
-              class="
+              class="py-6 mt-4 text-xl leading-tight tracking-wide"
-                py-6
-                mt-4
-                text-xl
-                leading-tight
-                tracking-wide
-              "
               v-html="brand.content"
             ></div>
           </div>
@@ -677,7 +765,9 @@
         <div class="lg:w-1/2 self-center">
           <g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
         </div>
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
+        <div
+          class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center"
+        >
           <div class="px-2">
             <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
               {{ brand.title }}
@@ -714,7 +804,9 @@
         v-else-if="id == 'token' && brandPanel3"
         class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
+        <div
+          class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center"
+        >
           <div class="">
             <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
               {{ brand.title }}

src/pages/Index.vue

@@ -18,14 +18,20 @@
         :link2="$page.markdownPage.link2"
         :link3="$page.markdownPage.link3"
       />
-    </div>
 
-    <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
       <Partenerships
         v-if="$page.markdownPage.partnerships.length > 0"
         :id="$page.markdownPage.id"
         :partnerships="$page.markdownPage.partnerships"
       />
+
+      <BrandPanel
+        :brand="$page.markdownPage.brandPanel2"
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.brandPanel2"
+        :brandPanel2="true"
+      />
+
       <Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" />
       <ShowcaseProducts
         v-if="
@@ -41,9 +47,7 @@
         :id="$page.markdownPage.id"
         :cta="$page.markdownPage.cta"
       />
-    </div>
 
-    <div class="container-fluid mx-auto sm:pxi-0 overflow-x-hidden">
       <LogoShowcase
         v-if="$page.markdownPage.logos.length > 0"
         :id="$page.markdownPage.id"
@@ -265,8 +269,6 @@
          content
          sourceUrl
          btnTxt
-         sourceUrl2
-         btnTxt2
          image
        }
         logosMain {