Enhance : Design android app page according to new resolutions design

vue-frontend/src/components/android-app-development/BlackCtaSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-mt-16 md:tw-mt-40 xl:tw-mt-16 tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px]"
+    class="tw-relative tw-mt-16 md:tw-mt-40 xl:tw-mt-16 tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px] 3xl:tw-outer-container"
   >
     <img
       :src="BackgroundImage[0]"
@@ -10,7 +10,7 @@
       loading="lazy"
     />
     <div
-      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%]"
+      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%] xs:tw-w-[75%]"
     >
       <div class="tw-m-auto">
         <p class="tw-text-white header-1">Have an app idea?</p>

vue-frontend/src/components/android-app-development/BlogSection.vue

@@ -2,10 +2,10 @@
   <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"
+      class="tw-relative tw-z-[1] tw-h-[27rem] sm:tw-h-[30rem] tw-overflow-hidden lg:tw-hidden"
     >
       <p class="tw-text-center header-2 tw-text-black-core/[0.87]">Our blogs</p>
-      <div class="blog tw-mt-6 tw-block md:tw-hidden">
+      <div class="blog tw-mt-6 tw-block lg:tw-hidden">
         <swiper
           :slidesPerView="1.425"
           :spaceBetween="0"
@@ -55,7 +55,7 @@
 
     <!-- ---------------------DSKTOP UI START------------------ -->
     <div
-      class="tw-container tw-flex tw-hidden tw-flex-col md:tw-block md:tw-min-h-[580px] lg:tw-py-0"
+      class="tw-container tw-flex tw-hidden tw-flex-col lg:tw-block lg:tw-min-h-[580px] lg:tw-py-0"
     >
       <p class="tw-mb-8 tw-text-center header-2 tw-text-black-core/[0.87]">
         Our blogs
@@ -65,7 +65,7 @@
           @click="openBlog(blog.link, 'tap_android_app_blog_section')"
           v-for="blog in blogs.slice(0, 1)"
           :key="blog"
-          class="content tw-group tw-relative tw-mt-[1.3rem] tw-flex tw-basis-[55%] lg:tw-basis-[54.3%] xl:tw-basis-[53.6%] tw-cursor-pointer tw-flex-col tw-rounded-[20px]"
+          class="content tw-group tw-relative tw-mt-[1.3rem] tw-flex tw-basis-[54.3%] xl:tw-basis-[53.6%] tw-cursor-pointer tw-flex-col tw-rounded-[20px]"
         >
           <aspect-ratio height="96%">
             <img

vue-frontend/src/components/android-app-development/CaseStudySection.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="tw-mt-16 md:tw--mt-24 lg:tw--mt-48 xl:tw--mt-[32rem] 2xl:tw-mt-[-30rem] xll:tw-container"
+    class="tw-mt-16 md:tw-mt-40 lg:tw--mt-48 xl:tw--mt-[32rem] 2xl:tw-mt-[-30rem] 3xl:tw-outer-container"
   >
     <div class="tw-container">
       <div class="tw-flex tw-flex-col tw-text-center">
@@ -15,7 +15,7 @@
       <div
         v-for="item in cases"
         :key="item"
-        class="tw-mt-6 tw-relative md:tw-hidden"
+        class="tw-mt-6 tw-relative lg:tw-hidden"
         :class="item.className"
       >
         <a
@@ -49,7 +49,7 @@
       <div
         v-for="item in cta"
         :key="item"
-        class="tw-mt-16 tw-relative md:tw-hidden"
+        class="tw-mt-16 tw-relative lg:tw-hidden"
         :class="item.className"
       >
         <img
@@ -79,7 +79,7 @@
     <!-- ------------------------ MOBILE UI END---------------------- -->
 
     <!-- ---------------------DESKTOP UI START------------------ -->
-    <div class="tw-hidden md:tw-block tw-bg-[#F6F6F6] tw-mt-[4.5rem]">
+    <div class="tw-hidden lg:tw-block tw-bg-[#F6F6F6] tw-mt-[4.5rem]">
       <swiper
         :slidesPerView="1"
         :centeredSlides="true"
@@ -130,7 +130,7 @@
               />
 
               <div
