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

src/components/custom/MarketInfo.vue

@@ -4,11 +4,12 @@
       <h1
         class="
           text-md
-          lg:text-6xl
+          lg:text-5xl
           text-gray-900
           font-bold
           sm:text-9xl
           leading-tight
+          lg:max-w-2xl
         "
       >
         {{ main.title }}
@@ -18,12 +19,12 @@
         v-html="main.content"
       ></div>
     </div>
-    <div class="flex flex-col my-1 px-1 lg:w-1/2 overflow-hidden">
+    <div class="flex flex-col my-1 lg:px-4 lg:w-1/2 overflow-hidden">
       <g-image :src="mainItem.image" class="w-3/4 mx-auto" />
       <div class="flex-1 bg-white p-6 flex flex-col justify-between">
         <div class="flex-1">
           <div
-            class="mt-3 text-lg lg:text-2xl leading-tight text-gray-800"
+            class="mt-3 text-lg lg:text-xl leading-tight text-gray-800"
             v-html="mainItem.content"
           ></div>
         </div>
@@ -31,14 +32,14 @@
     </div>
 
     <!-- Column Content -->
-    <div class="flex flex-col my-1 px-1 lg:w-1/2 overflow-hidden">
+    <div class="flex flex-col my-1 px-4 lg:w-1/2 overflow-hidden">
       <div class="flex my-10" v-for="info in marketInfo" :key="info.id">
         <div class="flex-shrink-0">
-          <g-image :src="info.image" class="h-24 w-24" />
+          <g-image :src="info.image" class="h-28 w-28" />
         </div>
         <div class="ml-4">
           <div
-            class="mt-5 text-xl leading-6 text-gray-900"
+            class="mt-5 lg:mx-10 text-xl leading-6 text-gray-900"
             v-html="info.content"
           ></div>
         </div>

src/components/custom/SplitWithImage.vue

@@ -23,16 +23,13 @@
         <div class="px-4 lg:w-1/2 lg:ml-auto sm:px-8 xl:pr-16">
           <h2
             class="
-              text-xl
               tracking-tight
               leading-10
               font-bold
               text-gray-900
-              sm:text-5xl
               sm:leading-none
-              md:text-6xl
               lg:text-5xl
-              xl:text-6xl
+              max-w-2xl
             "
           >
             {{ tft.title }}

src/components/custom/sections/CallToAction.vue

@@ -787,14 +787,14 @@
       </h2>
       <div
         v-html="cta.content"
-        class="mt-6 mb-8 max-w-3xl mx-auto lg:text-2xl text-gray-800"
+        class="mt-6 mb-8 max-w-3xl mx-auto lg:text-xl text-gray-800"
       ></div>
       <g-image :src="cta.image" class="mx-auto w-full my-10" />
       <a
         class="
           inline-block
           bg-white
-          text-lg
+          lg:text-lg
           learn-button
           hover:bg-gray-400
           px-12
@@ -814,7 +814,7 @@
         class="
           inline-block
           bg-white
-          text-lg
+          lg:text-lg
           learn-button
           hover:bg-gray-400
           px-12

src/components/custom/sections/Features.vue

@@ -316,13 +316,13 @@
   <section class="py-24 px-4 text-center" v-else-if="id == 'token'">
     <h2
       class="
-        text-4xl
+        text-5xl
-        lg:max-w-sm
         mx-auto
         leading-tight
         mb-6
         font-bold font-heading
         uppercase
+        lg:max-w-2xl
       "
     >
       {{ main.title }}

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

@@ -360,10 +360,10 @@
         <div class="w-1/2 mx-auto px-2 self-center">
           <g-image :src="img" :alt="altImg" />
         </div>
-        <h2 class="lg:text-8xl uppercase mb-6 mt-20 leading-none font-heading">
+        <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
           {{ title }}
         </h2>
-        <div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>
+        <div class="mb-8 text-xl leading-relaxed" v-html="excerpt"></div>
       </div>
     </div>