Enhance: Change font style according to new design

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

@@ -1,38 +1,38 @@
 <template>
-  <div class="tw-relative tw-mb-16 tw-h-48 md:tw-h-72 xll:tw-h-[30rem]">
+  <div
+    class="tw-relative tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem] tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px]"
+  >
     <img
       :src="BackgroundImage[0]"
       :srcset="`${BackgroundImage[0]} 400w, ${BackgroundImage[1]} 800w, ${BackgroundImage[2]} 1200w, ${BackgroundImage[3]} 2400w`"
       alt="Background-Image"
-      class="tw-h-full lg:tw-h-[22.5rem] xll:tw-h-full tw-w-full tw-object-cover"
+      class="tw-h-full tw-w-full tw-object-cover"
       loading="lazy"
     />
     <div
-      class="tw-container tw-absolute tw-top-4 tw-w-full tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center tw-text-[#FFF] md:tw-left-0 md:tw-top-1/2 md:tw-top-16 md:tw--mt-10 md:tw-text-center lg:!tw-left-[50%] lg:!tw-top-[72%] xll:!tw-top-[60%] lg:tw--translate-x-1/2 lg:tw--translate-y-1/2 lg:tw-transform xl:tw-w-[60%] 2xl:tw-w-[49%] xs:tw-left-[13%] xs:tw-w-[75%] xl2:tw-w-[55%] 2xll:tw-w-[45%] xll:tw-w-[61%]"
+      class="tw-container tw-absolute tw-top-4 md:tw-top-[5rem] xl:tw-top-[8rem] 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%]"
     >
-      <div class="tw-flex tw-w-full">
-        <div class="tw-m-auto tw-text-white">
-          <p
-            class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[2.625rem] md:tw-font-inter-bold md:tw-text-[3.4375rem] md:tw-leading-[4.16rem]"
-          >
-            Have an app idea?
-          </p>
+      <div class="tw-m-auto">
+        <p
+          class="tw-text-white tw-font-inter-semibold tw-text-[2rem] tw-leading-[2.6rem] md:tw-text-[3.125rem] md:tw-leading-[3.75rem] xl:tw-text-[3.75rem] xl:tw-leading-[4.875rem]"
+        >
+          Have an app idea?
+        </p>
 
-          <div
-            class="tw-font-inter-regular tw-text-base md:tw-my-4 md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-[1.815625rem]"
-          >
-            See if we can make it a reality.
-          </div>
+        <div
+          class="tw-mt-2 tw-text-white/[0.8] tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-my-4 md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-[1.815625rem]"
+        >
+          See if we can make it a reality.
         </div>
       </div>
-      <div class="tw-mx-auto tw-mt-4">
+      <div class="tw-mx-auto tw-mt-5">
         <router-link
-          class="gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-full tw-p-3 tw-px-7 tw-text-center"
+          class="tw-h-[3rem] gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
           to="/contact"
           @click.native="mixpanel.track('tap_android_development_cta')"
         >
           <span
-            class="tw-mr-2.5 tw-font-inter-medium tw-text-[1rem] tw-font-normal tw-leading-[1.1875rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
+            class="tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
             >Let's Chat
           </span>
         </router-link>

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

@@ -1,20 +1,18 @@
 <template>
-  <section
-    class="section tw-my-20 md:tw-my-24 lg:tw-mb-40 lg:tw-mt-44 xll:tw-my-52"
-  >
+  <section class="section tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem]">
     <!-- Mobile UI start -->
     <div
-      class="tw-relative tw-z-[1] tw-h-[27rem] tw-overflow-hidden tw-py-12 sm:tw-py-8 md:tw-hidden"
+      class="tw-relative tw-z-[1] tw-h-[27rem] sm:tw-h-[30rem] tw-overflow-hidden md:tw-hidden"
     >
       <p
-        class="tw-text-center tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] tw-text-black-core/[0.87]"
+        class="tw-text-center tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87]"
       >
-        Our Blogs
+        Our blogs
       </p>
-      <div class="blog tw-mt-8 tw-block md:tw-hidden">
+      <div class="blog tw-mt-6 tw-block md:tw-hidden">
         <swiper
-          :slidesPerView="2"
-          :spaceBetween="10"
+          :slidesPerView="1.425"
+          :spaceBetween="0"
           :centeredSlides="true"
           class="tw-p-4"
         >
@@ -24,19 +22,21 @@
             class="tw-relative tw-flex tw-flex-col"
           >
             <div class="tw-overflow-hidden">
-              <div class="tw-h-full tw-w-full tw-cursor-pointer">
+              <div
+                class="tw-scale-75 tw-transition-all tw-duration-200 tw-ease-out"
+              >
                 <img
                   @click="openBlog(blog.link, 'tap_android_app_blog_section')"
                   :src="blog.image[0]"
                   :srcset="`${blog.image[0]} 400w, ${blog.image[1]} 800w`"
                   :alt="blog.title"
-                  class="tw-h-full tw-w-full tw-rounded-[10px] tw-object-cover"
+                  class="tw-h-full tw-w-full tw-rounded-lg tw-object-cover"
                   loading="lazy"
                 />
               </div>
               <div class="title tw-hidden">
                 <p
-                  class="tw-mt-2 tw-pl-2 tw-font-inter-regular tw-text-[0.875rem] tw-leading-[1.3125rem] tw-text-black-core/[0.6]"
+                  class="tw-mt-3 tw-font-inter-regular tw-text-[0.75rem] tw-leading-[1.125rem] tw-text-black-core/[0.6]"
                 >
                   {{ blog.publishDate }}
                 </p>
@@ -46,7 +46,7 @@
                   target="_blank"
                 >
                   <p
