update developer page

content/footer/footer.md

@@ -6,8 +6,11 @@ linkedin: 'https://www.linkedin.com/company/threefold-foundation/'
 facebook: 'https://www.facebook.com/threefold.io'
 twitter: 'https://twitter.com/threefold_io'
 youtube: 'https://www.youtube.com/threefoldfoundation'
-github foundation: 'https://github.com/threefoldfoundation'
+github: 'https://github.com/threefoldfoundation'
-github tech: 'https://github.com/threefoldtech'
+github_tech: 'https://github.com/threefoldtech'
+dribbble: ''
+instagram: ''
+
 items:
  - title: Threefold Universe
    links:
@@ -26,7 +29,7 @@ items:
  - title: Participate
    links:
     - name: Start Farming
-      link: https://farming.threefold.io/farm
+      link: /farm
     - name: Buy the Token
       link: https://library.threefold.me/info/threefold#/tokens/threefold__how_to_buy
     - name: Use the Cloud

content/page/developer/brandPanel2/index.md

@@ -0,0 +1,12 @@
+---
+id: developer_brandPanel2
+title: JOIN US IN MAKING 
+subtitle : THREEFOLD BETTER 
+image: join_us_developer.jpg # src/assets/brandPanel/..
+btnTxt : Contribute 
+sourceUrl : https://library.threefold.me/info/threefold#/tfgrid/farming/threefold__farming_home
+btnTxt2 : ''
+sourceUrl2 : ''
+---
+All our docs are the results of community efforts. Create a pull request if you see mistakes, room for improvement, or new opportunities to help the ThreeFold community.
+

content/page/developer/brandPanel3/index.md

@@ -0,0 +1,13 @@
+---
+id: developer_brandPanel3
+title: APPLY FOR
+subtitle : TESTING GRANTS
+image: developer_testing.png # src/assets/brandPanel/..
+btnTxt : Start Testing
+sourceUrl : https://forum.threefold.io/t/diy-nodes-guide/837
+---
+We have different use cases for you to take ThreeFold’s technology on a test drive. 
+
+<br>
+
+From zero to hero –- are you ready for the challenge?

content/page/developer/developer.md

@@ -0,0 +1,18 @@
+---
+id: developer
+metaTitle: ThreeFold | developer
+metaDesc: A builder’s manual for ThreeFold. Built by visionaries, for visionaries.
+metaImg: ./developer_head.jpg
+header_slogan: '' 
+header_title: THREEFOLD
+header_title2: DEVELOPER RESOURCES
+header_image: ./developer_head.jpg
+button: ''
+link: ''
+header_altImg: threefold
+header_excerpt: A builder’s manual for ThreeFold. Built by visionaries, for visionaries.
+brandPanel3: developer_brandPanel3
+brandPanel2 : developer_brandPanel2
+cta: developer_cta2
+
+---

content/page/farm/farm.md

@@ -1,6 +1,6 @@
 ---
 id: farm
-metaTitle: ThreeFold | Mission
+metaTitle: ThreeFold | Farm
 metaDesc: Farming TFT is done by connection a node or server to the ThreeFold Grid. Yes, it's that simple. Join thousands that make the Internet of tomorrow possible.
 metaImg: ./farm_header.jpg
 header_slogan: '' 

src/components/custom/sections/CallToAction.vue

@@ -4,6 +4,7 @@
     :class="{
       pink: id == 'home' && !lastCta,
       green: id == 'mission' && lastCta,
+      gry: id == 'developer'
     }"
   >
     <!-- mission -->
@@ -330,6 +331,69 @@
       > -->
     </div>
 
+    <!-- developer -->
+    <div
+      class="w-full mx-auto lg:mt-20 lg:p-20"
+      v-else-if="id == 'developer'"
+    >
+      <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.title2 }}</span>
+      </h2>
+      <div v-html="cta.content" class="mt-6 mb-8 lg:text-2xl max-w-4xl mx-auto"></div>
+      <g-image :src="cta.image" class="lg:my-20 mx-auto" />
+      <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
@@ -1363,4 +1427,8 @@ export default {
 .green {
   background-color: #70dfc9;
 }
+
+.gry{
+  background: #f2f2f2;
+}
 </style>

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

@@ -1,10 +1,11 @@
 <template>
   <div 
-  class="bg-cover"
+  class="bg-cover lg:my-20"
   :class="{ 
     
      bg: id == 'mission' && brandPanel3,
-     gry: id == 'farm' && brandPanel3, 
+     gry: id == 'farm' && brandPanel3 ,
+     gry2: id == 'developer' && brandPanel3  
     }"
   >
     <div class="mx-auto py-10">
@@ -565,6 +566,121 @@
         </div>
       </div>
 
+       <!-- developer -->
+
+       <div
+        v-else-if="id == 'developer' && brandPanel2"
+        class="
+          flex flex-wrap
+          lg:text-left
+          text-center
+          lg:pt-16
+          px-4
+          lg:mb-20 lg:px-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 == 'developer' && brandPanel3"
+        class="flex flex-wrap lg:text-left text-center lg:p-20 px-4"
+      >
+        <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 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>
+
       <!-- mission -->
       <div
         v-else-if="id == 'mission' && !brandPanel2 && !brandPanel3"
@@ -1179,4 +1295,8 @@ export default {
   background: #f2f2f2;
 }
 
+.gry2{
+  background: #f2f2f2;
+}
+
 </style>

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

@@ -4,7 +4,7 @@
 -->
 <template>
   <footer class="bg-white">
-    <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+    <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
       <div class="xl:grid xl:grid-cols-4 xl:gap-2">
         <div class="space-y-8 xl:col-span-1">
           <g-image
