From a26cb3da354fae07d05587b1bdddf096b044baa9 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Fri, 27 Mar 2026 14:07:04 +0000
Subject: [PATCH] Bob AI: Add a new logo cloud section. It should feature a
 glasmorphi

---
 src/app/page.tsx                              | 14 +++++
 .../logocloud/LogoCloudGlassmorphic.tsx       | 56 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/components/sections/logocloud/LogoCloudGlassmorphic.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f82ab8e..f88d29c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import FaqBase from '@/components/sections/faq/FaqBase';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import LogoCloudGlassmorphic from "@/components/sections/logocloud/LogoCloudGlassmorphic";
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
@@ -106,6 +107,19 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="logo-cloud" data-section="logo-cloud">
+    <LogoCloudGlassmorphic
+      badgeText="Trusted by 10+ companies"
+      logos={[
+        { src: "https://webuild-assets.s3.eu-north-1.amazonaws.com/logos/logo-light-1.png", alt: "Company 1" },
+        { src: "https://webuild-assets.s3.eu-north-1.amazonaws.com/logos/logo-light-2.png", alt: "Company 2" },
+        { src: "https://webuild-assets.s3.eu-north-1.amazonaws.com/logos/logo-light-3.png", alt: "Company 3" },
+        { src: "https://webuild-assets.s3.eu-north-1.amazonaws.com/logos/logo-light-4.png", alt: "Company 4" },
+        { src: "https://webuild-assets.s3.eu-north-1.amazonaws.com/logos/logo-light-5.png", alt: "Company 5" },
+      ]}
+    />
+  </div>
+
   <div id="about-section" data-section="about-section">
       <TextSplitAbout
       useInvertedBackground={false}
diff --git a/src/components/sections/logocloud/LogoCloudGlassmorphic.tsx b/src/components/sections/logocloud/LogoCloudGlassmorphic.tsx
new file mode 100644
index 0000000..051a65b
--- /dev/null
+++ b/src/components/sections/logocloud/LogoCloudGlassmorphic.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+import Image from "next/image";
+
+interface Logo {
+  src: string;
+  alt: string;
+}
+
+interface LogoCloudGlassmorphicProps {
+  badgeText: string;
+  logos: Logo[];
+  useInvertedBackground?: boolean;
+  className?: string;
+  containerClassName?: string;
+  badgeClassName?: string;
+  logosContainerClassName?: string;
+}
+
+export default function LogoCloudGlassmorphic({
+  badgeText,
+  logos,
+  useInvertedBackground = false,
+  className = "",
+  containerClassName = "",
+  badgeClassName = "",
+  logosContainerClassName = "",
+}: LogoCloudGlassmorphicProps) {
+  return (
+    <section className={cls("relative w-full py-hero-page-padding", className)}>
+      <div className={cls("w-content-width mx-auto flex flex-col items-center gap-6", containerClassName)}>
+        <div
+          className={cls(
+            "tag-card rounded-theme-capped px-4 py-2 text-sm",
+            badgeClassName
+          )}
+        >
+          {badgeText}
+        </div>
+        <div className={cls("flex w-full flex-wrap items-center justify-center gap-x-8 gap-y-4 opacity-80", logosContainerClassName)}>
+          {logos.map((logo, index) => (
+            <Image
+              key={index}
+              src={logo.src}
+              alt={logo.alt}
+              width={120}
+              height={40}
+              className="h-8 w-auto object-contain"
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
-- 
2.49.1