Merge master

nuxt-frontend/assets/css/app.css

@@ -73,7 +73,15 @@
 @font-face {
   font-display: swap;
   font-family: Opensans-Bold;
-  font-style: normal;
+  font-style: bold;
   font-weight: 700;
   src: url(../fonts/Open-Sans-Bold.woff2) format("woff2");
 }
+
+@font-face {
+  font-display: swap;
+  font-family: Opensans-SemiBold;
+  font-style: normal;
+  font-weight: 600;
+  src: url(../fonts/Open-Sans-SemiBold.woff2) format("woff2");
+}

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

@@ -1,41 +1,32 @@
 <template>
-  <div class="relative mb-16 h-48 md:h-72 xll:h-[30rem]">
+  <div
+    class="relative mt-16 md:mt-40 xl:mt-16 h-[217px] md:h-[376px] xl:h-[476px] 3xl:outer-container"
+  >
     <img
       :src="BackgroundImage[0]"
       :srcset="`${BackgroundImage[0]} 400w, ${BackgroundImage[1]} 800w, ${BackgroundImage[2]} 1200w, ${BackgroundImage[3]} 2400w`"
       alt="Background-Image"
-      class="h-full lg:h-[22.5rem] xll:h-full w-full object-cover"
+      class="h-full w-full object-cover"
       loading="lazy"
     />
     <div
-      class="container absolute top-4 w-full flex-col items-center justify-center p-4 text-center text-[#FFF] md:left-0 md:top-1/2 md:top-16 md:-mt-10 md:text-center lg:!left-[50%] lg:!top-[72%] 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%]"
+      class="container absolute top-4 md:top-20 xl:top-32 w-full p-4 text-center text-[#FFF] xs:left-[13%] xll:left-[24%] xs:w-[75%]"
     >
-      <div class="flex w-full">
-        <div class="m-auto text-white">
-          <p
-            class="font-inter-semibold text-[1.375rem] leading-[2.625rem] md:font-inter-bold md:text-[3.4375rem] md:leading-[4.16rem]"
-          >
-            Have an app idea?
-          </p>
+      <div class="m-auto">
+        <p class="text-white header-1">Have an app idea?</p>
 
-          <div
-            class="font-inter-regular text-base md:my-4 md:font-inter-medium md:text-[1.5rem] md:leading-[1.815625rem]"
-          >
-            See if we can make it a reality.
-          </div>
+        <div class="mt-2 text-white/[0.8] sub-h1-regular md:my-4">
+          See if we can make it a reality.
         </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"
+      <div class="flex justify-center mt-2">
+        <router-link
+          class="gradient-btn primary-btn"
           to="/contact"
-          @click.native="$mixpanel.track('tap_android_development_cta')"
+          @click.native="mixpanel.track('tap_android_development_cta')"
         >
-          <span
-            class="mr-2.5 font-inter-medium text-[1rem] font-normal leading-[1.1875rem] md:block md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem]"
-            >Let's Chat
-          </span>
-        </nuxt-link>
+          <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
+        </router-link>
       </div>
     </div>
   </div>

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

@@ -1,20 +1,14 @@
 <template>
-  <section
-    class="section my-20 md:my-24 lg:mb-40 lg:mt-44 xll:my-52"
-  >
-    <!-- Mobile UI start -->
+  <section class="section mt-16 md:mt-40 xl:mt-60">
+    <!-- ---------------------MOBILE UI START------------------ -->
     <div
-      class="relative z-[1] h-[27rem] overflow-hidden py-12 sm:py-8 md:hidden"
+      class="relative z-[1] h-[27rem] sm:h-[30rem] overflow-hidden lg:hidden"
     >
-      <p
-        class="text-center font-inter-bold text-[1.875rem] leading-[2.4375rem] text-black-core/[0.87]"
-      >
-        Our Blogs
-      </p>
-      <div class="blog mt-8 block md:hidden">
+      <p class="text-center header-2 text-black-core/[0.87]">Our blogs</p>
+      <div class="blog mt-6 block lg:hidden">
         <swiper
-          :slidesPerView="2"
-          :spaceBetween="10"
+          :slidesPerView="1.425"
+          :spaceBetween="0"
           :centeredSlides="true"
           class="p-4"
         >
