Add conversations page

content/footer/footer.md

@@ -28,6 +28,8 @@ items:
         
  - title: Participate
    links:
+    - name: Conversations
+      link: /conversations
     - name: Start Farming
       link: /farm
     - name: Buy the Token

content/navigation/navigation.md

@@ -47,6 +47,8 @@ navLinks:
     external: false
     expandable: true
     submenu:
+      - title: Conversations
+        path: /conversations
       - title: Our People
         path: /people
       - title: ThreeFold Community

content/page/conversations/InTheNews/inTheNews.md

@@ -0,0 +1,44 @@
+---
+id: conversations_social
+title: Where We Gather
+partners:
+  - path: https://forum.threefold.io/
+    logo: ./logos/forum.png
+
+  - path: https://github.com/threefoldtech
+    logo: ./logos/github.png
+
+  - path: https://library.threefold.me/info/threefold#/
+    logo: ./logos/documentation.png
+
+  - path: https://twitter.com/threefold_io
+    logo: ./logos/twitter.png
+
+  - path: https://t.me/threefoldnews
+    logo: ./logos/telegram_new.png
+
+  - path: https://t.me/threefold
+    logo: ./logos/telegram_chat.png
+
+  - path: https://t.me/threefoldfarmers
+    logo: ./logos/telegram_farmers.png
+
+  - path: https://t.me/threefoldtesting 
+    logo: ./logos/telegram_chattester.png
+
+  - path: https://www.reddit.com/r/threefold/
+    logo: ./logos/reddit.png
+
+  - path: https://www.youtube.com/threefoldfoundation
+    logo: ./logos/youtube.png
+
+  - path: '#subscribe'
+    logo: ./logos/mail_list.png
+
+  - path: https://www.linkedin.com/company/threefold-foundation/
+    logo: ./logos/linkedin.png
+
+  
+---
+
+

content/page/conversations/cta/index.md

@@ -0,0 +1,7 @@
+---
+id: conversationsCta
+title: A DECENTRALIZED EFFORT
+button: Propose a Topic
+link: "#"
+---
+These discussions are meant to create the space for our community to dive deeper into the ongoing developments of the People’s Internet. Got a topic idea? Let’s work together to build it out!

content/page/conversations/cta2/index.md

@@ -0,0 +1,7 @@
+---
+id: conversationsCta2
+title: PAST TALKS 
+button: Watch Past Talks
+link: '#'
+---
+Watch the highlights of our past conversations on YouTube. To get the full experience, you’ll need to join us live!

content/page/conversations/index.md

@@ -0,0 +1,19 @@
+---
+id: conversations
+metaTitle: ThreeFold | Conversations
+metaDesc: "Join live ThreeFold sessions to discuss ongoing contributions to the People’s Internet horizon.\n Limited spaces available." 
+metaImg: ./SAMAsset 3.png
+header_slogan: Limited spaces available.
+header_title: ThreeFold Conversations
+header_image: ./SAMAsset 3.png
+button: Propose a Talk
+link: '#'
+header_altImg: Threefold Conversations
+header_excerpt: Join live ThreeFold sessions to discuss ongoing contributions to the People’s Internet horizon. 
+conversationsMain: conversationsMain
+conversations: [e1, e2, e3, e4, e5, e6]
+cta: conversationsCta
+cta2: conversationsCta2
+subscribe: conversations_subscribe
+inTheNews: conversations_social
+---

content/page/conversations/subscribe/index.md

@@ -0,0 +1,8 @@
+---
+id: conversations_subscribe
+title: Stay in Touch
+button: Subscribe
+link: '#'
+image: ./subscribe.jpg
+---
+Sign up to get reminders about upcoming ThreeFold Talks or to stay updated on “all things ThreeFold.”

content/page/conversations/upTalks/e1/index.md

@@ -0,0 +1,11 @@
+---
+id: e1
+day: Wednesday
+month: January 5TH
+time: 6pm CET / 12pm EST
+title: "Episode 1: From Zero to One"
+hosts: Richard, Kristof, Weynand, Adnan, Andreas …
+button: Reserve Your Spot
+link: "#"
+---
+Meet some Co-Founders and other members of the ecosystem who will share about ThreeFold’s journey from inception to-date. Once framed as the best kept secret in the world, ThreeFold is about to shake the world with its next-generation Internet technology. An inspiring collective story.

content/page/conversations/upTalks/e2/index.md

