From 0f545b1ce03cd45d239f69066ac92f47399b4117 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sun, 23 Jan 2022 12:28:05 +0200
Subject: [PATCH] update css and font

---
 .../custom/sections/CallToAction.vue          | 56 +++++++++--------
 .../sections/blog-sections/3_column_cards.vue |  4 +-
 .../sections/cta-sections/BrandPanel.vue      | 45 +++++++-------
 .../sections/cta-sections/Header.vue          | 12 ++--
 .../feature-sections/SimpleColumns.vue        | 55 ++++++++--------
 .../sections/stats-sections/SimpleInCard.vue  | 62 ++++++++++---------
 6 files changed, 125 insertions(+), 109 deletions(-)

diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index fd2205a7c..59e8bf602 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -1777,32 +1777,35 @@
 
     <div
       v-else-if="id == 'cloud' && textOnly"
-      class="w-full py-20 max-w-3xl mx-auto"
+      class="w-full py-20 max-w-3xl mx-auto lg:my-20"
     >
-      <h2 class="text-5xl text-white leading-tight font-semibold font-heading">
+      <h2 class="text-6xl text-white leading-tight font-semibold font-heading">
         {{ cta.title }}
         <span class="text-pink">{{ cta.subtitle }}</span>
       </h2>
       <div
         v-html="cta.content"
-        class="text-2xl text-white leading-normal py-10"
+        class="text-xl text-white leading-normal py-10"
       ></div>
       <a
         v-if="cta.link.includes('http')"
         target="_blank"
         :href="cta.link"
         class="
-          green
-          bg-green-300
-          lg:text-2xl
-          text-lg
-          font-extrabold
-          px-12
-          hover:bg-green-200
-          rounded-lg
-          py-4
-          mb-4
-          shadow
+          
+        inline-block
+        bg-white
+        text-lg
+        learn-button
+        hover:bg-gray-400
+        px-12
+        py-1
+        mr-5
+        my-4
+        border-2
+        shadow
+        border-black
+      
         "
         >{{ cta.button }}</a
       >
@@ -1810,17 +1813,20 @@
         v-else
         :href="cta.link"
         class="
-          green
-          bg-green-300
-          lg:text-2xl
-          text-lg
-          font-extrabold
-          px-12
-          hover:bg-green-200
-          rounded-lg
-          py-4
-          mb-4
-          shadow
+          
+        inline-block
+        bg-white
+        text-lg
+        learn-button
+        hover:bg-gray-400
+        px-12
+        py-1
+        mr-5
+        my-4
+        border-2
+        shadow
+        border-black
+      
         "
         >{{ cta.button }}</a
       >
diff --git a/src/components/marketing/sections/blog-sections/3_column_cards.vue b/src/components/marketing/sections/blog-sections/3_column_cards.vue
index 244c0431e..e3b765f98 100644
--- a/src/components/marketing/sections/blog-sections/3_column_cards.vue
+++ b/src/components/marketing/sections/blog-sections/3_column_cards.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="id == 'cloud'"
-    class="relative lg:py-28 py-10 px-4 sm:px-6 lg:px-8"
+    class="relative lg:py-28 py-10 px-4 sm:px-6 lg:px-16"
   >
     <div class="absolute inset-0">
       <div class="bg-white h-1/3 sm:h-2/3"></div>
@@ -58,7 +58,7 @@
                 class="
                   mt-3
                   text-base text-xl
-                  lg:text-2xl
+                  
                   leading-normal
                   text-gray-800
                 "
diff --git a/src/components/marketing/sections/cta-sections/BrandPanel.vue b/src/components/marketing/sections/cta-sections/BrandPanel.vue
index 749573e05..8aff502e0 100644
--- a/src/components/marketing/sections/cta-sections/BrandPanel.vue
+++ b/src/components/marketing/sections/cta-sections/BrandPanel.vue
@@ -9,7 +9,7 @@
     }"
   >
     <div v-if="id == 'cloud' && !lastBrand" class="to-black">
-      <div class="max-w-screen-2xl mx-auto py-20">
+      <div class="max-w-screen-2xl mx-auto lg:p-20">
         <div class="rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
           <div
             class="
@@ -23,7 +23,7 @@
           >
             <div class="lg:self-center">
               <h2
