rename carousel to ticker

src/app/_components/hero.tsx

@@ -1,15 +1,15 @@
 import { ComponentProps } from "react";
 import { twMerge } from "tailwind-merge";
 
-import { PartnersCarousel } from "./partners-carousel";
+import { PartnersTicker } from "./partners-ticker";
 
 type HeroProps = ComponentProps<"section">;
 
 export function Hero({ className, children, ...props }: HeroProps) {
   return (
     <section className={twMerge("min-h-screen", className)} {...props}>
       {children}
-      <PartnersCarousel />
+      <PartnersTicker />
     </section>
   );
 }

src/app/_components/partners-carousel.tsx → src/app/_components/partners-ticker.tsx

@@ -31,22 +31,23 @@ const partners = [
 // Duplicate partners to simulate infinite scrolling
 const partnersToRender = [...partners, ...partners];
 
-export function PartnersCarousel() {
+export function PartnersTicker() {
   return (
     <>
       <div className="mb-8 text-center text-xs uppercase lining-nums tabular-nums tracking-wide-4 text-grey-400">
         Integrated Partners
       </div>
-      <div className="w-[calc(2 * var(--no-of-slides))] relative overflow-hidden">
+      <div className="w-[calc(2 * var(--no-of-slides))] group relative overflow-hidden">
         <div className="container mx-auto">
           <div className="grid">
             <div className="w-[calc(var(--slides-in-view) * var(--slide-width))] flex flex-row overflow-hidden">
               {partnersToRender.map((partner, index) => (
                 <div
                   key={index}
-                  className="flex h-[var(--slide-height)] w-[var(--slide-width)] flex-auto flex-shrink-0 flex-grow-0 animate-scroll flex-col items-center"
+                  className="animate-scroll flex h-[var(--slide-height)] w-[var(--slide-width)] flex-auto flex-shrink-0 flex-grow-0 flex-col items-center"
                 >
                   {/* Note: partner.name only for testing purposes */}
+                  {/* FIXME: remove before deploying to prod */}
                   <div>{partner.name}</div>
                   <partner.Logo className="h-8 w-8" />
                 </div>
@@ -55,7 +56,7 @@ export function PartnersCarousel() {
           </div>
         </div>
         {/* Fade in/out overlay */}
-        <div className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gradient-to-r from-grey-dark via-transparent via-50% to-grey-dark bg-fixed sm:from-10% sm:to-90% xl:from-25% xl:to-75%" />
+        <div className="via-transparent absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gradient-to-r from-grey-dark via-50% to-grey-dark bg-fixed sm:from-10% sm:to-90% xl:from-25% xl:to-75%" />
       </div>
     </>
   );