Merge branch 'development' of github.com:threefoldfoundation/www_threefold_io into development

content/page/home/header/header.md

@@ -1,14 +1,19 @@
 ---
-id: home_header
+id: carbon_neutral
 title: ''
-subtitle: Welcome to ThreeFold
+subtitle: Truly Better for Our Planet #Welcome to ThreeFold
 btn1: ''
 link1: ''
 btn2: ''
 link2: ''
 ---
 
-With our game-changing technology and incredible partners, together we are building a better Internet – for humanity and for our planet. 
+ThreeFold’s peer-to-peer nature brings considerable energy efficiencies as compared to current solutions. 
+<br/>
+<br/>
+The remaining carbon footprint of the grid will be converted into carbon credits and invested in planet positive projects to enable the world’s first carbon neutral grid.
+
+<!-- With our game-changing technology and incredible partners, together we are building a better Internet – for humanity and for our planet. 
 <br/>
 <br/>
 The ThreeFold peer-to-peer (P2P) Internet delivers on privacy and security, gives us all back ownership of our digital lives, can be made available everywhere in the world, and uses much less energy than today's solution. 
@@ -16,6 +21,6 @@ The ThreeFold peer-to-peer (P2P) Internet delivers on privacy and security, give
 <br/>
 It is the foundation for a more fair and equal tomorrow. 
 <br/>
-And it is available, today!
+And it is available, today! -->
 
 <!-- We are building the next generation peer-to-peer internet infrastructure. After creating a powerful and super sustainable operating system that can host all of humanity's digital needs and data in smart contracts, we are now creating a fair, equal and private Internet experience to free humanity from the tech giants that exploit our data.

content/page/home/home.md

@@ -15,7 +15,6 @@ brandPanel: fix_internet
 brandPanel2: grid_solution
 cta3: home_cta3
 cta4: home_cta4
-solution_image3: ./bg3.png
 cta5: home_cta5
 comparisonMain: comparison
 comparisonSecs: [private, equal, sustainable]
@@ -28,3 +27,6 @@ cta: home_cta
 <!-- header: home_header
 solution_image: ./home_header.png -->
 <!--  -->
+
+<!-- solution_image3: ./carbon_neutral.png
+header: carbon_neutral -->

package.json

@@ -7,6 +7,10 @@
     "explore": "gridsome explore"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
     "@gridsome/source-filesystem": "^0.6.2",
     "@gridsome/transformer-remark": "^0.6.2",
     "@noxify/gridsome-remark-classes": "^1.0.0",
@@ -21,18 +25,16 @@
     "gridsome-source-graphql": "^1.0.2",
     "gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
     "lodash": "^4.17.20",
+    "node-sass": "^5.0.0",
     "pluralize": "^8.0.0",
     "sass-loader": "^10.0.2",
     "tailwindcss": "^1.8.4",
     "tailwindcss-gradients": "^3.0.0",
     "tailwindcss-tables": "^0.4.0",
     "v-tooltip": "^2.0.3",
-    "vue-markdown": "^2.2.4",
+    "vue-markdown": "^2.1.2"
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-brands-svg-icons": "^5.14.0",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/vue-fontawesome": "^2.0.0",
-    "node-sass": "^5.0.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.2.0"
+  }
 }

src/assets/scss/main.scss

