From 6ee548cc7b1e5c8abf505743c544a7e7607295a2 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 27 Apr 2026 15:51:11 +0000 Subject: [PATCH 01/14] feat: replace mobile logo grid with infinite scrolling marquee On mobile (below sm breakpoint), the enterprise logo grid is now replaced with a horizontally scrolling marquee that shows all logos in a continuous loop, matching the HeroStatsStrip animation pattern. - All logos are visible on mobile (previously only 6 of 12 shown) - Uses framer-motion for smooth infinite horizontal scroll - Gradient mask fades edges for seamless visual loop - Desktop grid layout (sm and above) remains unchanged - Slightly smaller logos (40px vs 56px) in marquee for better fit Resolves MKT-2060 Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 115 +++++++++++++++++------ 1 file changed, 86 insertions(+), 29 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index b12dd2ac0..d975db27d 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -1,7 +1,9 @@ "use client"; +import { Fragment } from "react"; import Image from "next/image"; import type { StaticImageData } from "next/image"; +import { motion } from "framer-motion"; import adobeLogo from "../home/img/adobe.svg"; import canvaLogo from "../home/img/canva.svg"; import circlebackLogo from "../home/img/circleback.svg"; @@ -21,6 +23,8 @@ import twilioLogo from "../home/img/twilio.svg"; import { cn } from "@/lib/utils"; import { LinkBox } from "@/components/ui/link-box"; +const MARQUEE_DURATION_SEC = 30; + type CompanyLogo = { name: string; logo: StaticImageData; @@ -107,41 +111,32 @@ const companies: CompanyLogo[] = [ const LogoImage = ({ logo, name, + compact = false, }: { logo: StaticImageData; name: string; + compact?: boolean; }) => { return ( {`${name} ); }; -interface EnterpriseLogoGridProps { - className?: string; - small?: boolean; -} +const visibleCompanies = companies.filter((c) => !c.hidden); -export const EnterpriseLogoGrid = ({ - className = "", - small = false, -}: EnterpriseLogoGridProps) => { +function LogoMarqueeItems() { return ( -
- {companies.filter((c) => !c.hidden).map((company, index) => { + <> + {visibleCompanies.map((company) => { const hasStory = Boolean(company.customerStoryPath); return ( 5 ? "hidden sm:flex" : "flex", - )} - role="gridcell" + className="shrink-0 flex items-center justify-center !p-0 px-3" aria-label={ hasStory ? `Read ${company.name} user story` : `${company.name} uses Langfuse` } > - + ); })} -
+ + ); +} + +interface EnterpriseLogoGridProps { + className?: string; + small?: boolean; +} + +export const EnterpriseLogoGrid = ({ + className = "", + small = false, +}: EnterpriseLogoGridProps) => { + return ( + <> + {/* Mobile: infinite scrolling marquee */} +
+ + {[0, 1].map((i) => ( + + + + ))} + +
+ + {/* Desktop: grid layout */} +
+ {visibleCompanies.map((company) => { + const hasStory = Boolean(company.customerStoryPath); + return ( + + + + ); + })} +
+ ); }; From 0a63e98eb359b7aaac24484bf39e28e73f929daa Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 08:40:20 +0000 Subject: [PATCH 02/14] style: reduce spacing between logos in mobile marquee Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index d975db27d..c75d11560 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -144,7 +144,7 @@ function LogoMarqueeItems() { href={company.customerStoryPath} tooltip={hasStory ? "Read story" : undefined} tooltipPlacement="bottom-center" - className="shrink-0 flex items-center justify-center !p-0 px-3" + className="shrink-0 flex items-center justify-center !p-0 px-1" aria-label={ hasStory ? `Read ${company.name} user story` From 3df9f92e167c1d3691cec26effbb50f380b67193 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 08:40:53 +0000 Subject: [PATCH 03/14] style: slow down mobile logo marquee (30s -> 40s) Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index c75d11560..fa521ec8c 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -23,7 +23,7 @@ import twilioLogo from "../home/img/twilio.svg"; import { cn } from "@/lib/utils"; import { LinkBox } from "@/components/ui/link-box"; -const MARQUEE_DURATION_SEC = 30; +const MARQUEE_DURATION_SEC = 40; type CompanyLogo = { name: string; From c35f7ecfcea7e8b6b13dd7a1c498fcfb671c1cce Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 08:49:54 +0000 Subject: [PATCH 04/14] style: larger logos and tighter spacing in mobile marquee - Increase marquee logo height from 40px to 48px - Fix padding override so !py-0 !px-1 properly eliminates the default LinkBox padding (py-1.25 px-4.5) that was creating oversized hit boxes around each logo Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index fa521ec8c..ec835b1f0 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -123,7 +123,7 @@ const LogoImage = ({ alt={`${name} logo`} className={cn( "object-cover max-w-full transition-[filter] duration-200 hover:filter-[grayscale(1)_brightness(0)_contrast(1.15)] group-hover:filter-[grayscale(1)_brightness(0)_contrast(1.15)]", - compact ? "h-[40px]" : "h-[56px]", + compact ? "h-[48px]" : "h-[56px]", )} sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 20vw" priority={false} @@ -144,7 +144,7 @@ function LogoMarqueeItems() { href={company.customerStoryPath} tooltip={hasStory ? "Read story" : undefined} tooltipPlacement="bottom-center" - className="shrink-0 flex items-center justify-center !p-0 px-1" + className="shrink-0 flex items-center justify-center !py-0 !px-1" aria-label={ hasStory ? `Read ${company.name} user story` From 2116395a1917918f1e79d148b4e23a76d2107915 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 08:56:33 +0000 Subject: [PATCH 05/14] style: crop logo whitespace in mobile marquee for tighter layout The SVG logos have large whitespace margins within their 140x40 viewBox. In the marquee, use negative horizontal margin (-mx-[20px]) on the images with overflow-hidden wrapper to visually crop the side whitespace, making logos appear larger and sit closer together. Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index ec835b1f0..cef36c00a 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -117,18 +117,24 @@ const LogoImage = ({ name: string; compact?: boolean; }) => { - return ( + const img = ( {`${name} ); + + if (compact) { + return
{img}
; + } + + return img; }; const visibleCompanies = companies.filter((c) => !c.hidden); From 7b7f2c807aea4b8daeaee4accb2150b17e17d7e3 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 09:16:45 +0000 Subject: [PATCH 06/14] style: crop top/bottom whitespace and enlarge logos in mobile marquee Render logos at full 56px height (same as desktop) but crop to a 32px visible area with overflow-hidden. Negative margins on all sides (-mx-22px, -my-12px) trim the whitespace baked into the SVG viewBoxes, making the actual logo content appear much larger and tightly packed. Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 29 ++++++++++++++---------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index cef36c00a..bea11b384 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -117,24 +117,29 @@ const LogoImage = ({ name: string; compact?: boolean; }) => { - const img = ( + if (compact) { + return ( +
+ {`${name} +
+ ); + } + + return ( {`${name} ); - - if (compact) { - return
{img}
; - } - - return img; }; const visibleCompanies = companies.filter((c) => !c.hidden); From c517faabb734dcd126633d38b01a24a75d7e4472 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 09:27:37 +0000 Subject: [PATCH 07/14] style: enlarge mobile marquee logos and container height Increase image from 56px to 72px, visible container from 32px to 44px, and adjust crop margins (-mx-28px, -my-14px) to keep the whitespace trimmed while showing logos at a larger size. Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index bea11b384..146303338 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -119,11 +119,11 @@ const LogoImage = ({ }) => { if (compact) { return ( -
+
{`${name} From 9da92bc7c321dc50e1a5481ae8a02957a6ee5a0e Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 09:32:41 +0000 Subject: [PATCH 08/14] style: use CSS scale transform to enlarge mobile marquee logos Replace negative-margin cropping approach with scale-150 transform which reliably scales up the logo content by 50%. Container is 44px tall with overflow-hidden and flex items-center to vertically center the scaled logos. Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index 146303338..03e361c58 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -119,11 +119,11 @@ const LogoImage = ({ }) => { if (compact) { return ( -
+
{`${name} From 7134605b0f409acc1538af2fd4c1ff41dea25534 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 09:38:33 +0000 Subject: [PATCH 09/14] style: reduce logo size (scale 125%) and remove horizontal spacing - Scale down from 150% to 125% - Remove all padding on marquee LinkBoxes (!p-0) for tighter spacing Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index 03e361c58..5ebcc5585 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -123,7 +123,7 @@ const LogoImage = ({ {`${name} @@ -155,7 +155,7 @@ function LogoMarqueeItems() { href={company.customerStoryPath} tooltip={hasStory ? "Read story" : undefined} tooltipPlacement="bottom-center" - className="shrink-0 flex items-center justify-center !py-0 !px-1" + className="shrink-0 flex items-center justify-center !p-0" aria-label={ hasStory ? `Read ${company.name} user story` From cb25dfcd4face99168d2082fd5f564897dc056fd Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 28 Apr 2026 10:45:13 +0000 Subject: [PATCH 10/14] style: use negative margin on logo containers to eliminate whitespace gaps Apply -mx-5 on each logo's overflow-hidden wrapper to overlap the SVG's baked-in horizontal whitespace, pulling logos much closer together in the mobile marquee. Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index 5ebcc5585..075e436b0 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -119,7 +119,7 @@ const LogoImage = ({ }) => { if (compact) { return ( -
+
{`${name} Date: Wed, 29 Apr 2026 09:29:55 +0000 Subject: [PATCH 11/14] a11y: hide duplicate marquee content from screen readers Mark the second copy of LogoMarqueeItems with aria-hidden='true' so assistive technology doesn't announce every logo twice. Addresses PR review comment from greptile. Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index 075e436b0..1b18e0539 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -196,11 +196,10 @@ export const EnterpriseLogoGrid = ({ ease: "linear", }} > - {[0, 1].map((i) => ( - - - - ))} + +
From 5d966523c762e14522fd7e0b417da15976a41eee Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 29 Apr 2026 13:21:44 +0000 Subject: [PATCH 12/14] address PR review comments: inert, dead class, unused import - Replace aria-hidden='true' with inert on the duplicate marquee wrapper so focusable links are also removed from tab order (P1) - Remove dead grid-cols-3 class from desktop grid wrapper - Remove unused Fragment import Co-authored-by: felixkrrr --- components/shared/EnterpriseLogoGrid.tsx | 5 ++--- tsconfig.tsbuildinfo | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/shared/EnterpriseLogoGrid.tsx b/components/shared/EnterpriseLogoGrid.tsx index 1b18e0539..d4ec509d0 100644 --- a/components/shared/EnterpriseLogoGrid.tsx +++ b/components/shared/EnterpriseLogoGrid.tsx @@ -1,6 +1,5 @@ "use client"; -import { Fragment } from "react"; import Image from "next/image"; import type { StaticImageData } from "next/image"; import { motion } from "framer-motion"; @@ -197,7 +196,7 @@ export const EnterpriseLogoGrid = ({ }} > -