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

src/components/custom/sections/CallToAction.vue

@@ -227,14 +227,14 @@
     </div>
 
     <!-- tft -->
-    <div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'tft'">
+    <div class="w-full max-w-7xl mx-auto lg:mt-20 lg:px-16" v-else-if="id == 'tft'">
       <h2
         v-if="cta.title"
         class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
       >
         {{ cta.title }}
       </h2>
-      <div v-html="cta.content" class="mt-6 mb-8 text-2xl text-gray-800"></div>
+      <div v-html="cta.content" class="mt-6 mb-8 text-xl text-gray-800"></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
@@ -266,7 +266,6 @@
           text-gray-100
           px-12
           py-2
-          mr-5
           mb-4
           shadow
           rounded-full

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

@@ -1,6 +1,6 @@
 <template>
   <div class="">
-    <div class="max-w-screen-xl mx-auto py-24">
+    <div class="max-w-screen-xl mx-auto py-10">
       <!-- token -->
       <div
         v-if="id == 'token'"
@@ -245,44 +245,19 @@
       <!-- tft -->
       <div
         v-else-if="id == 'tft'"
-        class="
-          brandpanel
-          rounded-lg
-          overflow-hidden
-          lg:grid lg:grid-cols-2
-          lg:gap-4
-        "
+        class="flex flex-wrap text-center lg:text-left "
+        
       >
-        <div class="relative pb-3/5 -mt-6 md:pb-1/2">
+        <div class="lg:w-1/2 px-2 self-center">
           <g-image
-            class="
-              absolute
-              brandpanel
-              inset-0
-              w-full
-              h-full
-              sm:h-auto
-              translate-x-0 translate-y-center
-              rounded-md
-              object-fill object-left-top
-              sm:translate-x-0
-              lg:translate-y-20
-            "
+            
             :src="image"
             :alt="brand.title"
           />
         </div>
         <div
           class="
-            pt-10
-            pb-10
-            px-6
-            sm:pt-16
-            sm:px-10
-            lg:py-16
-            lg:pr-0
-            xl:py-20
-            xl:px-15
+            lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none
           "
         >
           <div class="lg:self-center">

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

@@ -165,7 +165,7 @@
       class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
       v-else-if="id == 'tft'"
     >
-      <div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
+      <div class="lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
         <h2 class="text-6xl mb-6 mt-20 leading-none font-heading">
           {{ title }}
         </h2>
@@ -183,7 +183,6 @@
               text-gray-100
               px-12
               py-2
-              mr-5
               mb-4
               shadow
               rounded-full
@@ -202,7 +201,6 @@
               text-gray-100
               px-12
               py-2
-              mr-5
               mb-4
               shadow
               rounded-full
@@ -213,7 +211,7 @@
           <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
         </div>
       </div>
-      <div class="lg:w-3/5 px-2 self-center">
+      <div class="lg:w-1/2 px-2 self-center">
         <g-image :src="img" :alt="altImg" />
       </div>
     </div>