@@ -24,20 +18,20 @@
             class="relative flex flex-col"
           >
             <div class="overflow-hidden">
-              <div class="h-full w-full cursor-pointer">
+              <div
+                class="scale-75 transition-all duration-200 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="h-full w-full rounded-[10px] object-cover"
+                  class="h-full w-full rounded-lg object-cover"
                   loading="lazy"
                 />
               </div>
               <div class="title hidden">
-                <p
-                  class="mt-2 pl-2 font-inter-regular text-[0.875rem] leading-[1.3125rem] text-black-core/[0.6]"
-                >
+                <p class="mt-3 text-black-core/[0.60]">
                   {{ blog.publishDate }}
                 </p>
                 <a
@@ -46,7 +40,7 @@
                   target="_blank"
                 >
                   <p
-                    class="mt-2 cursor-pointer pl-2 font-inter-semibold text-[1.125rem] leading-[1.6875rem] text-black-core/[0.87]"
+                    class="mt-2 cursor-pointer sub-h1-semibold text-black-core/[0.87]"
                   >
                     {{ blog.title }}
                   </p>
@@ -56,27 +50,22 @@
           </swiper-slide>
         </swiper>
       </div>
-      <div
-        class="absolute inset-0 z-[0] mx-auto h-full w-[60%] rounded-[10px] border border-black-core/[0.60]"
-      ></div>
     </div>
+    <!-- ---------------------MOBILE UI END------------------ -->
 
-    <!-- Mobile UI end -->
-    <!-- Desktop UI start -->
+    <!-- ---------------------DSKTOP UI START------------------ -->
     <div
-      class="container flex hidden flex-col md:block md:min-h-[580px] lg:py-0"
+      class="container flex hidden flex-col lg:block lg:min-h-[580px] lg:py-0"
     >
-      <p
-        class="mb-8 text-center font-inter-bold text-[3.4375rem] leading-[5.15625rem] text-black-core/[0.87]"
-      >
-        Our Blogs
+      <p class="mb-8 text-center header-2 text-black-core/[0.87]">
+        Our blogs
       </p>
       <div class="flex flex-row space-x-5 space-y-1">
         <div
           @click="openBlog(blog.link, 'tap_android_app_blog_section')"
           v-for="blog in blogs.slice(0, 1)"
           :key="blog"
-          class="content group relative mt-[1.3rem] flex basis-[55%] lg:basis-[54.3%] xl:basis-[53.6%] cursor-pointer flex-col rounded-[20px]"
+          class="content group relative mt-[1.3rem] flex basis-[54.3%] xl:basis-[53.6%] cursor-pointer flex-col rounded-[20px]"
         >
           <aspect-ratio height="96%">
             <img
@@ -89,7 +78,7 @@
           </aspect-ratio>
 
           <div
-            class="overlay rounded-[20px] duration-700 ease-in absolute bottom-0 left-0 right-0 overflow-hidden w-full h-0 opacity-0 group-hover:opacity-100"
+            class="ease absolute bottom-[0] left-[0] right-[0] rounded-[18px] transition-all duration-700 opacity-0 overflow-hidden w-full h-0 group-hover:opacity-100 group-hover:h-full"
             :class="blog.bgColor"
           >
             <div
@@ -118,7 +107,7 @@
               :alt="blog.title"
             />
             <div
-              class="overlay rounded-[20px] duration-700 ease-in absolute bottom-0 left-0 right-0 overflow-hidden w-full h-0 opacity-0 group-hover:opacity-100"
+              class="ease absolute bottom-[0] left-[0] right-[0] rounded-[18px] transition-all duration-700 opacity-0 overflow-hidden w-full h-0 group-hover:opacity-100 group-hover:h-full"
               :class="blog.bgColor"
             >
               <div
@@ -150,7 +139,7 @@
             :alt="blog.title"
           />
           <div
-            class="overlay rounded-[18px] duration-700 ease-in opacity-0 absolute bottom-0 left-0 right-0 overflow-hidden w-full h-0 group-hover:opacity-100"
+            class="ease absolute bottom-[0] left-[0] right-[0] rounded-[18px] transition-all duration-700 opacity-0 overflow-hidden w-full h-0 group-hover:opacity-100 group-hover:h-full"
             :class="blog.bgColor"
           >
             <div
