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

refactor: update Hero3DRobotics and RoboticsSplineShowcase components for improved styling and layout
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source 
- Adjusted padding, opacity, and transform properties for robot images in Hero3DRobotics.
- Updated sizes for images to enhance responsiveness.
- Modified floor reflection styles for better visual consistency.
- Refactored RoboticsSplineShowcase to use inline styles for layout and design consistency.
- Enhanced text styles and button designs for better user experience.
- Improved grid layout for better responsiveness across different screen sizes.
This commit is contained in:
Najjar\NajjarV02
2026-05-20 17:56:07 +04:00
parent 461a00384c
commit d7c343ac7d
5 changed files with 1012 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/robotics/Hero3DRobotics.tsx
+18 -18
View File
@@ -309,7 +309,7 @@ export function Hero3DRobotics() {
}}
/>
{/* Robot image — main (enlarged ~12%) */}
{/* Robot image — main */}
{FEATURED_ROBOTS.map((r, idx) => (
<div
key={r.id}
@@ -319,20 +319,20 @@ export function Hero3DRobotics() {
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center',
paddingTop: 'clamp(0.75rem, 2.5vw, 1.5rem)',
paddingBottom: '30%',
paddingLeft: 'clamp(0.5rem, 2vw, 1rem)',
paddingRight: 'clamp(0.5rem, 2vw, 1rem)',
paddingTop: 'clamp(2rem, 5vw, 3rem)',
paddingBottom: '36%',
paddingLeft: 'clamp(1rem, 4vw, 2rem)',
paddingRight: 'clamp(1rem, 4vw, 2rem)',
opacity: idx === activeIdx ? 1 : 0,
transform:
idx === activeIdx
? `translateY(0) translateX(${tilt.ry * 0.45}px) scale(1.12)`
: 'translateY(22px) scale(0.97)',
? `translateY(0) translateX(${tilt.ry * 0.4}px) scale(1)`
: 'translateY(18px) scale(0.96)',
transformOrigin: 'center bottom',
transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
filter:
idx === activeIdx
? 'drop-shadow(0 32px 50px rgba(0,0,0,0.85)) drop-shadow(0 18px 28px rgba(0,0,0,0.6)) drop-shadow(0 0 36px rgba(58,85,196,0.55))'
? 'drop-shadow(0 26px 42px rgba(0,0,0,0.78)) drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(58,85,196,0.45))'
: 'none',
willChange: 'transform',
}}
@@ -343,7 +343,7 @@ export function Hero3DRobotics() {
src={r.image}
alt={`${r.brandLabel} ${r.name}`}
fill
sizes="(max-width: 768px) 90vw, 720px"
sizes="(max-width: 768px) 90vw, 620px"
style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
priority={idx === 0}
/>
@@ -367,19 +367,19 @@ export function Hero3DRobotics() {
}}
/>
{/* Floor reflection (mirror image, faded, blue-tinted) */}
{/* Floor reflection (mirror image, faded) */}
{FEATURED_ROBOTS.map((r, idx) => (
<div
key={`reflect-${r.id}`}
aria-hidden
style={{
position: 'absolute',
left: 'clamp(0.5rem, 2vw, 1rem)',
right: 'clamp(0.5rem, 2vw, 1rem)',
bottom: '4%',
height: '24%',
opacity: idx === activeIdx ? 0.32 : 0,
transform: `scaleY(-1) translateX(${tilt.ry * 0.45}px) scale(1.12)`,
left: 'clamp(1rem, 4vw, 2rem)',
right: 'clamp(1rem, 4vw, 2rem)',
bottom: '6%',
height: '22%',
opacity: idx === activeIdx ? 0.28 : 0,
transform: `scaleY(-1) translateX(${tilt.ry * 0.4}px)`,
transformOrigin: 'center top',
maskImage:
'linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%)',
@@ -387,14 +387,14 @@ export function Hero3DRobotics() {
'linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%)',
transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
pointerEvents: 'none',
filter: 'blur(1.4px) hue-rotate(220deg)',
filter: 'blur(1.2px)',
}}
>
<Image
src={r.image}
alt=""
fill
sizes="(max-width: 768px) 90vw, 720px"
sizes="(max-width: 768px) 90vw, 620px"
style={{ objectFit: 'contain', objectPosition: 'center top' }}
/>
</div>