update for final push

update for final push

src/components/Brand.js

@@ -1,19 +1,22 @@
-// Brand mark — mono wordmark + dark rounded "AI" square (DESIGN.md §Brand).
+// Brand mark — the AI-Solutions logo lockup (public/logo-lockup.png).
+// On dark surfaces it sits on a light rounded plate so it stays legible.
 import { Link } from 'react-router-dom';
 
 function Brand({ to = '/', onDark = false }) {
-  const inner = (
-    <span className="brand">
-      <span className="brand__mark">AI</span>
-      <span className="brand__word" style={onDark ? { color: 'var(--dark-fg)' } : undefined}>
-        ai-<b>solutions</b>
-      </span>
-    </span>
+  const img = (
+    <img
+      src={`${process.env.PUBLIC_URL}/logo-lockup.png`}
+      alt="AI-Solutions"
+      className={`brand__logo${onDark ? ' brand__logo--plate' : ''}`}
+      width="128"
+      height="45"
+    />
   );
-  if (!to) return inner;
+
+  if (!to) return img;
   return (
-    <Link to={to} aria-label="AI-Solutions home" style={{ textDecoration: 'none' }}>
-      {inner}
+    <Link to={to} className="brand" aria-label="AI-Solutions home">
+      {img}
     </Link>
   );
 }

src/index.css

@@ -119,7 +119,10 @@ button { font-family: inherit; }
 .grid--4 { grid-template-columns: repeat(4, 1fr); }
 
 /* ---- Brand ---- */
-.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
+.brand { display: inline-flex; align-items: center; flex: none; }
+.brand__logo { height: 44px; width: auto; display: block; }
+/* On dark surfaces (footer/admin) sit the logo on a cream rounded plate */
+.brand__logo--plate { height: 38px; background: #f6f1e6; padding: 8px 14px; border-radius: 12px; box-sizing: content-box; }
 .brand__mark {
   width: 34px; height: 34px; border-radius: 11px; background: var(--grad-accent);
   color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px;
@@ -188,8 +191,10 @@ button { font-family: inherit; }
 .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
 .hero__proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--ink-dim); font-size: 14px; }
 .hero__avatars { display: flex; }
-.hero__avatars span { width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--bg); background: var(--grad-accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-left: -10px; }
-.hero__avatars span:first-child { margin-left: 0; }
+.hero__avatars span, .hero__avatars img { width: 36px; height: 36px; border-radius: 999px; border: 2px solid var(--bg); margin-left: -10px; }
+.hero__avatars span { background: var(--grad-accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
+.hero__avatars img { object-fit: cover; background: var(--bg-soft); box-shadow: var(--shadow-xs); }
+.hero__avatars span:first-child, .hero__avatars img:first-child { margin-left: 0; }
 
 .hero__media { position: relative; }
 .hero__media img { width: 100%; border-radius: var(--r-panel); box-shadow: var(--shadow-lg); aspect-ratio: 5/5.4; object-fit: cover; }

src/pages/Home.js

@@ -53,7 +53,10 @@ function Home() {
             </div>
             <div className="hero__proof">
               <div className="hero__avatars" aria-hidden="true">
-                <span>NL</span><span>TM</span><span>WC</span><span>BR</span>
+                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="" loading="lazy" />
+                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="" loading="lazy" />
+                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="" loading="lazy" />
+                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="" loading="lazy" />
               </div>
               <span>Trusted by teams in logistics, manufacturing, healthcare &amp; more</span>
             </div>