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
@@ -13,9 +13,9 @@ export function ExclusiveAccessSection() {
|
||||
padding: 'clamp(1.75rem, 4vw, 3rem)',
|
||||
overflow: 'hidden',
|
||||
background:
|
||||
'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(222,224,240,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(136,145,199,0.22), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.92), rgba(5,5,5,0.97))',
|
||||
border: '1px solid rgba(39,63,148,0.32)',
|
||||
boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(231, 231, 231, 0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(168, 168, 168, 0.22), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.92), rgba(5,5,5,0.97))',
|
||||
border: '1px solid rgba(94, 94, 94, 0.32)',
|
||||
boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -24,7 +24,7 @@ export function ExclusiveAccessSection() {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background:
|
||||
'linear-gradient(rgba(39,63,148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39,63,148,0.05) 1px, transparent 1px)',
|
||||
'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
|
||||
backgroundSize: '48px 48px',
|
||||
maskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
|
||||
WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
|
||||
@@ -46,16 +46,16 @@ export function ExclusiveAccessSection() {
|
||||
gap: '0.6rem',
|
||||
padding: '0.5rem 0.9rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(39,63,148,0.45)',
|
||||
background: 'rgba(39,63,148,0.10)',
|
||||
color: '#DEE0F0',
|
||||
border: '1px solid rgba(94, 94, 94, 0.45)',
|
||||
background: 'rgba(94, 94, 94, 0.10)',
|
||||
color: '#e7e7e7',
|
||||
fontSize: '0.7rem',
|
||||
letterSpacing: '0.24em',
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
<span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 10px rgba(222,224,240,0.8)' }} />
|
||||
<span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#e7e7e7', boxShadow: '0 0 10px rgba(231, 231, 231, 0.8)' }} />
|
||||
UAE Robotics Access
|
||||
</span>
|
||||
|
||||
@@ -65,7 +65,7 @@ export function ExclusiveAccessSection() {
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
|
||||
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
|
||||
Selected solutions delivered to UAE businesses, venues, and innovators from inquiry to live deployment, fully supported in Dubai.
|
||||
</p>
|
||||
|
||||
@@ -76,8 +76,8 @@ export function ExclusiveAccessSection() {
|
||||
'Humanoid, quadruped, service, delivery, cleaning robots.',
|
||||
'End-to-end procurement, training, and ongoing support.',
|
||||
].map((b) => (
|
||||
<li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.92rem', lineHeight: 1.5 }}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
|
||||
<li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#fcfcfc', fontSize: '0.92rem', lineHeight: 1.5 }}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e7e7e7" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
{b}
|
||||
@@ -104,7 +104,7 @@ export function ExclusiveAccessSection() {
|
||||
href="/brands/#unitree"
|
||||
brand="Unitree"
|
||||
tag="Quadruped · Humanoid"
|
||||
accent="#DEE0F0"
|
||||
accent="#e7e7e7"
|
||||
primary={{ src: '/images/robots/unitree-g1.webp', alt: 'Unitree G1 humanoid robot' }}
|
||||
secondary={{ src: '/images/robots/unitree-go2.webp', alt: 'Unitree Go2 quadruped robot' }}
|
||||
/>
|
||||
@@ -112,7 +112,7 @@ export function ExclusiveAccessSection() {
|
||||
href="/brands/#pudu"
|
||||
brand="Pudu Robotics"
|
||||
tag="Service · Delivery · Cleaning"
|
||||
accent="#8891C7"
|
||||
accent="#a8a8a8"
|
||||
primary={{ src: '/images/robots/pudu-bellabot.webp', alt: 'Pudu BellaBot multi-tray delivery robot' }}
|
||||
secondary={{ src: '/images/robots/pudu-kettybot.webp', alt: 'Pudu KettyBot Pro service robot with built-in advertising display' }}
|
||||
/>
|
||||
@@ -169,13 +169,13 @@ function BrandShowcaseTile({
|
||||
padding: '1rem',
|
||||
borderRadius: 18,
|
||||
background:
|
||||
`radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))`,
|
||||
`radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))`,
|
||||
border: `1px solid ${accent}44`,
|
||||
color: '#FBFBFD',
|
||||
color: '#fcfcfc',
|
||||
textDecoration: 'none',
|
||||
overflow: 'hidden',
|
||||
minHeight: 220,
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
|
||||
}}
|
||||
>
|
||||
{/* product visual area */}
|
||||
@@ -186,9 +186,9 @@ function BrandShowcaseTile({
|
||||
minHeight: 130,
|
||||
borderRadius: 12,
|
||||
background:
|
||||
`radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
|
||||
`radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(30, 30, 30, 0.7), rgba(11, 11, 11, 0.95))`,
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(222,224,240,0.08)',
|
||||
border: '1px solid rgba(231, 231, 231, 0.08)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -197,7 +197,7 @@ function BrandShowcaseTile({
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(199, 207, 230,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.06) 1px, transparent 1px)',
|
||||
'linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px)',
|
||||
backgroundSize: '24px 24px',
|
||||
maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
|
||||
WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
|
||||
@@ -214,7 +214,7 @@ function BrandShowcaseTile({
|
||||
width: '70%',
|
||||
height: '70%',
|
||||
background:
|
||||
'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(58,85,196,0.35) 0%, transparent 65%)',
|
||||
'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(127, 127, 127, 0.35) 0%, transparent 65%)',
|
||||
filter: 'blur(8px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
@@ -252,7 +252,7 @@ function BrandShowcaseTile({
|
||||
width: '62%',
|
||||
height: '90%',
|
||||
filter:
|
||||
'drop-shadow(0 16px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(58,85,196,0.4))',
|
||||
'drop-shadow(0 16px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(127, 127, 127, 0.4))',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
@@ -271,7 +271,7 @@ function BrandShowcaseTile({
|
||||
right: '0.5rem',
|
||||
padding: '0.25rem 0.55rem',
|
||||
borderRadius: 999,
|
||||
background: 'rgba(14,13,18,0.7)',
|
||||
background: 'rgba(16, 16, 16, 0.7)',
|
||||
border: `1px solid ${accent}55`,
|
||||
color: accent,
|
||||
fontSize: '0.55rem',
|
||||
@@ -286,7 +286,7 @@ function BrandShowcaseTile({
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '0.25rem 0.25rem 0' }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
|
||||
{tag}
|
||||
</span>
|
||||
<span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
|
||||
@@ -312,12 +312,12 @@ function TerritoryTile() {
|
||||
padding: '1rem',
|
||||
borderRadius: 18,
|
||||
background:
|
||||
'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(58,85,196,0.30), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
|
||||
border: '1px solid rgba(58,85,196,0.45)',
|
||||
color: '#FBFBFD',
|
||||
'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(127, 127, 127, 0.30), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))',
|
||||
border: '1px solid rgba(127, 127, 127, 0.45)',
|
||||
color: '#fcfcfc',
|
||||
overflow: 'hidden',
|
||||
minHeight: 170,
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
|
||||
}}
|
||||
>
|
||||
{/* abstract UAE "territory" graphic ring map style */}
|
||||
@@ -334,25 +334,25 @@ function TerritoryTile() {
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id="terr-glow" cx="50%" cy="50%" r="60%">
|
||||
<stop offset="0%" stopColor="#3a55c4" stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
|
||||
<stop offset="0%" stopColor="#7f7f7f" stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor="#7f7f7f" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle cx="155" cy="55" r="42" fill="url(#terr-glow)" />
|
||||
<circle cx="155" cy="55" r="32" fill="none" stroke="#DEE0F0" strokeOpacity="0.45" strokeDasharray="2 4" />
|
||||
<circle cx="155" cy="55" r="22" fill="none" stroke="#DEE0F0" strokeOpacity="0.65" />
|
||||
<circle cx="155" cy="55" r="3.5" fill="#DEE0F0" />
|
||||
<text x="160" y="44" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="3" fill="#D7DBEA" textAnchor="start">DXB</text>
|
||||
<circle cx="155" cy="55" r="32" fill="none" stroke="#e7e7e7" strokeOpacity="0.45" strokeDasharray="2 4" />
|
||||
<circle cx="155" cy="55" r="22" fill="none" stroke="#e7e7e7" strokeOpacity="0.65" />
|
||||
<circle cx="155" cy="55" r="3.5" fill="#e7e7e7" />
|
||||
<text x="160" y="44" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="3" fill="#e1e1e1" textAnchor="start">DXB</text>
|
||||
</svg>
|
||||
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
|
||||
Sales Territory
|
||||
</span>
|
||||
<span className="text-gradient-accent" style={{ fontSize: 'clamp(1.6rem, 2.8vw, 2rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
|
||||
UAE
|
||||
</span>
|
||||
</div>
|
||||
<span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
|
||||
<span style={{ position: 'relative', fontSize: '0.72rem', color: '#e7e7e7', lineHeight: 1.4, marginTop: 'auto' }}>
|
||||
UAE sales rights · Unitree & Pudu solutions.
|
||||
</span>
|
||||
</div>
|
||||
@@ -370,12 +370,12 @@ function ShowroomTile() {
|
||||
padding: '1rem',
|
||||
borderRadius: 18,
|
||||
background:
|
||||
'radial-gradient(ellipse 80% 80% at 0% 100%, rgba(222,224,240,0.18), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
|
||||
border: '1px solid rgba(222,224,240,0.22)',
|
||||
color: '#FBFBFD',
|
||||
'radial-gradient(ellipse 80% 80% at 0% 100%, rgba(231, 231, 231, 0.18), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))',
|
||||
border: '1px solid rgba(231, 231, 231, 0.22)',
|
||||
color: '#fcfcfc',
|
||||
overflow: 'hidden',
|
||||
minHeight: 170,
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
@@ -385,8 +385,8 @@ function ShowroomTile() {
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="show-floor" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stopColor="#3a55c4" stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
|
||||
<stop offset="0%" stopColor="#7f7f7f" stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor="#7f7f7f" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{/* perspective floor */}
|
||||
@@ -397,7 +397,7 @@ function ShowroomTile() {
|
||||
x2={200 + i * 5}
|
||||
y1={70 + i * 14}
|
||||
y2={70 + i * 14}
|
||||
stroke="#DEE0F0"
|
||||
stroke="#e7e7e7"
|
||||
strokeOpacity={0.35 - i * 0.06}
|
||||
/>
|
||||
))}
|
||||
@@ -408,23 +408,23 @@ function ShowroomTile() {
|
||||
y1={70}
|
||||
x2={30 + i * 36 - 30}
|
||||
y2={140}
|
||||
stroke="#DEE0F0"
|
||||
stroke="#e7e7e7"
|
||||
strokeOpacity={0.2}
|
||||
/>
|
||||
))}
|
||||
<rect x="60" y="40" width="100" height="55" fill="url(#show-floor)" />
|
||||
<rect x="60" y="40" width="100" height="55" fill="none" stroke="#DEE0F0" strokeOpacity="0.4" />
|
||||
<circle cx="110" cy="68" r="6" fill="#DEE0F0" />
|
||||
<rect x="60" y="40" width="100" height="55" fill="none" stroke="#e7e7e7" strokeOpacity="0.4" />
|
||||
<circle cx="110" cy="68" r="6" fill="#e7e7e7" />
|
||||
</svg>
|
||||
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
|
||||
<span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
|
||||
Showroom & Demo
|
||||
</span>
|
||||
<span className="text-gradient-accent" style={{ fontSize: 'clamp(1.4rem, 2.6vw, 1.85rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
|
||||
Dubai
|
||||
</span>
|
||||
</div>
|
||||
<span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
|
||||
<span style={{ position: 'relative', fontSize: '0.72rem', color: '#e7e7e7', lineHeight: 1.4, marginTop: 'auto' }}>
|
||||
Live demos · City Bay Business Center.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user