update css about page

src/components/custom/Roadmap.vue

@@ -1,10 +1,10 @@
 <template>
   <section class="pb-10 px-4 bg-cover text-center">
     <div class="w-full mx-auto">
-      <g-image :src="roadmap.image" />
+      <g-image class="lg:w-3/4 mx-auto" :src="roadmap.image" />
       <div
         v-html="roadmap.content"
-        class="mt-10 mb-8 lg:text-2xl text-gray-900"
+        class="mt-10 mb-8 lg:text-xl text-gray-900"
       ></div>
     </div>
   </section>

src/components/custom/sections/CallToAction.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="lg:pb-20 px-4 bg-cover text-center"
+    class="px-4 bg-cover text-center"
     :class="{
       pink: id == 'home' && !lastCta,
       green: id == 'about-us' && lastCta,
@@ -8,7 +8,7 @@
   >
     <!-- about-us -->
     <div
-      class="w-full max-w-2xl mx-auto py-12"
+      class="w-full max-w-2xl mx-auto lg:py-20"
       v-if="id == 'about-us' && !textOnly && !lastCta"
     >
       <h2
@@ -26,7 +26,7 @@
       </h2>
       <div
         v-html="cta.content"
-        class="mt-6 mb-8 lg:text-2xl text-gray-800"
+        class="mt-6 mb-8 lg:text-xl text-gray-800"
       ></div>
       <g-image :src="cta.image" class="my-10" />
 
@@ -54,7 +54,7 @@
         class="
           inline-block
           bg-white
-          text-sm
+          text-xl
           learn-button
           hover:bg-gray-400
           px-12
@@ -75,7 +75,7 @@
         class="
           inline-block
           bg-white
-          text-sm
+          text-xl
           learn-button
           hover:bg-gray-400
           px-12
@@ -111,7 +111,7 @@
       </h2>
       <div
         v-html="cta.content"
-        class="mt-6 mb-8 lg:text-2xl text-gray-800"
+        class="mt-6 mb-8 lg:text-xl text-gray-800"
       ></div>
     </div>
 
@@ -147,13 +147,13 @@
       </h2>
       <div
         v-html="cta.content"
-        class="mt-6 mb-8 lg:text-2xl text-gray-800"
+        class="mt-6 mb-8 lg:text-xl text-gray-800"
       ></div>
       <a
         class="
           inline-block
           bg-white
-          text-sm
+          text-lg
           learn-button
           hover:bg-gray-400
           px-12
@@ -174,7 +174,7 @@
         class="
           inline-block
           bg-white
-          text-sm
+          text-lg
           learn-button
           hover:bg-gray-400
           px-12

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

@@ -254,7 +254,7 @@
       <!-- About us -->
       <div
         v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"
-        class="flex flex-wrap text-left"
+        class="flex flex-wrap text-left lg:my-10"
       >
         <div class="lg:w-1/2 px-2 self-center">
           <g-image class="mx-auto" :src="image" :alt="brand.title" />
@@ -271,7 +271,7 @@
               class="
                 py-6
                 mt-4
-                text-gray-900 text-2xl
+                text-xl
                 leading-tight
                 tracking-wide
               "
@@ -301,7 +301,7 @@
 
       <div
         v-else-if="id == 'about-us' && brandPanel2"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:mb-20"
       >
         <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
           <div class="lg:self-center">
@@ -345,7 +345,7 @@
 
       <div
         v-else-if="id == 'about-us' && brandPanel3"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+        class="flex flex-wrap lg:text-left lg:py-12 px-4"
       >
         <div class="lg:w-1/2 px-2 self-center">
           <g-image :src="image" :alt="brand.title" />
@@ -359,7 +359,7 @@
               }}</span>
             </h2>
             <div
-              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
               v-html="brand.content"
             ></div>
             <a

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

@@ -93,7 +93,7 @@
     </div>
 
     <div
-      class="flex flex-wrap text-center items-center lg:text-left lg:mt-4 -mx-2"
+      class="flex flex-wrap text-center items-center lg:text-left lg:mb-10 lg:mt-4 -mx-2"
       v-else-if="id == 'about-us'"
     >
       <div class="lg:w-1/2 px-2 lg:pr-10 lg:mt-10 order-1 lg:order-none">
@@ -116,9 +116,11 @@
             mb-8
             px-10
             text-center
-            lg:text-xl
+            text-xl
             text-extrabold
             leading-tight
+            lg:max-w-2xl
+            mx-auto
           "
           v-html="excerpt"
         ></div>
@@ -129,7 +131,7 @@
             class="
               inline-block
               bg-white
-              text-sm
+              text-lg
               learn-button
               hover:bg-gray-400
               bo
@@ -149,7 +151,7 @@
             class="
               inline-block
               bg-white
-              text-sm
+              text-lg
               learn-button
               hover:bg-gray-400
               bo