Enhance: Unification in iOS page

nuxt-frontend/components/ios-app-development/BlogSection.vue

@@ -1,9 +1,9 @@
 <template>
-  <section class="my-20 md:mb-32 lg:my-32 xll:container">
+  <section class="my-16 md:mb-32 lg:my-32 xll:container 3xl:outer-container">
     <div
-      class="pb-4 md:py-12 text-center font-inter-bold text-3xl leading-[2.4375rem] md:text-[2.65625rem] md:leading-[3.796875rem] lg:text-[3.4375rem] lg:leading-[5.15625rem] tracking-[-0.04rem] xll:py-24 text-black-core/[0.87]"
+      class="pb-4 md:pb-12 text-center header-2 xll:py-24 text-black-core/[0.87]"
     >
-      <span>Our Blogs</span>
+      <span>Our blogs</span>
     </div>
     <!-- Mobile UI start -->
     <div class="mt-8 block md:hidden">
@@ -41,17 +41,13 @@
             />
             <div
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="=w-80 h-28 bg-white flex flex-col justify-center px-8"
+              class="w-80 h-28 bg-white flex flex-col justify-center p-8"
             >
-              <h2
-                class="font-inter-medium text-baseleading-6 tracking-[-0.04rem] text-black-core/[0.87]"
-              >
+              <h2 class="sub-h1-semibold">
                 {{ blog.title }}
               </h2>
 
-              <span
-                class="mt-2 font-inter-regular text-sm tracking-[-0.72px] lg:leading-[1.3125rem] v2-canopas-gradient-text"
-              >
+              <span class="mt-2 text-black-core/[0.60] sub-h4-semibold">
                 {{ blog.readTime }}
               </span>
             </div>
@@ -110,13 +106,11 @@
           <div>
             <p
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="mt-2 font-inter-semibold text-2xl lg:text-[2.125rem] w-full lg:leading-[3.1875rem] !tracking-[-4%] text-black-core/[0.87]"
+              class="mt-6 header-3 w-full !tracking-[-4%] text-black-core/[0.87]"
             >
               {{ blog.title }}
             </p>
-            <p
-              class="mt-2 font-inter-medium text-base lg:text-lg tracking-[-0.72px] lg:leading-[1.125rem] text-black-core/[0.60]"
-            >
+            <p class="mt-6 sub-h4-regular text-black-core/[0.60]">
               {{ blog.readTime }}
             </p>
           </div>

nuxt-frontend/components/ios-app-development/CaseStudySection.vue

@@ -1,21 +1,21 @@
 <template>
   <div
-    class="my-16 xs:my-24 md:mt-24 xl:!mt-60 md:!mb-0 flex flex-col 3xl:container"
+    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="tracking-[-0.04rem] mb-2.5 font-opensans-bold text-2xl leading-9 text-black-core/[0.87] md:!mx-0 md:!w-full md:text-[2.46875rem] lg:text-[3.4375rem] md:leading-[3.359375rem] lg:leading-[4.46875rem] xs:mx-auto xs:w-[71%]"
+        class="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="font-inter-regular text-lg md:text-xl leading-[1.6875rem] md:leading-[1.875rem] text-black-core/[0.60] md:font-inter-medium lg:text-2xl lg:leading-9 w-11/12 2xl:w-9/12 mx-auto"
+        class="sub-h1-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
       >
     </div>
     <!-- Mobile UI -->
-    <div class="md:hidden flex flex-col">
+    <div class="lg:hidden flex flex-col mb-24 md:mb-36">
       <div
         v-for="(portfolio, index) in portfolios"
         :key="index"
@@ -52,15 +52,12 @@
             class="w-11/12 sm:w-9/12 flex flex-col ml-[10%] pr-3.5 xs:p-3"
             :class="index == 1 ? 'pl-3.5 w-full' : ''"
           >
-            <h2
-              class="tracking-[0.04rem] mb-2.5 font-opensans-bold text-2xl leading-9 text-black-core/[0.87]"
-            >
+            <h2 class="mb-2.5 header-2">
               {{ portfolio.title }}
             </h2>
-            <span
-              class="font-inter-regular text-lg leading-[1.6875rem] text-black-core/[0.60]"
-              >{{ portfolio.description }}</span
-            >
+            <span class="sub-h1-regular text-black-core/[0.60]">{{
+              portfolio.description
+            }}</span>
           </div>
         </div>
       </div>
@@ -70,7 +67,7 @@
 
     <div
       id="stickyParent"
