Enhance: Change font style according to new design

canopas · Oct 6, 2023 · 80c953b · 80c953b
1 parent 658e3dc
commit 80c953b
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 29 deletions.
diff --git a/vue-frontend/src/components/android-app-development/BlackCtaSection.vue b/vue-frontend/src/components/android-app-development/BlackCtaSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem] tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px]"
+    class="tw-relative tw-mt-16 md:tw-mt-40 xl:tw-mt-60 tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px]"
   >
     <img
       :src="BackgroundImage[0]"
@@ -10,7 +10,7 @@
       loading="lazy"
     />
     <div
-      class="tw-container tw-absolute tw-top-4 md:tw-top-[5rem] xl:tw-top-[8rem] tw-w-full tw-p-4 tw-text-center tw-text-[#FFF] xs:tw-left-[13%] xll:tw-left-[24%] 3xl:tw-left-[33%] xs:tw-w-[75%]"
+      class="tw-container tw-absolute tw-top-4 md:tw-top-20 xl:tw-top-32 tw-w-full tw-p-4 tw-text-center tw-text-[#FFF] xs:tw-left-[13%] xll:tw-left-[24%] 3xl:tw-left-[33%] xs:tw-w-[75%]"
     >
       <div class="tw-m-auto">
         <p
@@ -27,12 +27,12 @@
       </div>
       <div class="tw-mx-auto tw-mt-5">
         <router-link
-          class="tw-h-[3rem] gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
+          class="tw-h-12 gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 tw-text-center"
           to="/contact"
           @click.native="mixpanel.track('tap_android_development_cta')"
         >
           <span
-            class="tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
+            class="tw-font-inter-semibold tw-text-base md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
             >Let's Chat
           </span>
         </router-link>

diff --git a/vue-frontend/src/components/android-app-development/BlogSection.vue b/vue-frontend/src/components/android-app-development/BlogSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="section tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem]">
+  <section class="section tw-mt-16 md:tw-mt-40 xl:tw-mt-60">
     <!-- Mobile UI start -->
     <div
       class="tw-relative tw-z-[1] tw-h-[27rem] sm:tw-h-[30rem] tw-overflow-hidden md:tw-hidden"

diff --git a/vue-frontend/src/components/android-app-development/CaseStudySection.vue b/vue-frontend/src/components/android-app-development/CaseStudySection.vue
@@ -44,7 +44,7 @@
               >{{ item.title }}</span
             >
             <span
-              class="tw-mt-2 tw-font-inter-regular tw-text-[1rem] tw-leading-[1.5rem] tw-text-black-core/[0.6]"
+              class="tw-mt-2 tw-font-inter-regular tw-text-base tw-text-black-core/[0.6]"
               v-html="item.content"
             ></span>
           </div>
@@ -68,17 +68,16 @@
           class="tw-absolute tw--mt-2 xs:tw-mt-0 tw-bottom-[1.53rem] tw-flex tw-flex-col tw-text-black-core/[0.87]"
         >
           <span
-            class="tw-font-inter-regular tw-text-[1rem] tw-leading-[1.5rem]"
+            class="tw-font-inter-regular tw-text-base"
             v-html="item.content"
           ></span>
           <div class="tw-mt-2 tw-flex tw-flex-wrap tw-justify-center">
             <router-link
-              class="white-btn gradient-border-btn tw-flex tw-h-[3rem] tw-w-max tw-items-center tw-rounded-[12px] tw-border-none"
+              class="white-btn gradient-border-btn tw-flex tw-h-12 tw-w-max tw-items-center tw-rounded-xl tw-border-none"
               to="/contact"
               @click.native="mixpanel.track('tap_android_development_cta4')"
             >
-              <span
-                class="tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem]"
+              <span class="tw-font-inter-semibold tw-text-base"
                 >Inquire Now</span
               >
             </router-link>
@@ -106,7 +105,7 @@
       >
         <swiper-slide v-for="item in cases" :key="item">
           <div
-            class="tw-flex tw-flex-row xl:tw-px-[4rem] tw-py-[6rem] tw-w-[91%] 2xl:tw-w-[77%] 2xll:tw-w-[72%] xll:tw-w-[91%] tw-mx-auto"
+            class="tw-flex tw-flex-row xl:tw-px-16 tw-py-24 tw-w-[91%] 2xl:tw-w-[77%] 2xll:tw-w-[72%] xll:tw-w-[91%] tw-mx-auto"
           >
             <div
               class="tw-flex tw-flex-col tw-w-[77%] xl:tw-w-[48%] 2xll:tw-w-[50%] lg:tw-mr-auto xll:tw-ml-auto"

