Fix: Major UI fixes in all pages and improvements with content changes

nuxt-frontend/assets/css/global.css

@@ -179,7 +179,7 @@
   }
 
   .gradient-border-btn {
-    @apply m-[5px] rounded-[0.6rem] border border-solid border-transparent bg-gradient-to-r from-orange-300  to-pink-300  p-4 text-center shadow-[inset_2px_1000px_1px_white] lg:hover:border lg:hover:border-solid lg:hover:border-transparent lg:hover:from-pink-300 lg:hover:to-orange-300 lg:hover:shadow-none lg:hover:bg-gradient-[91.53deg] active:scale-[0.98];
+    @apply m-[5px] rounded-[0.6rem] border border-solid border-transparent bg-gradient-to-r from-orange-300  to-pink-300  p-4 text-center shadow-[inset_2px_1000px_1px_white] hover:border hover:border-solid hover:border-transparent hover:from-pink-300 hover:to-orange-300 hover:shadow-none hover:bg-gradient-[91.53deg] active:scale-[0.98];
   }
 
   .gradient-border-btn > a > .fab {

nuxt-frontend/components/contact/Guaranty.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="container">
+  <div id="guarantee" class="container">
     <div
-      class="rounded-xl border bg-[#F8F8F8] shadow-[0px_2px_35px_rgba(0,0,0,0.12)] mt-16 lg:my-28 px-4 py-8 lg:py-14 mb-16 3xl:mb-[23rem]"
+      class="rounded-xl border bg-[#F8F8F8] shadow-[0px_2px_35px_rgba(0,0,0,0.12)] mt-16 lg:my-28 px-4 py-8 lg:py-14 mb-16 3xl:mb-[23rem] mx-0 lg:mx-10 xl:mx-28"
     >
-      <div class="flex flex-row items-center lg:items-end gap-1">
+      <div class="flex flex-row items-center lg:items-end gap-3">
         <img
           :src="badge"
           class="w-14 lg:w-[108px] h-[51px] lg:h-[99px] ml-[-5px] lg:ml-0 lg:mt-[-35px]"

nuxt-frontend/components/contact/thank-you/BenefitSection.vue

@@ -70,7 +70,7 @@
             {{ benefit.number }}
           </div>
 
-          <div class="">
+          <div>
             <div class="desk-header-3 text-black-87">
               {{ benefit.title }}
             </div>

nuxt-frontend/components/contact/thank-you/HappyClient.vue

@@ -79,7 +79,7 @@
                     </div>
                   </a>
                 </div>
-                <div class="">
+                <div>
                   <div
                     class="mobile-header-2-semibold text-black-87 transition-all ease duration-500"
                     :class="client.class"

nuxt-frontend/components/contributions/DesktopLanding.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="pb-28 mt-[1.563rem] bg-gradient-to-r from-white via-pink-5 to-white bg-gradient-[180.05deg]"
+    class="pb-28 mt-[1.563rem] from-white via-pink-5 to-white bg-gradient-[180.05deg]"
   >
     <div class="relative xll:container w-full h-full pb-16 lg:pt-12">
       <div class="container flex flex-col items-center mx-auto md:text-center">
@@ -19,7 +19,7 @@
           fostering innovation, and empowering developers around the globe.
         </div>
         <nuxt-link
-          class="mt-10 gradient-btn primary-btn"
+          class="mt-10 gradient-btn primary-btn z-10"
           to="/contact"
           @click.native="$mixpanel.track('tap_landing_cta')"
         >

nuxt-frontend/components/contributions/WeeklyUpdate.vue

@@ -40,7 +40,6 @@
             <img
               :src="[weekly.image]"
               alt="Weekly-stack-image"
-              class="h-fit w-fit object-contain"
               loading="lazy"
             />
             <div class="bg-white-smoke-1 p-4 pb-14">
@@ -87,7 +86,7 @@
             <img
               :src="[weekly.image]"
               alt="Weekly-stack-image"
-              class="h-[72%] lg:h-full w-fit object-cover"
+              class="h-[72%] lg:h-full w-full object-cover"
               loading="lazy"
             />
           </div>

nuxt-frontend/components/contributions/WhatsTrending.vue

@@ -25,7 +25,7 @@
             @click="openBlog(post.link, 'tap_contribution_trending_section')"
           >
             <div class="overflow-hidden rounded-3xl border-1 border-black-80">
-              <div class="">
+              <div>
                 <img
                   @click.native="$mixpanel.track('tap_whats_trending_blog')"
                   :src="post.images[0]"
@@ -52,7 +52,7 @@
     </div>
     <!-- Mobile UI end -->
     <!-- Desktop UI start -->
-    <div class="mt-10 hidden overflow-hidden lg:block mt-20">
+    <div class="hidden overflow-hidden lg:block mt-20">
       <div
         class="animate-gridAnimationReverse"
         :style="{

nuxt-frontend/components/frontend-development/DevelopmentSection.vue

@@ -179,7 +179,7 @@ function handleScroll() {
 @import "swiper/css/pagination";
 
 .swiper-pagination {
-  @apply static pt-8;
+  @apply static !mt-8;
 }
 .swiper-pagination-bullet {
   @apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;

nuxt-frontend/components/home-new/BlogSection.vue

@@ -1,5 +1,11 @@
 <template>
-  <section v-if="activeBlog" class="my-16 lg:my-60 text-black-87 h-full">
+  <div class="mt-14 lg:hidden w-full flex justify-center">
+    <hr class="w-[95%] sm:w-[75%]" />
+  </div>
+  <section
+    v-if="activeBlog"
+    class="mt-16 mb-24 lg:my-60 text-black-87 h-full mx-5 sm:mx-0"
+  >
     <div class="container flex flex-col items-center m-auto w-full">
       <div class="container">
         <p class="text-white-smoke background-text text-center">Blogs</p>
@@ -13,35 +19,23 @@
         <div
           class="w-full text-center text-black-60 sub-h1-regular lg:mobile-header-2-regular"
         >
-          Well, at least the community says Hell Yeah. Our blogs hosted on
-          medium have
+          Our
           <span
             class="v2-canopas-gradient-text sub-h1-semibold lg:mobile-header-2-semibold"
-            >100k+</span
+            >5-star Clutch ratings</span
           >
-          minutes monthly reading time and it’s only rising.
+          and love from the developer community speak for us. Our blogs attract
+          <span
+            class="v2-canopas-gradient-text sub-h1-semibold lg:mobile-header-2-semibold"
+            >50K+ monthly visitors</span
+          >, and the number keeps growing.
         </div>
       </div>
     </div>
-    <div
-      class="relative mt-8 h-full"
-      :class="width > 767 && width < 992 ? 'container' : ''"
-    >
-      <div class="w-full h-full mr-0">
-        <img
-          :src="bgMobile"
-          class="md:hidden sm:ml-[153px] w-full sm:w-[80%] h-full object-cover"
-          alt="blog-background-image"
-        />
-      </div>
-      <div
-        class="absolute top-0 left-0 right-0 flex flex-col md:flex-row md:mt-8 lg:mt-16 z-[1] lg:min-h-[580px] md:pb-[15%] lg:py-0"
-        :class="width < 768 || width > 2000 ? 'container' : ''"
-      >
-        <div
-          class="relative flex flex-col items-center md:items-start md:justify-center md:flex-[60%] lg:ml-[7%] xl:ml-[10%] 2xl:ml-[15%] xll:ml-[1%]"
-          :class="width > 2000 ? 'ml-0' : ''"
-        >
+
+    <div class="xll:container relative">
+      <div class="flex gap-8 container">
+        <div class="md:w-[64%]">
           <div
             v-for="(blog, index) in blogs"
             :key="blog"
@@ -52,9 +46,9 @@
             "
             @touchstart.passive="activeIndex = index"
             @click.native="$mixpanel.track('tap_blog_post')"
-            class="md:w-1/2 2xl:w-[55%] xll:w-[65%] 3xl:w-[55%] w-full"
+            class="w-full"
           >
-            <div class="flex flex-col 2xl:pr-16">
+            <div class="flex flex-col">
               <div
                 class="flex gap-8 md:gap-4 lg:gap-8 justify-end mt-[18px] md:mt-4 lg:mt-8"
               >
@@ -77,7 +71,7 @@
                 </div>
 
                 <div
-                  class="flex flex-col w-full"
+                  class="flex flex-col gap-5 w-full"
                   @touchstart.passive="
                     activeBlog = blog;
                     animate = true;
@@ -88,113 +82,102 @@
                     v-if="index == 0"
                     class="h-[0.063rem] mb-4 lg:mb-8 bg-[#C6C6C6]"
                   />
-                  <div @mouseleave="animate = false">
-                    <nuxt-link
-                      :to="'/' + blog.slug"
-                      @click.native="$mixpanel.track('tap_blog_post')"
-                    >
-                      <span
-                        :class="
-                          activeIndex == index
-                            ? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
-                            : 'bg-[length:0%]'
-                        "
-                        class="sub-h1-semibold lg:mobile-header-2-semibold xl:desk-header-3 text-black-87 cursor-pointer"
-                      >
-                        {{ blog.title }}</span
+                  <div>
+                    <div @mouseleave="animate = false">
+                      <nuxt-link
+                        :to="'/' + blog.slug"
+                        @click.native="$mixpanel.track('tap_blog_post')"
                       >
-                    </nuxt-link>
-                  </div>
-                  <div
-                    class="flex justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
-                  >
-                    <span class="w-auto sub-h4-regular lg:sub-h1-semibold">
-                      {{ blog.author.name }}
-                    </span>
-                    <nuxt-link
-                      :to="'/' + blog.slug"
-                      @click.native="$mixpanel.track('tap_blog_post')"
+                        <span
+                          :class="
+                            activeIndex == index
+                              ? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
+                              : 'bg-[length:0%]'
+                          "
+                          class="sub-h1-semibold lg:mobile-header-2-semibold xl:desk-header-3 text-black-87 cursor-pointer"
+                        >
+                          {{ blog.title }}</span
+                        >
+                      </nuxt-link>
+                    </div>
+                    <div
+                      class="flex justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
                     >
-                      <span
-                        class="lg:w-[7.938rem] cursor-pointer sub-h3-semibold lg:mobile-header-3-semibold lg:v2-canopas-gradient-text"
-                      >
-                        Read more
-                        <Icon
-                          class="!hidden lg:!inline-block arrow fa w-4 h-4 text-pink-300"
-                          name="fa6-solid:arrow-right-long"
-                          id="leftArrow"
-                        />
+                      <span class="w-auto sub-h4-regular lg:sub-h1-semibold">
+                        {{ blog.author.name }}
                       </span>
-                    </nuxt-link>
+                      <nuxt-link
+                        :to="'/' + blog.slug"
+                        @click.native="$mixpanel.track('tap_blog_post')"
+                      >
+                        <span
+                          class="lg:w-[7.938rem] cursor-pointer sub-h3-semibold lg:mobile-header-3-semibold lg:v2-canopas-gradient-text"
+                        >
+                          Read more
+                          <Icon
+                            class="arrow fa w-4 h-4 text-pink-300 !hidden lg:!inline-block"
+                            name="fa6-solid:arrow-right-long"
+                            id="leftArrow"
+                          />
+                        </span>
+                      </nuxt-link>
+                    </div>
                   </div>
-                  <hr class="h-[0.063rem] mt-4 lg:mt-8 bg-[#C6C6C6]" />
+
+                  <hr class="h-[0.063rem] bg-[#C6C6C6]" />
                   <nuxt-link
                     v-if="activeIndex == index"
                     :to="'/' + blog.slug"
                     @click.native="$mixpanel.track('tap_blog_post')"
+                    class="md:hidden"
                   >
-                    <div
-                      class="block md:!hidden mt-4 w-full animate-fadeInRight"
-                    >
+                    <div class="animate-fadeInRight">
                       <img
                         :src="blog.image_url"
-                        class="object-cover"
+                        class="h-full w-full rounded-lg"
                         loading="lazy"
                         :alt="blog.title"
                       />
-                      <hr
-                        v-if="index != blogs.length - 1"
-                        class="md:hidden mt-4 h-[0.063rem] bg-[#C6C6C6]"
-                      />
+                      <hr v-if="index != blogs.length - 1" class="mt-5" />
                     </div>
                   </nuxt-link>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="hidden md:flex lg:justify-end 3xl:justify-center flex-[40%]">
-        <div>
-          <img
-            v-if="(width > 767 && width < 991) || width > 3839"
-            :src="bgNew"
-            loading="lazy"
-            class="3xl:w-[55%] 3xl:mr-0 relative ml-[300px] 3xl:ml-[1156px] mt-[30px] 3xl:-mt-[24px]"
-            alt="blog-background-image"
-          />
-          <img
-            v-else
-            :src="bg"
-            loading="lazy"
-            class="relative mt-14 lg:mt-[4.5rem]"
-            alt="blog-background-image"
-          />
+        <div class="hidden md:flex w-[36%] items-center justify-center">
           <nuxt-link
             :to="'/' + activeBlog.slug"
             @click.native="$mixpanel.track('tap_blog_post')"
           >
             <img
               v-if="activeBlog !== null"
               :src="activeBlog.image_url"
-              class="absolute inline-block inset-0 m-auto w-[90%] md:top-8 lg:top-[5.5rem] xl:top-[7.5rem] 3xl:-top-[3.5rem] md:w-[47%] lg:w-[37%] xl:w-[35%] 2xl:w-[30%] xll:w-[26%] 3xl:w-[17%] md:-right-[387px] lg:-right-[570px] xl:-right-[680px] 2xl:-right-[945px] xll:-right-[1600px] 3xl:-right-[1246px] cursor-pointer"
+              class="w-full cursor-pointer rounded-lg"
               :class="animate ? 'animate-fadeInRight' : ''"
               loading="lazy"
               :alt="activeBlog.title"
             />
           </nuxt-link>
         </div>
       </div>
+      <img
+        class="absolute top-0 -right-5 sm:right-0 h-full z-[-1]"
+        :src="bg"
+        :srcset="`${bg} 400w, ${bg400} 800w, ${bg2400} 1200w`"
+        alt="blog-background-image"
+      />
     </div>
   </section>
 </template>
 
 <script setup>
-import bgMobile from "@/assets/images/blog/bg/bg400.svg";
-import bg from "@/assets/images/blog/bg/bg2400.svg";
-import bgNew from "@/assets/images/blog/bg/bg.webp";
 import config from "@/config.js";
 import { useBlogListStore } from "@/stores/resources";
+import bg from "@/assets/images/blog/bg/bg.webp";
+import bg400 from "@/assets/images/blog/bg/bg400.svg";
+import bg2400 from "@/assets/images/blog/bg/bg2400.svg";
 
 const { $mixpanel } = useNuxtApp();
 

nuxt-frontend/components/home-new/CaseStudy.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     :class="
-      currentRoutePath == '/portfolio' ? 'mt-6 lg:mt-28' : 'mt-16 lg:mt-60'
+      currentRoutePath == '/portfolio' ? 'mt-16 lg:mt-28' : 'mt-16 lg:mt-60'
     "
   >
     <div>