-      class="sticky-parent h-[300vh] xll:h-[250vh] 3xl:!h-[220vh] hidden md:block"
+      class="sticky-parent h-[300vh] xll:h-[240vh] 3xl:!h-[220vh] hidden lg:block"
     >
       <div
         class="sticky sticky top-0 max-h-full main overflow-hidden"
@@ -104,9 +101,9 @@
                 <div class="flex justify-end relative">
                   <div
                     :class="portfolio.row1Background"
-                    class="absolute top-8 lg:top-4 xl:top-8 right-[-30%] lg:right-[-25%] xl:right-[-17%] 2xll:right-[-18%] xll:right-[-12%] 3xl:right-[-18%] font-opensans-bold text-2xl leading-[1.95rem] lg:text-5xl lg:leading-[3.9rem] text-[#FFFFFF] tracking-[-0.04rem] w-40 h-40 lg:w-[250px] lg:h-[250px] p-8 xl:w-[300px] xl:h-[300px] rounded-full flex justify-center items-center"
+                    class="absolute top-8 lg:top-4 xl:top-8 right-[-30%] lg:right-[-25%] xl:right-[-17%] 2xll:right-[-18%] xll:right-[-12%] 3xl:right-[-13%] font-opensans-bold text-2xl leading-[1.95rem] lg:text-5xl lg:leading-[3.9rem] text-[#FFFFFF] tracking-[-0.04rem] w-40 h-40 lg:w-[250px] lg:h-[250px] p-8 xl:w-[300px] xl:h-[300px] rounded-full flex justify-center items-center"
                   >
-                    <h2 class="title">
+                    <h2 class="header-1 title">
                       {{ portfolio.title }}
                     </h2>
                   </div>
@@ -115,16 +112,13 @@
                   class="w-[17rem] lg:w-[19rem] xl:w-[33rem] mx-auto mt-32 lg:mt-44 xl:mt-72 description"
                   :class="{ '!mt-12 xl:!mt-72': isScrollingUp }"
                 >
-                  <h2
-                    class="font-opensans-bold text-2xl leading-[1.95rem] lg:text-5xl lg:leading-[3.9rem] text-[#FFFFFF] tracking-[-0.04rem]"
-                  >
+                  <h2 class="header-2 text-[#FFFFFF]">
                     {{ portfolio.desktopDescription }}
                   </h2>
                   <div class="mt-6">
-                    <span
-                      class="font-inter-medium text-[#FFFFFF]/[0.80] text-base lg:text-xl lg:leading-[1.875rem]"
-                      >{{ portfolio.subDescription }}</span
-                    >
+                    <span class="sub-h3-semibold text-[#FFFFFF]/[0.80]">{{
+                      portfolio.subDescription
+                    }}</span>
                   </div>
                 </div>
                 <div
@@ -133,7 +127,7 @@
                 >
                   <span
                     @click="scrollToNext()"
-                    class="font-inter-medium text-[#FFFFFF]/[0.80] text-base lg:text-xl lg:leading-[1.875rem] mt-6"
+                    class="text-[#FFFFFF]/[0.80] mt-6 sub-h3-semibold"
                     >SKIP</span
                   >
                 </div>
@@ -158,7 +152,7 @@
                       :src="portfolio.image[3]"
                       :srcset="`${portfolio.image[3]} 800w`"
                       :alt="portfolio.title"
-                      class="image w-[175px]main h-[350px] lg:w-[284px] lg:h-[490px] xl:h-[590px] object-cover"
+                      class="image w-[175px] main h-[350px] lg:w-[284px] lg:h-[490px] xl:h-[590px] object-cover"
                       loading="lazy"
                     />
                   </div>

nuxt-frontend/components/ios-app-development/CtaSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <div class="relative mb-16 h-48 md:h-72 xll:h-[30rem] md:hidden">
+    <div class="relative mb-16 h-[217px] md:h-[376px] lg:hidden">
       <img
         :src="BackgroundImage[0]"
         :srcset="`${BackgroundImage[0]} 400w`"
@@ -9,33 +9,32 @@
         loading="lazy"
       />
       <div
-        class="container absolute top-4 w-full p-4 left-[2%] sm:left-[13%] xs:p-8 text-center sm:w-[79%]"
+        class="container absolute top-0 md:top-[17%] w-full p-4 left-[2%] sm:left-[13%] xs:p-8 text-center sm:w-[79%]"
       >
         <div class="flex w-full">
           <div class="m-auto text-white">
-            <p
-              class="font-inter-semibold text-[1.375rem] leading-[2.0625rem] tracking-[-0.04rem] text-black-core/[0.87]"
-            >
+            <p class="header-1 text-black-core/[0.87]">
               Let's Start a New Project Together
             </p>
           </div>
         </div>
         <div class="mx-auto mt-4">
           <router-link