@@ -0,0 +1,11 @@
+---
+id: e2
+day: Wednesday
+month: January 12TH
+time: Not confirmed yet..
+title: "Episode 2: Powering the next Digital Era"
+hosts: Richard, Adnan, Weynand
+button: Reserve Your Spot
+link: "#"
+---
+ThreeFold Co-Founder and Ecosystem Lead [Adnan Fatayerji](/people/adnan_fatayerji/) joins Co-Founder and Tech Lead [Weynand Kuijpers](/people/weynand_kuijpers/) to walk us through the design of the ThreeFold Grid and why it is the missing layer for blockchains, metaverses, web 3.0, IoT and more. Special emphasis on what’s possible ThreeFold Grid 3.0 and the key benefits of using the ThreeFold Grid.

content/page/conversations/upTalks/e3/index.md

@@ -0,0 +1,11 @@
+---
+id: e3
+day: Wednesday
+month: January 19TH
+time: Not confirmed yet..
+title: "Episode 3: Tokenomics Overview"
+hosts: Richard, Kristof, Adnan, …
+button: Reserve Your Spot
+link: "#"
+---
+[Kristof de Spiegeleer](/people/kristof_de_spiegeleer/), Co-Founder and Lead Architect deep dives into the tokenomics of TFT and how it will decentralize the Internet just like BTC decentralized the banking system. Discover the token that empowers humanity to join the largest and fastest growing industry in the world, the Internet and cloud.

content/page/conversations/upTalks/e4/index.md

@@ -0,0 +1,11 @@
+---
+id: e4
+day: Wednesday
+month: January 26TH
+time: Not confirmed yet..
+title: "Episode 4: Farming: The new way to provide Internet"
+hosts: Richard, Andreas, Michael, Scott
+button: Reserve Your Spot
+link: "#"
+---
+In this talk, discover the ins and outs of Farming with Grid Lead [Andreas Hartl](/people/andreas_hartl/), Green Edge Cloud, and DIY Farmer [Scott Yeager](/people/scott_yeager/). We’ll take a close look at how ThreeFold is best positioned to provide far edge internet capacity to host emerging data demands.

content/page/conversations/upTalks/e5/index.md

@@ -0,0 +1,11 @@
+---
+id: e5
+day: Wednesday
+month: February 2ND
+time: Not confirmed yet..
+title: "Episode 5: A regenerative and inclusive Internet"
+hosts: Richard, Sacha, Koen, Jennifer
+button: Reserve Your Spot
+link: "#"
+---
+Meet Marketing Lead [Sacha Obeegadoo](/people/sacha_obeegadoo/) and Take Action Global (TAG) Founders [Koen Timmers](/people/koen_timmers/) and Jennifer Williams share about how ThreeFold and TAG will bring internet access, climate education and earth regeneration across the global south.

content/page/conversations/upTalks/e6/index.md

@@ -0,0 +1,11 @@
+---
+id: e6
+day: Wednesday
+month: February 9TH
+time: Not confirmed yet..
+title: "Episode 6: Meet Quantum Safe Filesystem"
+hosts: Richard, Weynand, … 
+button: Reserve Your Spot
+link: "#"
+---
+The name says it all, Quantum Safe Filesystem is bringing the unimaginable to reality. Deep dive in how ThreeFold flagship storage solution will revolutionize the Internet storage industry by protecting user data from the most powerful computers in the world.

content/page/conversations/upTalks/main/index.md

@@ -0,0 +1,4 @@
+---
+id: conversationsMain
+title: Upcoming Talks
+---

gridsome.config.js

@@ -474,6 +474,22 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'ConversationsMain',
+                path: './content/page/**/upTalks/main/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Conversations',
+                path: './content/page/**/upTalks/**/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -537,7 +553,9 @@ module.exports = {
                     subscribe: 'Subscribe',
                     team: 'Team',
                     info: 'Info',
-                    dev: 'Dev'
+                    dev: 'Dev',
+                    conversationsMain: 'ConversationsMain',
+                    conversations: 'Conversations'
                 }
             }
         },

src/components/custom/ConversationSec.vue

