From fcbfbb08b8d25fc8ece2808dd850897351a7326a Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Fri, 24 Jan 2025 11:35:17 +0100
Subject: [PATCH] fix(landing-page): adjust marquee gap and animation duration

---
 .../homepage/companies/components/Marquee.tsx      | 14 +++++++++++---
 apps/landing-page/tailwind.config.ts               |  4 ++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/landing-page/app/features/homepage/companies/components/Marquee.tsx b/apps/landing-page/app/features/homepage/companies/components/Marquee.tsx
index 91a3ee1b6..d9533e6c0 100644
--- a/apps/landing-page/app/features/homepage/companies/components/Marquee.tsx
+++ b/apps/landing-page/app/features/homepage/companies/components/Marquee.tsx
@@ -6,15 +6,23 @@ interface MarqueeProps {
 
 export function Marquee({ children }: MarqueeProps) {
   return (
-    <div className="flex items-center overflow-hidden">
+    <div
+      className="flex items-center overflow-hidden select-none gap-[--marquee-gap]"
+      style={
+        {
+          "--marquee-gap": "2rem",
+        } as React.CSSProperties
+      }
+    >
       {Array(2)
         .fill(0)
         .map((_, i) => (
           <div
             key={i}
+            aria-hidden={i === 1 ? "true" : undefined}
             className={cn(
-              "flex flex-shrink-0 justify-center flex-row items-center gap-8 md:gap-16 mr-8 md:mr-0 animate-marquee md:animate-none",
-              i === 1 && "hidden",
+              "flex flex-shrink-0 justify-around min-w-full flex-row items-center gap-[--marquee-gap] md:gap-16 animate-marquee md:animate-none",
+              i === 1 ? "md:hidden" : undefined,
             )}
           >
             {children}
diff --git a/apps/landing-page/tailwind.config.ts b/apps/landing-page/tailwind.config.ts
index d2258498f..4edd57500 100644
--- a/apps/landing-page/tailwind.config.ts
+++ b/apps/landing-page/tailwind.config.ts
@@ -29,7 +29,7 @@ export default {
         body: ["Untitled Sans", "sans-serif"],
       },
       animation: {
-        marquee: "marquee 20s linear infinite",
+        marquee: "marquee 15s linear infinite",
         // Scroll animations
         "slight-random-rotate": "linear slight-random-rotate forwards",
         "fill-carousel-dot": "linear fill-carousel-dot forwards",
@@ -41,7 +41,7 @@ export default {
       keyframes: {
         marquee: {
           "0%": { transform: "translateX(0)" },
-          "100%": { transform: "translateX(calc(-100% - 2rem))" },
+          "100%": { transform: "translateX(calc(-100% - var(--marquee-gap)))" },
         },
         "slight-random-rotate": {
           "0%": { transform: "rotate(0deg)" },