-            class="gradient-btn consultation-btn m-0 mx-auto flex text-[#FFF] w-max items-center rounded-full p-3 px-7 text-center"
+            class="gradient-btn primary-btn m-0 mx-auto flex text-[#FFF] w-max items-center p-3 px-7 text-center"
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span
-              class="mr-2.5 font-inter-semibold text-base leading-[1.21rem] md:block"
+            <span class="mr-2.5 sub-h3-semibold xl:sub-h4-semibold lg:block"
               >Contact Us
             </span>
           </router-link>
         </div>
       </div>
     </div>
     <!-- Desktop view start -->
-    <div class="relative mb-16 h-80 lg:h-[476px] hidden md:block">
+    <div
+      class="relative mb-16 h-80 lg:h-[476px] 3xl:outer-container hidden lg:block"
+    >
       <img
         :src="BackgroundImage[1]"
         :srcset="`${BackgroundImage[1]} 800w,${BackgroundImage[2]} 1200w,${BackgroundImage[3]} 2400w`"
@@ -48,23 +47,18 @@
       >
         <div class="flex w-[66%]">
           <div class="w-[95%] py-5 text-white xl:m-auto 2xl:w-4/5">
-            <p
-              class="font-inter-bold text-[2.188rem] leading-[2.625rem] lg:text-[3.4375rem] lg:leading-[5.15625rem]"
-            >
+            <p class="header-1">
               Are you ready to take your business app to the next level?
             </p>
           </div>
         </div>
         <div class="mx-auto mt-4">
           <router-link
-            class="gradient-btn consultation-btn m-0 mx-auto flex text-[#FFF] w-max items-center rounded-full p-3 px-7 text-center"
+            class="gradient-btn primary-btn m-0 mx-auto flex text-[#FFF] w-max items-center p-3 px-7"
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span
-              class="mr-2.5 font-inter-medium text-base leading-[1.21rem] lg:text-[1.1875rem] lg:leading-[1.436875rem]"
-              >Let's Chat
-            </span>
+            <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
           </router-link>
         </div>
       </div>

nuxt-frontend/components/ios-app-development/CtaSection2.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative mb-16 h-48 md:h-72 xll:h-[30rem] bg-gradient-to-l from-[#FF835B]/[10%] to-[#F2709C]/[10%]"
+    class="3xl:outer-container relative mb-16 h-[217px] md:h-[275px] lg:mt-60 lg:h-[476px] bg-gradient-to-l from-[#FF835B]/[10%] to-[#F2709C]/[10%]"
   >
     <img
       :src="BackgroundImage[0]"
@@ -12,29 +12,24 @@
     <div
       class="container absolute top-[1.2rem] w-full p-4 text-center text-black-core/[0.87] md:left-0 md:top-1/2 md:top-16 md:-mt-6 md:text-center lg:!left-[50%] lg:!top-[57%] xll:!top-[60%] lg:-translate-x-1/2 lg:-translate-y-1/2 lg:transform xl:w-[60%] 2xl:w-[49%] xs:left-[13%] xs:w-[75%] xl2:w-[55%] 2xll:w-[45%] xll:w-[61%]"
     >
-      <div class="flex w-full">
+      <div class="flex w-full lg:mb-10">
         <div class="m-auto">
-          <p
-            class="font-inter-semibold text-[1.375rem] leading-[2.0625rem] md:font-inter-bold md:text-[2.40625rem] lg:text-[3.4375rem] md:leading-[3.11125rem] lg:leading-[4.16rem]"
-          >
+          <p class="header-1 text-black-core/[0.87] mb-4 lg:mb-6">
             Have an app idea?
           </p>
 
-          <div
-            class="font-inter-regular text-base leading-6 md:my-4 md:font-inter-medium md:text-xl md:leading-[1.875rem] lg:text-2xl lg:leading-9"
-          >
+          <div class="sub-h1-regular text-black-core/[0.60]">
             See if we can make it a reality.
           </div>
         </div>
       </div>
       <div class="mx-auto mt-4">
         <nuxt-link
-          class="gradient-btn consultation-btn m-0 mx-auto flex w-max items-center rounded-full p-3 px-7 text-center"
+          class="gradient-btn primary-btn m-0 mx-auto flex w-max items-center p-3 px-7 text-center"
           to="/contact"
           @click.native="$mixpanel.track('tap_ios_development_cta')"
         >
-          <span
-            class="mr-2.5 font-inter-medium text-base leading-[1.21rem] md:block md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem]"
+          <span class="mr-2.5 sub-h3-semibold xl:sub-h4-semibold"
             >Let's Chat
           </span>
         </nuxt-link>