-                class="tw-bg-white tw-drop-shadow-md tw-rounded md:tw-w-[390px] lg:tw-w-[457px]"
+                class="tw-bg-white tw-drop-shadow-md tw-rounded lg:tw-w-[457px]"
               >
                 <div class="tw-inline-flex tw-p-2 lg:tw-p-4">
                   <div class="tw-p-[0.8rem]">
@@ -243,7 +243,7 @@ export default {
           target: "_self",
           content: "Create systems to build your dream life",
           deskcontent: `Overcome depression <br>by building habits`,
-          resultcount: ["5k+", "4.9", "100"],
+          resultcount: ["10k+", "4.9", "1100+"],
           description: `Justly aims to tackle loneliness, depression, and <br>mental health through innovative solutions.`,
           images: [
             justlymobile_400w,
@@ -260,7 +260,7 @@ export default {
           target: "_self",
           content: "Radio, music and podcast",
           deskcontent: `A radio, music and <br> podcast platform`,
-          resultcount: ["100k+", "5", "15k+"],
+          resultcount: ["300k+", "5", "25k+"],
           description: `Luxe Radio displays the best of Moroccan and <br>international creation, emphasizing taste, elegance, and refinement.`,
           images: [
             luxeradiomobile_400w,
@@ -277,7 +277,7 @@ export default {
           target: "_self",
           content: "Create your life’s most memorable events",
           deskcontent: `Photo editor and <br> video maker app`,
-          resultcount: ["10k+", "4.7 ", "1200+"],
+          resultcount: ["25k+", "4.7 ", "2700+"],
           description: `Togness are create slideshows, <br>and add quotes and your own music for every special occasion of your life!`,
           images: [
             tognessmobile_400w,
@@ -294,7 +294,7 @@ export default {
           target: "_blank",
           content: "Create systems to build your dream life",
           deskcontent: `For Dentists and <br>Dental labs`,
-          resultcount: ["5k+", "4.9", "350+"],
+          resultcount: ["25k+", "4.9", "5k+"],
           description: `Smile+ allows to create the perfect smile of your <br>patient in a few minutes.`,
           images: [
             smileplusmobile_400w,

vue-frontend/src/components/android-app-development/CtaSection.vue

@@ -1,10 +1,10 @@
 <template>
   <section class="tw-container tw-py-16 md:tw-py-40 xl:tw-py-60">
     <!-- ---------------------MOBILE UI START------------------ -->
-    <div class="md:tw-hidden tw-relative tw-flex tw-flex-col">
+    <div class="lg:tw-hidden tw-relative tw-flex tw-flex-col">
       <img
         :src="CtaBoyImage"
-        class="tw-z-[1] tw-mx-auto tw-h-full tw-w-[14.1875rem] tw-object-cover xs:tw-w-[13.1875rem]"
+        class="tw-z-[1] tw-mx-auto tw-h-full tw-w-[14.1875rem] md:tw-w-64 tw-object-cover xs:tw-w-[13.1875rem]"
         alt="android-cta-image"
         loading="lazy"
       />
@@ -23,31 +23,31 @@
         </router-link>
       </div>
       <div
-        class="tw-top-12 tw-absolute tw-inset-0 tw-z-[0] tw-mx-auto tw-h-[85%] sm:tw-h-[83%] tw-w-[100%] tw-rounded-[0.625rem] tw-border tw-border-black/[0.87]"
+        class="tw-top-12 md:tw-top-14 tw-absolute tw-inset-0 tw-z-[0] tw-mx-auto tw-h-[85%] sm:tw-h-[83%] tw-w-[100%] tw-rounded-[0.625rem] tw-border tw-border-black/[0.87]"
       ></div>
     </div>
     <!-- ---------------------MOBILE UI END------------------ -->
 
     <!-- ---------------------DESKTOP UI START------------------ -->
-    <div class="tw-hidden tw-relative md:tw-flex tw-flex-row">
+    <div class="tw-hidden tw-relative lg:tw-flex tw-flex-row">
       <div class="tw-relative tw-z-[1]">
         <img
           :src="CtaBoyImage"
-          class="tw-h-full tw-w-[14.1875rem] tw-object-cover md:!tw-w-[22.64594rem] md:tw-w-[25.1875rem] lg:!tw-w-[32.625rem] xl:!tw-w-[34.625rem] xs:tw-w-[13.1875rem]"
+          class="tw-h-full tw-w-[14.1875rem] tw-object-cover !tw-w-[32.625rem] xl:!tw-w-[34.625rem] xs:tw-w-[13.1875rem]"
           alt="android-cta-image"
           loading="lazy"
         />
       </div>
       <div
-        class="tw-h-[82%] lg:tw-h-[80%] xl:tw-h-[75%] tw-border-[#00000]/[0.6] tw-absolute tw-left-[10%] tw-z-0 tw-mr-[0.2rem] tw-mt-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-lg tw-border-2 tw-py-2 md:!tw-mt-[3.7rem] lg:!tw-mt-[5.7rem] lg:!tw-py-12 xl:!tw-mt-[7.8rem] xl:!tw-py-4 2xl:!tw-pb-16 2xl:!tw-pt-12 2xl:tw-pr-8 xs:tw-mt-[2.8rem] xs:tw-py-4"
+        class="tw-h-[82%] lg:tw-h-[80%] xl:tw-h-[75%] tw-border-[#00000]/[0.6] tw-absolute tw-left-[10%] tw-z-0 tw-mr-[0.2rem] tw-mt-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-lg tw-border-2 tw-py-2 lg:!tw-mt-[5.7rem] lg:!tw-py-12 xl:!tw-mt-[7.8rem] xl:!tw-py-4 2xl:!tw-pb-16 2xl:!tw-pt-12 2xl:tw-pr-8 xs:tw-mt-[2.8rem] xs:tw-py-4"
       >
         <div
-          class="tw-ml-[19rem] lg:tw-ml-[27rem] xl:tw-ml-[27.5rem] tw-text-black-core/[0.87] header-1 lg:!tw-w-[47%] 2xl:!tw-w-[60%]"
+          class="tw-ml-[27rem] xl:tw-ml-[27.5rem] tw-text-black-core/[0.87] header-1 lg:!tw-w-[47%] 2xl:!tw-w-[60%]"
         >
           <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-10 md:!tw-ml-[25%] xl:!tw-ml-[14%] 2xl:!tw-ml-[-7%]"
+          class="tw-ml-auto tw-mt-4 lg:tw-mt-10 xl:!tw-ml-[14%] 2xl:!tw-ml-[-7%]"
         >
           <router-link
             class="gradient-btn primary-btn"

vue-frontend/src/components/android-app-development/DevelopmentSection.vue

@@ -3,15 +3,17 @@
     <div
       class="xl:tw-h-[0vh] xl:!tw-sticky"
       :class="{
-        'xl:!tw-top-0': lastSlideReached && !isScrollingUp,
-        'xl:!tw-top-[7.5rem]': lastSlideReached && isScrollingUp,
+        'xl:!tw-top-[128px] 3xl:!tw-top-[500px]':
+          lastSlideReached && !isScrollingUp,
+        'xl:!tw-top-[8rem] 3xl:!tw-top-[500px]':
+          lastSlideReached && isScrollingUp,
       }"
     >
       <div
         class="tw-container tw-flex tw-flex-col tw-text-center xll:tw--mb-72"
       >
         <span
-          class="header-2 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full xs:tw-mx-auto xs:tw-w-[71%]"
+          class="header-2 tw-text-black-core/[0.87] lg:!tw-mx-0 lg:!tw-w-full xs:tw-mx-auto xs:tw-w-[71%]"
         >
           Android app development services</span
         >
@@ -24,7 +26,7 @@
       </div>
     </div>
     <!-- ---------------------MOBILE UI START------------------ -->
-    <div class="swiper-content !tw-mt-6 md:tw-hidden">
+    <div class="swiper-content !tw-mt-6 md:!tw-mt-12 lg:tw-hidden">
       <swiper
         :slidesPerView="1.1"
         :centeredSlides="true"
@@ -83,15 +85,15 @@
               <img
                 alt="development-icon"
                 :src="item.icon"
-                class="tw-h-10 tw-w-10 tw-object-contain md:tw-hidden"
+                class="tw-h-10 tw-w-10 tw-object-contain lg:tw-hidden"
                 loading="lazy"
               />
               <span class="header-3 tw-text-black-core/[0.87]">{{
                 item.title
               }}</span>
             </div>
-            <div class="sub-h3-regular tw-text-black-core/[0.60] md:tw-p-4">
-              <ul class="tw-pl-8 tw-pr-4 md:tw-hidden">
+            <div class="sub-h3-regular tw-text-black-core/[0.60] lg:tw-p-4">
+              <ul class="tw-pl-8 tw-pr-4 lg:tw-hidden">
                 <li
                   v-for="list in item.description"
                   :key="list"
@@ -108,10 +110,10 @@
     <!-- ---------------------MOBILE UI END------------------ -->
 
     <!-- ---------------------DESKTOP UI START------------------ -->
-    <div class="sticky-parent tw-hidden md:tw-block">
+    <div class="sticky-parent tw-hidden lg:tw-block">
       <div
-        class="sticky tw-sticky tw-top-[92px] xl:!tw-top-0 xl:tw-max-h-full main tw-overflow-hidden"
-        :class="{ 'xl:!tw-top-[95px]': isScrollingUp }"
+        class="sticky tw-sticky tw-top-[92px] xl:!tw-top-[100px] 3xl:!tw-top-[470px] xl:tw-max-h-full main tw-overflow-hidden"
+        :class="{ 'xl:!tw-top-[100px]': isScrollingUp }"
       >
         <div class="tw-flex">
           <div
@@ -127,7 +129,7 @@
               ></div>
             </div>
             <div
-              class="tw-absolute tw-top-[6%] xl:tw-top-[23%] xll:tw-top-[31.5%] tw-ml-[45%] xll:tw-ml-[47%] tw-hidden tw-h-20 !tw-bg-white tw-text-center md:tw-block 2xll:tw-ml-[47%] xll:tw-ml-[48%]"
+              class="tw-absolute tw-top-[7%] xl:tw-top-[23%] xll:tw-top-[31.5%] tw-ml-[45%] xll:tw-ml-[47%] tw-hidden tw-h-20 !tw-bg-white tw-text-center lg:tw-block 2xll:tw-ml-[47%] xll:tw-ml-[48%]"
             >
               <span class="tw-text-center header-1 tw-text-black-core/[0.87]">
                 0{{ index + 1 }}</span
@@ -141,7 +143,7 @@
                 <img
                   alt="development-icon"
                   :src="item.icon"
-                  class="tw-h-10 tw-w-10 tw-object-contain md:tw-hidden"
+                  class="tw-h-10 tw-w-10 tw-object-contain lg:tw-hidden"
                   loading="lazy"
                 />
                 <span
@@ -150,7 +152,7 @@
                 >
               </div>
               <div class="tw-text-black-core/[0.6] sub-h3-medium">
-                <ul class="tw-pl-8 tw-pr-4 md:tw-hidden">
+                <ul class="tw-pl-8 tw-pr-4 lg:tw-hidden">
                   <li
                     v-for="list in item.description"
                     :key="list"
@@ -162,7 +164,7 @@
                 <p
                   v-for="list in item.description"
                   :key="list"
-                  class="tw-mt-4 tw-hidden md:tw-block"
+                  class="tw-mt-4 tw-hidden lg:tw-block"
                 >
                   {{ list }}
                 </p>
@@ -173,7 +175,7 @@
       </div>
     </div>
     <div
-      class="tw-hidden md:tw-block tw-h-[25vh] xl:tw-h-[70vh] xll:tw-h-[60vh] tw-w-screen"
+      class="tw-hidden lg:tw-block tw-h-[25vh] xl:tw-h-[70vh] xll:tw-h-[60vh] tw-w-screen"
     ></div>
     <!-- ---------------------DESKTOP UI END------------------ -->
   </div>
@@ -258,6 +260,7 @@ export default {
     };
   },
   mounted() {
+    this.width = window.innerWidth;
     document.addEventListener("scroll", this.handleScroll);
 
     let sticky = document.querySelector(".sticky");
@@ -293,8 +296,11 @@ export default {
       const windowHeight = window.innerHeight;
       const lastSlide = document.querySelector(".main:last-child");
       const lastSlidePosition = lastSlide.getBoundingClientRect().top;
-
-      if (lastSlidePosition <= windowHeight && lastSlidePosition >= 0) {
+      let threshold = windowHeight * 0.2;
+      if (this.width < 3840) {
+        threshold = 56.84375;
+      }
+      if (lastSlidePosition <= windowHeight && lastSlidePosition >= threshold) {
         this.lastSlideReached = true;
         this.isScrollingUp = window.scrollY < this.scrollPosition;
       } else {

vue-frontend/src/components/android-app-development/FaqSection.vue

@@ -1,10 +1,10 @@
 <template>
   <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"
+      class="tw-mb-4 tw-bg-pink-gradient-background lg:tw-container lg:tw-bg-none"
     >
       <div
-        class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 md:tw-my-0 md:-tw-ml-8"
+        class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 lg:tw-my-0 lg:-tw-ml-8"
       >
         <div class="tw-text-center">
           <span class="header-2 tw-text-black-core/[0.87]"
@@ -16,17 +16,17 @@
             :src="faqImage"
             loading="lazy"
             alt="frequently-asked-questions-image"
-            class="tw-h-full tw-w-[20.25rem] tw-object-cover md:-tw-mb-10 md:tw-w-[25.75rem] md:tw-w-[412px]"
+            class="tw-h-full tw-w-[20.25rem] tw-object-cover lg:-tw-mb-10 lg:tw-w-[25.75rem] lg:tw-w-[412px]"
           />
         </div>
         <div
-          class="tw-container tw--mt-8 tw-flex-[67%] md:tw-pb-16 md:tw-w-[65rem]"
+          class="tw-container tw--mt-8 tw-flex-[67%] lg:tw-pb-16 lg:tw-w-[65rem]"
         >
-          <div class="md:tw-pl-[30px]">
+          <div class="lg:tw-pl-[30px]">
             <transition-group tag="div" :name="'faq-' + faqTransitionName">
               <div class="faq-section tw-mt-12 tw-h-auto">
                 <div
-                  class="tw-mt-3 md:tw-mt-6"
+                  class="tw-mt-3 lg:tw-mt-6"
                   v-for="faq in faqs.slice(sliceFrom, sliceTo)"
                   :key="faq"
                 >
@@ -154,7 +154,7 @@
                 </div>
               </transition-group>
             </collapse-transition>
-            <div class="tw-mx-auto tw-my-8 md:tw-hidden">
+            <div class="tw-mx-auto tw-my-8 lg:tw-hidden">
               <div
                 class="tw-border tw-border-white primary-btn"
                 @click="showAdditionalFAQs = !showAdditionalFAQs"
@@ -173,7 +173,7 @@
       </div>
     </div>
     <div
-      class="tw-hidden md:tw-block tw-container tw--mt-8 tw-pr-4 tw-text-right md:tw-pr-6 md:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44"
+      class="tw-hidden lg:tw-block tw-container tw--mt-8 tw-pr-4 tw-text-right lg:tw-pr-6 lg:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44"
     >
       <button
         v-if="isActivePrev"

vue-frontend/src/components/android-app-development/LandingSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-h-[28.125rem] xll:tw-container md:!tw-h-[30.125rem] xl:md:!tw-h-[33.125rem] xs:tw-h-[23.125rem]"
+    class="tw-relative tw-h-[28.125rem] xll:tw-container 3xl:tw-outer-container md:!tw-h-[30.125rem] xl:md:!tw-h-[33.125rem] xs:tw-h-[23.125rem]"
   >
     <img
       :src="background400"

vue-frontend/src/components/android-app-development/PinkCtaSection.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="tw-relative md:tw-h-[376px] xl:tw-h-[476px]">
+  <div
+    class="tw-relative md:tw-h-[376px] xl:tw-h-[476px] 3xl:tw-outer-container"
+  >
     <img
       :src="background"
       alt="Background-Image"