From eb1755c22d201742a0adb71147ad45f37effbc10 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 8 May 2026 18:40:41 +0530
Subject: [PATCH] style: increase image container heights and adjust focal
 points for better portrait photo alignment

---
 src/components/home/FeaturesSection.tsx  | 4 ++--
 src/components/home/TopProfessionals.tsx | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index a789c16..e783955 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -24,13 +24,13 @@ function AgentCard({ agent, className = '' }: { agent: FeaturedAgentItem; classN
 
   const cardInner = (
     <div className={`bg-white border border-[#00293d]/10 rounded-[15px] w-[254px] overflow-hidden ${agent.id ? 'hover:shadow-xl transition-shadow cursor-pointer' : ''} ${className}`}>
-      <div className="h-[161px] w-full overflow-hidden rounded-t-[15px] bg-gray-100 relative">
+      <div className="h-[220px] w-full overflow-hidden rounded-t-[15px] bg-gray-100 relative">
         {imgSrc && (
           <img
             ref={(el) => { if (el?.complete && el.naturalWidth > 0) setImgLoaded(true); }}
             src={imgSrc}
             alt={agent.name}
-            className={`w-full h-full object-cover transition-opacity duration-300 ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
+            className={`w-full h-full object-cover object-[center_30%] transition-opacity duration-300 ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
             onLoad={() => setImgLoaded(true)}
             onError={() => setImgLoaded(true)}
           />
diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx
index 5c3f713..36078c7 100644
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -76,8 +76,9 @@ function ProfessionalCard({
 
   return (
       <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
-        {/* Image */}
-        <div className="relative h-[226px] w-full overflow-hidden bg-gray-100">
+        {/* Image — taller box + top-biased focal point so portrait photos
+            don't crop faces off the top. */}
+        <div className="relative h-[300px] w-full overflow-hidden bg-gray-100">
           {/* Shimmer while loading, initials only on error */}
           {imgError || isPlaceholder ? (
             <div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center">
@@ -91,7 +92,7 @@ function ProfessionalCard({
               src={imageUrl}
               alt={name}
               fill
-              className={`object-cover transition-opacity duration-300 ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
+              className={`object-cover object-[center_30%] transition-opacity duration-300 ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
               onLoad={() => setImgLoaded(true)}
               onError={() => setImgError(true)}
             />
@@ -345,7 +346,7 @@ export function TopProfessionals({ content }: { content?: TopProfessionalsConten
             <>
               {[1, 2, 3].map((i) => (
                 <div key={i} className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] animate-pulse">
-                  <div className="h-[226px] bg-gray-200" />
+                  <div className="h-[300px] bg-gray-200" />
                   <div className="p-4 space-y-3">
                     <div className="h-4 bg-gray-200 rounded w-3/4" />
                     <div className="h-3 bg-gray-200 rounded w-1/2" />