Merge branch 'master' into development-section-backend

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/about/AboutusVirtue.vue

@@ -1,15 +1,11 @@
 <template>
   <section>
     <div
-      class="container flex flex-col items-center gap-6 md:gap-10 pb-11 md:pb-20"
+      class="container flex flex-col items-center gap-6 md:gap-10 pb-6 lg:pb-16"
     >
+      <div class="mobile-header-2 lg:desk-header-2">Our Why?</div>
       <div
-        class="font-inter-bold text-[1.875rem] md:text-[3.4375rem] leading-9 md:leading-[5.15625rem]"
-      >
-        Our Why?
-      </div>
-      <div
-        class="w-[95%] lg:w-[62%] text-center font-inter-regular text-[1rem] md:text-[1.875rem] leading-6 md:leading-[2.8125rem]"
+        class="w-[95%] lg:w-[62%] text-center sub-h1-regular lg:mobile-header-2-regular text-black-60"
       >
         To put humanity into the better position compared to what it was before
         our presence in the world.

nuxt-frontend/components/about/CTASection.vue

@@ -1,46 +1,54 @@
 <template>
   <section>
     <div
-      class="container flex flex-col lg:flex-row items-center mt-[100px] 2xl:gap-[5.5rem]"
+      class="container flex flex-col lg:flex-row-reverse items-center mt-[100px] 2xl:gap-[5.5rem]"
     >
       <div
-        class="md:w-[80%] lg:w-[48%] xl:w-[55%] 2xl:w-[50%] lg:pr-10 2xl:pr-0"
-      >
-        <img
-          :src="CTAImage[0]"
-          :srcset="`${CTAImage[0]} 400w, ${CTAImage[1]} 800w, ${CTAImage[2]} 1600w, ${CTAImage[3]} 2400w`"
-          alt="aboutus-cta-image"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        />
-      </div>
-      <div
-        class="flex flex-col items-center lg:items-start lg:mt-[5.5rem] xl:mt-10 lg:w-[52%] xl:w-[45%] 2xl:w-[50%]"
+        class="flex flex-col items-center lg:items-start lg:mt-[14.5rem] xl:mt-[15.5rem] 2xl:mt-[15.5rem] lg:w-[52%] xl:w-2/4"
       >
         <div
-          class="md:w-[70%] lg:w-full text-center lg:text-left text-[1.875rem] md:text-[2.5rem] 2xl:text-[3.125rem] leading-[2.813rem] md:leading-[3.438rem] 2xl:leading-[4.688rem] font-inter-bold text-black-core/[0.87]"
+          class="md:w-[70%] lg:w-full text-center lg:text-left mobile-header-2 lg:desk-header-2 text-black-87"
         >
           Ready to take the next step and work together?
         </div>
         <div
-          class="md:w-[70%] lg:w-full pt-4 lg:text-left text-center text-[1rem] md:text-[1.125rem] 2xl:text-[1.188rem] leading-6 md:leading-[1.656rem] 2xl:leading-[1.781rem] font-inter-medium text-black-core/[0.87]"
+          class="md:w-[70%] lg:w-full pt-4 lg:text-left text-center sub-h1-regular lg:mobile-header-2-regular text-black-60"
         >
           We'd love to ask some questions, learn a little more about what you do
           and who you serve and kick around some ideas for you.
         </div>
-        <div class="py-8">
-          <router-link
-            class="flex items-center w-max m-0 rounded-full p-3 text-center gradient-btn consultation-btn"
+        <div class="pt-4 pb-60 hidden lg:flex">
+          <nuxt-link
+            class="gradient-btn primary-btn"
             to="/contact"
-            @click.native="mixpanel.track('tap_about_cta_contact')"
+            @click.native="$mixpanel.track('tap_landing_cta')"
           >
-            <span
-              class="mr-2.5 font-normal text-[1rem] leading-[1.1875rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] font-inter-medium"
+            <span class="sub-h3-semibold lg:sub-h1-semibold"
               >Talk to our experts
             </span>
-          </router-link>
+          </nuxt-link>
         </div>
       </div>
+      <div class="md:w-[80%] lg:w-[48%] xl:w-w-2/4 lg:pr-10 2xl:pr-0">
+        <img
+          :src="CTAImage[0]"
+          :srcset="`${CTAImage[0]} 400w, ${CTAImage[1]} 800w, ${CTAImage[2]} 1600w, ${CTAImage[3]} 2400w`"
+          alt="aboutus-cta-image"
+          class="w-full h-full object-contain"
+          loading="lazy"
+        />
+      </div>
+      <div class="pb-16 mt-[-43px] lg:hidden">
+        <nuxt-link
+          class="gradient-btn primary-btn"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_landing_cta')"
+        >
+          <span class="sub-h3-semibold lg:sub-h1-semibold"
+            >Talk to our experts
+          </span>
+        </nuxt-link>
+      </div>
     </div>
   </section>
 </template>