@@ -1,4 +1,12 @@
 @tailwind base;
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://fonts.googleapis.com/css2?family=Roboto");
+  font-display: swap;
+}
+
 blockquote {
   @apply border-l;
   @apply border-l-4;
@@ -12,15 +20,15 @@ blockquote {
 }
 
 body {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 body h2 {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 h1 {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 body {
@@ -28,7 +36,7 @@ body {
 }
 
 body p {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 .act-link {
@@ -56,7 +64,7 @@ ul {
   @apply ml-5;
 }
 
-:not(pre)>code {
+:not(pre) > code {
   @apply text-red-600;
   @apply text-base;
 }
@@ -96,7 +104,7 @@ ul {
 }
 
 .text-3xl {
-    font-size: 2.50rem
+  font-size: 2.5rem;
 }
 
 .no-border {
@@ -145,26 +153,26 @@ button:focus {
 .text-8xl {
   font-size: 5rem;
   line-height: 1;
-    font-family: 'Lato', sans-serif !important;
+  font-family: "Roboto", sans-serif !important;
 }
 
 text-6xl {
-    font-family: 'Lato', sans-serif !important;
+  font-family: "Roboto", sans-serif !important;
 }
 
 text-5xl {
-    font-family: 'Lato', sans-serif !important;
+  font-family: "Roboto", sans-serif !important;
 }
 
 @media (min-width: 375px) {
   .text-3xl {
-        font-size: 2.25rem
+    font-size: 2.25rem;
   }
 }
 
 @media (min-width: 768px) {
-    .with-large>.flex-post:nth-child(5n),
+  .with-large > .flex-post:nth-child(5n),
-    .with-large>.flex-post:nth-child(5n-1) {
+  .with-large > .flex-post:nth-child(5n-1) {
     // @apply flex-100;
     flex: 1 1 50%;
     @apply flex-col;
@@ -191,8 +199,8 @@ text-5xl {
       @apply text-xl;
     }
   }
-    .news>.flex-post:nth-child(5n),
+  .news > .flex-post:nth-child(5n),
-    .news>.flex-post:nth-child(5n-1) {
+  .news > .flex-post:nth-child(5n-1) {
     // @apply flex-100;
     flex: 1 1 50%;
     @apply flex-col;
@@ -220,7 +228,7 @@ text-5xl {
     }
   }
   .text-3xl {
-        font-size: 2.50rem
+    font-size: 2.5rem;
   }
   // .news>.flex-post:nth-child(9n+1),
   // .news>.flex-post:nth-child(9n+2) {

src/components/custom/Modal.vue

@@ -1,35 +1,21 @@
 <template>
-  <div>
+  <div @click="handleClose">
     <div
       v-if="showModal"
-      class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
+      class="fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
     >
-      <div class="relative w-auto my-6 mx-auto max-w-6xl">
-        <button
-          class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
-          @click="handleClose"
-        >
-          <span
-            class="bg-transparent text-white opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
-          >
-            ×
-          </span>
-        </button>
       <div
-          class="border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none"
+        class="iframe-container relative h-0 w-1/2"
+        style="padding-bottom: 56.25%"
       >
-          <div class="relative flex-auto">
         <iframe
-              width="800"
-              height="450"
           :src="link"
           frameborder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope;
+          width="640"
-            picture-in-picture"
+          height="360"
           allowfullscreen
-            />
+          class="absolute top-0 left-0 w-full h-full"
-          </div>
+        ></iframe>
-        </div>
       </div>
     </div>
     <div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
@@ -47,3 +33,10 @@ export default {
   },
 };
 </script>
+<style scoped>
+@media (max-width: 768px) {
+  .iframe-container {
+    width: 100%;
+  }
+}
+</style>

src/components/custom/sections/CallToAction.vue

@@ -12,10 +12,7 @@
       >
         {{ cta.slogan }}
       </span>
-      <div
+      <div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
-        v-html="cta.content"
-        class="mt-6 mb-8 text-gray-600"
-      ></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
@@ -37,7 +34,8 @@
         >{{ cta.button2 }}</g-link
       >
       <g-link
-        class="inline-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"       v-if="cta.button3"
+        class="inline-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"
+        v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link
       >
@@ -50,14 +48,11 @@
       >
         {{ cta.title }}
       </h2>
-      <div
+      <div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
-        v-html="cta.content"
-        class="mt-6 mb-8 text-gray-600"
-      ></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="inline-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"
+          class="inline-block cursor-pointer 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"
           >{{ cta.video_button }}</a
         >
       </div>

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

@@ -66,5 +66,6 @@ export default {
 
 .take_apart {
   background-color: #f5f5f5;
+  max-height: 570px;
 }
 </style>

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

@@ -13,7 +13,7 @@
           target="_blank"
           class="col-span-1 flex justify-center m-1 bg-gray-100"
         >
-          <img class="" :src="img(partner.logo)" />
+          <img :src="img(partner.logo)" />
         </g-link>
       </div>
     </div>

src/pages/Index.vue

@@ -13,11 +13,6 @@
       />
     </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 lg:mt-20"
         v-if="$page.markdownPage.solution_image2"
@@ -29,6 +24,17 @@
         :cta="$page.markdownPage.cta2"
       />
 
+      <!-- <g-image
+        class="m-auto w-2/4 lg:mt-20"
+        v-if="$page.markdownPage.solution_image3"
+        :src="$page.markdownPage.solution_image3.src"
+      /> -->
+
+      <!-- <SolutionsHeader
+        v-if="$page.markdownPage.header"
+        :header="$page.markdownPage.header"
+      /> -->
+
       <ShowcaseProducts
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
@@ -48,11 +54,6 @@
         :cta="$page.markdownPage.cta4"
       /> -->
 
-      <!-- <g-image
-        v-if="$page.markdownPage.solution_image3"
-        :src="$page.markdownPage.solution_image3.src"
-      /> -->
-
       <!-- <CallToAction
         v-if="$page.markdownPage.cta5"
         :cta="$page.markdownPage.cta5"
@@ -132,7 +133,7 @@
         link
         solution_image
         solution_image2
-        solution_image3
+     #  solution_image3
         header{
          title
          subtitle

tailwind.config.js

@@ -62,7 +62,9 @@ module.exports = {
   },
   variants: {},
   plugins: [
-                function({
+    require('@tailwindcss/aspect-ratio'),
+
+    function ({
       addComponents
     }) {
       addComponents({
@@ -83,7 +85,7 @@ module.exports = {
         }
       })
     },
-                function({
+    function ({
       addUtilities,
       e,
       theme,