Unification in home page

canopas · Dec 19, 2023 · 544717b · 544717b
1 parent dddb0fa
commit 544717b
Show file tree

Hide file tree

Showing 22 changed files with 76 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>