feat: monochrome black & white rebrand + new Pudu robots
- Convert site from royal-blue theme to black/white monochrome (desaturate all blue-hued colors; keep WhatsApp green and error red) - Swap blue circular brand logo for mono YS mark; regenerate favicon/PWA icons - Add 6 Pudu robots (CC1 Pro, MT1 Max, MT1 Vac, T600, T600 Underride, BG1 Pro) - Fix favicon.ico to RGBA (Next 16 Turbopack decode) and Stripe apiVersion type Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Najjar
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
c2490947d2
commit
873026a4a9
@@ -92,7 +92,7 @@ export function Hero3DRobotics() {
|
||||
<div className="hero-gradient" />
|
||||
<div className="grid-overlay" />
|
||||
<div className="light-sweep" />
|
||||
<CursorSpotlight color="rgba(58, 85, 196, 0.28)" size={640} />
|
||||
<CursorSpotlight color="rgba(127, 127, 127, 0.28)" size={640} />
|
||||
|
||||
{/* Royal-blue beams */}
|
||||
<div
|
||||
@@ -101,7 +101,7 @@ export function Hero3DRobotics() {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background:
|
||||
'conic-gradient(from 220deg at 60% 50%, transparent 0deg, rgba(39,63,148,0.10) 25deg, transparent 50deg, rgba(222,224,240,0.06) 180deg, transparent 220deg, rgba(58,85,196,0.10) 320deg, transparent 360deg)',
|
||||
'conic-gradient(from 220deg at 60% 50%, transparent 0deg, rgba(94, 94, 94, 0.10) 25deg, transparent 50deg, rgba(231, 231, 231, 0.06) 180deg, transparent 220deg, rgba(127, 127, 127, 0.10) 320deg, transparent 360deg)',
|
||||
mixBlendMode: 'screen',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
@@ -113,16 +113,16 @@ export function Hero3DRobotics() {
|
||||
<span
|
||||
className="eyebrow"
|
||||
style={{
|
||||
color: '#DEE0F0',
|
||||
border: '1px solid rgba(136,145,199,0.45)',
|
||||
background: 'rgba(39,63,148,0.10)',
|
||||
color: '#e7e7e7',
|
||||
border: '1px solid rgba(168, 168, 168, 0.45)',
|
||||
background: 'rgba(94, 94, 94, 0.10)',
|
||||
padding: '0.5rem 0.9rem',
|
||||
borderRadius: 999,
|
||||
alignSelf: 'flex-start',
|
||||
gap: '0.625rem',
|
||||
}}
|
||||
>
|
||||
<span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 12px rgba(222,224,240,0.9)' }} />
|
||||
<span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#e7e7e7', boxShadow: '0 0 12px rgba(231, 231, 231, 0.9)' }} />
|
||||
UAE Access · Dubai
|
||||
</span>
|
||||
|
||||
@@ -135,29 +135,29 @@ export function Hero3DRobotics() {
|
||||
fontWeight: 300,
|
||||
}}
|
||||
>
|
||||
<span style={{ display: 'block', color: '#FBFBFD', fontWeight: 200 }}>Advanced robotics.</span>
|
||||
<span style={{ display: 'block', color: '#fcfcfc', fontWeight: 200 }}>Advanced robotics.</span>
|
||||
<span
|
||||
style={{
|
||||
display: 'block',
|
||||
fontWeight: 600,
|
||||
background:
|
||||
'linear-gradient(110deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%)',
|
||||
'linear-gradient(110deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
backgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
color: 'transparent',
|
||||
filter:
|
||||
'drop-shadow(0 2px 12px rgba(222,224,240,0.18)) drop-shadow(0 6px 28px rgba(58,85,196,0.32))',
|
||||
'drop-shadow(0 2px 12px rgba(231, 231, 231, 0.18)) drop-shadow(0 6px 28px rgba(127, 127, 127, 0.32))',
|
||||
}}
|
||||
>
|
||||
UAE access.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(1rem, 2vw, 1.18rem)', lineHeight: 1.7, maxWidth: 600, fontWeight: 300 }}>
|
||||
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(1rem, 2vw, 1.18rem)', lineHeight: 1.7, maxWidth: 600, fontWeight: 300 }}>
|
||||
YS Lootah Robotics is the UAE sales destination for selected Unitree and Pudu Robotics solutions helping businesses explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.
|
||||
</p>
|
||||
<p style={{ margin: 0, color: '#D7DBEA', fontSize: '0.78rem', letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 600 }}>
|
||||
<p style={{ margin: 0, color: '#e1e1e1', fontSize: '0.78rem', letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 600 }}>
|
||||
In Tech We Innovate · In Trust We Lead
|
||||
</p>
|
||||
|
||||
@@ -176,7 +176,7 @@ export function Hero3DRobotics() {
|
||||
paddingBottom: '0.5rem',
|
||||
marginTop: '0.75rem',
|
||||
marginBottom: 'clamp(0.5rem, 2vw, 1.5rem)',
|
||||
borderTop: '1px solid rgba(136,145,199,0.22)',
|
||||
borderTop: '1px solid rgba(168, 168, 168, 0.22)',
|
||||
}}
|
||||
>
|
||||
{HERO_STATS.map((s) => (
|
||||
@@ -192,7 +192,7 @@ export function Hero3DRobotics() {
|
||||
>
|
||||
{s.value}
|
||||
</span>
|
||||
<span style={{ fontSize: '0.66rem', color: '#8891C7', letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600 }}>
|
||||
<span style={{ fontSize: '0.66rem', color: '#a8a8a8', letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600 }}>
|
||||
{s.label}
|
||||
</span>
|
||||
</div>
|
||||
@@ -232,7 +232,7 @@ export function Hero3DRobotics() {
|
||||
right: '8%',
|
||||
height: '8%',
|
||||
background:
|
||||
'radial-gradient(ellipse 50% 100% at 50% 100%, rgba(58,85,196,0.5), transparent 75%)',
|
||||
'radial-gradient(ellipse 50% 100% at 50% 100%, rgba(127, 127, 127, 0.5), transparent 75%)',
|
||||
filter: 'blur(18px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
@@ -247,11 +247,11 @@ export function Hero3DRobotics() {
|
||||
minHeight: 'clamp(440px, 58vw, 660px)',
|
||||
borderRadius: '1.75rem',
|
||||
background:
|
||||
'linear-gradient(180deg, rgba(28,27,33,0.78) 0%, rgba(10,10,12,0.95) 100%)',
|
||||
border: '1px solid rgba(136,145,199,0.32)',
|
||||
'linear-gradient(180deg, rgba(30, 30, 30, 0.78) 0%, rgba(11, 11, 11, 0.95) 100%)',
|
||||
border: '1px solid rgba(168, 168, 168, 0.32)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
boxShadow:
|
||||
'0 30px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(222,224,240,0.1), 0 0 70px rgba(39,63,148,0.22)',
|
||||
'0 30px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(231, 231, 231, 0.1), 0 0 70px rgba(94, 94, 94, 0.22)',
|
||||
transform: `rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
|
||||
transition: 'transform 0.3s cubic-bezier(0.16,1,0.3,1)',
|
||||
overflow: 'hidden',
|
||||
@@ -265,7 +265,7 @@ export function Hero3DRobotics() {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background:
|
||||
'linear-gradient(rgba(136,145,199,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(136,145,199,0.07) 1px, transparent 1px)',
|
||||
'linear-gradient(rgba(168, 168, 168, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 168, 168, 0.07) 1px, transparent 1px)',
|
||||
backgroundSize: '40px 40px',
|
||||
maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
|
||||
WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
|
||||
@@ -284,7 +284,7 @@ export function Hero3DRobotics() {
|
||||
width: '70%',
|
||||
height: '70%',
|
||||
background:
|
||||
'radial-gradient(ellipse 60% 70% at 50% 35%, rgba(58,85,196,0.45) 0%, rgba(39,63,148,0.25) 35%, transparent 70%)',
|
||||
'radial-gradient(ellipse 60% 70% at 50% 35%, rgba(127, 127, 127, 0.45) 0%, rgba(94, 94, 94, 0.25) 35%, transparent 70%)',
|
||||
filter: 'blur(14px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
@@ -301,7 +301,7 @@ export function Hero3DRobotics() {
|
||||
width: '60%',
|
||||
height: '60%',
|
||||
background:
|
||||
'linear-gradient(180deg, rgba(222,224,240,0.18) 0%, rgba(58,85,196,0.12) 35%, transparent 75%)',
|
||||
'linear-gradient(180deg, rgba(231, 231, 231, 0.18) 0%, rgba(127, 127, 127, 0.12) 35%, transparent 75%)',
|
||||
clipPath: 'polygon(35% 0, 65% 0, 90% 100%, 10% 100%)',
|
||||
filter: 'blur(8px)',
|
||||
mixBlendMode: 'screen',
|
||||
@@ -332,7 +332,7 @@ export function Hero3DRobotics() {
|
||||
transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
|
||||
filter:
|
||||
idx === activeIdx
|
||||
? '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))'
|
||||
? '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(127, 127, 127, 0.45))'
|
||||
: 'none',
|
||||
willChange: 'transform',
|
||||
}}
|
||||
@@ -410,7 +410,7 @@ export function Hero3DRobotics() {
|
||||
bottom: '28%',
|
||||
height: 1,
|
||||
background:
|
||||
'linear-gradient(90deg, transparent, rgba(222,224,240,0.6), transparent)',
|
||||
'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.6), transparent)',
|
||||
pointerEvents: 'none',
|
||||
filter: 'blur(0.3px)',
|
||||
}}
|
||||
@@ -424,7 +424,7 @@ export function Hero3DRobotics() {
|
||||
inset: 0,
|
||||
borderRadius: '1.75rem',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(222,224,240,0.18) 0%, transparent 18%, transparent 80%, rgba(58,85,196,0.22) 100%)',
|
||||
'linear-gradient(135deg, rgba(231, 231, 231, 0.18) 0%, transparent 18%, transparent 80%, rgba(127, 127, 127, 0.22) 100%)',
|
||||
mixBlendMode: 'screen',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
@@ -438,7 +438,7 @@ export function Hero3DRobotics() {
|
||||
right: '10%',
|
||||
height: '2px',
|
||||
background:
|
||||
'linear-gradient(90deg, transparent, rgba(222,224,240,0.5), transparent)',
|
||||
'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.5), transparent)',
|
||||
pointerEvents: 'none',
|
||||
filter: 'blur(0.4px)',
|
||||
}}
|
||||
@@ -462,9 +462,9 @@ export function Hero3DRobotics() {
|
||||
right: l.right,
|
||||
padding: '0.45rem 0.8rem',
|
||||
borderRadius: 999,
|
||||
background: 'rgba(14,13,18,0.78)',
|
||||
border: '1px solid rgba(136,145,199,0.45)',
|
||||
color: '#DEE0F0',
|
||||
background: 'rgba(16, 16, 16, 0.78)',
|
||||
border: '1px solid rgba(168, 168, 168, 0.45)',
|
||||
color: '#e7e7e7',
|
||||
fontSize: '0.66rem',
|
||||
letterSpacing: '0.22em',
|
||||
textTransform: 'uppercase',
|
||||
@@ -473,7 +473,7 @@ export function Hero3DRobotics() {
|
||||
animation: `floatY 6s ease-in-out ${l.delay}s infinite, fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) ${l.delay}s both`,
|
||||
whiteSpace: 'nowrap',
|
||||
boxShadow:
|
||||
'0 10px 28px rgba(0,0,0,0.55), 0 0 18px rgba(58,85,196,0.18), inset 0 1px 0 rgba(222,224,240,0.08)',
|
||||
'0 10px 28px rgba(0,0,0,0.55), 0 0 18px rgba(127, 127, 127, 0.18), inset 0 1px 0 rgba(231, 231, 231, 0.08)',
|
||||
transform: `translate3d(${dx}px, ${dy}px, 0)`,
|
||||
transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1)',
|
||||
willChange: 'transform',
|
||||
@@ -508,21 +508,21 @@ export function Hero3DRobotics() {
|
||||
gap: '0.75rem',
|
||||
padding: '0.7rem 1.1rem',
|
||||
borderRadius: 14,
|
||||
background: 'rgba(14,13,18,0.72)',
|
||||
border: '1px solid rgba(136,145,199,0.45)',
|
||||
background: 'rgba(16, 16, 16, 0.72)',
|
||||
border: '1px solid rgba(168, 168, 168, 0.45)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
color: '#FBFBFD',
|
||||
color: '#fcfcfc',
|
||||
textDecoration: 'none',
|
||||
boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
|
||||
}}
|
||||
>
|
||||
<span style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.24em', textTransform: 'uppercase' }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.24em', textTransform: 'uppercase' }}>
|
||||
Featured · {robot.brandLabel}
|
||||
</span>
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: 600 }}>{robot.name}</span>
|
||||
</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e7e7e7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
@@ -540,8 +540,8 @@ export function Hero3DRobotics() {
|
||||
borderRadius: 999,
|
||||
border: 'none',
|
||||
background: idx === activeIdx
|
||||
? 'linear-gradient(90deg, #DEE0F0, #3a55c4)'
|
||||
: 'rgba(136,145,199,0.4)',
|
||||
? 'linear-gradient(90deg, #e7e7e7, #7f7f7f)'
|
||||
: 'rgba(168, 168, 168, 0.4)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.4s ease',
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user