Enhance : Unification in home page

blogs/blog.go

@@ -71,17 +71,17 @@ func Get(c *gin.Context) {
 		c.AbortWithStatus(http.StatusInternalServerError)
 		return
 	}
-
 	// bind data to struct
 	var blogs Blog
 	json.Unmarshal(responseData, &blogs)
 
 	filteredItems := []Item{}
 	existingBlogs := []Item{}
-
 	// filter weekly and newletteres
 	for _, item := range blogs.Items {
+
 		if !strings.Contains(strings.ToLower(item.Title), "weekly") && !strings.Contains(strings.ToLower(item.Title), "newsletter") {
+			item.Thumbnail = extractFirstImgSrc(item.Description)
 			item.Description = truncateTo20Words(item.Description)
 			filteredItems = append(filteredItems, item)
 		}
@@ -150,6 +150,18 @@ func truncateTo20Words(description string) string {
 	}
 	return strings.Join(words, " ") + "..."
 }
+func extractFirstImgSrc(description string) string {
+	imgRegex := regexp.MustCompile(`<img[^>]+\bsrc="([^"]+)"[^>]*>`)
+
+	match := imgRegex.FindStringSubmatch(description)
+
+	if len(match) > 1 {
+		return match[1]
+	}
+
+	return "" 
+}
+
 
 // make array or slice unique
 func Unique(arr []Item) []Item {

nuxt-frontend/assets/css/global.css

@@ -86,14 +86,6 @@
     @apply text-[1.25rem] font-bold leading-[1.6rem] tracking-[0.5px] text-[#3d3d3d] md:text-[1.75rem] md:leading-8 lg:text-[2.25rem] lg:leading-[2.729rem];
   }
 
-  .grecaptcha-badge {
-    @apply invisible;
-  }
-
-  .v2-header-text {
-    @apply text-[4.0625rem] font-bold leading-[5.875rem] tracking-[1px] text-[#3d3d3d] md:text-[5.625rem] md:leading-[6.6875rem] lg:text-[7.5rem] lg:leading-[7.4375rem];
-  }
-
   .v2-header-2-text {
     @apply text-[3.125rem] font-semibold leading-[5rem] tracking-[1px] text-[#3d3d3d] md:text-[4.0625rem] md:leading-[5.875rem] lg:text-[5.625rem] lg:leading-[6.6875rem];
   }
@@ -135,17 +127,8 @@
     @apply underline decoration-[#3d3d3dcc] decoration-solid decoration-2 underline-offset-[1rem] md:decoration-[3px];
   }
 
-  .v2-button {
-    @apply rounded-[3rem] border-[1px] border-solid border-[#3d3d3d] bg-white px-[1.5rem] py-[0.7rem] text-center text-[#3d3d3d] hover:bg-[#3d3d3d] hover:text-[#fff] active:scale-[0.98];
-  }
-
-  .v2-button > span {
-    @apply mr-2.5;
-  }
-
   .cta-button:hover > span,
-  .portfolio-nav:hover > span,
-  .v2-button:hover > .fa {
+  .portfolio-nav:hover > span {
     @apply text-[#fff];
   }
 
@@ -188,53 +171,76 @@
     @apply text-white;
   }
 
-  .header-1 {
-    @apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.15rem]  text-[2rem] leading-[2.6rem] lg:text-6xl lg:leading-[4.875rem];
+  .mobile-header-1 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-[2rem] leading-[2.6rem];
   }
-
-  .header-2 {
-    @apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.12rem] text-2xl leading-[2.25rem] lg:text-5xl lg:leading-[3.9rem];
+  .mobile-header-2 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-2xl leading-9;
   }
-
-  .header-3 {
-    @apply font-opensans-semibold tracking-[-0.08rem] text-xl leading-[1.875rem] lg:text-[2rem] lg:leading-[3rem];
+  .mobile-header-2-regular {
+    @apply font-inter-regular tracking-[-0.08rem] xl:tracking-normal text-2xl leading-9;
+  }
+  .mobile-header-2-semibold {
+    @apply font-inter-semibold  tracking-[-0.08rem] xl:tracking-normal text-2xl leading-9;
+  }
+  .mobile-header-3 {
+    @apply font-opensans-semibold tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .mobile-header-3-regular {
+    @apply font-inter-regular tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .mobile-header-3-medium {
+    @apply font-inter-medium tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .mobile-header-3-semibold {
+    @apply font-inter-semibold tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .desk-header-1 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-6xl leading-[4.875rem];
+  }
+  .desk-header-2 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-5xl leading-[3.9rem];
+  }
+  .desk-header-3 {
+    @apply font-opensans-semibold tracking-[-0.08rem] text-[2rem] leading-[3rem];
   }
-
   .sub-h1-regular {
-    @apply text-lg leading-[1.688rem] lg:text-2xl lg:leading-[2.25rem] font-inter-regular;
+    @apply font-inter-regular text-lg leading-[1.688rem];
   }
-
   .sub-h1-semibold {
-    @apply text-lg leading-[1.688rem]  lg:text-2xl lg:leading-[2.25rem]  font-inter-semibold;
+    @apply font-inter-semibold text-lg leading-[1.688rem];
+  }
+  .sub-h2-regular {
+    @apply font-inter-regular text-[1.375rem] leading-[2.063rem];
   }
-
   .sub-h2-medium {
-    @apply lg:text-[1.375rem] lg:leading-[2.063rem] font-inter-medium;
+    @apply font-inter-medium text-[1.375rem] leading-[2.063rem];
   }
-
   .sub-h3-regular {
-    @apply text-base lg:text-xl lg:leading-[1.875rem] font-inter-regular;
+    @apply font-inter-regular text-base;
   }
-
   .sub-h3-medium {
-    @apply text-base lg:text-xl lg:leading-[1.875rem] font-inter-medium;
+    @apply font-inter-medium text-base;
   }
-
   .sub-h3-semibold {
-    @apply text-base lg:text-xl lg:leading-[1.875rem] font-inter-semibold;
+    @apply font-inter-semibold text-base;
   }
-
   .sub-h4-regular {
-    @apply font-inter-regular text-xs leading-[1.125rem] lg:text-lg lg:leading-[1.688rem];
+    @apply font-inter-regular text-xs leading-[1.125rem];
+  }
+  .sub-h4-medium {
+    @apply font-inter-medium text-xs leading-[1.125rem];
   }
-
   .sub-h4-semibold {
-    @apply font-inter-semibold text-xs leading-[1.125rem] lg:text-lg lg:leading-[1.688rem];
+    @apply font-inter-semibold text-xs leading-[1.125rem];
+  }
+  .background-text {
+    @apply font-inter-regular text-[2.5rem] leading-[1.875rem] lg:text-7xl lg:leading-[4.5rem];
   }
-
   .primary-btn {
     @apply h-12  mx-auto flex w-max items-center rounded-xl py-3 px-6 text-center;
   }
+
   .primary-color {
     @apply text-[#FF9472];
   }

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

@@ -13,9 +13,13 @@
       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="m-auto">
-        <p class="text-white header-1">Have an app idea?</p>
+        <p class="text-white mobile-header-1 lg:desk-header-1">
+          Have an app idea?
+        </p>
 
-        <div class="mt-2 text-white/[0.8] sub-h1-regular md:my-4">
+        <div
+          class="mt-2 text-white-core-80 sub-h1-regular lg:mobile-header-2-regular md:my-4"
+        >
           See if we can make it a reality.
         </div>
       </div>
@@ -25,7 +29,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_android_development_cta')"
         >
-          <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
+          <span class="sub-h3-semibold xl:sub-h1-semibold">Let's Chat </span>
         </router-link>
       </div>
     </div>

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

@@ -4,7 +4,7 @@
     <div
       class="relative z-[1] h-[27rem] sm:h-[30rem] overflow-hidden lg:hidden"
     >
-      <p class="text-center header-2 text-black-core/[0.87]">Our blogs</p>
+      <p class="text-center mobile-header-2 text-black-87">Our blogs</p>
       <div class="blog mt-6 block lg:hidden">
         <swiper
           :slidesPerView="1.425"
@@ -29,17 +29,15 @@
                 />
               </div>
               <div class="title hidden">
-                <p class="mt-3 text-black-core/[0.60]">
+                <p class="mt-3 text-black-60">
                   {{ blog.publishDate }}
                 </p>
                 <a
                   @click.native="$mixpanel.track('tap_android_app_blog_title')"
                   :href="blog.link"
                   target="_blank"
                 >
-                  <p
-                    class="mt-2 cursor-pointer sub-h1-semibold text-black-core/[0.87]"
-                  >
+                  <p class="mt-2 cursor-pointer sub-h1-semibold text-black-87">
                     {{ blog.title }}
                   </p>
                 </a>
@@ -55,7 +53,7 @@
     <div
       class="container flex hidden flex-col lg:block lg:min-h-[580px] lg:py-0"
     >
-      <p class="mb-8 text-center header-2 text-black-core/[0.87]">Our blogs</p>
+      <p class="mb-8 text-center desk-header-2 text-black-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')"
@@ -111,7 +109,7 @@
               >
                 <span
                   @click="openBlog(blog.link, 'tap_android_app_blog_section')"
-                  class="font-inter-regular text-black-core/[0.87] text-base lg:text-[1.5rem] lg:leading-9 text-white"
+                  class="text-black-87 sub-h3-regular lg:mobile-header-2-regular text-white"
                   v-html="blog.hovertitle"
                 ></span>
               </div>
@@ -143,7 +141,7 @@
             >
               <span
                 @click="openBlog(blog.link, 'tap_android_app_blog_section')"
-                class="font-inter-regular text-black-core/[0.87] text-[1rem] lg:text-[1.5rem] leading-6 lg:leading-9 text-black-core/[0.87]"
+                class="sub-h3-regular lg:mobile-header-2-regular text-black-87"
                 v-html="blog.hovertitle"
               ></span>
             </div>
@@ -181,7 +179,7 @@ export default {
           image: [jacoco_400w, jacoco_800w, jacoco_desktop_400w],
           publishDate: "Sep 27, 2021",
           title: "Android code coverage using JaCoCo",
-          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>`,
+          hovertitle: `<span class="desk-header-3 text-black-87">Android<span><br><span class="mobile-header-2-regular text-black-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]",
         },
@@ -190,7 +188,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="header-3 text-white">Jetpack Compose</span><br><span class="text-white sub-h1-regular">MVVM State management in a simple way</span>`,
+          hovertitle: `<span class="desk-header-3 text-white">Jetpack Compose</span><br><span class="text-white mobile-header-2-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]",
         },
@@ -199,7 +197,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 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>`,
+          hovertitle: `<span class="text-white mobile-header-2-regular">Keyboard Handling In<br> <span class="desk-header-3 text-white">Jetpack Compose</span><br><span class="text-white mobile-header-2-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]",
         },
@@ -209,7 +207,7 @@ export default {
           publishDate: "Feb 17, 2022",
           title:
             "Retrofit — Effective error handling with Kotlin Coroutine and Result API",
-          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>`,
+          hovertitle: `<span class="desk-header-3 text-white">Retrofit</span> <br><span class="text-white mobile-header-2-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]",
@@ -220,7 +218,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="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>`,
+          hovertitle: `<span class="desk-header-3 text-black-87">Android</span><br><span class=" text-black-87 mobile-header-2-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]",