diff --git a/vue-frontend/src/components/android-app-development/CtaSection.vue b/vue-frontend/src/components/android-app-development/CtaSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="tw-container tw-py-16 md:tw-py-[10rem] xl:tw-py-[15rem]">
+  <section class="tw-container tw-py-16 md:tw-py-40 xl:tw-py-60">
     <div class="md:tw-hidden tw-relative tw-flex tw-flex-col">
       <img
         :src="CtaBoyImage"
@@ -14,14 +14,11 @@
       </div>
       <div class="tw-mx-auto tw-mt-8 tw-z-[1]">
         <router-link
-          class="tw-h-[3rem] gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
+          class="tw-h-12 gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
           to="/contact"
           @click.native="mixpanel.track('tap_android_development_cta')"
         >
-          <span
-            class="tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem]"
-            >Contact Us
-          </span>
+          <span class="tw-font-inter-semibold tw-text-base">Contact Us </span>
         </router-link>
       </div>
       <div
@@ -46,10 +43,10 @@
           <span>Let’s talk about what we can build and scale together.</span>
         </div>
         <div
-          class="tw-ml-auto tw-mt-4 lg:tw-mt-[2.5rem] md:!tw-ml-[25%] xl:!tw-ml-[14%] 2xl:!tw-ml-[-7%]"
+          class="tw-ml-auto tw-mt-4 lg:tw-mt-10 md:!tw-ml-[25%] xl:!tw-ml-[14%] 2xl:!tw-ml-[-7%]"
         >
           <router-link
-            class="tw-h-[3rem] gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
+            class="tw-h-12 gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 tw-text-center"
             to="/contact"
             @click.native="mixpanel.track('tap_android_development_cta')"
           >

diff --git a/vue-frontend/src/components/android-app-development/DevelopmentSection.vue b/vue-frontend/src/components/android-app-development/DevelopmentSection.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem] tw-bg-white tw-h-[70%]"
-  >
+  <div class="tw-mt-16 md:tw-mt-40 xl:tw-mt-60 tw-bg-white tw-h-[70%]">
     <div
       class="xl:tw-h-[0vh] xl:!tw-sticky"
       :class="{
@@ -10,7 +8,7 @@
       }"
     >
       <div
-        class="tw-container tw-flex tw-flex-col tw-text-center xll:tw--mb-[18rem]"
+        class="tw-container tw-flex tw-flex-col tw-text-center xll:tw--mb-72"
       >
         <span
           class="tw-font-opensans-bold tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.375rem] md:tw-leading-[3rem] xl:tw-text-[3rem] xl:tw-leading-[3.875rem] xs:tw-mx-auto xs:tw-w-[71%]"
@@ -36,7 +34,7 @@
           <div
             v-for="(item, index) in items"
             :key="index"
-            class="tw-cursor-pointer tw-mt-[-12rem] xl:tw-mt-32 xll:tw-mt-[36rem] tw-min-w-[100vw] tw-h-[900px] xl:tw-h-full"
+            class="tw-cursor-pointer tw-mt--48 xl:tw-mt-32 xll:tw-mt-[36rem] tw-min-w-[100vw] tw-h-[900px] xl:tw-h-full"
           >
             <div
               class="tw-relative !-tw-mr-2 tw-mb-12 tw-mt-[17rem] xl:tw-mt-[6.5rem] xll:tw-mt-[-15rem]"

diff --git a/vue-frontend/src/components/android-app-development/FaqSection.vue b/vue-frontend/src/components/android-app-development/FaqSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="sm:tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem]">
+  <section class="sm:tw-mt-16 md:tw-mt-40 xl:tw-mt-60">
     <div
       class="tw-mb-4 tw-bg-pink-gradient-background md:tw-container md:tw-bg-none"
     >
@@ -157,11 +157,10 @@
             </collapse-transition>
             <div class="tw-mx-auto tw-my-8 md:tw-hidden">
               <div
-                class="tw-border tw-border-white tw-h-[3rem] tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
+                class="tw-border tw-border-white tw-h-12 tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 tw-text-center"
                 @click="showAdditionalFAQs = !showAdditionalFAQs"
               >
-                <span
-                  class="tw-text-white tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem]"
+                <span class="tw-text-white tw-font-inter-semibold tw-text-base"
                   >{{ showAdditionalFAQs ? "View Less" : "View More" }}
                 </span>
                 <font-awesome-icon

diff --git a/vue-frontend/src/components/android-app-development/SuccessStorySection.vue b/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
@@ -1,6 +1,6 @@
 <template>
   <section>
-    <div class="div tw-relative tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem]">
+    <div class="div tw-relative tw-mt-16 md:tw-mt-40 xl:tw-mt-60">
       <h2
         class="sm:tw-pb-10 tw-text-center tw-text-[1.875rem] tw-leading-[2.438rem] md:tw-text-[2.25rem] md:tw-leadig-[2.875rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem] tw-font-opensans-bold tw-text-black-core/[0.87]"
       >