add: More logos

src/components/home/TrustedByMarquee.tsx

@@ -37,6 +37,7 @@ interface TrustedByItem {
   image?: string;
   title: string;
   svg?: string;
+  height?: number | string;
 }
 
 const TrustedByMarquee = ({
@@ -56,37 +57,72 @@ const TrustedByMarquee = ({
     ...trustedBySection,
   ];
 
+  // Process SVG string to fix height attribute
+  const processSvg = (svgString: string) => {
+    return svgString.replace(/height="100%"/g, "").replace(/width="100%"/g, "");
+  };
+
+  useEffect(() => {
+    // Use a small delay to ensure DOM is ready
+    const timer = setTimeout(() => {
+      if (trackRef.current) {
+        const svgs = trackRef.current.querySelectorAll("svg");
+        svgs.forEach((svg, index) => {
+          const itemIndex = index % trustedBySection.length;
+          const item = trustedBySection[itemIndex];
+          const height = item.height
+            ? typeof item.height === "number"
+              ? `${item.height}px`
+              : item.height
+            : "34px";
+
+          svg.removeAttribute("width");
+          svg.removeAttribute("height");
+          svg.style.height = height;
+          svg.style.width = "auto";
+          svg.style.display = "block";
+        });
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [trustedBySection, isLoaded]);
+
   return (
     <div
       ref={containerRef}
-      className="w-full overflow-hidden lg:hidden"
+      className="w-full overflow-hidden"
       aria-label="Trusted By Logos Carousel"
     >
-      <div
-        ref={trackRef}
-        className="flex items-center"
-        style={{ gap: `${gap}px` }}
-      >
-        {displayItems.map((item, index) => (
-          <div
-            key={`${item.title}-${index}`}
-            className="flex  min-w-[200px] items-center justify-center"
-          >
-            {item.svg ? (
-              <div
-                dangerouslySetInnerHTML={{ __html: item.svg }}
-                className="max-h-full max-w-full object-contain"
-              />
-            ) : (
-              <img
-                src={item.image}
-                alt={item.title}
-                className="max-h-full max-w-full object-contain"
-                style={{ opacity: isLoaded ? 1 : 0 }}
-              />
-            )}
-          </div>
-        ))}
+      <div ref={trackRef} className="flex items-center gap-24">
+        {displayItems.map((item, index) => {
+          const height = item.height
+            ? typeof item.height === "number"
+              ? `${item.height}px`
+              : item.height
+            : "34px";
+          return (
+            <div
+              key={`${item.title}-${index}`}
+              className="flex shrink-0 items-center justify-center"
+            >
+              {item.svg ? (
+                <div
+                  dangerouslySetInnerHTML={{ __html: processSvg(item.svg) }}
+                  className="flex items-center justify-center [&>svg]:block [&>svg]:w-auto"
+                  style={{ height }}
+                />
+              ) : (
+                <img
+                  src={item.image}
+                  alt={item.title}
+                  className="w-auto object-contain"
+                  style={{ height, opacity: isLoaded ? 1 : 0 }}
+                />
+              )}
+            </div>
+          );
+        })}
       </div>
     </div>
   );

src/components/home/trustedby/trusted-by.astro

@@ -5,28 +5,20 @@ import { trustedBySection } from "./trustedby";
 ---
 
 <div class="w-full overflow-hidden py-12 dark:bg-[#1c1c1c] md:py-20">
-  <div class="container-home relative z-[2] flex flex-col gap-10 md:gap-14">
-
-    <div class="flex flex-col items-center justify-center gap-6 mb-6">
+  <div class="relative z-[2] flex flex-col gap-10 md:gap-14">
+    <div class="mb-6 flex flex-col items-center justify-center gap-16">
       <h2 class="text-gray-500 dark:text-[#8A8F98] md:text-lg">
         Trusted by Leading Innovators
       </h2>
 
-      <div class="hidden gap-8 lg:flex">
-        {
-          trustedBySection.map((item) =>
-            item?.svg ? (
-              <div set:html={item.svg} class="h-20" />
-            ) : (
-              <img src={item?.image} alt={item.title} class="h-16" />
-            )
-          )
-        }
+      <div
+        class="relative mx-auto w-full max-w-[1400px] md:before:absolute md:before:left-0 md:before:top-0 md:before:z-10 md:before:h-full md:before:w-32 md:before:bg-gradient-to-r md:before:from-white md:before:to-transparent md:before:content-[''] md:after:absolute md:after:right-0 md:after:top-0 md:after:z-10 md:after:h-full md:after:w-32 md:after:bg-gradient-to-l md:after:from-white md:after:to-transparent md:after:content-[''] dark:md:before:from-[#1c1c1c] dark:md:after:from-[#1c1c1c]"
+      >
+        <TrustedByMarquee trustedBySection={trustedBySection} client:only />
       </div>
-
-      <TrustedByMarquee trustedBySection={trustedBySection} client:only />
     </div>
-
-    <ExpandedGpuPricing client:load />
+    <div class="container-home w-full">
+      <ExpandedGpuPricing client:load />
+    </div>
   </div>
 </div>