feat: Replace mobile logo grid with infinite scrolling marquee

[felixkrrr]

Summary

Resolves MKT-2060 — On mobile, the enterprise logo section below the hero now displays as a single-row infinite scrolling marquee (matching the HeroStatsStrip animation pattern above the hero title), instead of a 3-column grid that hid most logos.

Changes

components/shared/EnterpriseLogoGrid.tsx

• Mobile (below sm): Replaced the 3-column grid with a horizontally scrolling marquee powered by framer-motion. All 12 visible logos now appear in a continuous loop with gradient edge masks for seamless visual wrapping.
• Desktop (sm and above): The existing 6-column grid layout is preserved unchanged.
• Logos in the marquee use a slightly compact height (40px vs 56px) for better mobile fit.
• Reuses the same marquee pattern as HeroStatsStrip (duplicate content, x: ["0%", "-50%"] animation, linear easing, edge gradient mask).

Before / After

• Before: Mobile showed only 6 logos in a 3×2 grid
• After: Mobile shows all 12 logos in a continuously scrolling single row

Linear Issue: MKT-2060

  

Disclaimer: Experimental PR review

Greptile Summary

This PR replaces the mobile enterprise logo section from a 3-column grid (showing only 6 logos) with a framer-motion-powered infinite scrolling marquee that shows all 12 visible logos, while preserving the existing 6-column desktop grid. The implementation correctly handles the prefers-reduced-motion preference with a static horizontal-scroll fallback, and properly marks duplicate marquee items with aria-hidden and tabIndex=-1.

Confidence Score: 5/5

Safe to merge — the change is additive and isolated to a single marketing component with no data or auth implications.

Only P2 findings (a brief flash of animation for reduced-motion users on initial render). No P0/P1 issues found. Desktop layout is fully preserved.

No files require special attention.

Important Files Changed

Filename	Overview
components/shared/EnterpriseLogoGrid.tsx	Replaces the mobile 3-column logo grid with a framer-motion infinite marquee; desktop grid is unchanged. One minor accessibility concern: useReducedMotion() returns null on initial render, so the animated version is briefly shown before the preference is applied.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[EnterpriseLogoGrid] --> B{Viewport}
    B -->|Mobile below sm| C{shouldReduceMotion}
    B -->|Desktop sm and above| D[Static 6-col grid\nall visibleCompanies]
    C -->|true or null| E[Static overflow-x-auto scroll\nLogoMarqueeItems once]
    C -->|false| F[motion.div animated marquee\nx: 0% to -50%]
    F --> G[LogoMarqueeItems primary]
    F --> H[LogoMarqueeItems duplicate\naria-hidden tabIndex=-1]

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: components/shared/EnterpriseLogoGrid.tsx
Line: 183-215

Comment:
**Animated marquee shown on first render for reduced-motion users**

`useReducedMotion()` returns `null` during SSR and before the browser media query resolves on the client. Because `null` is falsy, the ternary defaults to the animated marquee branch on initial render, so users with `prefers-reduced-motion: reduce` briefly see the animation before hydration switches to the static fallback. Changing the condition to `shouldReduceMotion !== false` treats `null` as "reduce motion" (conservative default) and avoids the flash.

```suggestion
  const shouldReduceMotion = useReducedMotion();

  return (
    <>
      {/* Mobile: scrolling marquee or static scroll fallback */}
      {shouldReduceMotion !== false ? (
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (3): Last reviewed commit: "a11y: fix inert blocking clicks + add re..." | Re-trigger Greptile}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
langfuse-docs	Ready	Preview, Comment	Apr 29, 2026 4:16pm

[github-actions]

@claude review

[felixkrrr]

@greptileai

[claude]

Author iterated through accessibility feedback and the current revision applies the recommended fixes (per-item aria-hidden/tabIndex on the duplicate copy, branched JSX for reduced motion); LGTM.

Extended reasoning...

Overview

This PR replaces the mobile 3-column logo grid with a framer-motion-powered horizontal marquee on components/shared/EnterpriseLogoGrid.tsx, while keeping the desktop 6-column grid unchanged. The current revision is the result of several review iterations addressing accessibility concerns (duplicate-content announcements, keyboard tab order, reduced-motion handling, semantic role usage, dead code).

Security risks

None. This is a presentational marketing component on a public landing page — no auth, no user input, no data flow, no network calls beyond the existing static logo image imports. The framer-motion dependency was already in use elsewhere in the codebase (e.g. HeroStatsStrip, FeatureTabs).

Level of scrutiny

Moderate — the PR is small (~80 lines net) and self-contained, but a11y nuances around marquee patterns warranted careful review. After multiple iterations, the current implementation correctly:

• Uses per-LinkBox aria-hidden/tabIndex={-1} on the duplicate copy (avoids both aria-hidden-on-focusable-content and inert-blocks-clicks pitfalls)
• Branches to an overflow-x-auto scrollable fallback when useReducedMotion() is true (avoids clipping content)
• Drops the misleading role="marquee"
• Cleans up unused imports and dead Tailwind utilities

Other factors

The author has been highly responsive across multiple review cycles, addressing every previously-raised critical issue with the suggested fix shape. Greptile's open nit on the -mx-5 negative margin in the compact image wrapper is minor (potential adjacent-logo bleed under tight packing) and not blocking. No bug-hunter findings on the current revision.

[felixkrrr]

@greptileai