diff --git a/src/components/home/TrustedByMarquee.tsx b/src/components/home/TrustedByMarquee.tsx index 215f02acf..4c6538987 100644 --- a/src/components/home/TrustedByMarquee.tsx +++ b/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 (
-
- {displayItems.map((item, index) => ( -
- {item.svg ? ( -
- ) : ( - {item.title} - )} -
- ))} +
+ {displayItems.map((item, index) => { + const height = item.height + ? typeof item.height === "number" + ? `${item.height}px` + : item.height + : "34px"; + return ( +
+ {item.svg ? ( +
+ ) : ( + {item.title} + )} +
+ ); + })}
); diff --git a/src/components/home/trustedby/trusted-by.astro b/src/components/home/trustedby/trusted-by.astro index 126035c04..398976346 100644 --- a/src/components/home/trustedby/trusted-by.astro +++ b/src/components/home/trustedby/trusted-by.astro @@ -5,28 +5,20 @@ import { trustedBySection } from "./trustedby"; ---
-
- -
+
+

Trusted by Leading Innovators

-
diff --git a/src/components/home/trustedby/trustedby.ts b/src/components/home/trustedby/trustedby.ts index e0cfb4993..eefdccd53 100644 --- a/src/components/home/trustedby/trustedby.ts +++ b/src/components/home/trustedby/trustedby.ts @@ -2,205 +2,396 @@ type trustedBy = { title: string; svg: string; image?: string; + height?: number | string; }; export const trustedBySection: trustedBy[] = [ + { + title: "Nous", + + svg: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`, + }, + { + title: "YesandNo", + svg: ` + + + + + + + + + + + + + + + + + + + + +`, + }, + { + title: "Pluralis Research", + height: "30px", + svg: ` + + + + + + + + + + + + + + + + + + + +`, + }, + { + title: "gensyn", + svg: ` + + + + + + + + + + + + + + + +`, + }, + { + title: "primeIntellect", + + svg: ` + + + + + + + + + + + + + + + + + + + + + + + + +`, + }, + { title: "Venice", - svg: ` - - - - - - - - - - - - - - - - - - - - - - - + svg: ` + + + + + `, }, { - svg: ` - - - - - - - - - - - - - - - - - - - - - - - + svg: ` + + + + + + + + + + + + + + + + + + + `, - title: "Passage", + title: "Envision", + height: "25px", }, { - svg: ` - - - - - - - - - - - - - - - - - - - - - - - - - + title: "Morpheus", + svg: ` + + + + + + + + + + +`, + }, + { + title: "Bagel", + svg: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`, + }, + { + title: "eliza", + height: "20px", + svg: ` + + + + + + + + + + + + +`, + }, + { + title: "flock", + svg: ` + + + + + + +`, + }, + { + svg: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, - title: "Nodeshift", + title: "Texas", }, + { - svg: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + svg: ` + + + + + + + + + + + + + + + + + + `, - title: "Envision", + title: "Passage", }, { - svg: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + svg: ` + + + + + + + `, - title: "Texas", + title: "Nodeshift", }, ];