Feat: Update Partners Logo

packages/frontend/src/features/landing/components/section/partners.tsx

@@ -8,11 +8,25 @@ interface PartnersProps {
 }
 
 const PARTNER_LOGOS = [
-  { name: 'Upstart', src: '/landing/partners/upstart.png' },
-  { name: 'Sonos', src: '/landing/partners/sonos.png' },
-  { name: 'Coinbase', src: '/landing/partners/coinbase.png' },
-  { name: 'Betty Labs', src: '/landing/partners/betty-labs.png' },
-  { name: 'Masterclass', src: '/landing/partners/masterclass.png' }
+  { name: 'Acuspire', src: '/landing/partners/Acuspire.png' },
+  { name: 'Aspentech', src: '/landing/partners/Aspentech.png' },
+  { name: 'BrainSTEM Alliance', src: '/landing/partners/Brain STel.png' },
+  { name: 'Canada', src: '/landing/partners/Canada.png' },
+  { name: 'Calgary Economic Development', src: '/landing/partners/CED.png' },
+  { name: 'CPKC', src: '/landing/partners/CPKC.png' },
+  { name: 'RBC', src: '/landing/partners/rbc.png' },
+  { name: 'Garmin', src: '/landing/partners/Garmin.png' },
+  { name: 'Alberta Government', src: '/landing/partners/GOA.png' },
+  { name: 'Hammehr', src: '/landing/partners/Hammhr.png' },
+  { name: 'Long View', src: '/landing/partners/LongView.png' },
+  { name: 'Manpower', src: '/landing/partners/Manpower.png' },
+  { name: 'Migr8+', src: '/landing/partners/Migrate.png' },
+  { name: 'Monark', src: '/landing/partners/Monark.png' },
+  { name: 'Nutrien', src: '/landing/partners/Nutrien.png' },
+  { name: 'PathwayPro', src: '/landing/partners/Pathways Pro.png' },
+  { name: 'Simpl.AR', src: '/landing/partners/SimplAR.png' },
+  { name: 'Teamit', src: '/landing/partners/Teamit.png' },
+  { name: 'Techies4Tech', src: '/landing/partners/Techies4tech.png' }
 ] as const;
 
 export function PartnersSection({ className }: PartnersProps) {
@@ -27,41 +41,34 @@ export function PartnersSection({ className }: PartnersProps) {
         OUR TRUSTED PARTNERS
       </h6>
 
-      <div className="relative flex overflow-x-hidden">
-        {/* First scroll container */}
-        <div className="flex min-w-full animate-marquee items-center justify-around">
-          {PARTNER_LOGOS.map((logo) => (
-            <div
-              key={logo.name}
-              className="mx-4 flex h-16 w-16 items-center justify-center sm:mx-6 sm:h-20 sm:w-20 md:h-24 md:w-24 lg:mx-8 lg:h-[120px] lg:w-[120px]"
-            >
-              <Image
-                src={logo.src}
-                alt={`${logo.name} logo`}
-                width={120}
-                height={120}
-                className="h-full w-auto object-contain opacity-60 grayscale transition-opacity hover:opacity-100 hover:grayscale-0"
-              />
-            </div>
-          ))}
-        </div>
-
-        {/* Duplicate for seamless loop */}
-        <div className="flex min-w-full animate-marquee items-center justify-around">
-          {PARTNER_LOGOS.map((logo) => (
-            <div
-              key={`${logo.name}-duplicate`}
-              className="mx-4 flex h-16 w-16 items-center justify-center sm:mx-6 sm:h-20 sm:w-20 md:h-24 md:w-24 lg:mx-8 lg:h-[120px] lg:w-[120px]"
-            >
-              <Image
-                src={logo.src}
-                alt={`${logo.name} logo`}
-                width={120}
-                height={120}
-                className="h-full w-auto object-contain opacity-60 grayscale transition-opacity hover:opacity-100 hover:grayscale-0"
-              />
-            </div>
-          ))}
+      <div className="relative w-full overflow-hidden">
+        {/* Infinite marquee container */}
+        <div className="flex">
+          {/* Marquee track */}
+          <div
+            className="flex animate-marquee items-center gap-8 sm:gap-12 lg:gap-16"
+            style={{ width: 'max-content' }}
+          >
+            {/* Render logos multiple times for seamless infinite scroll */}
+            {[...Array(3)].map((_, trackIndex) =>
+              PARTNER_LOGOS.map((logo) => (
+                <div
+                  key={`${logo.name}-track-${trackIndex}`}
+                  className="flex h-20 w-20 shrink-0 items-center justify-center sm:h-24 sm:w-24 md:h-28 md:w-28 lg:h-32 lg:w-32"
+                >
+                  <Image
+                    src={logo.src}
+                    alt={`${logo.name} logo`}
+                    width={200}
+                    height={200}
+                    className="h-full w-full object-contain opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"
+                    priority={false}
+                    loading="lazy"
+                  />
+                </div>
+              ))
+            )}
+          </div>
         </div>
       </div>
     </div>

packages/frontend/tailwind.config.ts

@@ -227,7 +227,7 @@ export default {
         },
         marquee: {
           '0%': { transform: 'translateX(0%)' },
-          '100%': { transform: 'translateX(-100%)' }
+          '100%': { transform: 'translateX(-33.333%)' }
         }
       },
       animation: {