@@ -0,0 +1,94 @@
+<template>
+  <section class="px-4">
+    <h2
+      v-if="main.title"
+      class="
+        lg:text-6xl
+        text-center
+        uppercase
+        mb-2
+        leading-none
+        font-bold font-heading
+      "
+    >
+      {{ main.title }}
+    </h2>
+    
+    <article
+      class="flex my-20 text-center px-10 md:text-left flex-col md:flex-row"
+      v-for="conversation in conversations"
+      :key="conversation.id"
+    >
+      <div class="lg:w-1/3 mb-12">
+        <span class="block text-sm mb-1">{{ conversation.day }}</span>
+        <span
+          class="
+            block
+            text-xl
+            font-medium
+            uppercase
+            leading-6
+            text-gray-900
+            mb-1.5
+          "
+          >{{ conversation.month }}</span
+        ><span class="block text-sm mb-1">{{ conversation.time }}</span>
+      </div>
+      <div class="lg:w-2/3">
+        <h3 class="mb-3 text-4xl font-medium uppercase leading-9">
+          {{ conversation.title }}
+        </h3>
+        <p class="mb-4"><b>Hosts:</b> {{ conversation.hosts }}</p>
+        <div
+          class="font-lg post-content leading-6"
+          v-html="conversation.content"
+        ></div>
+        <a
+          v-if="conversation.link.includes('http')"
+          target="_blank"
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            my-5
+            border-2
+            shadow
+            border-black
+          "
+          :href="conversation.link"
+          >{{ conversation.button }}</a
+        >
+        <a
+          v-else
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            my-5
+            border-2
+            shadow
+            border-black
+          "
+          :href="conversation.link"
+          >{{ conversation.button }}</a
+        >
+      </div>
+    </article>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["id", "main", "conversations"],
+};
+</script>

src/components/custom/SplitWithForm.vue

@@ -1,13 +1,23 @@
 <template>
-  <section class="body-font" id="subscribe">
-    <div class="mx-auto flex  py-10 lg:py-20 md:flex-row flex-col items-center lg:px-10">
+  <section class="body-font">
+    <div
+      class="
+        mx-auto
+        flex
+        py-10
+        lg:py-20
+        md:flex-row
+        flex-col
+        items-center
+        lg:px-10
+      "
+      v-if="id == 'subscribe'"
+    >
       <div
         class="
-          lg:pl-24
-          lg:w-1/2
+          lg:pl-24 lg:w-1/2
           flex flex-col
-          md:items-start
-          md:text-left
+          md:items-start md:text-left
           mb-16
           md:mb-0
           mx-4
@@ -17,15 +27,16 @@
       >
         <h2
           class="
-            lg:text-6xl uppercase mb-0 leading-tight font-semibold font-heading
+            lg:text-6xl
+            uppercase
+            mb-0
+            leading-tight
+            font-semibold font-heading
           "
         >
           {{ subscribe.title }}
         </h2>
-        <div
-          class="my-8 lg:text-xl"
-          v-html="subscribe.content"
-        ></div>
+        <div class="my-8 lg:text-xl" v-html="subscribe.content"></div>
         <div class="flex w-full md:justify-start justify-center items-end">
           <!-- <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
             <label for="hero-field" class="leading-7 text-sm text-gray-600"
@@ -58,7 +69,7 @@
 
           <a
             href="javascript:;"
-                onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+            onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
             class="
               inline-flex
               bg-white
@@ -153,6 +164,73 @@
         />
       </div>
     </div>
+    <div
+      v-else-if="id == 'conversations'"
+      class="
+        mx-auto
+        flex
+        py-10
+        lg:py-20
+        md:flex-row
+        flex-col
+        items-center
+        lg:px-10
+      "
+    >
+      <div
+        class="
+          lg:pl-24 lg:w-1/2
+          flex flex-col
+          md:items-start md:text-left
+          mb-16
+          md:mb-0
+          mx-4
+          items-center
+          text-center
+        "
+      >
+        <h2
+          class="
+            lg:text-6xl
+            uppercase
+            mb-0
+            leading-tight
+            font-semibold font-heading
+          "
+        >
+          {{ subscribe.title }}
+        </h2>
+        <div class="my-8 lg:text-xl" v-html="subscribe.content"></div>
+        <div class="flex w-full md:justify-start justify-center items-end">
+          <a
+            href="javascript:;"
+            onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+            class="
+              inline-flex
+              bg-white
+              border-2
+              py-1
+              px-12
+              learn-button
+              hover:bg-gray-400
+              shadow
+              border-black
+              text-black text-lg
+              cursor-pointer
+            "
+          >
+            {{ subscribe.button }}
+          </a>
+        </div>
+      </div>
+      <div class="md:w-1/2 hidden md:flex">
+        <g-image
+          class="object-cover w-3/4 mx-auto object-center rounded"
+          :alt="subscribe.title"
+          :src="subscribe.image.src"
+        />
+      </div>
+    </div>
   </section>
 </template>
 

