From 1f068923be8a043567d6d07ecb7cfd54ccfdec49 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sun, 19 Oct 2025 02:01:02 +0000
Subject: [PATCH] Add avatars to executive list using Unavatar with fallback

cgen-3e452331c813407e9e40f5e79d089616
---
 client/pages/Trust.tsx | 66 ++++++++++++++++++++----------------------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/client/pages/Trust.tsx b/client/pages/Trust.tsx
index b3117ca3..c0f1bf0b 100644
--- a/client/pages/Trust.tsx
+++ b/client/pages/Trust.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Link } from "react-router-dom";
 import {
   Shield,
@@ -121,41 +122,36 @@ export default function Trust() {
             </CardHeader>
             <CardContent className="grid sm:grid-cols-2 gap-4 text-sm text-muted-foreground">
               {[
-                {
-                  name: "Anderson Gladney",
-                  title: "Founder & CEO",
-                  href: "https://www.linkedin.com/in/andersongladney/",
-                },
-                {
-                  name: "Dylan Gladney",
-                  title: "Founder & COO",
-                  href: "https://www.linkedin.com/in/dylangladney/",
-                },
-                {
-                  name: "Trevor Davis",
-                  title: "Co-Founder & CFO",
-                  href: "https://www.linkedin.com/in/trevor-davis-892642324/",
-                },
-                {
-                  name: "Braden Eiser",
-                  title: "Co-Founder & CTO",
-                  href: "https://www.linkedin.com/in/bradeneiser/",
-                },
-              ].map((p) => (
-                <a
-                  key={p.name}
-                  href={p.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="rounded-lg border border-border/50 p-3 hover:border-aethex-400/50 transition"
-                >
-                  <div className="font-semibold text-foreground">{p.name}</div>
-                  <div className="text-xs">{p.title}</div>
-                  <div className="text-xs text-aethex-400 mt-1">
-                    LinkedIn ↗
-                  </div>
-                </a>
-              ))}
+                { name: "Anderson Gladney", title: "Founder & CEO", href: "https://www.linkedin.com/in/andersongladney/" },
+                { name: "Dylan Gladney", title: "Founder & COO", href: "https://www.linkedin.com/in/dylangladney/" },
+                { name: "Trevor Davis", title: "Co-Founder & CFO", href: "https://www.linkedin.com/in/trevor-davis-892642324/" },
+                { name: "Braden Eiser", title: "Co-Founder & CTO", href: "https://www.linkedin.com/in/bradeneiser/" },
+              ].map((p) => {
+                const unavatar = `https://unavatar.io/${encodeURIComponent(p.href)}`;
+                const fallback = `https://ui-avatars.com/api/?name=${encodeURIComponent(p.name)}&background=0D8ABC&color=fff&size=256`;
+                const initials = p.name.split(" ").map((n) => n[0]).join("").toUpperCase();
+                return (
+                  <a
+                    key={p.name}
+                    href={p.href}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="rounded-lg border border-border/50 p-3 hover:border-aethex-400/50 transition"
+                  >
+                    <div className="flex items-center gap-3">
+                      <Avatar className="h-10 w-10">
+                        <AvatarImage src={unavatar} alt={p.name} onError={(e) => { (e.currentTarget as HTMLImageElement).src = fallback; }} />
+                        <AvatarFallback>{initials}</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <div className="font-semibold text-foreground">{p.name}</div>
+                        <div className="text-xs">{p.title}</div>
+                        <div className="text-xs text-aethex-400 mt-1">LinkedIn ↗</div>
+                      </div>
+                    </div>
+                  </a>
+                );
+              })}
             </CardContent>
           </Card>