Update contributors on the home page

Author: abdonrd

src/app/(home)/Contributors.tsx

@@ -1,31 +1,38 @@
-import Image from 'next/image';
-import AlgorithmiqLogo from './logo_algorithmiq.png';
-import BluequbitLogo from './logo_bluequbit.png';
-import IbmLogo from './logo_ibm.png';
-import RikenLogo from './logo_riken.png';
-import UMarylandLogo from './logo_uMaryland.png';
+import submissionsCVP from '../../../data/classically-verifiable-problems/submissions.json' assert { type: 'json' };
+import submissionsOE from '../../../data/observable-estimations/submissions.json' assert { type: 'json' };
+import submissionsVP from '../../../data/variational-problems/submissions.json' assert { type: 'json' };
 
-const contributors = [
-  { name: 'Algorithmiq', logo: AlgorithmiqLogo },
-  { name: 'BlueQubit', logo: BluequbitLogo },
-  { name: 'IBM', logo: IbmLogo },
-  { name: 'RIKEN', logo: RikenLogo },
-  { name: 'University of Maryland', logo: UMarylandLogo },
-];
+const submissions = [...submissionsCVP, ...submissionsOE, ...submissionsVP];
+
+const institutionsSet = new Set<string>();
+
+submissions.forEach((submission) => {
+  if (submission.institutions) {
+    submission.institutions.split(',').forEach((institution) => {
+      institutionsSet.add(institution.trim());
+    });
+  }
+});
+
+const institutions = Array.from(institutionsSet).sort((a, b) =>
+  a.toLowerCase().localeCompare(b.toLowerCase()),
+);
 
 export function Contributors() {
   return (
-    <ul className="mx-auto inline-flex flex-row flex-wrap justify-center pt-2">
-      {contributors.map((contributor) => (
-        <li key={contributor.name}>
-          <Image
-            src={contributor.logo}
-            alt={`${contributor.name} logo`}
-            title={contributor.name}
-            className="h-16 w-auto grayscale"
-          />
-        </li>
-      ))}
-    </ul>
+    <div className="flex overflow-hidden mask-[linear-gradient(to_right,transparent,white_20%,white_80%,transparent)] pt-6">
+      <ul className="animate-marquee flex w-max min-w-full shrink-0 items-center justify-around gap-16 pr-16">
+        {/* Duplicate the list to ensure a seamless infinite marquee animation */}
+        {[...institutions, ...institutions].map((institution, index) => (
+          <li
+            key={`${institution}-${index}`}
+            className="flex items-center gap-16 text-xl font-light whitespace-nowrap"
+          >
+            {institution}
+            <span className="h-2 w-2 rounded-full bg-green-600" />
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }

src/app/(home)/logo_algorithmiq.png

@@ -21,14 +21,14 @@ export default function Home() {
             </Button>
           </div>
         </div>
-      </header>
 
-      <section className="px-6 py-10 text-center">
-        <div className="text-secondary-foreground text-sm">
-          Contributors include researchers from:
+        <div className="px-6 pb-20 text-center">
+          <div className="text-secondary-foreground text-sm">
+            Contributors include researchers from 10+ organizations
+          </div>
+          <Contributors />
         </div>
-        <Contributors />
-      </section>
+      </header>
 
       <section className="mx-auto max-w-2xl px-6 py-20 text-center">
         <h3 className="mb-6 text-4xl">What is quantum advantage?</h3>

src/app/(home)/logo_bluequbit.png

@@ -47,6 +47,17 @@
   --color-link-foreground: var(--link-foreground);
   --color-table-head: #343a3f;
   --color-table-head-foreground: #ffffff;
+
+  --animate-marquee: marquee 50s linear infinite;
+
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-50%);
+    }
+  }
 }
 
 :root {