From 544717bfa993451d801e364165924808254cfd64 Mon Sep 17 00:00:00 2001
From: cp-jagruti-a <jagruti.a@canopas.com>
Date: Tue, 19 Dec 2023 14:17:29 +0530
Subject: [PATCH] Unification in home page

---
 .../android-app-development/FaqSection.vue    |  6 +++---
 .../CaseStudySection.vue                      | 10 +++++-----
 .../flutter-app-development/CtaSection.vue    |  2 +-
 .../flutter-app-development/CtaSection2.vue   |  2 +-
 .../DevelopmentSection.vue                    | 10 +++++-----
 .../flutter-app-development/FaqSection.vue    | 20 +++++++++----------
 .../components/home-new/BlogSection.vue       |  2 +-
 .../components/home-new/HomeIndex.vue         |  4 ++--
 .../home-new/ServiceSectionMobile.vue         |  4 ++--
 .../ios-app-development/BlogSection.vue       |  6 +++---
 .../ios-app-development/CaseStudySection.vue  | 12 +++++------
 .../ios-app-development/CtaSection.vue        |  8 ++++----
 .../ios-app-development/CtaSection2.vue       |  4 ++--
 .../DevelopmentSection.vue                    | 10 +++++-----
 .../ios-app-development/FaqSection.vue        | 14 ++++++-------
 .../ios-app-development/LandingSection.vue    |  8 ++++----
 .../ios-app-development/SuccessStory.vue      | 14 ++++++-------
 .../mobile-app-development/CTASection2.vue    |  2 +-
 .../mobile-app-development/ClientReview.vue   |  2 +-
 .../components/partials/NewFooter.vue         |  6 +++---
 .../pages/flutter-app-development.vue         |  2 +-
 .../pages/mobile-app-development.vue          |  4 ++--
 22 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/nuxt-frontend/components/android-app-development/FaqSection.vue b/nuxt-frontend/components/android-app-development/FaqSection.vue
index 1a74e0c0a..576e29129 100644
--- a/nuxt-frontend/components/android-app-development/FaqSection.vue
+++ b/nuxt-frontend/components/android-app-development/FaqSection.vue
@@ -147,7 +147,7 @@
                 class="border border-white primary-btn"
                 @click="showAdditionalFAQs = !showAdditionalFAQs"
               >
-                <span class="text-white sub-h3-semibold lg:mobile-header-3-semibold"
+                <span class="text-white sub-h3-semibold"
                   >{{ showAdditionalFAQs ? "View Less" : "View More" }}
                 </span>
                 <Icon
@@ -181,7 +181,7 @@
           class="mr-2 h-5 w-5"
           icon="arrow-left"
           id="leftArrow"
-        /><span class="v2-canopas-gradient-text sub-h4-semibold">Back</span>
+        /><span class="v2-canopas-gradient-text sub-h1-semibold">Back</span>
       </button>
       <button
         v-else
@@ -192,7 +192,7 @@
         @click.native="$mixpanel.track('tap_android_app_faq_next_arrow')"
         aria-label="rightArrow"
       >
-        <span class="v2-canopas-gradient-text sub-h4-semibold"
+        <span class="v2-canopas-gradient-text sub-h1-semibold"
           >View More Questions</span
         >
         <Icon
diff --git a/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue b/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
index 8d880c057..df4d9ccca 100644
--- a/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
@@ -3,8 +3,8 @@
     <div
       class="container flex flex-col gap-4 lg:gap-6 pb-6 lg:pb-[4.5rem] lg:w-[51.625rem]"
     >
-      <h2 class="header-2 text-black-core/[0.87]">Case studies</h2>
-      <span class="sub-h1-regular text-black-core/[0.6]">
+      <h2 class="mobile-header-2 lg:desk-header-2 text-black-core/[0.87]">Case studies</h2>
+      <span class="sub-h1-regular lg:mobile-header-2-regular lg: text-black-core/[0.6]">
         Explore our case studies to witness how we've transformed our client's
         ideas into successful Flutter apps.
       </span>
@@ -24,7 +24,7 @@
             class="absolute -top-1 left-1/2 -translate-x-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-0 border-l-[13px] border-r-[13px] border-b-[14px] border-b-[#EF233C] border-b-solid"
           ></div>
           <div class="container flex flex-col gap-4">
