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

src/assets/scss/main.scss

@@ -30,10 +30,10 @@ h1, h2 {
   font-family: "Roboto", sans-serif !important;
 }
 
+// tft page
 .tft_section h2{
   font-family: 'Oswald', sans-serif !important;
 }
-
 .tft_subtitle{
   font-family: 'Oswald', sans-serif;
   font-weight: 400 !important;

src/components/custom/Slider.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="my-20">
+  <div class="my-20 tft_section">
     <div v-if="main" class="text-center mx-2">
-      <h2 class="text-4xl uppercase leading-tight font-semibold font-heading my-0">{{ main.title }}</h2>
+      <h2 class="text-6xl uppercase leading-none font-heading my-0">{{ main.title }}</h2>
-      <h2 v-if="main.subtitle" class="text-4xl uppercase leading-tight font-semibold font-heading mt-0">{{ main.subtitle }}</h2>
+      <h2 v-if="main.subtitle" class="text-6xl uppercase leading-none font-heading mt-0">{{ main.subtitle }}</h2>
       <div
-        class="my-10 max-w-2xl text-xl mx-auto text-gray-600 sm:mt-4"
+        class="my-10 text-2xl mx-auto text-gray-800 sm:mt-4 tft_subtitle"
         v-html="main.content"
       ></div>
     </div>

src/components/custom/sections/CallToAction.vue

@@ -227,49 +227,51 @@
     </div>
 
     <!-- tft -->
-    <div class="w-full max-w-7xl mx-auto lg:mt-20 lg:px-16" v-else-if="id == 'tft'">
+    <div class="w-full max-w-7xl mx-auto lg:mt-20 lg:px-16 tft_section" v-else-if="id == 'tft'">
       <h2
         v-if="cta.title"
-        class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
+        class="lg:w-1/2 text-6xl mb-6 mt-20 leading-none font-heading mx-auto"
       >
         {{ cta.title }}
       </h2>
-      <div v-html="cta.content" class="mt-6 mb-8 text-xl text-gray-800"></div>
+      <div v-html="cta.content" class="mt-6 mb-8 text-xl tracking-wide tft_subtitle text-gray-800"></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="
+           class="
-            inline-block
+              inline-block
-            cursor-pointer
+              bg-gray-900
-            bg-blue-900
+              text-xl
-            text-sm
+              learn-button
-            learn-button
+              hover:bg-gray-800
-            hover:bg-blue-800
+              text-gray-100
-            text-gray-100
+              px-16
-            px-12
+              py-1
-            py-2
+              mb-4
-            mr-5
+              shadow
-            mb-4
+              rounded-full
-            shadow
+              tft_subtitle
-            rounded-full
+              tracking-wide
-          "
+            "
           >{{ cta.video_button }}</a
         >
       </div>
       <a
         class="
-          inline-block
+              inline-block
-          bg-blue-900
+              bg-gray-900
-          text-sm
+              text-xl
-          learn-button
+              learn-button
-          hover:bg-blue-800
+              hover:bg-gray-800
-          text-gray-100
+              text-gray-100
-          px-12
+              px-16
-          py-2
+              py-1
-          mb-4
+              mb-4
-          shadow
+              shadow
-          rounded-full
+              rounded-full
-        "
+              tft_subtitle
+              tracking-wide
+            "
         target="_blank"
         v-if="cta.button"
         :href="cta.link"

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

@@ -245,7 +245,7 @@
       <!-- tft -->
       <div
         v-else-if="id == 'tft'"
-        class="flex flex-wrap text-center lg:text-left "
+        class="flex flex-wrap text-center tft_section lg:text-left "
         
       >
         <div class="lg:w-1/2 px-2 self-center">
@@ -257,17 +257,13 @@
         </div>
         <div
           class="
-            lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none
+            lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-center
           "
         >
           <div class="lg:self-center">
             <h2
               class="
-                text-4xl
+                text-5xl mb-6 uppercase leading-none font-heading
-                mb-2
-                uppercase
-                leading-tight
-                font-semibold font-heading
               "
             >
               <span class="block">{{ brand.title }}</span>
@@ -275,7 +271,7 @@
                 brand.subtitle
               }}</span>
             </h2>
-            <div class="py-6 mt-4 text-gray-600" v-html="brand.content"></div>
+            <div class="py-6 mt-4 text-gray-900 text-xl tft_subtitle tracking-wide" v-html="brand.content"></div>
             <a
               v-if="brand.btnTxt"
               target="_blank"

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

@@ -182,11 +182,12 @@
               hover:bg-gray-800
               text-gray-100
               px-16
-              py-2
+              py-1
               mb-4
               shadow
               rounded-full
               tft_subtitle
+              tracking-wide
             "
             :href="link"
             >{{ button }}</a
@@ -201,11 +202,12 @@
               hover:bg-gray-800
               text-gray-100
               px-16
-              py-2
+              py-1
               mb-4
               shadow
               rounded-full
               tft_subtitle
+              tracking-wide
             "
             :href="link"
             >{{ button }}</a

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

@@ -2,25 +2,30 @@
   <div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
     <div
       v-if="id == 'tft'"
-      class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:rounded-lg"
+      class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:rounded-lg tft_section"
     >
-      <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+      <div class="py-2 px-6 max-w-xl lg:max-w-5xl lg:w-1/2 text-center">
-        <h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
+        <h2 class="text-6xl mb-6 leading-none font-heading">{{ card.title }}</h2>
-        <div class="mt-4 text-gray-700" v-html="card.content"></div>
+        <div class="mt-4 text-gray-900 text-xl tft_subtitle tracking-wide" v-html="card.content"></div>
         <div class="mt-8" v-if="card.button">
           <a
             v-if="card.link.includes('http')"
             target="_blank"
             :href="card.link"
             class="
-              bg-blue-900
+              inline-block
+              bg-gray-900
+              text-xl
               learn-button
-              hover:bg-blue-700
+              hover:bg-gray-800
               text-gray-100
-              px-5
+              px-16
-              py-3
+              py-1
-              font-semibold
+              mb-4
-              rounded
+              shadow
+              rounded-full
+              tft_subtitle
+              tracking-wide
             "
             >{{ card.button }}</a
           >
@@ -28,14 +33,19 @@
             v-else
             :href="card.link"
             class="
-              bg-blue-900
+              inline-block
+              bg-gray-900
+              text-xl
               learn-button
-              hover:bg-blue-700
+              hover:bg-gray-800
               text-gray-100
-              px-5
+              px-16
-              py-3
+              py-1
-              font-semibold
+              mb-4
-              rounded
+              shadow
+              rounded-full
+              tft_subtitle
+              tracking-wide
             "
             >{{ card.button }}</a
           >

src/components/marketing/sections/team-sections/with_large_images.vue

@@ -2,7 +2,7 @@
   <div class="bg-white">
     <div
       v-if="id == 'tft' && !farmingProcess"
-      class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24"
+      class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24 tft_section"
     >
       <div
         class="
@@ -15,12 +15,12 @@
       >
         <div v-for="(section, index) in sections" :key="index" class="p-5">
           <div class="leading-6">
-            <h2 class="text-8xl font-bold uppercase" v-if="section.title">
+            <h2 class="text-8xl font-bold uppercase mt-0" v-if="section.title">
               {{ section.title }}
             </h2>
             <div
               v-if="section.content"
-              class="text-2xl"
+              class="text-2xl tft_subtitle tracking-wide"
               v-html="section.content"
             ></div>
           </div>