Implement carousel for member logos

README.md

@@ -29,8 +29,37 @@ git push origin staging
 
 Logo images can be added to the CoreCollective S3 bucket: static-core-collective/company_logos.
 Copy the asset url and update the base url to "https://static.corecollective.dev"
-Add the url in alphabetical order to the company.yaml list with a `alt` field also.
-If the logo appears larger or small add a `scale` field also to adjust accordingly.
+Add the url in alphabetical order to the `src/content/logos/company.yaml` list with an `alt` field.
+
+### Adjusting logo sizing in the carousel
+
+The carousel displays all logos in a fixed bounding box (12rem x 3.5rem on desktop). Logos with
+different SVG viewBox dimensions will appear at different visual sizes. The optional `scale` field
+applies a CSS `transform: scale()` to adjust a logo's visual weight within its bounding box.
+
+**When to use `scale`:**
+- If a new logo appears too large compared to others, add `scale: "0.8"` (or lower) to shrink it
+- If a logo appears too small (e.g. the SVG has lots of internal whitespace), add a scale above 1.0
+- Check the logo at both desktop and mobile widths after adjusting
+
+**How to determine the right value:**
+1. Run `npm run dev` and compare the new logo visually against its neighbours in the carousel
+2. Start with small adjustments (e.g. 0.8 or 1.2) and refine from there
+3. SVGs with a tall aspect ratio (close to square) tend to appear large and need scale < 1.0
+4. SVGs with excessive internal padding/whitespace need scale > 1.0
+
+**Current scale values for reference:**
+| Logo | Scale | Reason |
+|------|-------|--------|
+| AMD | 0.8 | SVG fills height aggressively |
+| Arm | 0.75 | Large viewBox, appears oversized at 1.0 |
+| CIX | 0.8 | Wide logo that dominates visually |
+| Google | 0.8 | Fills height aggressively |
+| Huawei | 2.8 | SVG has significant internal whitespace |
+
+**Ideal solution:** For best results, ask your web developer to normalise the SVG file itself
+(trim whitespace from the viewBox, ensure artwork fills a consistent proportion of the canvas).
+This reduces the need for per-logo scale overrides.
 
 ## Updating blogs
 

src/components/Members.astro

@@ -11,21 +11,72 @@ const images = companyLogos?.data;
 <div class="flex w-full flex-col items-center gap-24 py-12">
   <PageTitle path={membersTitle} />
 
-  <ul
-    class="flex w-full flex-col flex-wrap items-center justify-center gap-8 px-4 sm:gap-10 md:flex-row md:gap-16 md:pt-8"
-  >
-    {
-      images?.map((img: any) => (
-        <li class="flex h-16 w-28 shrink-0 items-center justify-center sm:h-20 sm:w-32 md:h-32 md:w-64 md:py-2">
-          <Image
-            src={img.src}
-            alt={img.alt}
-            class="h-full w-full object-contain"
-            style={`transform: scale(${img.scale || 1});`}
-            inferSize={true}
-          />
-        </li>
-      ))
-    }
-  </ul>
+  <div class="relative w-full overflow-hidden">
+    <div
+      class="carousel-track flex w-max"
+    >
+      {
+        [0, 1].map(() => (
+          <div class="flex items-center gap-12 pr-12 md:gap-16 md:pr-16">
+            {(images || []).map((img: any) => (
+              <div class="carousel-logo flex shrink-0 items-center justify-center">
+                <Image
+                  src={img.src}
+                  alt={img.alt}
+                  class="max-h-full max-w-full object-contain"
+                  style={img.scale ? `transform: scale(${img.scale});` : undefined}
+                  inferSize={true}
+                />
+              </div>
+            ))}
+          </div>
+        ))
+      }
+    </div>
+    <div
+      class="pointer-events-none absolute inset-y-0 left-0 w-24 md:w-48"
+      style="background: linear-gradient(to right, var(--color-cc-blue), transparent);"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute inset-y-0 right-0 w-24 md:w-48"
+      style="background: linear-gradient(to left, var(--color-cc-blue), transparent);"
+    >
+    </div>
+  </div>
 </div>
+
+<style>
+  .carousel-track {
+    animation: scroll 30s linear infinite;
+  }
+
+  .carousel-track:hover {
+    animation-play-state: paused;
+  }
+
+  .carousel-logo {
+    height: 2.5rem;
+    width: 7rem;
+  }
+
+  @media (min-width: 640px) {
+    .carousel-logo {
+      height: 3rem;
+      width: 9rem;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .carousel-logo {
+      height: 3.5rem;
+      width: 12rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .carousel-track {
+      animation: none;
+    }
+  }
+</style>

src/content/logos/company.yaml

@@ -1,5 +1,6 @@
 - src: https://static.corecollective.dev/company_logos/amdLogo.svg
   alt: amd logo
+  scale: "0.8"
 - src: https://static.corecollective.dev/company_logos/ampereLogo.svg
   alt: ampere logo
 - src: https://static.corecollective.dev/company_logos/armLogo.svg
@@ -9,16 +10,17 @@
   alt: canonical logo
 - src: https://static.corecollective.dev/company_logos/cixLogo.svg
   alt: cix logo
+  scale: "0.8"
 - src: https://static.corecollective.dev/company_logos/fujitsuLogo.svg
   alt: fujitsu logo
 - src: https://static.corecollective.dev/company_logos/googleLogo.svg
   alt: google logo
-  scale: "0.95"
+  scale: "0.8"
 - src: https://static.corecollective.dev/company_logos/graphcoreLogo.svg
   alt: graphcore logo
 - src: https://static.corecollective.dev/company_logos/huawei3.svg
   alt: huawei logo
-  scale: "1.9"
+  scale: "2.8"
 - src: https://static.corecollective.dev/company_logos/linaroLogo.svg
   alt: linaro logo
 - src: https://static.corecollective.dev/company_logos/microsoftLogo.svg

src/styles/global.css

@@ -36,4 +36,13 @@
   .hover-gradient-border:hover::before {
     opacity: 1;
   }
+}
+
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
 }