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,73 @@
     @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-[1.5rem] leading-[2.25rem];
   }
-
-  .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-[1.5rem] leading-[2.25rem];
+  }
+  .mobile-header-2-semibold {
+    @apply font-inter-semibold  tracking-[-0.08rem] xl:tracking-normal text-[1.5rem] leading-[2.25rem];
+  }
+  .mobile-header-3 {
+    @apply font-opensans-semibold tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .mobile-header-3-regular {
+    @apply font-inter-regular tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .mobile-header-3-medium {
+    @apply font-inter-medium tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .mobile-header-3-semibold {
+    @apply font-inter-semibold tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .desk-header-1 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-[3.75rem] leading-[4.875rem];
+  }
+  .desk-header-2 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-[3rem] 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-[1.125rem] 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-[1.125rem] leading-[1.688rem];
   }
-
   .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-[0.75rem] leading-[1.125rem];
+  }
+  .sub-h4-medium {
+    @apply font-inter-medium text-[0.75rem] 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-[0.75rem] leading-[1.125rem];
+  }
+  .background-text {
+    @apply font-inter-regular text-[2.5rem] leading-[1.875rem] lg:text-[4.5rem] 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/[0.8] 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,9 @@
     <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-core/[0.87]">
+        Our blogs
+      </p>
       <div class="blog mt-6 block lg:hidden">
         <swiper
           :slidesPerView="1.425"
@@ -55,7 +57,9 @@
     <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-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')"
@@ -181,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="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-core/[0.87]">Android<span><br><span class="mobile-header-2-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]",
         },
@@ -190,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="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 +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 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 +213,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 +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="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-core/[0.87]">Android</span><br><span class=" text-black-core/[0.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]",

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

@@ -4,9 +4,11 @@
   >
     <div class="container">
       <div class="flex flex-col text-center">
-        <span class="header-2 text-black-core-[0.87]">Case studies</span>
+        <span class="mobile-header-2 lg:desk-header-2 text-black-core-[0.87]"
+          >Case studies</span
+        >
         <span
-          class="mt-4 md:mt-6 sub-h1-regular mx-auto xl:text-[1.5rem] xl:leading-9 text-black-core/[0.60] lg:w-[80%] xl:w-[61%]"
+          class="mt-4 md:mt-6 sub-h1-regular lg:mobile-header-2-regular mx-auto xl:text-[1.5rem] xl:leading-9 text-black-core/[0.60] lg:w-[80%] xl:w-[61%]"
           >Explore our case studies to witness how we've transformed our
           client's ideas into successful Android apps.</span
         >
@@ -33,7 +35,7 @@
           />
 
           <div :class="item.textalign" class="absolute bottom-4 flex flex-col">
-            <span class="header-2 text-black-core/[0.87]">{{
+            <span class="mobile-header-2 text-black-core/[0.87]">{{
               item.title
             }}</span>
             <span
@@ -100,7 +102,7 @@
               class="flex flex-col w-[77%] xl:w-[48%] 2xll:w-[50%] lg:mr-auto xll:ml-auto"
             >
               <div>
-                <span class="text-[#FF9472] text-left sub-h3-semibold">
+                <span class="primary-color text-left mobile-header-3-semibold">
                   {{ item.title }}
                 </span>
               </div>
@@ -111,12 +113,12 @@
                 :target="item.target"
               >
                 <h2
-                  class="mt-4 font-opensans-semibold header-3 text-black-core/[0.87]"
+                  class="mt-4 font-opensans-semibold desk-header-3 text-black-core/[0.87]"
                   v-html="item.deskcontent"
                 ></h2
               ></a>
               <span
-                class="mt-4 text-black-core/[0.6] sub-h3-medium"
+                class="mt-4 text-black-core/[0.6] sub-h3-medium md:mobile-header-3-medium"
                 v-html="item.description"
               ></span>
 
@@ -130,28 +132,34 @@
                 <div class="inline-flex p-2 lg:p-4">
                   <div class="p-[0.8rem]">
                     <span
-                      class="font-opensans-semibold header-3 text-[#FF9472]"
+                      class="font-opensans-semibold desk-header-3 text-[#FF9472]"
                       >{{ item.resultcount[0] }}</span
                     >
-                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
+                    <div
+                      class="flex-1 text-black-core-[0.87] mobile-header-3-regular"
+                    >
                       <span>Downloads</span>
                     </div>
                   </div>
                   <div class="border-l-[0.5px] p-[0.8rem]">
                     <span
-                      class="font-opensans-semibold header-3 text-[#FF9472]"
+                      class="font-opensans-semibold desk-header-3 text-[#FF9472]"
                       >{{ item.resultcount[1] }}</span
                     >
-                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
+                    <div
+                      class="flex-1 text-black-core-[0.87] mobile-header-3-regular"
+                    >
                       <span>App Rating</span>
                     </div>
                   </div>
                   <div class="border-l-[0.5px] p-[0.8rem]">
                     <span
-                      class="font-opensans-semibold header-3 text-[#FF9472]"
+                      class="font-opensans-semibold desk-header-3 text-[#FF9472]"
                       >{{ item.resultcount[2] }}</span
                     >
-                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
+                    <div
+                      class="flex-1 text-black-core-[0.87] mobile-header-3-regular"
+                    >
                       <span>Monthly Users</span>
                     </div>
                   </div>
@@ -296,7 +304,7 @@ export default {
       cta: [
         {
           title: "",
-          content: `Let’s Start a <span class="header-2">New Project</span> Together`,
+          content: `Let’s Start a <span class="mobile-header-2">New Project</span> Together`,
           images: [cta_400w, cta_800w],
           className: "text-center ",
           textalign:

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

@@ -9,7 +9,7 @@
         loading="lazy"
       />
       <div
-        class="w-[80%] mx-auto sm:w-full text-center mt-8 text-black-core/[0.87] header-1"
+        class="w-[80%] mx-auto sm:w-full text-center mt-8 text-black-core/[0.87] mobile-header-1 lg:desk-header-1"
       >
         Let’s talk about what we can build and scale together.
       </div>
@@ -42,7 +42,7 @@
         class="h-[82%] lg:h-[80%] xl:h-[75%] border-[#00000]/[0.6] absolute left-[10%] z-0 mr-[0.2rem] mt-8 flex flex-col items-center justify-center rounded-lg border-2 py-2 lg:!mt-[5.7rem] lg:!py-12 xl:!mt-[7.8rem] xl:!py-4 2xl:!pb-16 2xl:!pt-12 2xl:pr-8 xs:mt-[2.8rem] xs:py-4"
       >
         <div
-          class="ml-[27rem] xl:ml-[27.5rem] text-black-core/[0.87] header-1 lg:!w-[47%] 2xl:!w-[60%]"
+          class="ml-[27rem] xl:ml-[27.5rem] text-black-core/[0.87] mobile-header-1 lg:desk-header-1 lg:!w-[47%] 2xl:!w-[60%]"
         >
           <span>Let’s talk about what we can build and scale together.</span>
         </div>
@@ -52,7 +52,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_android_development_cta')"
           >
-            <span class="sub-h4-semibold">Contact Us </span>
+            <span class="sub-h1-semibold">Contact Us </span>
           </router-link>
         </div>
       </div>