Bob AI: Add a new section displaying logos of trusted brands, placed

Merge version_2 into main

src/app/page.tsx

@@ -6,6 +6,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import LogoCloudSection from "@/components/sections/logo/LogoCloudSection";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
@@ -90,14 +91,39 @@ export default function LandingPage() {
           imageAlt: "Growth chart",
         },
       ]}
-      stats={[
-        { value: "100% ROI", label: "in conversion" },
-        { value: "100+", label: "trusted clients" },
-      ]}
       mediaAnimation="slide-up"
     />
   </div>
 
+  <LogoCloudSection
+    title="Trusted by industry leaders"
+    logos={[
+      {
+        src: "https://cdn.worldvectorlogo.com/logos/google-cloud-1.svg",
+        alt: "Google Cloud",
+      },
+      {
+        src: "https://cdn.worldvectorlogo.com/logos/microsoft-5.svg",
+        alt: "Microsoft",
+      },
+      {
+        src: "https://cdn.worldvectorlogo.com/logos/amazon-web-services-2.svg",
+        alt: "AWS",
+      },
+      {
+        src: "https://cdn.worldvectorlogo.com/logos/salesforce-2.svg",
+        alt: "Salesforce",
+      },
+      { src: "https://cdn.worldvectorlogo.com/logos/oracle-10.svg", alt: "Oracle" },
+      { src: "https://cdn.worldvectorlogo.com/logos/ibm.svg", alt: "IBM" },
+      {
+        src: "https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg",
+        alt: "Slack",
+      },
+      { src: "https://cdn.worldvectorlogo.com/logos/spotify-1.svg", alt: "Spotify" },
+    ]}
+  />
+
   <div id="about" data-section="about">
       <TestimonialAboutCard
       useInvertedBackground={true}

src/app/styles/utilities.css

@@ -19,15 +19,11 @@
     @apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
   } */
 
-.tag-card {
-  @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
-}
+  .tag-card {
+    @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
+  }
 
-.glassy-card {
-  @apply backdrop-blur-md bg-card/50 border border-card/60;
-}
-
-.inset-glow-border {
+  .inset-glow-border {
     @apply relative;
   }
 

src/components/sections/hero/HeroBillboardGallery.tsx

@@ -16,11 +16,6 @@ export interface MediaItem {
   videoAriaLabel?: string;
 }
 
-export interface StatItem {
-  value: string;
-  label: string;
-}
-
 type HeroBillboardGalleryBackgroundProps = Extract<
   HeroBackgroundVariantProps,
   | { variant: "plain" }
@@ -50,7 +45,6 @@ interface HeroBillboardGalleryProps {
   buttons?: ButtonConfig[];
   buttonAnimation?: ButtonAnimationType;
   mediaItems: MediaItem[];
-  stats?: StatItem[];
   mediaAnimation?: ButtonAnimationType;
   ariaLabel?: string;
   className?: string;
@@ -76,7 +70,6 @@ const HeroBillboardGallery = ({
   buttons = [],
   buttonAnimation = "slide-up",
   mediaItems,
-  stats = [],
   mediaAnimation = "none",
   ariaLabel = "Hero section",
   className = "",
@@ -194,24 +187,6 @@ const HeroBillboardGallery = ({
                   </div>
                 );
               })}
-              {stats.length > 0 && (
-                <div className="hidden md:block absolute inset-0 z-[60] pointer-events-none">
-                  <div className="relative w-full h-full">
-                    {stats[0] && (
-                      <div className="glassy-card absolute left-[15%] top-1/2 -translate-y-1/2 w-40 text-center p-4 rounded-theme-capped pointer-events-auto">
-                        <p className="text-3xl font-bold text-foreground">{stats[0].value}</p>
-                        <p className="text-sm text-foreground/80">{stats[0].label}</p>
-                      </div>
-                    )}
-                    {stats[1] && (
-                      <div className="glassy-card absolute right-[15%] top-1/2 -translate-y-1/2 w-40 text-center p-4 rounded-theme-capped pointer-events-auto">
-                        <p className="text-3xl font-bold text-foreground">{stats[1].value}</p>
-                        <p className="text-sm text-foreground/80">{stats[1].label}</p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
             </div>
           </div>
         </div>

src/components/sections/logo/LogoCloudSection.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import LogoMarquee from "@/components/shared/LogoMarquee";
+import { cls } from "@/lib/utils";
+
+interface Logo {
+  src: string;
+  alt: string;
+}
+
+interface LogoCloudSectionProps {
+  title?: string;
+  logos: Logo[];
+  useInvertedBackground?: boolean;
+  className?: string;
+}
+
+export default function LogoCloudSection({
+  title = "Trusted by industry leaders",
+  logos,
+  useInvertedBackground = false,
+  className,
+}: LogoCloudSectionProps) {
+  return (
+    <section
+      className={cls(
+        "relative w-full py-hero-page-padding-half",
+        useInvertedBackground ? "bg-foreground text-background" : "bg-background text-foreground",
+        className
+      )}
+    >
+      <div className="w-content-width mx-auto flex flex-col items-center gap-6">
+        {title && (
+          <TextBox
+            title={title}
+            titleClassName="text-base text-center text-muted-foreground"
+            textboxLayout="default"
+          />
+        )}
+        <LogoMarquee logos={logos} />
+      </div>
+    </section>
+  );
+}