hazem/yslootahrobotics
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: BentoGrid flagship tile mobile overlap
Some checks are pending
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source 
Robot image and text overlapped on mobile because image was
absolutely positioned over the full card while text was max-width 50%.
Refactored to stacked flex layout below 900px (copy on top, image
below in own region), original side-by-side layout preserved at
desktop via media query.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Najjar\NajjarV02 2026-05-21 17:41:06 +04:00
parent 5a40f6b733
commit 8d4fe60f28
2 changed files with 65 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/robotics/BentoGrid.tsx
View File

@ -22,26 +22,28 @@ export function BentoGrid() {
}}
>
<Tile col="span 7" row="span 2" accent="#DEE0F0">
<div style={{ position: 'absolute', inset: 0 }}>
<Image
src={FEATURED_ROBOTS[0].image}
alt="Premium robotics in Dubai"
fill
sizes="(max-width: 768px) 100vw, 60vw"
style={{ objectFit: 'contain', objectPosition: 'right center', padding: 'clamp(1.5rem, 4vw, 3rem)', opacity: 0.92 }}
/>
</div>
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: '50%' }}>
<span className="eyebrow">Flagship · Dubai</span>
<h3 style={{ margin: 0, fontSize: 'clamp(1.4rem, 2.6vw, 2rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
<span className="text-gradient">Unitree G1 humanoid live in our Dubai showroom.</span>
</h3>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.6 }}>
Configure persona, attire, and accessories. Then book a live demo.
</p>
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.5rem' }}>
<Link href="/robots/unitree-g1/" className="btn btn-primary" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>View G1</Link>
<Link href="/configure/" className="btn btn-ghost" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>Configure</Link>
<div className="bento-flagship">
<div className="bento-flagship-copy">
<span className="eyebrow">Flagship · Dubai</span>
<h3 style={{ margin: 0, fontSize: 'clamp(1.4rem, 2.6vw, 2rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
<span className="text-gradient">Unitree G1 humanoid live in our Dubai showroom.</span>
</h3>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.6 }}>
Configure persona, attire, and accessories. Then book a live demo.
</p>
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.4rem' }}>
<Link href="/robots/unitree-g1/" className="btn btn-primary" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>View G1</Link>
<Link href="/configure/" className="btn btn-ghost" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>Configure</Link>
</div>
</div>
<div className="bento-flagship-media">
<Image
src={FEATURED_ROBOTS[0].image}
alt="Premium robotics in Dubai"
fill
sizes="(max-width: 900px) 100vw, 60vw"
style={{ objectFit: 'contain', objectPosition: 'center center', padding: 'clamp(0.5rem, 2vw, 1.25rem)' }}
/>
</div>
</div>
</Tile>
@ -117,6 +119,40 @@ export function BentoGrid() {
@media (max-width: 540px) {
.bento-tile-4 { grid-column: span 12 !important; }
}
.bento-flagship {
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
height: 100%;
}
.bento-flagship-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.bento-flagship-media {
position: relative;
width: 100%;
min-height: 220px;
flex: 1;
}
@media (min-width: 900px) {
.bento-flagship { display: block; }
.bento-flagship-copy { max-width: 50%; }
.bento-flagship-media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
min-height: 0;
}
}
`}</style>
</div>
);

10
src/components/robotics/CompanyStory.tsx
View File

@ -193,10 +193,10 @@ export function CompanyStory() {
{/* Right capability modules */}
<div
className="cs-pillars"
style={{
position: 'relative',
display: 'grid',
gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
gap: '0.875rem',
minWidth: 0,
}}
@ -246,6 +246,14 @@ export function CompanyStory() {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
}
.cs-pillars {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
.cs-pillars {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
`}</style>
</div>
);