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
@@ -22,28 +22,28 @@ const PILLARS: Pillar[] = [
|
||||
title: 'Artificial Intelligence',
|
||||
body: 'AI applications tailored for UAE government and private sector.',
|
||||
Icon: Brain,
|
||||
accent: '#DEE0F0',
|
||||
accent: '#e7e7e7',
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
title: 'Robotics Deployment',
|
||||
body: 'Humanoid, quadruped, service, and delivery robots across the UAE.',
|
||||
Icon: Bot,
|
||||
accent: '#3a55c4',
|
||||
accent: '#7f7f7f',
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
title: 'Digital Transformation',
|
||||
body: 'Automation systems and smart projects that modernize operations.',
|
||||
Icon: Workflow,
|
||||
accent: '#D7DBEA',
|
||||
accent: '#e1e1e1',
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
title: 'Training & Enablement',
|
||||
body: 'Coding and robotics programs preparing the next generation of UAE talent.',
|
||||
Icon: GraduationCap,
|
||||
accent: '#8891C7',
|
||||
accent: '#a8a8a8',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -56,9 +56,9 @@ export function CompanyStory() {
|
||||
padding: 'clamp(1.75rem, 4vw, 3rem)',
|
||||
overflow: 'hidden',
|
||||
background:
|
||||
'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(58,85,196,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(222,224,240,0.10), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.94), rgba(5,5,5,0.98))',
|
||||
border: '1px solid rgba(222,224,240,0.12)',
|
||||
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 100% 0%, rgba(127, 127, 127, 0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(231, 231, 231, 0.10), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.94), rgba(5,5,5,0.98))',
|
||||
border: '1px solid rgba(231, 231, 231, 0.12)',
|
||||
boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
|
||||
}}
|
||||
>
|
||||
{/* blueprint grid background */}
|
||||
@@ -68,7 +68,7 @@ export function CompanyStory() {
|
||||
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: '36px 36px',
|
||||
maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
|
||||
WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
|
||||
@@ -86,7 +86,7 @@ export function CompanyStory() {
|
||||
fontSize: 'clamp(8rem, 18vw, 14rem)',
|
||||
fontWeight: 800,
|
||||
color: 'transparent',
|
||||
WebkitTextStroke: '1px rgba(222,224,240,0.06)',
|
||||
WebkitTextStroke: '1px rgba(231, 231, 231, 0.06)',
|
||||
letterSpacing: '-0.06em',
|
||||
lineHeight: 1,
|
||||
pointerEvents: 'none',
|
||||
@@ -123,9 +123,9 @@ export function CompanyStory() {
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.7vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
|
||||
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.92rem, 1.7vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
|
||||
YS Lootah Robotics is part of the{' '}
|
||||
<span style={{ color: '#FBFBFD', fontWeight: 600 }}>Yousuf Saeed Lootah Investment Group</span>.
|
||||
<span style={{ color: '#fcfcfc', fontWeight: 600 }}>Yousuf Saeed Lootah Investment Group</span>.
|
||||
We deliver AI, robotics, digital transformation, smart projects, and training programs to government and private sector clients across the UAE.
|
||||
</p>
|
||||
|
||||
@@ -142,8 +142,8 @@ export function CompanyStory() {
|
||||
padding: '1.25rem 1.25rem 1.25rem 1.5rem',
|
||||
borderRadius: 18,
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(39,63,148,0.18) 0%, rgba(28,27,33,0.7) 60%)',
|
||||
border: '1px solid rgba(222,224,240,0.16)',
|
||||
'linear-gradient(135deg, rgba(94, 94, 94, 0.18) 0%, rgba(30, 30, 30, 0.7) 60%)',
|
||||
border: '1px solid rgba(231, 231, 231, 0.16)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
@@ -156,8 +156,8 @@ export function CompanyStory() {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: 3,
|
||||
background: 'linear-gradient(180deg, #DEE0F0, #3a55c4)',
|
||||
boxShadow: '0 0 16px rgba(58,85,196,0.7)',
|
||||
background: 'linear-gradient(180deg, #e7e7e7, #7f7f7f)',
|
||||
boxShadow: '0 0 16px rgba(127, 127, 127, 0.7)',
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
@@ -166,7 +166,7 @@ export function CompanyStory() {
|
||||
fontSize: 'clamp(1rem, 1.8vw, 1.15rem)',
|
||||
fontStyle: 'italic',
|
||||
lineHeight: 1.5,
|
||||
color: '#FBFBFD',
|
||||
color: '#fcfcfc',
|
||||
fontWeight: 300,
|
||||
}}
|
||||
>
|
||||
@@ -182,7 +182,7 @@ export function CompanyStory() {
|
||||
fontSize: '0.65rem',
|
||||
letterSpacing: '0.28em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#8891C7',
|
||||
color: '#a8a8a8',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
@@ -211,7 +211,7 @@ export function CompanyStory() {
|
||||
right: '8%',
|
||||
height: 1,
|
||||
background:
|
||||
'linear-gradient(90deg, transparent, rgba(58,85,196,0.45), rgba(222,224,240,0.45), transparent)',
|
||||
'linear-gradient(90deg, transparent, rgba(127, 127, 127, 0.45), rgba(231, 231, 231, 0.45), transparent)',
|
||||
filter: 'blur(0.3px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
@@ -225,7 +225,7 @@ export function CompanyStory() {
|
||||
bottom: '8%',
|
||||
width: 1,
|
||||
background:
|
||||
'linear-gradient(180deg, transparent, rgba(222,224,240,0.4), rgba(58,85,196,0.5), transparent)',
|
||||
'linear-gradient(180deg, transparent, rgba(231, 231, 231, 0.4), rgba(127, 127, 127, 0.5), transparent)',
|
||||
filter: 'blur(0.3px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
@@ -272,12 +272,12 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
|
||||
padding: '1.25rem',
|
||||
borderRadius: 18,
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(28,27,33,0.78), rgba(8,8,10,0.94))',
|
||||
border: '1px solid rgba(222,224,240,0.10)',
|
||||
color: '#FBFBFD',
|
||||
'linear-gradient(135deg, rgba(30, 30, 30, 0.78), rgba(9, 9, 9, 0.94))',
|
||||
border: '1px solid rgba(231, 231, 231, 0.10)',
|
||||
color: '#fcfcfc',
|
||||
overflow: 'hidden',
|
||||
minHeight: 200,
|
||||
boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
|
||||
transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease',
|
||||
transform: offset === 'down' ? 'translateY(8px)' : 'translateY(0)',
|
||||
}}
|
||||
@@ -332,11 +332,11 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '0.18em',
|
||||
color: '#8891C7',
|
||||
color: '#a8a8a8',
|
||||
padding: '0.25rem 0.55rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(136,145,199,0.3)',
|
||||
background: 'rgba(14,13,18,0.6)',
|
||||
border: '1px solid rgba(168, 168, 168, 0.3)',
|
||||
background: 'rgba(16, 16, 16, 0.6)',
|
||||
}}
|
||||
>
|
||||
{num}
|
||||
@@ -361,7 +361,7 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
|
||||
margin: 0,
|
||||
fontSize: '0.88rem',
|
||||
lineHeight: 1.55,
|
||||
color: '#D7DBEA',
|
||||
color: '#e1e1e1',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
@@ -391,16 +391,16 @@ function CredibilityBadge({ Icon, text }: { Icon: LucideIcon; text: string }) {
|
||||
gap: '0.5rem',
|
||||
padding: '0.45rem 0.8rem',
|
||||
borderRadius: 999,
|
||||
background: 'rgba(14,13,18,0.7)',
|
||||
border: '1px solid rgba(222,224,240,0.18)',
|
||||
color: '#DEE0F0',
|
||||
background: 'rgba(16, 16, 16, 0.7)',
|
||||
border: '1px solid rgba(231, 231, 231, 0.18)',
|
||||
color: '#e7e7e7',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.16em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
<Icon size={13} style={{ color: '#DEE0F0' }} />
|
||||
<Icon size={13} style={{ color: '#e7e7e7' }} />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user