src/components/custom/sections/CallToAction.vue

@@ -1459,7 +1459,11 @@
       >
     </div>
 
-    <div  id="gettft" class="w-full mx-auto lg:py-20" v-else-if="id == 'tft' && lastCta">
+    <div
+      id="gettft"
+      class="w-full mx-auto lg:py-20"
+      v-else-if="id == 'tft' && lastCta"
+    >
       <h2
         v-if="cta.title"
         class="
@@ -1480,10 +1484,17 @@
         class="mt-6 mb-8 mx-2 lg:text-xl text-gray-800"
       ></div>
 
-       <div class="quicklinks">
-          <a :href="cta.link" target="_blank"><g-image class="py-2 my-2 px-5 border-2 border-black" :src="cta.image2"  /></a
-          ><a  :href="cta.link2" target="_blank"><g-image class="py-2 my-2 px-5 border-2 border-black" :src="cta.image3" /></a>
-        </div>
+      <div class="quicklinks">
+        <a :href="cta.link" target="_blank"
+          ><g-image
+            class="py-2 my-2 px-5 border-2 border-black"
+            :src="cta.image2" /></a
+        ><a :href="cta.link2" target="_blank"
+          ><g-image
+            class="py-2 my-2 px-5 border-2 border-black"
+            :src="cta.image3"
+        /></a>
+      </div>
 
       <!-- <a
         class="
@@ -1702,6 +1713,67 @@
       >
     </div>
 
+    <!-- conversations -->
+    <div class="w-full mx-auto lg:py-20" v-else-if="id == 'conversations'">
+      <h2
+        v-if="cta.title"
+        class="
+          lg:text-6xl
+          text-center
+          uppercase
+          mb-2
+          leading-none
+          font-bold font-heading
+        "
+      >
+        {{ cta.title }}
+      </h2>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-8 lg:text-xl text-gray-800 max-w-2xl mx-auto"
+      ></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 max-w-7xl mx-auto" v-else>
       <h2
         v-if="cta.title"
@@ -1725,7 +1797,6 @@
             py-2
             mr-5
             mb-4
-            rounded
             shadow
             rounded-full
           "
@@ -1785,7 +1856,6 @@
           py-2
           mr-5
           mb-4
-          rounded
           shadow
           rounded-full
         "

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

@@ -447,8 +447,11 @@
           v-html="excerpt"
         ></div>
         <div class="quicklinks">
-          <a :href="link" target="_blank"><g-image :src="buttonImg"  style="width:200px"/></a
-          ><a :href="link2" target="_blank"><g-image :src="buttonImg2" style="width:150px"/></a>
+          <a :href="link" target="_blank"
+            ><g-image :src="buttonImg" style="width: 200px" /></a
+          ><a :href="link2" target="_blank"
+            ><g-image :src="buttonImg2" style="width: 150px"
+          /></a>
         </div>
       </div>
     </div>
@@ -584,7 +587,63 @@
         :alt="altImg"
       />
     </div>
+    <!-- conversation -->
+    <div
+      class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2"
+      v-else-if="id == 'conversations'"
+    >
+      <g-image
+        class="order-2 lg:order-none mx-auto w-1/2"
+        :src="img"
+        :alt="altImg"
+      />
+      <div class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center">
+        <h2 class="md:text-6xl uppercase mb-6 mt-20 leading-none font-heading">
+          {{ title }}
+        </h2>
+        <div class="mb-8 mx-auto lg:text-2xl max-w-2xl" v-html="excerpt"></div>
 
+        <a
+          v-if="link.includes('http')"
+          target="_blank"
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            mb-4
+            border-2
+            shadow
+            border-black
+          "
+          :href="link"
+          >{{ button }}</a
+        >
+        <a
+          v-else
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            mb-4
+            border-2
+            shadow
+            border-black
+          "
+          :href="link"
+          >{{ button }}</a
+        >
+      </div>
+    </div>
     <!-- community -->
     <div
       class="flex flex-wrap text-center lg:text-left lg:pt-10 lg:pb-10 -mx-2"

src/components/marketing/sections/logo-clouds/off_white_grid.vue

