update newcommunity sections

content/page/newcommunity/brandPanel2/index.md

@@ -0,0 +1,12 @@
+---
+id: newcommunity_brandPanel2
+title: BECOME A THREEFOLD 
+subtitle : PATHFINDER 
+image: pathfinder.jpg # src/assets/brandPanel/..
+btnTxt : Apply 
+sourceUrl : ''
+btnTxt2 : ''
+sourceUrl2 : ''
+---
+Check out the blog article  and apply to join the growing community of ThreeFold’s most passionate supporters. 
+

content/page/newcommunity/brandPanel3/index.md

@@ -0,0 +1,9 @@
+---
+id: newcommunity_brandPanel3
+title: JOIN THE THREEFOLD
+subtitle : DEVELOPER COMMUNITY
+image: join_developer.png # src/assets/brandPanel/..
+btnTxt : Developer Resources
+sourceUrl : ''
+---
+From testing our latest releases, to joining our development teams, to applying for a ThreeFold Foundation grant – there are many ways to engage with ThreeFold’s technology.

content/page/newcommunity/cta2/index.md

@@ -0,0 +1,11 @@
+---
+id: newcommunity_cta2
+title: EXPAND THE PEOPLE'S  
+subtitle : INTERNET AND CLOUD
+button: Get a Node
+link: ''
+---
+Join the movement by connecting a node at your home or office. A you need is compatible hardware, electricity and network bandwidth to take part in the decentralization of the global Internet and cloud.
+
+
+

content/page/newcommunity/cta3/index.md

@@ -0,0 +1,11 @@
+---
+id: newcommunity_cta3
+title: FREQUENTLY ASKED  
+subtitle : QUESTIONS
+button: Ask a Question
+link: ''
+---
+Check out the FAQs or ask a question on the ThreeFold Forum.
+
+
+

content/page/newcommunity/newcommunity.md

@@ -11,7 +11,10 @@ header_altImg: newcommunity
 header_excerpt: A 100% open-source and community-driven project that is building the critical infrastructure for a decentralized world. Anyone can contribute to ThreeFold. And there are many ways to get involved.
 button: ''
 link: ''
-
+cta2: newcommunity_cta2
+cta3: newcommunity_cta3
+brandPanel3: newcommunity_brandPanel3
+brandPanel2 : newcommunity_brandPanel2
 ---
 
 

src/components/custom/sections/CallToAction.vue

@@ -394,6 +394,133 @@
       >
     </div>
 
+     <!-- newcommunity -->
+     <div
+      class="w-full mx-auto py-6 lg:py-10"
+      v-else-if="id == 'newcommunity' && !textOnly"
+    >
+      <h2
+        v-if="cta.title"
+        class="
+          lg:text-6xl
+          text-center
+          uppercase
+          mb-2
+          leading-none
+          font-normal font-heading
+        "
+      >
+        {{ cta.title }}
+        <br>
+        <span class="font-bold">{{ cta.subtitle }}</span>
+      </h2>
+      <div v-html="cta.content" class="mt-6 mb-8 lg:text-2xl lg:max-w-4xl mx-auto px-4 "></div>
+      
+      <a
+        class="
+          inline-block
+          bg-white
+          text-lg
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        target="_blank"
+        v-if="cta.button && cta.link.includes('http')"
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+
+      <a
+        class="
+          inline-block
+          bg-white
+          text-lg
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        v-else
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+    </div>
+
+    <div
+      class="w-full mx-auto lg:mt-20 py-10 lg:p-20"
+      v-else-if="id == 'newcommunity' && textOnly"
+    >
+      <h2
+        v-if="cta.title"
+        class="
+          lg:text-6xl
+          text-center
+          uppercase
+          mb-2
+          leading-none
+          font-normal font-heading
+        "
+      >
+        {{ cta.title }}
+        <span class="font-bold">{{ cta.subtitle }}</span>
+      </h2>
+      <div v-html="cta.content" class="mt-6 mb-8 lg:text-2xl lg:max-w-4xl mx-auto px-4 "></div>
+      
+      <a
+        class="
+          inline-block
+          bg-white
+          text-lg
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        target="_blank"
+        v-if="cta.button && cta.link.includes('http')"
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+
+      <a
+        class="
+          inline-block
+          bg-white
+          text-lg
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        v-else
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+    </div>
+
+
     <!-- home -->
 
     <div

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

