Merge branch 'master' into ios-casestudy-section

vue-frontend/src/App.vue

@@ -128,35 +128,4 @@ a {
 .v2-button:hover > .fa {
   @apply tw-text-[#fff];
 }
-.gradient-btn {
-  @apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-from-[#ff835b] tw-to-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
-}
-.gradient-btn > span {
-  @apply tw-mx-1.5 tw-my-0 tw-font-bold;
-}
-.gradient-btn:hover > a > span,
-.gradient-btn:hover > span {
-  @apply tw-from-[#f2709c] tw-to-[#ff9472] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[89.88deg];
-}
-.white-btn > span {
-  @apply tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[270.11deg];
-}
-.gradient-btn:hover > .fa,
-.gradient-btn:hover > .fas,
-.gradient-btn:hover > a > .fab {
-  @apply tw-text-[#f2709c];
-}
-.gradient-border-btn {
-  @apply tw-m-[5px] tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-bg-gradient-to-r tw-from-[#ff9472] tw-via-[#ff909c] tw-to-[#f2709c] tw-p-[1rem] tw-text-center tw-shadow-[inset_2px_1000px_1px_#fff] hover:tw-border hover:tw-border-solid hover:tw-border-transparent hover:tw-from-[#f2709c] hover:tw-to-[#ff9472] hover:tw-shadow-none hover:tw-bg-gradient-[91.53deg] active:tw-scale-[0.98];
-}
-.gradient-border-btn > a > .fab {
-  @apply tw-text-[#f2709c];
-}
-.gradient-border-btn:hover > .arrow,
-.gradient-border-btn:hover > .fa,
-.gradient-border-btn:hover > a > .fab,
-.gradient-border-btn:hover > span,
-.gradient-border-btn:hover > span > span {
-  @apply tw-text-white;
-}
 </style>

vue-frontend/src/assets/css/tailwind.css

@@ -71,6 +71,13 @@
   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");
+}
 @layer utilities {
   input:-webkit-autofill,
   input:-webkit-autofill:active,
@@ -115,3 +122,78 @@
     animation-play-state: running;
   }
 }
+@layer components {
+  .header-1 {
+    @apply tw-font-opensans-bold tw-tracking-[-0.08rem] xl:tw-tracking-[-0.15rem]  tw-text-[2rem] tw-leading-[2.6rem] md:tw-text-[2.875rem]  md:tw-leading-[3.688rem] xl:tw-text-[3.75rem] xl:tw-leading-[4.875rem];
+  }
+  .header-2 {
+    @apply tw-font-opensans-bold tw-tracking-[-0.08rem] xl:tw-tracking-[-0.12rem] tw-text-[1.5rem] tw-leading-[2.25rem] md:tw-text-[2.25rem]  md:tw-leading-[2.938rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem];
+  }
+  .header-3 {
+    @apply tw-font-opensans-semibold tw-tracking-[-0.08rem] tw-text-[1.25rem] tw-leading-[1.875rem] md:tw-text-[1.625rem]  md:tw-leading-[2.313rem] xl:tw-text-[2rem] xl:tw-leading-[3rem];
+  }
+  .sub-h1-regular {
+    @apply tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem]  md:tw-leading-[1.813rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem] tw-font-inter-regular;
+  }
+  .sub-h1-semibold {
+    @apply tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem]  md:tw-leading-[1.813rem]  xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem]  tw-font-inter-semibold;
+  }
+  .sub-h2-medium {
+    @apply xl:tw-text-[1.375rem] xl:tw-leading-[2.063rem] tw-font-inter-medium;
+  }
+  .sub-h3-regular {
+    @apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-regular;
+  }
+  .sub-h3-medium {
+    @apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-medium;
+  }
+  .sub-h3-semibold {
+    @apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-semibold;
+  }
+  .sub-h4-regular {
+    @apply tw-font-inter-regular tw-text-[0.75rem] tw-leading-[1.125rem] xl:tw-text-[1.125rem] xl:tw-leading-[1.688rem];
+  }
+  .sub-h4-semibold {
+    @apply tw-font-inter-semibold tw-text-[0.75rem] tw-leading-[1.125rem] xl:tw-text-[1.125rem] xl:tw-leading-[1.688rem];
+  }
+  .primary-btn {
+    @apply tw-h-12  tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 tw-text-center;
+  }
+  .gradient-border-btn {
+    @apply tw-m-[5px] tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-bg-gradient-to-r tw-from-[#ff9472] tw-via-[#ff909c] tw-to-[#f2709c] tw-p-[1rem] tw-text-center tw-shadow-[inset_2px_1000px_1px_#fff] hover:tw-border hover:tw-border-solid hover:tw-border-transparent hover:tw-from-[#f2709c] hover:tw-to-[#ff9472] hover:tw-shadow-none hover:tw-bg-gradient-[91.53deg] active:tw-scale-[0.98];
+  }
+  .gradient-border-btn > a > .fab {
+    @apply tw-text-[#f2709c];
+  }
+  .gradient-border-btn:hover > .arrow,
+  .gradient-border-btn:hover > .fa,
+  .gradient-border-btn:hover > a > .fab,
+  .gradient-border-btn:hover > span,
+  .gradient-border-btn:hover > span > span {
+    @apply tw-text-white;
+  }
+  .white-btn > span {
+    @apply tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[270.11deg];
+  }
+  .gradient-btn {
+    @apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-from-[#ff835b] tw-to-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
+  }
+  .gradient-btn > span {
+    @apply tw-mx-1.5 tw-my-0 tw-font-bold;
+  }
+  .gradient-btn:hover > a > span,
+  .gradient-btn:hover > span {
+    @apply tw-from-[#f2709c] tw-to-[#ff9472] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[89.88deg];
+  }
+
+  .gradient-btn:hover > .fa,
+  .gradient-btn:hover > .fas,
+  .gradient-btn:hover > a > .fab {
+    @apply tw-text-[#f2709c];
+  }
+  .cta-button:hover > span,
+  .portfolio-nav:hover > span,
+  .v2-button:hover > .fa {
+    @apply tw-text-[#fff];
+  }
+}

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

@@ -1,40 +1,31 @@
 <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-40 xl:tw-mt-16 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-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%]"
     >
-      <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 header-1">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] sub-h1-regular md:tw-my-4">
+          See if we can make it a reality.
         </div>
       </div>
-      <div class="tw-mx-auto tw-mt-4">
+      <div class="tw-flex tw-justify-center tw-mt-2">
         <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="gradient-btn primary-btn"
           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]"
-            >Let's Chat
-          </span>
+          <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
         </router-link>
       </div>
     </div>

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

@@ -1,20 +1,14 @@
 <template>
-  <section
-    class="section tw-my-20 md:tw-my-24 lg:tw-mb-40 lg:tw-mt-44 xll:tw-my-52"
-  >
-    <!-- Mobile UI start -->
+  <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] 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]"
-      >
-        Our Blogs
-      </p>
-      <div class="blog tw-mt-8 tw-block md: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">
         <swiper
-          :slidesPerView="2"
-          :spaceBetween="10"
+          :slidesPerView="1.425"
+          :spaceBetween="0"
           :centeredSlides="true"
           class="tw-p-4"
         >
@@ -24,20 +18,20 @@
             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]"
-                >
+                <p class="tw-mt-3 tw-text-black-core/[0.60]">
                   {{ blog.publishDate }}
                 </p>
                 <a
@@ -46,7 +40,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 sub-h1-semibold tw-text-black-core/[0.87]"
                   >
                     {{ blog.title }}
                   </p>
@@ -56,20 +50,15 @@
           </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------------------ -->
 
-    <!-- Mobile UI end -->
-    <!-- Desktop UI start -->
+    <!-- ---------------------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"
     >
-      <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]"
-      >
-        Our Blogs
+      <p class="tw-mb-8 tw-text-center header-2 tw-text-black-core/[0.87]">
+        Our blogs
       </p>
       <div class="tw-flex tw-flex-row tw-space-x-5 tw-space-y-1">
         <div
@@ -89,7 +78,7 @@
           </aspect-ratio>
 
           <div
-            class="overlay tw-rounded-[20px] tw-duration-700 tw-ease-in tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 tw-opacity-0 group-hover:tw-opacity-100"
+            class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
             :class="blog.bgColor"
           >
             <div
@@ -118,7 +107,7 @@
               :alt="blog.title"
             />
             <div
-              class="overlay tw-rounded-[20px] tw-duration-700 tw-ease-in tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 tw-opacity-0 group-hover:tw-opacity-100"
+              class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
               :class="blog.bgColor"
             >
               <div
@@ -150,7 +139,7 @@
             :alt="blog.title"
           />
           <div
-            class="overlay tw-rounded-[18px] tw-duration-700 tw-ease-in tw-opacity-0 tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100"
+            class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-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="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="header-3 tw-text-black-core/[0.87]">Android<span><br><span class="sub-h1-regular tw-text-black-core/[0.87]">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 +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="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="header-3 tw-text-white">Jetpack Compose</span><br><span class="tw-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: "tw-bg-gradient-to-b tw-from-[#282828] tw-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="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 sub-h1-regular">Keyboard Handling In<br> <span class="header-3 tw-text-white">Jetpack Compose</span><br><span class="tw-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: "tw-bg-gradient-to-b tw-from-[#070710] tw-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="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="header-3 tw-text-white">Retrofit</span> <br><span class="tw-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: "tw-basis-[54%]",
           bgColor: "tw-bg-gradient-to-b tw-from-[#282828] tw-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="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="header-3 tw-text-black-core/[0.87]">Android</span><br><span class=" tw-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: "tw-basis-[60%] ",
           bgColor: "tw-bg-gradient-to-b tw-from-[#FEE4DF] tw-to-[#FDCCBC]",
@@ -256,12 +245,10 @@ 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;
 }
-
-.content:hover .overlay {
-  @apply tw-h-full;
-}
 </style>