@@ -44,7 +44,7 @@
                 />
               </svg>
             </a>
-            <a
+            <!-- <a
               v-if="record.instagram != '#'"
               :href="record.instagram"
               class="text-gray-400 hover:text-gray-500"
@@ -62,7 +62,7 @@
                   clip-rule="evenodd"
                 />
               </svg>
-            </a>
+            </a> -->
             <a
               v-if="record.twitter != '#'"
               :href="record.twitter"
@@ -99,6 +99,26 @@
                 />
               </svg>
             </a>
+
+            <a
+              v-if="record.github_tech != '#'"
+              :href="record.github_tech"
+              class="text-gray-400 hover:text-gray-500"
+            >
+              <span class="sr-only">GitHub</span>
+              <svg
+                class="h-6 w-6"
+                aria-hidden="true"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </a>
                         <a
               v-if="record.telegram != '#'"
               :href="record.telegram"
@@ -123,7 +143,7 @@
              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
             </svg>
             </a>
-            <a
+            <!-- <a
               v-if="record.dribbble != '#'"
               :href="record.dribbble"
               class="text-gray-400 hover:text-gray-500"
@@ -141,7 +161,7 @@
                   clip-rule="evenodd"
                 />
               </svg>
-            </a>
+            </a> -->
 
             <a
               class="text-gray-400 hover:text-gray-500"

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

@@ -174,7 +174,6 @@
         text-center
         items-center
         lg:text-left lg:mb-20 lg:mt-24 lg:mx-40
-        
       "
       v-if="id == 'farm'"
     >
@@ -202,7 +201,6 @@
             lg:text-left
             leading-tight
             mx-auto
-            
           "
           v-html="excerpt"
         ></div>
@@ -253,6 +251,79 @@
       </div>
     </div>
 
+    <!-- developer -->
+    <div
+      class="flex flex-wrap text-center items-center lg:mb-20 lg:mt-24 lg:mx-40"
+      v-if="id == 'developer'"
+    >
+      <div class="lg:w-1/2 px-10 lg:mt-10 order-1 lg:order-none lg:max-w-2xl">
+        <h2
+          class="
+            lg:text-7xl
+            font-normal
+            uppercase
+            mb-6
+            mt-20
+            leading-none
+            font-heading
+          "
+        >
+          {{ title }}
+          <br />
+          <span class="block leading-none font-bold">{{ title2 }}</span>
+        </h2>
+        <div
+          class="mb-8 text-center text-2xl text-extrabold leading-tight mx-auto lg:max-w-md"
+          v-html="excerpt"
+        ></div>
+        <div v-if="button" class="block text-center">
+          <a
+            v-if="link.includes('http')"
+            target="_blank"
+            class="
+              inline-block
+              bg-white
+              text-lg
+              learn-button
+              hover:bg-gray-400
+              bo
+              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
+              bo
+              px-12
+              py-1
+              mr-5
+              mb-4
+              border-2
+              shadow
+              border-black
+            "
+            :href="link"
+            >{{ button }}</a
+          >
+          <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
+        </div>
+      </div>
+      <div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
+    </div>
+
     <!-- <div
       v-else-if="id == 'tft'"
       class="

src/layouts/Default.vue

@@ -61,9 +61,10 @@ query {
   footer(id: "footer"){
       facebook
       github
+      github_tech
       twitter
-      dribbble
+      #dribbble
-      instagram
+      #instagram
       telegram
       description
       items{

src/templates/MarkdownPage.vue

@@ -24,7 +24,8 @@
           $page.markdownPage.brandPanel &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.brandPanel &&
-          $page.markdownPage.id !== 'farm'
+          $page.markdownPage.id !== 'farm' &&
+          $page.markdownPage.id !== 'developer'
         "
         :brand="$page.markdownPage.brandPanel"
       />
@@ -36,7 +37,8 @@
           $page.markdownPage.brandPanel2 &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.brandPanel2 &&
-          $page.markdownPage.id !== 'farm'
+          $page.markdownPage.id !== 'farm' &&
+          $page.markdownPage.id !== 'developer'
         "
         :brandPanel2="true"
       />
@@ -48,7 +50,8 @@
           $page.markdownPage.brandPanel3 &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.brandPanel3 &&
-          $page.markdownPage.id !== 'farm'
+          $page.markdownPage.id !== 'farm' &&
+          $page.markdownPage.id !== 'developer' 
         "
         :brandPanel3="true"
       />
@@ -68,6 +71,7 @@
           $page.markdownPage.id !== 'mission' &&
           $page.markdownPage.id !== 'farm' &&
           $page.markdownPage.id !== 'grid' &&
+          $page.markdownPage.id !== 'developer' &&
           $page.markdownPage.id !== 'tft'
         "
         :id="$page.markdownPage.id"
@@ -86,6 +90,7 @@
           $page.markdownPage.id !== 'grid' &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.id !== 'farm' 
+          
         "
         :cta="$page.markdownPage.cta"
       />
@@ -269,6 +274,24 @@
         :brandPanel2="true"
       />
 
+      <!-- developer page -->
+
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel3"
+        v-if="$page.markdownPage.brandPanel3 && $page.markdownPage.id == 'developer'"
+        :brandPanel3="true"
+      />
+
+    
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel2"
+        v-if="$page.markdownPage.brandPanel2 && $page.markdownPage.id == 'developer'"
+        :brandPanel2="true"
+      />
+
+
       <AppListItem
         v-if="
           $page.markdownPage.appData && $page.markdownPage.appData.length > 0