@@ -1,11 +1,11 @@
 <template>
-  <div 
+  <div
-  class="bg-cover lg:my-10"
+    class="bg-cover lg:my-20"
-  :class="{ 
+    :class="{
-    
+      bg: id == 'mission' && brandPanel3,
-     bg: id == 'mission' && brandPanel3,
+      gry: id == 'farm' && brandPanel3,
-     gry: id == 'farm' && brandPanel3 ,
+      gry2: id == 'developer' && brandPanel3,
-     gry2: id == 'developer' && brandPanel3  
+      gry3: id == 'newcommunity' && brandPanel3,
     }"
   >
     <div class="mx-auto py-10">
@@ -412,7 +412,6 @@
             text-center
             lg:px-56
             self-center
-           
           "
         >
           <div class="lg:self-center">
@@ -453,7 +452,7 @@
         </div>
       </div>
 
-       <div
+      <div
         v-else-if="id == 'farm' && brandPanel2"
         class="
           flex flex-wrap
@@ -476,7 +475,13 @@
               }}</span>
             </h2>
             <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide lg:max-w-2xl"
+              class="
+                pb-6
+                text-gray-900 text-xl
+                leading-tight
+                tracking-wide
+                lg:max-w-2xl
+              "
               v-html="brand.content"
             ></div>
             <a
@@ -539,7 +544,13 @@
               }}</span>
             </h2>
             <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide lg:max-w-2xl"
+              class="
+                pb-6
+                text-gray-900 text-xl
+                leading-tight
+                tracking-wide
+                lg:max-w-2xl
+              "
               v-html="brand.content"
             ></div>
             <a
@@ -566,17 +577,11 @@
         </div>
       </div>
 
-       <!-- developer -->
+      <!-- developer -->
 
-       <div
+      <div
         v-else-if="id == 'developer' && brandPanel2"
-        class="
+        class="flex flex-wrap lg:text-left text-center px-4 lg:px-20"
-          flex flex-wrap
-          lg:text-left
-          text-center
-          px-4
-          lg:px-20
-        "
       >
         <div class="lg:w-1/2 px-2 self-center">
           <g-image class="mx-auto" :src="image" :alt="brand.title" />
@@ -590,7 +595,13 @@
               }}</span>
             </h2>
             <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide lg:max-w-2xl"
+              class="
+                pb-6
+                text-gray-900 text-xl
+                leading-tight
+                tracking-wide
+                lg:max-w-2xl
+              "
               v-html="brand.content"
             ></div>
             <a
@@ -653,7 +664,13 @@
               }}</span>
             </h2>
             <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide lg:max-w-2xl"
+              class="
+                pb-6
+                text-gray-900 text-xl
+                leading-tight
+                tracking-wide
+                lg:max-w-2xl
+              "
               v-html="brand.content"
             ></div>
             <a
@@ -680,6 +697,125 @@
         </div>
       </div>
 
