feat: Add Adopters logos (#1185)

Co-authored-by: Ewan Harris <ewan.harris@okta.com>

Author: aaguiarz

docs/content/getting-started/cli.mdx

@@ -410,4 +410,4 @@ Use the `fga model get` command is used to verify that the model was correctly w
       id: '../modeling/testing-models.mdx',
     },
   ]}
-/>
+/>

src/components/AdoptersCarousel/AdoptersCarousel.module.css

@@ -0,0 +1,114 @@
+.banner {
+  margin-top: 3rem;
+  padding: 2rem 2rem 2.5rem;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--ofga-neutral-darker), var(--ofga-neutral-black) 40%);
+  border: 1px solid color-mix(in srgb, var(--ofga-neutral-base), transparent 85%);
+  box-shadow: 0 18px 40px color-mix(in srgb, var(--ofga-neutral-black), transparent 55%);
+}
+
+@media screen and (width >= 996px) {
+  .banner {
+    margin-top: 4rem;
+    padding: 3.75rem;
+  }
+}
+
+.title {
+  margin: 0 0 1.5rem;
+  font-size: 1rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ofga-neutral-light);
+}
+
+.carousel {
+  overflow: hidden;
+  position: relative;
+}
+
+.carousel::before,
+.carousel::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  width: 80px;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.carousel::before {
+  left: 0;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--ofga-neutral-darker), var(--ofga-neutral-black) 40%),
+    transparent
+  );
+}
+
+.carousel::after {
+  right: 0;
+  background: linear-gradient(
+    270deg,
+    color-mix(in srgb, var(--ofga-neutral-darker), var(--ofga-neutral-black) 40%),
+    transparent
+  );
+}
+
+.track {
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
+  width: max-content;
+  animation: scroll 50s linear infinite;
+}
+
+.carousel:hover .track {
+  animation-play-state: paused;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+}
+
+.logo img {
+  height: 34px;
+  width: auto;
+  max-width: 140px;
+  opacity: 0.92;
+  transition: opacity 0.25s ease;
+}
+
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@media (width <= 600px) {
+  .track {
+    gap: 1.75rem;
+  }
+
+  .logo {
+    min-width: 96px;
+  }
+
+  .logo img {
+    height: 28px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track {
+    animation: none;
+    transform: translateX(0);
+  }
+}

src/components/AdoptersCarousel/index.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import styles from './AdoptersCarousel.module.css';
+
+type AdopterLogo = {
+  name: string;
+  src: string;
+};
+
+const adopterLogos: AdopterLogo[] = [
+  { name: 'Agicap', src: '/img/adopters/agicap.svg' },
+  { name: 'Appscode', src: '/img/adopters/appscode.svg' },
+  { name: 'Auth0', src: '/img/adopters/auth0.svg' },
+  { name: 'Canonical', src: '/img/adopters/canonical.svg' },
+  { name: 'Distyl', src: '/img/adopters/distyl.svg' },
+  { name: 'Docker', src: '/img/adopters/docker.svg' },
+  { name: 'EarthScope', src: '/img/adopters/earthscope.svg' },
+  { name: 'Flex', src: '/img/adopters/flex.svg' },
+  { name: 'Grafana', src: '/img/adopters/grafana.svg' },
+  { name: 'Headspace', src: '/img/adopters/headspace.svg' },
+  { name: 'Okta', src: '/img/adopters/okta.svg' },
+  { name: 'OpenObserve', src: '/img/adopters/openobserve.svg' },
+  { name: 'PlatformMesh', src: '/img/adopters/platformmesh.svg' },
+  { name: 'ReadAI', src: '/img/adopters/readai.svg' },
+  { name: 'Skyral', src: '/img/adopters/skyral.svg' },
+  { name: 'Sourcegraph', src: '/img/adopters/sourcegraph.svg' },
+  { name: 'Zuplo', src: '/img/adopters/zuplo.svg' },
+];
+
+const AdopterImage: React.FC<{ logo: AdopterLogo; isDuplicate: boolean }> = ({ logo, isDuplicate }) => {
+  const src = useBaseUrl(logo.src);
+  return <img src={src} alt={isDuplicate ? '' : logo.name} loading="lazy" decoding="async" />;
+};
+
+const AdoptersCarousel = () => {
+  const repeatedLogos = [...adopterLogos, ...adopterLogos];
+
+  return (
+    <section className={styles.banner} aria-label="OpenFGA adopters">
+      <p className={styles.title}>Adopted by teams at</p>
+      <div className={styles.carousel}>
+        <div className={styles.track}>
+          {repeatedLogos.map((logo, index) => {
+            const isDuplicate = index >= adopterLogos.length;
+
+            return (
+              <div className={styles.logo} key={`${logo.name}-${index}`} aria-hidden={isDuplicate}>
+                <AdopterImage logo={logo} isDuplicate={isDuplicate} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { AdoptersCarousel };

src/features/LandingPage/QuickStartSection/index.tsx

@@ -1,6 +1,7 @@
 import Link from '@docusaurus/Link';
 import * as React from 'react';
 import { Section } from '@components/Section';
+import { AdoptersCarousel } from '@components/AdoptersCarousel';
 
 import terminalMp4 from './terminal.mp4';
 import terminalWebm from './terminal.webm';
@@ -90,6 +91,7 @@ const QuickStartSection = () => {
           </video>
         </div>
       </div>
+      <AdoptersCarousel />
     </Section>
   );
 };