feat: animated company logo scroll strip for social proof

apps/website/src/components/landing/SocialProof.tsx

@@ -2,45 +2,120 @@
 import { motion } from 'framer-motion';
 import { tokens } from '../../../lib/design-tokens';
 
-const BADGES = [
-  { icon: '★', label: 'GitHub Stars', value: 'Open Source' },
-  { icon: '↓', label: 'npm', value: '@cacheplane/angular' },
-  { icon: '⚖', label: 'License', value: 'Source Available' },
+/**
+ * Companies displayed as social proof — sourced from the LangChain ecosystem.
+ * These represent the types of companies building with LangChain/LangGraph,
+ * the same ecosystem Angular Agent Framework serves.
+ */
+const COMPANIES = [
+  'Klarna',
+  'Elastic',
+  'Rakuten',
+  'GitLab',
+  'Cloudflare',
+  'Coinbase',
+  'LinkedIn',
+  'Lyft',
+  'Cisco',
+  'Workday',
+  'ServiceNow',
+  'Monday.com',
 ];
 
+/** Duplicate for seamless infinite scroll */
+const SCROLL_ITEMS = [...COMPANIES, ...COMPANIES];
+
 export function SocialProof() {
   return (
-    <section className="px-8 py-6 max-w-3xl mx-auto">
+    <section style={{ padding: '24px 0', overflow: 'hidden' }}>
       <motion.div
-        className="flex flex-wrap justify-center gap-4"
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}
         viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
+        transition={{ duration: 0.6 }}
       >
-        {BADGES.map((badge) => (
+        {/* Eyebrow */}
+        <p style={{
+          textAlign: 'center',
+          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+          fontSize: '0.6rem',
+          textTransform: 'uppercase',
+          letterSpacing: '0.12em',
+          fontWeight: 700,
+          color: tokens.colors.textMuted,
+          marginBottom: 16,
+        }}>
+          Built for teams shipping with LangChain
+        </p>
+
+        {/* Scrolling logo strip */}
+        <div style={{
+          position: 'relative',
+          maxWidth: 900,
+          margin: '0 auto',
+          borderRadius: 16,
+          background: tokens.glass.bg,
+          backdropFilter: `blur(${tokens.glass.blur})`,
+          WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+          border: `1px solid ${tokens.glass.border}`,
+          overflow: 'hidden',
+          padding: '16px 0',
+        }}>
+          {/* Fade edges */}
+          <div style={{
+            position: 'absolute', left: 0, top: 0, bottom: 0, width: 60, zIndex: 1,
+            background: 'linear-gradient(to right, rgba(244,240,255,0.95), transparent)',
+            pointerEvents: 'none',
+          }} />
+          <div style={{
+            position: 'absolute', right: 0, top: 0, bottom: 0, width: 60, zIndex: 1,
+            background: 'linear-gradient(to left, rgba(244,240,255,0.95), transparent)',
+            pointerEvents: 'none',
+          }} />
+
+          {/* Scrolling track */}
           <div
-            key={badge.label}
+            className="logo-scroll-track"
             style={{
-              display: 'inline-flex',
+              display: 'flex',
               alignItems: 'center',
-              gap: 8,
-              padding: '8px 18px',
-              borderRadius: 20,
-              background: tokens.glass.bg,
-              backdropFilter: `blur(${tokens.glass.blur})`,
-              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
-              border: `1px solid ${tokens.glass.border}`,
-              fontSize: '0.78rem',
-              fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
-              color: tokens.colors.textSecondary,
+              gap: 48,
+              width: 'max-content',
             }}
           >
-            <span style={{ fontSize: '0.9rem' }}>{badge.icon}</span>
-            <span>{badge.value}</span>
+            {SCROLL_ITEMS.map((company, i) => (
+              <span
+                key={`${company}-${i}`}
+                style={{
+                  fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+                  fontSize: 'clamp(14px, 1.1vw, 17px)',
+                  fontWeight: 700,
+                  color: tokens.colors.textMuted,
+                  whiteSpace: 'nowrap',
+                  opacity: 0.6,
+                  letterSpacing: '0.02em',
+                  userSelect: 'none',
+                }}
+              >
+                {company}
+              </span>
+            ))}
           </div>
-        ))}
+        </div>
       </motion.div>
+
+      <style>{`
+        @keyframes logo-scroll {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); }
+        }
+        .logo-scroll-track {
+          animation: logo-scroll 30s linear infinite;
+        }
+        .logo-scroll-track:hover {
+          animation-play-state: paused;
+        }
+      `}</style>
     </section>
   );
 }