@@ -166,7 +155,7 @@
         </div>
       </div>
     </div>
-    <!-- Desktop UI end -->
+    <!-- ---------------------DESKTOP UI END------------------ -->
   </section>
 </template>
 
@@ -196,7 +185,7 @@ export default {
           image: [jacoco_400w, jacoco_800w, jacoco_desktop_400w],
           publishDate: "Sep 27, 2021",
           title: "Android code coverage using JaCoCo",
-          hovertitle: `<span class="font-inter-bold text-[1.5rem] leading-[2.1875rem] lg:text-[2.125rem] lg:leading-[3.1875rem] text-black-core/[0.87]">Android<span><br><span class="font-inter-regular text-black-core/[0.87] text-[1.5rem] leading-[2.25rem] text-black-core/[0.87]">Code coverage using JaCoCo</span>`,
+          hovertitle: `<span class="header-3 text-black-core/[0.87]">Android<span><br><span class="sub-h1-regular text-black-core/[0.87]">Code coverage using JaCoCo</span>`,
           link: "https://blog.canopas.com/android-code-coverage-using-jacoco-6639a1fc4293",
           bgColor: "bg-gradient-to-b from-[#E7E7E7] to-[#DADADA]",
         },
@@ -205,7 +194,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="font-inter-bold text-[1.5rem] leading-[2.1875rem] xl:text-[2.125rem] xl:leading-[3.1875rem] text-white">Jetpack Compose</span><br> MVVM State management in a simple way`,
+          hovertitle: `<span class="header-3 text-white">Jetpack Compose</span><br><span class="text-white sub-h1-regular">MVVM State management in a simple way</span>`,
           link: "https://blog.canopas.com/jetpack-compose-mvvm-state-management-in-a-simple-way-4c632fa6f554",
           bgColor: "bg-gradient-to-b from-[#282828] to-[#282828]",
         },
@@ -214,7 +203,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="font-inter-bold text-[1.5rem] leading-[2.1875rem] xl:text-[2.125rem] xl:leading-[3.1875rem] text-white">Jetpack Compose</span><br>All You Need To Know</span>`,
+          hovertitle: `<span class="text-white sub-h1-regular">Keyboard Handling In<br> <span class="header-3 text-white">Jetpack Compose</span><br><span class="text-white sub-h1-regular">All You Need To Know</span></span>`,
           link: "https://blog.canopas.com/keyboard-handling-in-jetpack-compose-all-you-need-to-know-3e6fddd30d9a",
           bgColor: "bg-gradient-to-b from-[#070710] to-[#222241]",
         },
@@ -224,7 +213,7 @@ export default {
           publishDate: "Feb 17, 2022",
           title:
             "Retrofit — Effective error handling with Kotlin Coroutine and Result API",
-          hovertitle: `<span class="font-inter-bold text-[1.5rem] leading-[2.1875rem] lg:text-[2.125rem] lg:leading-[3.1875rem] text-white">Retrofit</span> <br><span class="text-white">Effective error handling with Kotlin Coroutine and Result API</span>`,
+          hovertitle: `<span class="header-3 text-white">Retrofit</span> <br><span class="text-white sub-h1-regular">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: "basis-[54%]",
           bgColor: "bg-gradient-to-b from-[#282828] to-[#282828]",
@@ -235,7 +224,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="font-inter-bold text-[1.5rem] leading-[2.1875rem] lg:text-[2.125rem] lg:leading-[3.1875rem] text-black-core/[0.80]">Android</span><br>Send live audio stream from client to server using WebSocket and OkHttp client`,
+          hovertitle: `<span class="header-3 text-black-core/[0.87]">Android</span><br><span class=" text-black-core/[0.87] sub-h1-regular">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: "basis-[60%] ",
           bgColor: "bg-gradient-to-b from-[#FEE4DF] to-[#FDCCBC]",
@@ -256,12 +245,10 @@ export default {
 .swiper-slide-active .title {
   @apply block animate-fadeIn delay-500;
 }
-
+.swiper-slide-active div {
+  @apply scale-[1];
+}
 .section .blog:not(.blog) {
   @apply container;
 }
-
-.content:hover .overlay {
-  @apply h-full;
-}
 </style>