From 7e4675203e534907e446848f0f150dcd127b305c Mon Sep 17 00:00:00 2001
From: Josue Brenes <josuebrenes3005@gmail.com>
Date: Sat, 21 Mar 2026 11:24:03 -0600
Subject: [PATCH] feat: enhance TrustedByStartups component with Marquee for
 logo display

Integrated a Marquee component to showcase startup logos in a dynamic scrolling format, improving visual engagement. Adjusted layout and spacing for better responsiveness and aesthetics.
---
 .../social-proof/TrustedByStartups.tsx        | 53 ++++++++++++-------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/features/social-proof/TrustedByStartups.tsx b/src/features/social-proof/TrustedByStartups.tsx
index 5febb5d..0ac97ce 100644
--- a/src/features/social-proof/TrustedByStartups.tsx
+++ b/src/features/social-proof/TrustedByStartups.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { Marquee } from "@/components/ui/marquee";
 
 const startups = [
   {
@@ -19,30 +20,44 @@ export function TrustedStartups() {
   return (
     <section className="bg-neutral-950 py-16 border-y border-neutral-800">
       <div className="container mx-auto px-6">
-        <div className="flex flex-col lg:flex-row items-center gap-12">
-          <div className="lg:w-1/4">
+        <div className="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-12">
+          <div className="shrink-0 lg:w-1/4 text-center lg:text-left">
             <p className="text-neutral-400 text-lg">
               Trusted by <span className="text-amber-400">fast-growing</span>{" "}
               startups and enterprises
             </p>
           </div>
-          <div className="lg:w-3/4">
-            <div className="grid grid-cols-3 gap-12 items-center justify-items-center">
-              {startups.map(startup => (
-                <div
-                  key={startup.name}
-                  className="flex items-center justify-center h-32 w-full"
-                >
-                  <Image
-                    src={startup.logo}
-                    alt={startup.name}
-                    width={320}
-                    height={110}
-                    className="object-contain max-h-28 w-auto opacity-85 hover:opacity-100 transition-opacity"
-                    priority={false}
-                  />
-                </div>
-              ))}
+          <div className="min-w-0 w-full lg:flex-1">
+            <div
+              className="relative overflow-hidden py-1"
+              style={{
+                maskImage:
+                  "linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)",
+                WebkitMaskImage:
+                  "linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)",
+              }}
+            >
+              <Marquee
+                className="[--duration:32s] [--gap:clamp(2.5rem,6vw,5rem)] py-2"
+                pauseOnHover
+                repeat={5}
+              >
+                {startups.map(startup => (
+                  <div
+                    key={startup.name}
+                    className="flex shrink-0 items-center justify-center h-24 w-36 sm:h-28 sm:w-44 md:w-52"
+                  >
+                    <Image
+                      src={startup.logo}
+                      alt={startup.name}
+                      width={320}
+                      height={110}
+                      className="object-contain max-h-24 sm:max-h-28 w-auto opacity-85 hover:opacity-100 transition-opacity"
+                      priority={false}
+                    />
+                  </div>
+                ))}
+              </Marquee>
             </div>
           </div>
         </div>