-            <h3 class="header-3">{{ portfolio.title }}</h3>
+            <h3 class="mobile-header-3-semibold">{{ portfolio.title }}</h3>
             <p class="sub-h1-regular">{{ portfolio.description }}</p>
           </div>
         </div>
@@ -56,8 +56,8 @@
               <div
                 class="absolute flex flex-col gap-6 w-[27.25rem] top-1/2 left-14 -translate-y-1/2"
               >
-                <h3 class="header-3">{{ portfolio.title }}</h3>
-                <span class="sub-h1-regular">{{ portfolio.description }}</span>
+                <h3 class="desk-header-3">{{ portfolio.title }}</h3>
+                <span class="mobile-header-2-regular">{{ portfolio.description }}</span>
               </div>
             </div>
           </div>
diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection.vue b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
index 022ac8ddd..f2ee6c3b7 100644
--- a/nuxt-frontend/components/flutter-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
@@ -44,7 +44,7 @@
                 to="/contact"
                 @click.native="$mixpanel.track('tap_flutter_development_cta')"
               >
-                <span class="sub-h3-semibold lg:mobile-header-3-semibold border-none"
+                <span class="sub-h3-semibold lg:sub-h1-semibold border-none"
                   >Connect With Us
                 </span>
                 <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection2.vue b/nuxt-frontend/components/flutter-app-development/CtaSection2.vue
index 2560bfd82..aac2ef84b 100644
--- a/nuxt-frontend/components/flutter-app-development/CtaSection2.vue
+++ b/nuxt-frontend/components/flutter-app-development/CtaSection2.vue
@@ -8,7 +8,7 @@
       <div
         class="xs:mx-4 lg:!mx-0 flex flex-col gap-4 lg:gap-6 flex-[52.69%] my-auto"
       >
-        <p class="mobile-header-1 xl:sedl-header-2 text-black-core/[0.87]">
+        <p class="mobile-header-1 lg:desk-header-2 text-black-core/[0.87]">
           Crafting tomorrow's technology starts with one click.
           <span class="border-text"> Will you take the leap? </span>
         </p>
diff --git a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
index 1fef4c8c2..1d1334a72 100644
--- a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
@@ -3,8 +3,8 @@
     class="py-14 lg:py-[7.5rem] bg-[#121212] text-white text-center 3xl:outer-container"
   >
     <div class="container flex flex-col gap-4 lg:gap-6 lg:pb-[4.5rem]">
-      <span class="header-2"> Flutter app development services </span>
-      <span class="sub-h1-regular text-white/[0.8]">
+      <span class="mobile-header-2 lg:desk-header-2"> Flutter app development services </span>
+      <span class="sub-h1-regular lg:mobile-header-2-regular text-white/[0.8]">
         We leverage Flutter's rich, customizable widgets and fast development
         capabilities to create beautiful and user-friendly apps that save you
         time and cost of platform-specific development.
@@ -44,7 +44,7 @@
           class="cursor-pointer px-4"
         >
           <div class="flex flex-col gap-4 py-8 px-4 bg-white/[0.08] rounded-xl">
-            <div class="header-3">
+            <div class="mobile-header-3-semibold">
               <span v-html="item.title"></span>
             </div>
             <div class="sub-h3-medium text-white/[0.8]">
@@ -77,10 +77,10 @@
           ]"
         >
           <div class="flex flex-col flex-1 gap-6">
-            <div class="header-3">
+            <div class="desk-header-3">
               <span v-html="item.title"></span>
             </div>
-            <div class="sub-h3-regular">
+            <div class="mobile-header-3-medium">
               <span v-html="item.description"></span>
             </div>
           </div>