@@ -1,9 +1,21 @@
 <template>
   <div class="bg-white">
     <div
-      v-if="id == 'community'"
+      v-if="id == 'community' || id == 'conversations'"
       class="max-w-screen-xl mx-auto py-6 px-4 sm:px-6 lg:py-12 lg:px-10"
     >
+      <h2
+        v-if="id == 'conversations'"
+        class="
+          lg:text-6xl
+          mb-0
+          leading-tight
+          text-center
+          font-semibold font-heading
+        "
+      >
+        {{ news.title }}
+      </h2>
       <div
         v-html="news.content"
         class="text-center text-6xl font-semibold leading-tight font-heading"

src/templates/MarkdownPage.vue

@@ -78,7 +78,8 @@
           $page.markdownPage.id !== 'grid' &&
           $page.markdownPage.id !== 'developer' &&
           $page.markdownPage.id !== 'tft' &&
-          $page.markdownPage.id !== 'community'
+          $page.markdownPage.id !== 'community' &&
+          $page.markdownPage.id !== 'conversations'
         "
         :id="$page.markdownPage.id"
         :title="$page.markdownPage.header_title"
@@ -95,7 +96,8 @@
           $page.markdownPage.cta &&
           $page.markdownPage.id !== 'grid' &&
           $page.markdownPage.id !== 'tft' &&
-          $page.markdownPage.id !== 'farm'
+          $page.markdownPage.id !== 'farm' &&
+          $page.markdownPage.id !== 'conversations'
         "
         :cta="$page.markdownPage.cta"
       />
@@ -105,7 +107,8 @@
           $page.markdownPage.cta2 &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.id !== 'farm' &&
-          $page.markdownPage.id !== 'community'
+          $page.markdownPage.id !== 'community' &&
+          $page.markdownPage.id !== 'conversations'
         "
         :cta="$page.markdownPage.cta2"
         :textOnly="true"
@@ -215,6 +218,30 @@
         :lastCta="true"
       />
     </div>
+    <div class="container mx-auto">
+      <ConversationSec
+        v-if="
+          $page.markdownPage.conversations &&
+          $page.markdownPage.conversations.length > 0
+        "
+        :main="$page.markdownPage.conversationsMain"
+        :conversations="$page.markdownPage.conversations"
+      />
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="
+          $page.markdownPage.cta && $page.markdownPage.id == 'conversations'
+        "
+        :cta="$page.markdownPage.cta"
+      />
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="
+          $page.markdownPage.cta2 && $page.markdownPage.id == 'conversations'
+        "
+        :cta="$page.markdownPage.cta2"
+      />
+    </div>
     <g-image
       v-if="
         $page.markdownPage.id !== 'careers' && $page.markdownPage.solution_image
@@ -224,6 +251,11 @@
     />
 
     <div class="container-fluid sm:pxi-0 mx-auto py-5 overflow-visible">
+      <SplitWithForm
+        v-if="$page.markdownPage.subscribe"
+        :id="$page.markdownPage.id"
+        :subscribe="$page.markdownPage.subscribe"
+      />
       <ShowcaseProducts
         v-if="
           $page.markdownPage.productData.length > 0 &&
@@ -602,6 +634,7 @@
     }
          inTheNews {
           id
+          title
           content
           partners {
             path
@@ -845,6 +878,29 @@
        image
        content
      }
+     conversationsMain {
+       id
+       title
+     }
+     conversations {
+       id
+       day
+       month
+       time
+       title
+       hosts
+       button
+       link
+       content
+     }
+    subscribe {
+      id
+      title
+      content
+      button
+      link
+      image
+      }
     }
     allCustomCta {
       edges {
@@ -889,6 +945,8 @@ import RoadMap from "~/components/custom/Roadmap.vue";
 import MarketInfo from "~/components/custom/MarketInfo.vue";
 import LinkTable from "~/components/marketing/sections/cta-sections/Link_Table.vue";
 import SplitWithImage from "~/components/custom/SplitWithImage.vue";
+import ConversationSec from "~/components/custom/ConversationSec.vue";
+import SplitWithForm from "~/components/custom/SplitWithForm.vue";
 
 export default {
   components: {
@@ -920,6 +978,8 @@ export default {
     RoadMap,
     MarketInfo,
     SplitWithImage,
+    ConversationSec,
+    SplitWithForm,
   },
   computed: {
     getImg() {