Merge remote-tracking branch 'origin/partners-carousel' into home-her…

…o-section

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,13 +31,13 @@ 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">
@@ -47,6 +47,7 @@ export function PartnersCarousel() {
                   className="flex h-[var(--slide-height)] w-[var(--slide-width)] flex-auto flex-shrink-0 flex-grow-0 animate-scroll 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>