Enhance : Design android app page according to new design

canopas · Oct 20, 2023 · c498e79 · c498e79
1 parent 3f61ba0
commit c498e79
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 48 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-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>

diff --git a/vue-frontend/src/components/android-app-development/BlogSection.vue b/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

diff --git a/vue-frontend/src/components/android-app-development/CaseStudySection.vue b/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]">

diff --git a/vue-frontend/src/components/android-app-development/CtaSection.vue b/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-[16rem] 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-[3.5rem] 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"

diff --git a/vue-frontend/src/components/android-app-development/DevelopmentSection.vue b/vue-frontend/src/components/android-app-development/DevelopmentSection.vue
@@ -11,7 +11,7 @@
         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 +24,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 +83,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,7 +108,7 @@
     <!-- ---------------------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 }"
@@ -127,7 +127,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-[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 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 +141,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 +150,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 +162,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 +173,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>

diff --git a/vue-frontend/src/components/android-app-development/FaqSection.vue b/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"

diff --git a/vue-frontend/src/components/android-app-development/LandingSection.vue b/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"

diff --git a/vue-frontend/src/components/android-app-development/PinkCtaSection.vue b/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"

diff --git a/vue-frontend/src/components/android-app-development/SuccessStorySection.vue b/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
@@ -6,7 +6,7 @@
       </h2>
       <!-- ---------------------MOBILE UI START------------------ -->
       <div
-        class="md:tw-hidden tw-container tw-my-8 tw-h-[700px] tw-relative tw-overflow-hidden"
+        class="lg:tw-hidden tw-container tw-my-8 tw-h-[700px] tw-relative tw-overflow-hidden"
       >
         <div
           class="tw-w-full tw--mt-4 tw-overflow-y-scroll hidden-scrollbar before:tw-z-[9] before:tw-blur-lg before:tw-absolute before:tw-left-0 before:tw-h-[8%] before:tw-w-full before:tw-bg-white-gradient"
@@ -69,9 +69,9 @@
       <!-- ---------------------MOBILE UI END------------------ -->
 
       <!-- ---------------------DESKTOP UI START------------------ -->
-      <div class="tw-hidden md:tw-block">
+      <div class="tw-hidden lg:tw-block">
         <h2
-          class="testimonial tw-opacity-[5%] tw-top-1/2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw--translate-y-1/2 tw-absolute tw-tracking-wide tw-font-black tw-font-inter-bold tw-text-[7.5rem] lg:tw-text-[9.5rem] xl:tw-text-[11.75rem] 2xl:tw-text-[13.75rem] xl:tw-leading-[20.625rem] tw-text-black-core/[0.4] tw-text-center"
+          class="testimonial tw-opacity-[5%] tw-top-1/2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw--translate-y-1/2 tw-absolute tw-tracking-wide tw-font-black tw-font-inter-bold tw-text-[9.5rem] xl:tw-text-[11.75rem] 2xl:tw-text-[13.75rem] xl:tw-leading-[20.625rem] tw-text-black-core/[0.4] tw-text-center"
         >
           Testimonials
         </h2>
@@ -91,7 +91,7 @@
             }"
             :loop="true"
             :modules="modules"
-            class="swiper-container tw-h-[600px] lg:tw-h-[700px] tw-flex tw-items-center tw-justify-center"
+            class="swiper-container tw-h-[700px] tw-flex tw-items-center tw-justify-center"
           >
             <swiper-slide
               v-for="(client, index) in client"

diff --git a/vue-frontend/src/pages/android-app-development.vue b/vue-frontend/src/pages/android-app-development.vue
@@ -1,17 +1,17 @@
 <template>
-  <div>
+  <div >
     <metainfo>
       <template v-slot:title="{ content }">
         {{ content }}
       </template>
     </metainfo>
     <Header />
-    <div class="xll:tw-bg-black-core/[90%]">
+    <div class="xll:tw-bg-black-core/[90%] 3xl:tw-bg-white">
       <LandingSection ref="landing" />
     </div>
     <DevelopmentSection ref="development" />
     <CaseStudy ref="casestudy" />
-    <PinkCtaSection ref="cta1" class="tw-hidden md:tw-block" />
+    <PinkCtaSection ref="cta1" class="tw-hidden lg:tw-block" />
     <SuccessStorySection ref="successstory" />
     <BlackCtaSection ref="cta2" />
     <BlogSection ref="blog" />

diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
@@ -227,7 +227,7 @@ module.exports = {
             120: "120deg",
             135: "135deg",
           }),
-        },
+        }
       );
     }),
     function ({ addComponents }) {
@@ -252,6 +252,14 @@ module.exports = {
             maxWidth: "1320px",
           },
         },
+        ".outer-container": {
+          margin: "auto",
+          padding: "0 0.75rem",
+          maxWidth: "100%",
+          "@screen 3xl": {
+            maxWidth: "2550px",
+          },
+        },
       });
     },
   ],