From a3b7e4c877c05c64fce490a0d90ecd682a457994 Mon Sep 17 00:00:00 2001
From: Krish Parekh <73629899+Krish-Parekh@users.noreply.github.com>
Date: Sat, 6 Dec 2025 01:59:29 +0530
Subject: [PATCH] refactor: replace Image component with Avatar for improved
 user display in TrustedBy section (#297)

---
 apps/marketing/src/app/page.tsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/marketing/src/app/page.tsx b/apps/marketing/src/app/page.tsx
index dd7103f..8d09cea 100644
--- a/apps/marketing/src/app/page.tsx
+++ b/apps/marketing/src/app/page.tsx
@@ -8,6 +8,7 @@ import { FeatureCard } from "~/components/FeatureCard";
 import { FeatureCardPlain } from "~/components/FeatureCardPlain";
 import { PricingCalculator } from "~/components/PricingCalculator";
 import CodeExample from "~/components/CodeExample";
+import { Avatar, AvatarFallback, AvatarImage } from "@usesend/ui/src/avatar";
 
 const REPO = "usesend/usesend";
 const REPO_URL = `https://github.com/${REPO}`;
@@ -185,13 +186,10 @@ function TrustedBy() {
                 {t.quote}
               </blockquote>
               <div className="mt-5 flex items-center gap-3">
-                <Image
-                  src={t.image}
-                  alt={`${t.author} avatar`}
-                  width={32}
-                  height={32}
-                  className=" rounded-md border-2 border-primary/50"
-                />
+                <Avatar className="rounded-lg border-2 border-primary/50 h-8 w-8">
+                  <AvatarImage src={t.image} alt={`${t.author} avatar`} />
+                  <AvatarFallback className="rounded-lg text-xs">{t.author.charAt(0).toUpperCase()}</AvatarFallback>
+                </Avatar> 
                 <figcaption className="text-sm">
                   <span className="font-medium">{t.author}</span>
                   <a
@@ -219,13 +217,10 @@ function TrustedBy() {
                 {t.quote}
               </blockquote>
               <div className="mt-5 flex items-center gap-3">
-                <Image
-                  src={t.image}
-                  alt={`${t.author} avatar`}
-                  width={32}
-                  height={32}
-                  className=" rounded-md border-2 border-primary/50"
-                />
+                <Avatar className="rounded-lg border-2 border-primary/50 h-8 w-8">
+                  <AvatarImage src={t.image} alt={`${t.author} avatar`} />
+                  <AvatarFallback className="rounded-lg text-xs">{t.author.charAt(0).toUpperCase()}</AvatarFallback>
+                </Avatar>
                 <figcaption className="text-sm">
                   <span className="font-medium">{t.author}</span>
                   <a