-                class="leading-none font-extrabold mb-10 text-white"
+                class="leading-none font-extrabold mb-10 text-white lg:text-6xl"
                 :class="{
                   'lg:text-5xl leading-none': id == 'home',
                   'lg:text-5xl ': id == 'network',
@@ -32,7 +32,7 @@
                 {{ brand.title }}
               </h2>
               <div
-                class="mt-4 lg:text-2xl text-xl leading-normal text-white"
+                class="mt-4 text-xl leading-normal text-white"
                 v-html="brand.content"
               ></div>
               <div class="my-10" v-if="brand.button">
@@ -78,7 +78,7 @@
           </div>
           <div class="relative">
             <g-image
-              class="inset-0 mx-auto object-cover"
+              class="inset-0 w-3/4 mx-auto object-cover"
               :class="{ 'w-3/4': id == 'network' }"
               :src="image"
               :alt="brand.title"
@@ -1453,11 +1453,11 @@
               "
             >
               <div class="lg:self-center">
-                <h2 class="lg:text-5xl leading-none text-black">
+                <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
                   {{ brand.title }}
                 </h2>
                 <div
-                  class="mt-4 text-xl lg:text-2xl leading-normal text-black"
+                  class="mt-4 text-xl leading-normal text-black"
                   v-html="brand.content"
                 ></div>
                 <div class="my-10">
@@ -1465,20 +1465,19 @@
                     :href="brand.link"
                     v-if="brand.button"
                     class="
-                      text-center
                       inline-block
-                      green
-                      bg-green-300
-                      lg:text-2xl
+                      bg-white
                       text-lg
-                      font-extrabold
+                      learn-button
+                      hover:bg-gray-400
+                      bo
                       px-12
-                      hover:bg-green-200
-                      rounded-lg
-                      py-4
+                      py-1
+                      mr-5
                       mb-4
-                      lg:mr-4
+                      border-2
                       shadow
+                      border-black
                     "
                     >{{ brand.button }}</a
                   >
@@ -1486,19 +1485,19 @@
                     :href="brand.link2"
                     v-if="brand.button2"
                     class="
-                      text-center
                       inline-block
-                      green
-                      bg-green-300
-                      lg:text-2xl
+                      bg-white
                       text-lg
-                      font-extrabold
+                      learn-button
+                      hover:bg-gray-400
+                      bo
                       px-12
-                      hover:bg-green-200
-                      rounded-lg
-                      py-4
+                      py-1
+                      mr-5
                       mb-4
+                      border-2
                       shadow
+                      border-black
                     "
                     >{{ brand.button2 }}</a
                   >
diff --git a/src/components/marketing/sections/cta-sections/Header.vue b/src/components/marketing/sections/cta-sections/Header.vue
index 1cd9f3756..7644c8fe8 100644
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -512,7 +512,7 @@
         :alt="altImg"
       />
     </div>
-
+<!-- home -->
     <div
       class="flex flex-wrap text-center lg:text-left lg:pt-10 lg:pb-10 -mx-2"
       v-else-if="id == 'home'"
@@ -787,25 +787,27 @@
       </div>
     </div>
     <div
-      class="flex flex-wrap text-center mx-4 lg:pt-4 pb-10"
+      class="flex flex-wrap text-center mx-4 lg:pt-4 mt-10 lg:mx-10  lg:mt-4 pb-10"
       v-else-if="id == 'cloud'"
     >
       <div class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center">
         <h2
           class="
             lg:text-5xl
+            font-normal
             uppercase
             mb-6
+            mt-10
             leading-none
-            font-black font-heading
+            font-heading
           "
         >
           {{ title }}
           <br />
-          <span>{{ title2 }}</span>
+          <span class="block leading-none font-bold">{{ title2 }}</span>
         </h2>
         <div
-          class="mb-8 mx-auto lg:text-2xl text-xl lg:max-w-4xl leading-normal"
+          class="mb-8 mx-auto lg:text-2xl text-xl lg:max-w-5xl leading-normal"
           v-html="excerpt"
         ></div>
       </div>
diff --git a/src/components/marketing/sections/feature-sections/SimpleColumns.vue b/src/components/marketing/sections/feature-sections/SimpleColumns.vue
index 07b5635b8..d9248eb70 100644
--- a/src/components/marketing/sections/feature-sections/SimpleColumns.vue
+++ b/src/components/marketing/sections/feature-sections/SimpleColumns.vue
@@ -1,22 +1,21 @@
 <template>
   <div class="py-20 bg-white">
