Add trusted-by logo bar with verified RORP clients (#98)

Adds a "Trusted in production by" section to the homepage, displaying 19 verified
React on Rails Pro client logos sourced from the licensing repo's investigation
docs. Uses per-logo theming flags (invertDark, darkenLight) for single-color
assets and ThemedImage for multi-color logos (User Interviews, The Information)
where a CSS filter would corrupt brand colors.

Author: ihabadham

prototypes/docusaurus/src/pages/index.module.css

@@ -4,6 +4,62 @@
   background: var(--site-soft-surface);
 }
 
+.trustedBy {
+  padding: 3rem 0;
+  border-bottom: 1px solid var(--site-border);
+  text-align: center;
+}
+
+.trustedByLabel {
+  margin: 0 0 2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--ifm-color-content-secondary);
+}
+
+.logoBar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem 2.5rem;
+}
+
+.logoItem {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 8rem;
+  height: 2.4rem;
+}
+
+.logoItem img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  transition: transform 0.2s;
+}
+
+.logoItem:hover img {
+  transform: scale(1.05);
+}
+
+[data-theme='dark'] .invertDark img {
+  filter: invert(1);
+}
+
+.darkenLight img {
+  filter: brightness(0.4) contrast(1.3) saturate(1.3);
+}
+
+[data-theme='dark'] .darkenLight img {
+  filter: none;
+}
+
 .heroLayout {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) minmax(22rem, 1fr);

prototypes/docusaurus/src/pages/index.tsx

@@ -1,8 +1,9 @@
 import {useEffect, useRef, useState, type KeyboardEvent, type ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import Layout from '@theme/Layout';
+import ThemedImage from '@theme/ThemedImage';
 
 import {docsRoutes} from '../constants/docsRoutes';
 import styles from './index.module.css';
@@ -152,6 +153,70 @@ function ReactIcon({className}: {className?: string}) {
   );
 }
 
+const trustedByCompanies = [
+  {name: 'Academia.edu', logo: '/img/logos/academia_logo.svg', href: 'https://www.academia.edu', invertDark: true},
+  {name: 'ACTIVE Network', logo: '/img/logos/active_network_logo.png', href: 'https://www.activenetwork.com'},
+  {name: 'AirRobe', logo: '/img/logos/airrobe_logo.svg', href: 'https://www.airrobe.com', invertDark: true},
+  {name: 'Airtasker', logo: '/img/logos/airtasker_logo.svg', href: 'https://www.airtasker.com'},
+  {name: 'Attuned Education Partners', logo: '/img/logos/attuned_logo.png', href: 'https://attunedpartners.com', invertDark: true},
+  {name: 'City Falcon', logo: '/img/logos/city_falcon_logo.svg', href: 'https://www.cityfalcon.com', invertDark: true},
+  {name: 'ClientCircle', logo: '/img/logos/clientcircle_logo.svg', href: 'https://clientcircle.com'},
+  {name: 'Curbside Provisions', logo: '/img/logos/curbside_logo.png', href: 'https://curbsideprovisions.com'},
+  {name: 'Direct Dental', logo: '/img/logos/direct_dental_logo.png', href: 'https://directdental.com'},
+  {name: 'Ejbla', logo: '/img/logos/ejbla_logo.png', href: 'https://ejbla.com', invertDark: true},
+  {name: 'Estately', logo: '/img/logos/estately_logo.png', href: 'https://www.estately.com', invertDark: true},
+  {name: 'Heal.me', logo: '/img/logos/healme_logo.png', href: 'https://heal.me'},
+  {name: 'Jewlr', logo: '/img/logos/jewlr_logo.svg', href: 'https://www.jewlr.com', invertDark: true},
+  {name: 'Popmenu', logo: '/img/logos/popmenu_logo.png', href: 'https://popmenu.com'},
+  {name: 'Printivity', logo: '/img/logos/printivity_logo.png', href: 'https://www.printivity.com'},
+  {name: 'Sample Focus', logo: '/img/logos/sample_focus_logo.png', href: 'https://samplefocus.com', darkenLight: true},
+  {name: 'Simply Business', logo: '/img/logos/simply_business_logo.svg', href: 'https://www.simplybusiness.co.uk', invertDark: true},
+  {name: 'The Information', logo: '/img/logos/the_information_logo.svg', darkLogo: '/img/logos/the_information_logo_dark.svg', href: 'https://www.theinformation.com'},
+  {name: 'User Interviews', logo: '/img/logos/user_interviews_logo.svg', darkLogo: '/img/logos/user_interviews_logo_dark.svg', href: 'https://www.userinterviews.com'},
+];
+
+function TrustedBySection() {
+  const {withBaseUrl} = useBaseUrlUtils();
+  return (
+    <section className={styles.trustedBy}>
+      <div className="container">
+        <p className={styles.trustedByLabel}>Trusted in production by</p>
+        <div className={styles.logoBar}>
+          {trustedByCompanies.map((company) => (
+            <a
+              key={company.name}
+              href={company.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={clsx(
+                styles.logoItem,
+                company.invertDark && styles.invertDark,
+                company.darkenLight && styles.darkenLight,
+              )}
+              title={company.name}>
+              {company.darkLogo ? (
+                <ThemedImage
+                  sources={{
+                    light: withBaseUrl(company.logo),
+                    dark: withBaseUrl(company.darkLogo),
+                  }}
+                  alt={company.name}
+                />
+              ) : (
+                <img
+                  src={withBaseUrl(company.logo)}
+                  alt={company.name}
+                  loading="lazy"
+                />
+              )}
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function HeroSection() {
   const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
   const [lang, setLang] = useState<Language>('ts');
@@ -504,6 +569,7 @@ export default function Home(): ReactNode {
     <Layout description="Official React on Rails documentation, examples, and React on Rails Pro details.">
       <HeroSection />
       <main>
+        <TrustedBySection />
         <PersonaSection />
         <FlowSection />
         <UpgradeSection />