-                    class="tw-mt-2 tw-cursor-pointer tw-pl-2 tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.6875rem] tw-text-black-core/[0.87]"
+                    class="tw-mt-2 tw-cursor-pointer tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.688rem] tw-text-black-core/[0.87]"
                   >
                     {{ blog.title }}
                   </p>
@@ -56,9 +56,6 @@
           </swiper-slide>
         </swiper>
       </div>
-      <div
-        class="tw-absolute tw-inset-0 tw-z-[0] tw-mx-auto tw-h-full tw-w-[60%] tw-rounded-[10px] tw-border tw-border-black-core/[0.60]"
-      ></div>
     </div>
 
     <!-- Mobile UI end -->
@@ -67,9 +64,9 @@
       class="tw-container tw-flex tw-hidden tw-flex-col md:tw-block md:tw-min-h-[580px] lg:tw-py-0"
     >
       <p
-        class="tw-mb-8 tw-text-center tw-font-inter-bold tw-text-[3.4375rem] tw-leading-[5.15625rem] tw-text-black-core/[0.87]"
+        class="tw-mb-8 tw-text-center tw-font-inter-bold tw-text-[2.25rem] md:tw-leading-[2.813rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem] tw-text-black-core/[0.87]"
       >
-        Our Blogs
+        Our blogs
       </p>
       <div class="tw-flex tw-flex-row tw-space-x-5 tw-space-y-1">
         <div
@@ -196,7 +193,7 @@ export default {
           image: [jacoco_400w, jacoco_800w, jacoco_desktop_400w],
           publishDate: "Sep 27, 2021",
           title: "Android code coverage using JaCoCo",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-black-core/[0.87]">Android<span><br><span class="tw-font-inter-regular tw-text-black-core/[0.87] tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87]">Code coverage using JaCoCo</span>`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-black-core/[0.87]">Android<span><br><span class="tw-font-inter-regular tw-text-black-core/[0.87] tw-text-[1.5rem] tw-leading-[2.25rem]">Code coverage using JaCoCo</span>`,
           link: "https://blog.canopas.com/android-code-coverage-using-jacoco-6639a1fc4293",
           bgColor: "tw-bg-gradient-to-b tw-from-[#E7E7E7] tw-to-[#DADADA]",
         },
@@ -205,7 +202,7 @@ export default {
           image: [mvvm_400w, mvvm_800w],
           publishDate: "Dec 3, 2021",
           title: "Jetpack Compose: MVVM State management in a simple way",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] xl:tw-text-[2.125rem] xl:tw-leading-[3.1875rem] tw-text-white">Jetpack Compose</span><br> MVVM State management in a simple way`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-white">Jetpack Compose</span><br><span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">MVVM State management in a simple way</span>`,
           link: "https://blog.canopas.com/jetpack-compose-mvvm-state-management-in-a-simple-way-4c632fa6f554",
           bgColor: "tw-bg-gradient-to-b tw-from-[#282828] tw-to-[#282828]",
         },
@@ -214,7 +211,7 @@ export default {
           image: [keyboard_400w, keyboard_800w],
           publishDate: "Apr 26, 2022",
           title: "Keyboard Handling In Jetpack Compose — All You Need To Know",
-          hovertitle: `<span >Keyboard Handling In<br> <span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] xl:tw-text-[2.125rem] xl:tw-leading-[3.1875rem] tw-text-white">Jetpack Compose</span><br>All You Need To Know</span>`,
+          hovertitle: `<span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">Keyboard Handling In<br> <span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-white">Jetpack Compose</span><br><span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">All You Need To Know</span></span>`,
           link: "https://blog.canopas.com/keyboard-handling-in-jetpack-compose-all-you-need-to-know-3e6fddd30d9a",
           bgColor: "tw-bg-gradient-to-b tw-from-[#070710] tw-to-[#222241]",
         },
@@ -224,7 +221,7 @@ export default {
           publishDate: "Feb 17, 2022",
           title:
             "Retrofit — Effective error handling with Kotlin Coroutine and Result API",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-white">Retrofit</span> <br><span class="tw-text-white">Effective error handling with Kotlin Coroutine and Result API</span>`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-white">Retrofit</span> <br><span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">Effective error handling with Kotlin Coroutine and Result API</span>`,
           link: "https://blog.canopas.com/retrofit-effective-error-handling-with-kotlin-coroutine-and-result-api-405217e9a73d",
           className: "tw-basis-[54%]",
           bgColor: "tw-bg-gradient-to-b tw-from-[#282828] tw-to-[#282828]",
@@ -235,7 +232,7 @@ export default {
           publishDate: "Mar 10, 2022",
           title:
             "Android — Send live audio stream from client to server using WebSocket and OkHttp client",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-black-core/[0.80]">Android</span><br>Send live audio stream from client to server using WebSocket and OkHttp client`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-black-core/[0.87]">Android</span><br><span class=" tw-text-black-core/[0.87] tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">Send live audio stream from client to server using WebSocket and OkHttp client</span>`,
           link: "https://blog.canopas.com/android-send-live-audio-stream-from-client-to-server-using-websocket-and-okhttp-client-ecc9f28118d9",
           className: "tw-basis-[60%] ",
           bgColor: "tw-bg-gradient-to-b tw-from-[#FEE4DF] tw-to-[#FDCCBC]",
@@ -256,7 +253,9 @@ export default {
 .swiper-slide-active .title {
   @apply tw-block tw-animate-fadeIn tw-delay-500;
 }
-
+.swiper-slide-active div {
+  @apply tw-scale-[1];
+}
 .section .blog:not(.blog) {
   @apply tw-container;
 }