-    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:max-w-screen-2xl lg:px-8">
-      <div v-if="main" class="mx-auto mb-24 lg:text-center">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:max-w-screen-2xl lg:px-16">
+      <div v-if="main" class="mx-auto mb-24 lg:text-center lg:max-w-5xl">
         <h2
           class="
-            lg:text-5xl
-            max-w-3xl
+            lg:text-6xl
+            text-center
             uppercase
-            mb-6
+            my-2
             leading-none
-            font-black font-heading
-            mx-auto
+            font-bold font-heading
           "
         >
           {{ main.title }}
         </h2>
         <div
-          class="mt-2 lg:text-2xl text-xl leading-normal text-gray-900"
+          class="mt-2 text-xl leading-normal text-gray-900"
           v-html="main.content"
         ></div>
       </div>
@@ -42,21 +41,21 @@
               }"
             />
           </div>
-          <div class="mt-5">
+          <div class="mt-5 ">
             <h2
               class="
-                text-3xl
+                text-2xl
                 uppercase
                 mb-6
                 leading-none
-                font-black font-heading
+                font-bold font-heading
                 py-8
               "
             >
               {{ section.title }}
             </h2>
             <div
-              class="mt-2 lg:text-2xl text-xl leading-normal text-gray-900 pb-6"
+              class="mt-2 text-xl leading-normal text-gray-900 pb-6"
               v-html="section.content"
             ></div>
           </div>
@@ -68,17 +67,19 @@
           target="_blank"
           :href="main.link"
           class="
-            green
-            bg-green-300
-            lg:text-2xl
+            inline-block
+            bg-white
             text-lg
-            font-extrabold
+            learn-button
+            hover:bg-gray-400
+            bo
             px-12
-            hover:bg-green-200
-            rounded-lg
-            py-4
+            py-1
+            mr-5
             mb-4
+            border-2
             shadow
+            border-black
           "
           >{{ main.button }}</a
         >
@@ -86,17 +87,19 @@
           v-else
           :href="main.link"
           class="
-            green
-            bg-green-300
-            lg:text-2xl
+            inline-block
+            bg-white
             text-lg
-            font-extrabold
+            learn-button
+            hover:bg-gray-400
+            bo
             px-12
-            hover:bg-green-200
-            rounded-lg
-            py-4
+            py-1
+            mr-5
             mb-4
+            border-2
             shadow
+            border-black
           "
           >{{ main.button }}</a
         >
diff --git a/src/components/marketing/sections/stats-sections/SimpleInCard.vue b/src/components/marketing/sections/stats-sections/SimpleInCard.vue
index 19b88555c..bf98c3b9b 100644
--- a/src/components/marketing/sections/stats-sections/SimpleInCard.vue
+++ b/src/components/marketing/sections/stats-sections/SimpleInCard.vue
@@ -4,12 +4,14 @@
       <div class="lg:max-w-xl mx-auto text-center">
         <h2
           class="
-            lg:text-5xl
-            uppercase
-            mb-6
-            leading-none
-            font-black font-heading
-            mx-auto
+            
+          lg:text-6xl
+          text-center
+          uppercase
+          my-2
+          leading-none
+          font-bold font-heading
+        
           "
         >
           {{ info.title }}
@@ -180,17 +182,19 @@
         target="_blank"
         :href="info.link"
         class="
-          green
-          bg-green-300
-          lg:text-2xl
-          text-lg
-          font-extrabold
-          px-12
-          hover:bg-green-200
-          rounded-lg
-          py-4
-          mb-4
-          shadow
+          inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            bo
+            px-12
+            py-1
+            mr-5
+            mb-4
+            border-2
+            shadow
+            border-black
         "
         >{{ info.button }}</a
       >
@@ -198,17 +202,19 @@
         v-else
         :href="info.link"
         class="
-          green
-          bg-green-300
-          lg:text-2xl
-          text-lg
-          font-extrabold
-          px-12
-          hover:bg-green-200
-          rounded-lg
-          py-4
-          mb-4
-          shadow
+          inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            bo
+            px-12
+            py-1
+            mr-5
+            mb-4
+            border-2
+            shadow
+            border-black
         "
         >{{ info.button }}</a
       >