+      <!-- newcommunity -->
+      <div
+        v-else-if="id == 'newcommunity' && brandPanel2"
+        class="flex flex-wrap lg:text-left text-center px-4 lg:p-20"
+      >
+        <div class="lg:w-1/2 px-2 self-center">
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+        </div>
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none self-center">
+          <div class="lg:self-center">
+            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-light">
+              <span class="block font-normal">{{ brand.title }}</span>
+              <span class="block font-bold" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="
+                pb-6
+                text-gray-900 text-xl
+                leading-tight
+                tracking-wide
+                lg:max-w-2xl
+              "
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt"
+              target="_blank"
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                my-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+            <a
+              v-if="brand.btnTxt2"
+              target="_blank"
+              :href="brand.sourceUrl2"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                my-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt2 }}</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else-if="id == 'newcommunity' && brandPanel3"
+        class="flex flex-wrap lg:text-left text-center lg:py-20 lg:px-32 px-4"
+      >
+        <div class="lg:w-1/2 px-2 lg:mt-20 order-1 lg:order-none">
+          <div class="lg:self-center">
+            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-light">
+              <span class="block font-normal">{{ brand.title }}</span>
+              <span class="block font-bold" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="
+                pb-6
+                text-gray-900 text-xl
+                leading-tight
+                tracking-wide
+                lg:max-w-2xl
+              "
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt"
+              target="_blank"
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                my-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+        <div class="lg:w-1/2 px-2 self-center">
+          <g-image class="lg:w-2/3 mx-auto" :src="image" :alt="brand.title" />
+        </div>
+      </div>
+
       <!-- mission -->
       <div
         v-else-if="id == 'mission' && !brandPanel2 && !brandPanel3"
@@ -1290,12 +1426,15 @@ export default {
   background: -webkit-linear-gradient(to right, #70dfc9, #ea1ff7);
   background: linear-gradient(to right, #70dfc9, #ea1ff7);
 }
-.gry{
+.gry {
   background: #f2f2f2;
 }
 
-.gry2{
+.gry2 {
   background: #f2f2f2;
 }
 
+.gry3 {
+  background: #f2f2f2;
+}
 </style>

src/templates/MarkdownPage.vue

@@ -38,7 +38,8 @@
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.brandPanel2 &&
           $page.markdownPage.id !== 'farm' &&
-          $page.markdownPage.id !== 'developer'
+          $page.markdownPage.id !== 'developer' &&
+          $page.markdownPage.id !== 'newcommunity'
         "
         :brandPanel2="true"
       />
@@ -51,7 +52,8 @@
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.brandPanel3 &&
           $page.markdownPage.id !== 'farm' &&
-          $page.markdownPage.id !== 'developer'
+          $page.markdownPage.id !== 'developer' &&
+          $page.markdownPage.id !== 'newcommunity'
         "
         :brandPanel3="true"
       />
@@ -74,7 +76,6 @@
           $page.markdownPage.id !== 'developer' &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.id !== 'newcommunity'
-
         "
         :id="$page.markdownPage.id"
         :title="$page.markdownPage.header_title"
@@ -100,7 +101,8 @@
         v-if="
           $page.markdownPage.cta2 &&
           $page.markdownPage.id !== 'tft' &&
-          $page.markdownPage.id !== 'farm'
+          $page.markdownPage.id !== 'farm' &&
+          $page.markdownPage.id !== 'newcommunity'
         "
         :cta="$page.markdownPage.cta2"
         :textOnly="true"
@@ -200,7 +202,11 @@
 
       <CallToAction
         :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.cta3 && $page.markdownPage.id !== 'developer'"
+        v-if="
+          $page.markdownPage.cta3 &&
+          $page.markdownPage.id !== 'developer' &&
+          $page.markdownPage.id !== 'newcommunity'
+        "
         :cta="$page.markdownPage.cta3"
         :lastCta="true"
       />
@@ -331,6 +337,44 @@
         :main="$page.markdownPage.appsMain"
       />
 
+      <!-- newcommunity page -->
+
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="
+          $page.markdownPage.cta2 && $page.markdownPage.id == 'newcommunity'
+        "
+        :cta="$page.markdownPage.cta2"
+      />
+
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel3"
+        v-if="
+          $page.markdownPage.brandPanel3 &&
+          $page.markdownPage.id == 'newcommunity'
+        "
+        :brandPanel3="true"
+      />
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel2"
+        v-if="
+          $page.markdownPage.brandPanel2 &&
+          $page.markdownPage.id == 'newcommunity'
+        "
+        :brandPanel2="true"
+      />
+
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="
+          $page.markdownPage.cta3 && $page.markdownPage.id == 'newcommunity'
+        "
+        :cta="$page.markdownPage.cta3"
+        :textOnly="true"
+      />
+
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&