fix: use client avatar on home

Author: KodingDev

src/app/clients/page.tsx

@@ -21,15 +21,23 @@ export default function ClientsPage() {
       </p>
 
       <div className="mt-14 grid grid-cols-1 gap-5 md:grid-cols-2">
-        {allClients.map((client) => (
+        {allClients.map((client, idx) => (
           <Link
             key={client.slug}
             href={`/clients/${client.slug}`}
             className="group relative flex min-h-52 flex-col justify-end overflow-clip rounded-lg"
           >
             {client.banner ? (
               <>
-                <Image src={client.banner} alt="" fill className="object-cover" />
+                <Image
+                  src={client.banner}
+                  alt=""
+                  fill
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  className="object-cover"
+                  loading={idx < 2 ? "eager" : "lazy"}
+                  priority={idx < 2}
+                />
                 <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/30" />
               </>
             ) : client.brand ? (

src/app/page.tsx

@@ -11,6 +11,7 @@ import { allClients } from "@/lib/content";
 import { NAV_SOCIALS } from "@/lib/data/layout";
 import { PROJECTS } from "@/lib/data/projects";
 import { cn } from "@/lib/utils";
+import { ClientAvatar } from "@/components/client/client-avatar";
 
 export const metadata: Metadata = {
   description:
@@ -88,9 +89,7 @@ export default function HomePage() {
                     i < 3 && "border-b border-border/50"
                   )}
                 >
-                  {client.avatar && (
-                    <Image src={client.avatar} alt="" width={20} height={20} className="size-5 shrink-0 rounded" />
-                  )}
+                  <ClientAvatar client={client} alt="Client avatar" className="size-5 shrink-0 rounded" />
                   <span className="font-medium">{client.name}</span>
                   <span className="text-muted-foreground">{client.role}</span>
                   <MdArrowOutward className="ml-auto size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />

src/components/client/client-avatar.tsx

@@ -16,7 +16,7 @@ export const ClientAvatar: React.FC<ClientAvatarProps> = ({ client, className, .
         className={cn("flex items-center justify-center bg-(--client-background)", className)}
         style={{ "--client-background": client.brand.background } as React.CSSProperties}
       >
-        <Image src={client.avatar} className="p-2" {...props} />
+        <Image src={client.avatar} className="p-[20%]" {...props} />
       </div>
     );
   }