Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: increase image container heights and adjust focal points for better portrait photo alignment

Browse Source
This commit is contained in:
pradeepkumar
2026-05-08 18:40:41 +05:30
parent 026fbc348e
commit eb1755c22d
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/home/FeaturesSection.tsx
View File

@@ -24,13 +24,13 @@ function AgentCard({ agent, className = '' }: { agent: FeaturedAgentItem; classN
const cardInner = ( 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={`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 && ( {imgSrc && (
<img <img
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setImgLoaded(true); }} ref={(el) => { if (el?.complete && el.naturalWidth > 0) setImgLoaded(true); }}
src={imgSrc} src={imgSrc}
alt={agent.name} 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)} onLoad={() => setImgLoaded(true)}
onError={() => setImgLoaded(true)} onError={() => setImgLoaded(true)}
/> />

9
src/components/home/TopProfessionals.tsx
View File

@@ -76,8 +76,9 @@ function ProfessionalCard({
return ( return (
<div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col"> <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
{/* Image */} {/* Image — taller box + top-biased focal point so portrait photos
<div className="relative h-[226px] w-full overflow-hidden bg-gray-100"> 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 */} {/* Shimmer while loading, initials only on error */}
{imgError || isPlaceholder ? ( {imgError || isPlaceholder ? (
<div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center"> <div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center">
@@ -91,7 +92,7 @@ function ProfessionalCard({
src={imageUrl} src={imageUrl}
alt={name} alt={name}
fill 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)} onLoad={() => setImgLoaded(true)}
onError={() => setImgError(true)} onError={() => setImgError(true)}
/> />
@@ -345,7 +346,7 @@ export function TopProfessionals({ content }: { content?: TopProfessionalsConten
<> <>
{[1, 2, 3].map((i) => ( {[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 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="p-4 space-y-3">
<div className="h-4 bg-gray-200 rounded w-3/4" /> <div className="h-4 bg-gray-200 rounded w-3/4" />
<div className="h-3 bg-gray-200 rounded w-1/2" /> <div className="h-3 bg-gray-200 rounded w-1/2" />