From 3d5c8a7a9723579fa74fbabf0faaf87a314d2c75 Mon Sep 17 00:00:00 2001
From: Zeeshan Adil <zeeabutt@outlook.com>
Date: Wed, 28 Oct 2026 15:07:19 +0500
Subject: [PATCH] fix(home): stop hero avatars overlapping the text on phones

The avatar row could shrink on narrow screens, so the photos spilled over "30,000+ people. One shared purpose." It now keeps its width and the text wraps beside it.
---
 components/home/sections-top.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/home/sections-top.tsx b/components/home/sections-top.tsx
index 6d9e600..41cbcbb 100644
--- a/components/home/sections-top.tsx
+++ b/components/home/sections-top.tsx
@@ -64,7 +64,7 @@ export function Hero() {
               </a>
             </p>
             <div className="mt-11 flex items-center gap-4 border-t border-[#262626] pt-7">
-              <div className="flex" aria-hidden="true">
+              <div className="flex shrink-0" aria-hidden="true">
                 {faces.map((face, index) => (
                   <Image
                     key={face.src}
@@ -76,7 +76,7 @@ export function Hero() {
                   />
                 ))}
               </div>
-              <div>
+              <div className="min-w-0">
                 <p className="text-[15px] font-semibold">30,000+ people. One shared purpose.</p>
                 <p className="mt-0.5 text-sm text-[#A3A3A3]">From your first line of code to your next big leap.</p>
               </div>