diff --git a/nuxt-frontend/components/flutter-app-development/FaqSection.vue b/nuxt-frontend/components/flutter-app-development/FaqSection.vue
index 17ce9a98b..a6c8717a9 100644
--- a/nuxt-frontend/components/flutter-app-development/FaqSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/FaqSection.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-[#121212] text-white 3xl:outer-container">
-    <div class="container pt-14 pb-20 lg:pt-[7.5rem] lg:pb-10">
-      <p class="text-center header-2 mb-6 lg:mb-[4.5rem]">
+  <div class="bg-[#121212] text-white">
+    <div class="container pt-14 pb-20 lg:pt-[7.5rem] lg:pb-14">
+      <p class="text-center mobile-header-2 lg:desk-header-2 mb-6 lg:mb-[4.5rem]">
         FAQs on Flutter app development
       </p>
       <transition-group tag="div" :name="'faq-' + faqTransitionName">
@@ -31,7 +31,7 @@
                     "
                   />
                 </div>
-                <div class="sub-h1-semibold w-[90%]">
+                <div class="sub-h1-semibold lg:mobile-header-2-semibold  w-[90%]">
                   {{ faq.question }}
                 </div>
               </div>
@@ -43,7 +43,7 @@
                 >
                   <div class="w-[6%]"></div>
                   <div
-                    class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular text-white items-end"
+                    class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular lg:mobile-header-3-regular text-white items-end"
                     v-html="faq.answer"
                   ></div>
                 </div>
@@ -85,7 +85,7 @@
                       "
                     />
                   </div>
-                  <div class="sub-h1-semibold w-[90%]">
+                  <div class="sub-h1-semibold lg:mobile-header-2-semibold w-[90%]">
                     {{ faq.question }}
                   </div>
                 </div>
@@ -97,7 +97,7 @@
                   >
                     <div class="w-[6%]"></div>
                     <div
-                      class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular text-white"
+                      class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular lg:mobile-header-3-regular text-white"
                       v-html="faq.answer"
                     ></div>
                   </div>
@@ -123,7 +123,7 @@
         />
       </div>
     </div>
-    <div class="hidden lg:block container text-right pb-[8.75rem]">
+    <div class="hidden lg:block container text-right pb-[3.75rem]">
       <button
         v-if="isActivePrev"
         type="button"
@@ -136,7 +136,7 @@
           class="mr-2 h-5 w-5"
           name="fa6-solid:arrow-left"
           id="leftArrow"
-        /><span class="sub-h3-semibold xl:sub-h4-semibold">Back</span>
+        /><span class="sub-h1-semibold">Back</span>
       </button>
       <button
         v-else
@@ -146,7 +146,7 @@
         @click="slide(1)"
         @click.native="$mixpanel.track('tap_flutter_app_faq_next_arrow')"
       >
-        <span class="sub-h3-semibold xl:sub-h4-semibold"
+        <span class="sub-h1-semibold"
           >View More Questions</span
         >
         <Icon
diff --git a/nuxt-frontend/components/home-new/BlogSection.vue b/nuxt-frontend/components/home-new/BlogSection.vue
index 011feae48..aa7c78e86 100755
--- a/nuxt-frontend/components/home-new/BlogSection.vue
+++ b/nuxt-frontend/components/home-new/BlogSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="my-8 lg:my-60 text-black-core/[.87] overflow-hidden md:overflow-visible">
+  <div class="my-16 lg:my-60 text-black-core/[.87] overflow-hidden md:overflow-visible">
     <div class="container flex flex-col items-center m-auto w-full">
       <div class="container">
         <p
diff --git a/nuxt-frontend/components/home-new/HomeIndex.vue b/nuxt-frontend/components/home-new/HomeIndex.vue
index e34f0a0b3..73138e7b6 100644
--- a/nuxt-frontend/components/home-new/HomeIndex.vue
+++ b/nuxt-frontend/components/home-new/HomeIndex.vue
@@ -22,9 +22,9 @@
     />
     <CTASection
       ref="cta"
-      class=" pt-10 bg-black-core/[0.85]"
+      class=" pt-10 bg-[#121212]"
     />
-    <NewFooter />
+    <NewFooter class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"/>
   </div>
 </template>
 
diff --git a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
index f0863ab78..4bbf6a4f3 100644
--- a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
@@ -33,7 +33,7 @@
           {{ service.title }}
         </a>
         <div
-          class="pt-4 sub-h3-regular text-black-core/[0.60] sm:w-[70%] md:w-[87%]"
+          class="pt-4 sub-h3-regular text-black-core/[0.60] sm:w-[70%] md:w-[65%]"
         >
           {{ service.content }}
         </div>
@@ -42,7 +42,7 @@
         :src="service.image"
         alt="service-background-image"
         loading="lazy"
-        class="h-full w-[126px] flex-[30%]"
+        class="h-full w-[126px] flex-[30%] sm:flex-[10%] md:flex-[6%]"
       />
     </div>
   </div>
diff --git a/nuxt-frontend/components/ios-app-development/BlogSection.vue b/nuxt-frontend/components/ios-app-development/BlogSection.vue
index 69c955d52..51f19f23f 100644
--- a/nuxt-frontend/components/ios-app-development/BlogSection.vue
+++ b/nuxt-frontend/components/ios-app-development/BlogSection.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="my-16 md:mb-32 lg:my-32 xll:container 3xl:outer-container">
     <div
-      class="pb-4 md:pb-12 text-center header-2 xll:py-24 text-black-core/[0.87]"
+      class="pb-4 md:pb-12 text-center mobile-header-2 xl:desk-header-2 xll:py-24 text-black-core/[0.87]"
     >
       <span>Our blogs</span>
     </div>
@@ -106,11 +106,11 @@
           <div>
             <p
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="mt-6 header-3 w-full !tracking-[-4%] text-black-core/[0.87]"
+              class="mt-6 desk-header-3 w-full !tracking-[-4%] text-black-core/[0.87]"
             >
               {{ blog.title }}
             </p>
-            <p class="mt-6 sub-h4-regular text-black-core/[0.60]">
+            <p class="mt-6 sub-h1-regular text-black-core/[0.60]">
               {{ blog.readTime }}
             </p>
           </div>
diff --git a/nuxt-frontend/components/ios-app-development/CaseStudySection.vue b/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
index 425beb035..12e1be5f9 100644
--- a/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
@@ -2,12 +2,12 @@
   <div class="md:!mb-0 flex flex-col 3xl:outer-container">
     <div class="container mb-2.5 flex flex-col text-center md:mb-20">
       <h2
-        class="header-2 mb-2.5 text-black-core/[0.87] md:!mx-0 md:!w-full xs:mx-auto xs:w-[71%]"
+        class="mobile-header-2 lg:desk-header-2  mb-2.5 text-black-core/[0.87] md:!mx-0 md:!w-full xs:mx-auto xs:w-[71%]"
       >
         Case studies
       </h2>
       <span
-        class="sub-h1-regular text-black-core/[0.60] w-11/12 2xl:w-9/12 mx-auto"
+        class="sub-h1-regular lg:mobile-header-2-regular  text-black-core/[0.60] w-11/12 2xl:w-9/12 mx-auto"
         >Explore our case studies to witness how we've transformed our client's
         ideas into successful iOS apps.</span
       >
@@ -48,7 +48,7 @@
             class="w-[94%] sm:w-9/12 flex flex-col ml-[10%] pr-3.5 xs:p-3"
             :class="index == 1 ? 'pl-3.5 !w-[91%] sm:!w-[66%]' : ''"
           >
-            <h2 class="mb-2.5 header-2">
+            <h2 class="mb-2.5 mobile-header-2 ">
               {{ portfolio.title }}
             </h2>
             <span class="sub-h1-regular text-black-core/[0.60]">{{
@@ -89,18 +89,18 @@
                     :class="portfolio.row1Background"
                     class="absolute top-4 xl:top-8 right-[-25%] xl:right-[-17%] 2xll:right-[-18%] xll:right-[-12%] 3xl:right-[-13%] w-[250px] h-[250px] p-8 xl:w-[300px] xl:h-[300px] rounded-full flex items-center"
                   ></div>
-                  <h2 class="absolute top-32 header-1 title right-[-30px]">
+                  <h2 class="absolute top-32 desk-header-1 title right-[-30px]">
                     {{ portfolio.title }}
                   </h2>
                 </div>
                 <div
                   class="w-[19rem] xl:w-[33rem] mx-auto mt-44 xl:mt-72 description"
                 >
-                  <h2 class="header-2">
+                  <h2 class="desk-header-2">
                     {{ portfolio.desktopDescription }}
                   </h2>
                   <div class="mt-6">
-                    <span class="sub-h3-semibold opacity-80">{{
+                    <span class="mobile-header-3-medium opacity-80">{{
                       portfolio.subDescription
                     }}</span>
                   </div>
diff --git a/nuxt-frontend/components/ios-app-development/CtaSection.vue b/nuxt-frontend/components/ios-app-development/CtaSection.vue
index 09a5cbefb..e9a6bf5f1 100644
--- a/nuxt-frontend/components/ios-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/ios-app-development/CtaSection.vue
@@ -13,7 +13,7 @@
       >
         <div class="flex w-full">
           <div class="m-auto text-white">
-            <p class="header-1 text-black-core/[0.87]">
+            <p class="mobile-header-1 text-black-core/[0.87]">
               Let's Start a New Project Together
             </p>
           </div>
@@ -24,7 +24,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span class="mr-2.5 sub-h3-semibold xl:sub-h4-semibold lg:block"
+            <span class="mr-2.5 sub-h3-semibold lg:block"
               >Contact Us
             </span>
           </router-link>
@@ -47,7 +47,7 @@
       >
         <div class="flex w-[66%]">
           <div class="w-[95%] py-5 text-white xl:m-auto 2xl:w-4/5">
-            <p class="header-1">
+            <p class="desk-header-1">
               Are you ready to take your business app to the next level?
             </p>
           </div>
@@ -58,7 +58,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
+            <span class="sub-h4-semibold">Let's Chat </span>
           </router-link>
         </div>
       </div>
diff --git a/nuxt-frontend/components/ios-app-development/CtaSection2.vue b/nuxt-frontend/components/ios-app-development/CtaSection2.vue
index 3643a61f8..8bdf42cad 100644
--- a/nuxt-frontend/components/ios-app-development/CtaSection2.vue
+++ b/nuxt-frontend/components/ios-app-development/CtaSection2.vue
@@ -14,11 +14,11 @@
     >
       <div class="flex w-full lg:mb-10">
         <div class="m-auto">
-          <p class="header-1 text-black-core/[0.87] mb-4 lg:mb-6">
+          <p class="mobile-header-1 lg:desk-header-1 text-black-core/[0.87] mb-4 lg:mb-6">
             Have an app idea?
           </p>
 
-          <div class="sub-h1-regular text-black-core/[0.60]">
+          <div class="sub-h1-regular lg:mobile-header-2-regular text-black-core/[0.60]">
             See if we can make it a reality.
           </div>
         </div>
diff --git a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
index 56e11c528..37a17905d 100644
--- a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
@@ -4,13 +4,13 @@
   >
     <div class="container mb-2.5 md:mb-7 flex flex-col text-center">
       <span
-        class="mb-2.5 lg:mb-6 text-black-core/[0.87] md:!mx-0 md:!w-full xs:mx-auto header-2"
+        class="mb-2.5 lg:mb-6 text-black-core/[0.87] md:!mx-0 md:!w-full xs:mx-auto mobile-header-2 lg:desk-header-2"
       >
         iOS app <br class="lg:hidden" />
         development services</span
       >
       <span
-        class="sub-h1-regular text-black-core/[0.60] w-[93%] 2xl:w-9/12 mx-auto"
+        class="sub-h1-regular lg:mobile-header-2-regular text-black-core/[0.60] w-[93%] 2xl:w-9/12 mx-auto"
         >With a blend of robust technology, intuitive designs, and innovative
         strategies, our team can help you craft high-quality, standout
         user-friendly apps that drive business growth and customer
@@ -49,7 +49,7 @@
             <div
               class="justify-center px-5 h-16 mb-5 flex flex-row items-center"
             >
-              <span class="header-3 text-[#FF9472]" v-html="item.title"></span>
+              <span class="mobile-header-3-semibold text-[#FF9472]" v-html="item.title"></span>
             </div>
             <div class="sub-h3-regular text-black-core/[0.87]">
               <p v-for="list in item.description" :key="list" class="mb-4">
@@ -116,11 +116,11 @@
               <span class="header-3 text-[#FF9472] mr-1.5"
                 >{{ index + 1 }}.
               </span>
-              <span class="header-3 text-[#FF9472] mr-1.5">{{
+              <span class="desk-header-3 text-[#FF9472] mr-1.5">{{
                 item.desktoptitle
               }}</span>
             </div>
-            <div class="px-5 sub-h3-medium text-black-core/[0.60]">
+            <div class="px-5 mobile-header-3-semibold  text-black-core/[0.60]">
               <p v-for="list in item.description" :key="list" class="mb-6">
                 {{ list }}
               </p>
diff --git a/nuxt-frontend/components/ios-app-development/FaqSection.vue b/nuxt-frontend/components/ios-app-development/FaqSection.vue
index f0af1e0b6..7e58a8703 100644
--- a/nuxt-frontend/components/ios-app-development/FaqSection.vue
+++ b/nuxt-frontend/components/ios-app-development/FaqSection.vue
@@ -3,7 +3,7 @@
     <div class="lg:container">
       <div class="mx-[2%] my-0 flex flex-col gap-4 lg:my-0">
         <div class="text-center">
-          <span class="header-2 text-black-core/[0.87]"
+          <span class="mobile-header-2 lg:desk-header-2  text-black-core/[0.87]"
             >FAQs on iOS app development</span
           >
         </div>
@@ -25,7 +25,7 @@
                   >
                     <div class="faq-header flex flex-row items-center">
                       <div
-                        class="faq-question w-[90%] p-[10px] sub-h1-semibold"
+                        class="faq-question w-[90%] p-[10px] sub-h1-semibold lg:mobile-header-2-semibold"
                         :class="
                           openList && faq.id == currentIndex
                             ? 'v2-canopas-gradient-text footer-icon'
@@ -63,7 +63,7 @@
                         :key="faq.answer"
                       >
                         <div
-                          class="faq-answer w-[90%] px-3 sub-h3-regular"
+                          class="faq-answer w-[90%] px-3 sub-h3-regular lg:mobile-header-3-regular"
                           v-html="faq.answer"
                         ></div>
                       </div>
@@ -87,7 +87,7 @@
                     >
                       <div class="faq-header flex flex-row items-center">
                         <div
-                          class="faq-question w-[90%] p-[10px] sub-h1-semibold"
+                          class="faq-question w-[90%] p-[10px] sub-h1-semibold lg:mobile-header-2-semibold"
                           :class="
                             openList && faq.id == currentIndex
                               ? 'v2-canopas-gradient-text footer-icon'
@@ -124,7 +124,7 @@
                           :key="faq.answer"
                         >
                           <div
-                            class="faq-answer w-[90%] px-3 sub-h3-regular"
+                            class="faq-answer w-[90%] px-3 sub-h3-regular lg:mobile-header-3-regular"
                             v-html="faq.answer"
                           ></div>
                         </div>
@@ -179,7 +179,7 @@
           class="mr-2 h-5 w-5"
           icon="arrow-left"
           id="leftArrow"
-        /><span class="v2-canopas-gradient-text sub-h4-semibold">Back</span>
+        /><span class="v2-canopas-gradient-text sub-h1-semibold">Back</span>
       </button>
       <button
         v-else
@@ -190,7 +190,7 @@
         @click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
         aria-label="rightArrow"
       >
-        <span class="v2-canopas-gradient-text sub-h4-semibold"
+        <span class="v2-canopas-gradient-text sub-h1-semibold"
           >View More Questions</span
         >
         <Icon
diff --git a/nuxt-frontend/components/ios-app-development/LandingSection.vue b/nuxt-frontend/components/ios-app-development/LandingSection.vue
index 940b7c973..092af8276 100644
--- a/nuxt-frontend/components/ios-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/ios-app-development/LandingSection.vue
@@ -6,10 +6,10 @@
       class="container px-4 pb-4 3xl:pb-28 text-left lg:flex mb-4 md:mb-7 lg:mb-14"
     >
       <div class="lg:flex-1 mb-6">
-        <h1 class="header-1 mb-4 pr-2 lg:w-2/4 text-black-core/[0.87]">
+        <h1 class="mobile-header-1 lg:desk-header-1 mb-4 pr-2 lg:w-2/4 text-black-core/[0.87]">
           iOS app development company
         </h1>
-        <p class="sub-h1-regular 2xl:w-4/5 text-black-core/[0.60]">
+        <p class="sub-h1-regular lg:mobile-header-2-regular 2xl:w-4/5 text-black-core/[0.60]">
           We craft tailor-made iOS apps that redefine user experience and put
           you ahead of the game. Our team work with passion and precision to
           transform your business vision into reality, giving your brand the
@@ -23,7 +23,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span class="sub-h3-semibold xl:sub-h4-semibold"
+            <span class="sub-h3-semibold lg:sub-h1-semibold"
               >Consult Our iOS Team</span
             >
           </nuxt-link>
@@ -42,7 +42,7 @@
           v-if="width < 1400"
           :src="landingmd800"
           :srcset="`${landingmd800} 800w`"
-          class="overflow-visible hidden lg:block h-full lg:!-mt-[0.5%] xl:!mt-[0.5%] lg:!h-[31rem] xl:!h-[38rem] -ml-[82%] lg:-ml-[61%] xl:-ml-[59%] w-[55%] object-cover"
+          class="overflow-visible hidden lg:block h-full lg:!mt-[14.5%] xl:!mt-[0.5%] lg:!h-[33rem] xl:!h-[38rem] -ml-[82%] lg:-ml-[61%] xl:-ml-[59%] 2xl:-ml-[83%] w-[55%] object-cover"
           alt="ios-landing"
         />
         <img
diff --git a/nuxt-frontend/components/ios-app-development/SuccessStory.vue b/nuxt-frontend/components/ios-app-development/SuccessStory.vue
index ecf609ad3..7365ca37e 100644
--- a/nuxt-frontend/components/ios-app-development/SuccessStory.vue
+++ b/nuxt-frontend/components/ios-app-development/SuccessStory.vue
@@ -2,7 +2,7 @@
   <section class="my-20 lg:my-60 3xl:mt-[315px]">
     <div class="container md:mt-36 lg:mb-8 mb-7 mx-auto text-center">
       <span
-        class="tracking-[-0.04rem] mb-2.5 font-inter-bold text-3xl leading-[2.4375rem] md:hidden text-black-core/[0.87] md:!mx-0 md:!w-full md:text-[2.65625rem] lg:text-[3.4375rem] md:leading-[3.796875rem] lg:leading-[5.15625rem] xs:mx-auto xs:w-[71%]"
+        class="mb-2.5 mobile-header-2  md:hidden text-black-core/[0.87] md:!mx-0 md:!w-full  xs:mx-auto xs:w-[71%]"
       >
         Success Stories</span
       >
@@ -54,11 +54,11 @@
                 /></span>
               </div>
               <div class="flex flex-col">
-                <span class="sub-h2-medium text-[#FFFFFF]/[0.80]">{{
+                <span class="sub-h3-medium text-[#FFFFFF]/[0.80]">{{
                   client.name
                 }}</span>
                 <span
-                  class="sub-h3-regular text-[#FFFFFF]/[0.60] mt-[0.3rem]"
+                  class="sub-h4-regular text-[#FFFFFF]/[0.60] mt-[0.3rem]"
                   >{{ client.designation }}</span
                 >
               </div>
@@ -75,7 +75,7 @@
       <div
         class="w-2/5 flex justify-center items-center bg-[#F4F4F4] rounded-tl-xl rounded-bl-xl"
       >
-        <h2 class="header-2 w-3/4 2xl:w-[65%] mx-auto text-black-core/[0.87]">
+        <h2 class="desk-header-2 w-3/4 2xl:w-[65%] mx-auto text-black-core/[0.87]">
           What our clients says!
         </h2>
       </div>
@@ -115,17 +115,17 @@
                     name="fa6-solid:star"
                 /></span>
                 <div
-                  class="font-inter-semibold text-[#FFFFFF] text-[1.3125rem] lg:text-2xl leading-[2.203125rem] lg:leading-9"
+                  class="text-[#FFFFFF] mobile-header-2-semibold"
                 >
                   {{ client.review }}
                 </div>
                 <div class="flex flex-col text-left mt-6">
                   <span
-                    class="font-inter-medium text-[#FFFFFF]/[0.80] text-text-3xl lg:text-[1.375rem] leading-[1.63125rem] lg:leading-[2.0625rem]"
+                    class="text-[#FFFFFF]/[0.80] sub-h2-medium "
                     >{{ client.name }}</span
                   >
                   <span
-                    class="font-inter-regular text-[#FFFFFF]/[0.60] text-[0.9375rem] lg:text-lg leading-[2.5875rem] lg:leading-[1.6875rem]"
+                    class="text-[#FFFFFF]/[0.60] sub-h1-regular"
                     >{{ client.designation }}</span
                   >
                 </div>
diff --git a/nuxt-frontend/components/mobile-app-development/CTASection2.vue b/nuxt-frontend/components/mobile-app-development/CTASection2.vue
index 6e4324024..9c404efd7 100644
--- a/nuxt-frontend/components/mobile-app-development/CTASection2.vue
+++ b/nuxt-frontend/components/mobile-app-development/CTASection2.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="relative pb-[50px] md:pt-[50px] 2xl:-mt-px">
+  <section class="relative pb-[46px] md:pt-[50px]">
     <div
       class="absolute right-0 top-1 hidden h-[140px] border-l-[20px] border-[#F2709C] lg:block lg:top-9 xl:h-[185px] 2xl:top-[4.25rem]"
     ></div>
diff --git a/nuxt-frontend/components/mobile-app-development/ClientReview.vue b/nuxt-frontend/components/mobile-app-development/ClientReview.vue
index a71fd00a1..00c9d4552 100755
--- a/nuxt-frontend/components/mobile-app-development/ClientReview.vue
+++ b/nuxt-frontend/components/mobile-app-development/ClientReview.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="pb-[50px] pt-[100px] md:pb-[150px] md:pt-[200px]">
+  <section class="pb-[50px] pt-[100px] md:pb-[141px] 3xl:pb-[146px] md:pt-[200px]">
     <div class="container">
       <div class="hidden md:block">
         <span
diff --git a/nuxt-frontend/components/partials/NewFooter.vue b/nuxt-frontend/components/partials/NewFooter.vue
index 434559aaa..2fb68e721 100644
--- a/nuxt-frontend/components/partials/NewFooter.vue
+++ b/nuxt-frontend/components/partials/NewFooter.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="overflow-hidden px-0 font-inter-medium z-[1] bg-black-core/[0.85] bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16] mt-[0px]">
+  <div class="pt-14 px-0 font-inter-medium z-[1] bg-[#121212]">
     
     <div class="container text-center">
-      <div class="mt-11 mb-8 md:mb-[60px]">
+      <div class="mb-8 md:mb-[60px]">
         <div
-          class="mt-5 text-[1.375rem] leading-[1.6875rem] md:text-[1.5rem] md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white/[.87] font-bold"
+          class="text-[1.375rem] leading-[1.6875rem] md:text-[1.5rem] md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white/[.87] font-bold"
         >
           Follow us on
         </div>
diff --git a/nuxt-frontend/pages/flutter-app-development.vue b/nuxt-frontend/pages/flutter-app-development.vue
index 7253d76bc..2a111b28f 100644
--- a/nuxt-frontend/pages/flutter-app-development.vue
+++ b/nuxt-frontend/pages/flutter-app-development.vue
@@ -9,7 +9,7 @@
     <BlogSection />
     <CtaSection2 />
     <FaqSection />
-    <NewFooter class="-mt-4 md:mt-auto" ref="flutterFooter" />
+    <NewFooter class="-mt-4 md:mt-auto bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]" ref="flutterFooter" />
   </div>
 </template>
 <script>
diff --git a/nuxt-frontend/pages/mobile-app-development.vue b/nuxt-frontend/pages/mobile-app-development.vue
index 6f5dfa46c..664763146 100755
--- a/nuxt-frontend/pages/mobile-app-development.vue
+++ b/nuxt-frontend/pages/mobile-app-development.vue
@@ -9,12 +9,12 @@
       <Portfolio />
       <CTASection />
       <DevelopmentProcess ref="developmentprocess" />
-      <div class="bg-black-core/[0.85]">
+      <div class="bg-[#121212]">
         <ClientReview />
         <CTASection2 ref="cta" />
       </div>
     </div>
-    <NewFooter class="mt-[-15px] md:mt-auto" />
+    <NewFooter class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]" />
   </div>
 </template>