refactor: update Hero3DRobotics and RoboticsSplineShowcase components for improved styling and layout
- 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
parent
461a00384c
commit
d7c343ac7d
@ -2,6 +2,7 @@ import type { Metadata } from 'next';
|
||||
import { Navbar } from '@/components/Navbar';
|
||||
import { FooterAndContact } from '@/components/FooterAndContact';
|
||||
import { CatalogClient } from './CatalogClient';
|
||||
import { RoboticsSplineShowcase } from '@/components/sections/robotics-spline-showcase';
|
||||
import { ROBOTS } from '@/data/robots';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@ -14,17 +15,30 @@ export default function RobotsPage() {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
|
||||
<main>
|
||||
<div style={{ paddingTop: 'clamp(5rem, 8vw, 7rem)' }}>
|
||||
<RoboticsSplineShowcase />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="container-wide"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2.5rem',
|
||||
paddingTop: 'clamp(3rem, 6vw, 5rem)',
|
||||
paddingBottom: 'clamp(4rem, 8vw, 6rem)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
|
||||
<span className="eyebrow">Robot Catalog · Dubai · UAE</span>
|
||||
<h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
|
||||
<span className="eyebrow">Catalog · Filter & Browse</span>
|
||||
<h2 style={{ margin: 0, fontSize: 'clamp(1.6rem, 3.6vw, 2.4rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
|
||||
<span className="text-gradient" style={{ fontWeight: 500 }}>
|
||||
Robots ready to deploy across the UAE.
|
||||
{ROBOTS.length}+ models across the UAE portfolio.
|
||||
</span>
|
||||
</h1>
|
||||
</h2>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
|
||||
Browse {ROBOTS.length}+ models across our portfolio. Filter by brand or category, then request a price or book a live demo at our Dubai showroom.
|
||||
Filter by brand or category, then request a UAE quotation or book a live demo at our Dubai showroom.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,61 +1,394 @@
|
||||
'use client';
|
||||
|
||||
const PILLARS = [
|
||||
{ title: 'Artificial intelligence', body: 'AI applications tailored for UAE government and private sector clients.' },
|
||||
{ title: 'Robotics', body: 'Humanoid, quadruped, service, and delivery robotics deployed across Dubai and the UAE.' },
|
||||
{ title: 'Digital transformation', body: 'Automation systems and smart projects that modernize operations end to end.' },
|
||||
{ title: 'Training & enablement', body: 'Coding and robotics training programs that prepare the next generation of talent.' },
|
||||
import { Brain, Bot, Workflow, GraduationCap, Building2, BadgeCheck } from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
type Pillar = {
|
||||
num: string;
|
||||
title: string;
|
||||
body: string;
|
||||
Icon: LucideIcon;
|
||||
accent: string;
|
||||
};
|
||||
|
||||
const PILLARS: Pillar[] = [
|
||||
{
|
||||
num: '01',
|
||||
title: 'Artificial Intelligence',
|
||||
body: 'AI applications tailored for UAE government and private sector.',
|
||||
Icon: Brain,
|
||||
accent: '#DEE0F0',
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
title: 'Robotics Deployment',
|
||||
body: 'Humanoid, quadruped, service, and delivery robots across the UAE.',
|
||||
Icon: Bot,
|
||||
accent: '#3a55c4',
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
title: 'Digital Transformation',
|
||||
body: 'Automation systems and smart projects that modernize operations.',
|
||||
Icon: Workflow,
|
||||
accent: '#BFC3E2',
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
title: 'Training & Enablement',
|
||||
body: 'Coding and robotics programs preparing the next generation of UAE talent.',
|
||||
Icon: GraduationCap,
|
||||
accent: '#8891C7',
|
||||
},
|
||||
];
|
||||
|
||||
export function CompanyStory() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
|
||||
gap: 'clamp(2rem, 5vw, 3rem)',
|
||||
alignItems: 'flex-start',
|
||||
position: 'relative',
|
||||
borderRadius: '2rem',
|
||||
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)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<span className="eyebrow">About YS Lootah Robotics</span>
|
||||
<h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.03em' }}>
|
||||
<span className="text-gradient" style={{ fontWeight: 500 }}>
|
||||
A trusted UAE technology and robotics partner.
|
||||
</span>
|
||||
</h2>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
|
||||
YS Lootah Robotics is part of the <strong style={{ color: '#DEE0F0' }}>Yousuf Saeed Lootah Investment Group</strong>. We help organizations innovate, automate, and deploy intelligent robotic solutions across artificial intelligence, robotics, digital transformation, automation systems, and smart projects — for government and private sector clients alike.
|
||||
</p>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
|
||||
Beyond hardware, we also run coding and robotics training programs that prepare the UAE's next generation of talent for an automated future.
|
||||
</p>
|
||||
<p style={{ margin: 0, color: '#8891C7', fontSize: '0.82rem', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>
|
||||
In Tech We Innovate · In Trust We Lead
|
||||
</p>
|
||||
{/* blueprint grid background */}
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(191,195,226,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191,195,226,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%)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* subtle YS watermark */}
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '8%',
|
||||
right: '6%',
|
||||
fontSize: 'clamp(8rem, 18vw, 14rem)',
|
||||
fontWeight: 800,
|
||||
color: 'transparent',
|
||||
WebkitTextStroke: '1px rgba(222,224,240,0.06)',
|
||||
letterSpacing: '-0.06em',
|
||||
lineHeight: 1,
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
YS
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(180px, 100%), 1fr))', gap: '1rem' }}>
|
||||
{PILLARS.map((p, i) => (
|
||||
<div
|
||||
key={p.title}
|
||||
className="card"
|
||||
<div
|
||||
className="cs-grid"
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'grid',
|
||||
gap: 'clamp(1.5rem, 3.5vw, 2.5rem)',
|
||||
alignItems: 'stretch',
|
||||
}}
|
||||
>
|
||||
{/* Left — narrative */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
|
||||
<span className="eyebrow">About YS Lootah Robotics</span>
|
||||
|
||||
<h2
|
||||
style={{
|
||||
padding: '1.5rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.5rem',
|
||||
minHeight: 160,
|
||||
margin: 0,
|
||||
fontSize: 'clamp(1.7rem, 4vw, 2.6rem)',
|
||||
fontWeight: 300,
|
||||
lineHeight: 1.1,
|
||||
letterSpacing: '-0.03em',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7', fontWeight: 700 }}>
|
||||
0{i + 1}
|
||||
<span className="text-gradient" style={{ fontWeight: 500 }}>
|
||||
A trusted UAE technology and robotics partner.
|
||||
</span>
|
||||
<h3 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 600, color: '#FBFBFD' }}>{p.title}</h3>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.55, fontSize: '0.88rem' }}>{p.body}</p>
|
||||
</h2>
|
||||
|
||||
<p style={{ margin: 0, color: '#DEE0F0', 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>.
|
||||
We deliver AI, robotics, digital transformation, smart projects, and training programs to government and private sector clients across the UAE.
|
||||
</p>
|
||||
|
||||
{/* Group credibility row */}
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '0.25rem' }}>
|
||||
<CredibilityBadge Icon={Building2} text="Yousuf Saeed Lootah Investment Group" />
|
||||
<CredibilityBadge Icon={BadgeCheck} text="Trusted UAE Partner" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Pull-quote card */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: '0.5rem',
|
||||
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)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: 3,
|
||||
background: 'linear-gradient(180deg, #DEE0F0, #3a55c4)',
|
||||
boxShadow: '0 0 16px rgba(58,85,196,0.7)',
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: 'clamp(1rem, 1.8vw, 1.15rem)',
|
||||
fontStyle: 'italic',
|
||||
lineHeight: 1.5,
|
||||
color: '#FBFBFD',
|
||||
fontWeight: 300,
|
||||
}}
|
||||
>
|
||||
In Tech We Innovate.
|
||||
<br />
|
||||
<span className="text-gradient-accent" style={{ fontWeight: 600, fontStyle: 'normal' }}>
|
||||
In Trust We Lead.
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
margin: '0.6rem 0 0',
|
||||
fontSize: '0.65rem',
|
||||
letterSpacing: '0.28em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#8891C7',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
YS Lootah Robotics · Dubai · UAE
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right — capability modules */}
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
|
||||
gap: '0.875rem',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
{/* connector lines */}
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '8%',
|
||||
right: '8%',
|
||||
height: 1,
|
||||
background:
|
||||
'linear-gradient(90deg, transparent, rgba(58,85,196,0.45), rgba(222,224,240,0.45), transparent)',
|
||||
filter: 'blur(0.3px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '8%',
|
||||
bottom: '8%',
|
||||
width: 1,
|
||||
background:
|
||||
'linear-gradient(180deg, transparent, rgba(222,224,240,0.4), rgba(58,85,196,0.5), transparent)',
|
||||
filter: 'blur(0.3px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
{PILLARS.map((p, i) => (
|
||||
<CapabilityTile key={p.num} pillar={p} offset={i % 2 === 1 ? 'down' : 'up'} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.cs-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.cs-grid {
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'down' }) {
|
||||
const { num, title, body, Icon, accent } = pillar;
|
||||
return (
|
||||
<article
|
||||
className="cap-tile"
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.75rem',
|
||||
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',
|
||||
overflow: 'hidden',
|
||||
minHeight: 200,
|
||||
boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,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)',
|
||||
}}
|
||||
>
|
||||
{/* gradient border ring */}
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
borderRadius: 18,
|
||||
padding: 1,
|
||||
background: `linear-gradient(135deg, ${accent}55, transparent 50%, ${accent}33)`,
|
||||
WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
|
||||
WebkitMaskComposite: 'xor',
|
||||
maskComposite: 'exclude',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
{/* hover glow */}
|
||||
<span
|
||||
className="cap-tile-glow"
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: '-20%',
|
||||
background: `radial-gradient(circle at 50% 0%, ${accent}33, transparent 60%)`,
|
||||
opacity: 0,
|
||||
transition: 'opacity 0.4s ease',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span
|
||||
style={{
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 12,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: `${accent}1A`,
|
||||
border: `1px solid ${accent}55`,
|
||||
boxShadow: `0 0 18px ${accent}33`,
|
||||
}}
|
||||
>
|
||||
<Icon size={20} style={{ color: accent }} />
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '0.18em',
|
||||
color: '#8891C7',
|
||||
padding: '0.25rem 0.55rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(136,145,199,0.3)',
|
||||
background: 'rgba(14,13,18,0.6)',
|
||||
}}
|
||||
>
|
||||
{num}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: 'clamp(1.05rem, 1.8vw, 1.2rem)',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '-0.01em',
|
||||
lineHeight: 1.2,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '0.88rem',
|
||||
lineHeight: 1.55,
|
||||
color: '#BFC3E2',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
|
||||
<style jsx>{`
|
||||
.cap-tile:hover {
|
||||
transform: translateY(${offset === 'down' ? '2px' : '-6px'});
|
||||
border-color: ${accent}66;
|
||||
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7), 0 0 30px ${accent}33;
|
||||
}
|
||||
.cap-tile:hover .cap-tile-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
`}</style>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function CredibilityBadge({ Icon, text }: { Icon: LucideIcon; text: string }) {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
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',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.16em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
<Icon size={13} style={{ color: '#DEE0F0' }} />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { PremiumButton } from '@/components/ui/PremiumButton';
|
||||
|
||||
@ -9,12 +10,12 @@ export function ExclusiveAccessSection() {
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderRadius: '2rem',
|
||||
padding: 'clamp(2rem, 5vw, 4rem)',
|
||||
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(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)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -23,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(39,63,148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39,63,148,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%)',
|
||||
@ -31,8 +32,12 @@ export function ExclusiveAccessSection() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 'clamp(2rem, 4vw, 3rem)', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
|
||||
<div
|
||||
className="exa-grid"
|
||||
style={{ position: 'relative', display: 'grid', gap: 'clamp(1.5rem, 3.5vw, 2.5rem)', alignItems: 'stretch' }}
|
||||
>
|
||||
{/* Left — copy */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
|
||||
<span
|
||||
style={{
|
||||
alignSelf: 'flex-start',
|
||||
@ -41,8 +46,8 @@ export function ExclusiveAccessSection() {
|
||||
gap: '0.6rem',
|
||||
padding: '0.5rem 0.9rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(39, 63, 148,0.4)',
|
||||
background: 'rgba(39, 63, 148,0.08)',
|
||||
border: '1px solid rgba(39,63,148,0.45)',
|
||||
background: 'rgba(39,63,148,0.10)',
|
||||
color: '#DEE0F0',
|
||||
fontSize: '0.7rem',
|
||||
letterSpacing: '0.24em',
|
||||
@ -50,29 +55,29 @@ export function ExclusiveAccessSection() {
|
||||
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: '#DEE0F0', boxShadow: '0 0 10px rgba(222,224,240,0.8)' }} />
|
||||
Exclusive UAE Access
|
||||
</span>
|
||||
|
||||
<h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
|
||||
<h2 style={{ margin: 0, fontSize: 'clamp(1.7rem, 4vw, 2.6rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
|
||||
<span className="text-gradient" style={{ fontWeight: 500 }}>
|
||||
The UAE's dedicated destination for selected Unitree and Pudu Robotics solutions.
|
||||
The UAE's dedicated destination for Unitree and Pudu Robotics.
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
|
||||
YS Lootah Robotics holds exclusive sales rights in the UAE for selected Unitree and Pudu Robotics solutions. We deliver advanced robots to businesses, venues, and innovators across Dubai and the UAE — from inquiry to live deployment.
|
||||
<p style={{ margin: 0, color: '#DEE0F0', 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>
|
||||
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
{[
|
||||
'Available exclusively in the UAE through YS Lootah Robotics.',
|
||||
'Local Dubai team handles sales, demos, configuration, and deployment.',
|
||||
'Curated portfolio across humanoid, quadruped, service, and delivery robots.',
|
||||
'Exclusive UAE sales territory.',
|
||||
'Local Dubai sales, demo, and deployment team.',
|
||||
'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.95rem', lineHeight: 1.55 }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 3 }} aria-hidden="true">
|
||||
<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">
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
{b}
|
||||
@ -80,84 +85,340 @@ export function ExclusiveAccessSection() {
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginTop: '0.5rem' }}>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginTop: '0.5rem' }}>
|
||||
<PremiumButton href="/robots/">Explore exclusive robots</PremiumButton>
|
||||
<PremiumButton href="/contact/" variant="ghost">Request UAE quotation</PremiumButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem' }}>
|
||||
<BrandTile name="Unitree" sub="Quadruped · Humanoid" href="/brands/#unitree" accent="#DEE0F0" />
|
||||
<BrandTile name="Pudu Robotics" sub="Service · Delivery · Cleaning" href="/brands/#pudu" accent="#8891C7" />
|
||||
<Stat value="UAE" label="Exclusive sales territory" />
|
||||
<Stat value="Dubai" label="Showroom & demo" />
|
||||
{/* Right — premium showroom grid */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
|
||||
gap: '0.875rem',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<BrandShowcaseTile
|
||||
href="/brands/#unitree"
|
||||
brand="Unitree"
|
||||
tag="Quadruped · Humanoid"
|
||||
accent="#DEE0F0"
|
||||
primary={{ src: '/images/robots/unitree-g1.png', alt: 'Unitree G1 humanoid robot' }}
|
||||
secondary={{ src: '/images/robots/unitree-go2.png', alt: 'Unitree Go2 quadruped robot' }}
|
||||
/>
|
||||
<BrandShowcaseTile
|
||||
href="/brands/#pudu"
|
||||
brand="Pudu Robotics"
|
||||
tag="Service · Delivery · Cleaning"
|
||||
accent="#8891C7"
|
||||
primary={{ src: '/images/robots/pudu-bellabot.svg', alt: 'Pudu BellaBot delivery robot' }}
|
||||
secondary={{ src: '/images/robots/pudu-kettybot.svg', alt: 'Pudu KettyBot service robot' }}
|
||||
/>
|
||||
<TerritoryTile />
|
||||
<ShowroomTile />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.exa-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.exa-grid {
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BrandTile({ name, sub, href, accent }: { name: string; sub: string; href: string; accent: string }) {
|
||||
function BrandShowcaseTile({
|
||||
href,
|
||||
brand,
|
||||
tag,
|
||||
accent,
|
||||
primary,
|
||||
secondary,
|
||||
}: {
|
||||
href: string;
|
||||
brand: string;
|
||||
tag: string;
|
||||
accent: string;
|
||||
primary: { src: string; alt: string };
|
||||
secondary: { src: string; alt: string };
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
gap: '0.6rem',
|
||||
padding: '1.25rem',
|
||||
borderRadius: 16,
|
||||
background: `linear-gradient(135deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))`,
|
||||
gap: '0.5rem',
|
||||
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))`,
|
||||
border: `1px solid ${accent}44`,
|
||||
color: '#FBFBFD',
|
||||
textDecoration: 'none',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
minHeight: 130,
|
||||
minHeight: 220,
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
{/* product visual area */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-1rem',
|
||||
right: '-1rem',
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${accent}33, transparent 70%)`,
|
||||
pointerEvents: 'none',
|
||||
position: 'relative',
|
||||
flex: 1,
|
||||
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))`,
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(222,224,240,0.08)',
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontSize: '1.05rem', fontWeight: 600, letterSpacing: '-0.01em' }}>{name}</span>
|
||||
<span style={{ fontSize: '0.72rem', color: '#8891C7', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{sub}</span>
|
||||
<span style={{ fontSize: '0.68rem', color: accent, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, marginTop: 'auto' }}>
|
||||
Available in UAE
|
||||
</span>
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(191,195,226,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191,195,226,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%)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '8%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '70%',
|
||||
height: '70%',
|
||||
background:
|
||||
'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(58,85,196,0.35) 0%, transparent 65%)',
|
||||
filter: 'blur(8px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* secondary robot — back-left */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '6%',
|
||||
bottom: '8%',
|
||||
width: '46%',
|
||||
height: '78%',
|
||||
opacity: 0.7,
|
||||
filter: 'drop-shadow(0 12px 20px rgba(0,0,0,0.6))',
|
||||
transform: 'scale(0.88)',
|
||||
transformOrigin: 'bottom left',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={secondary.src}
|
||||
alt={secondary.alt}
|
||||
fill
|
||||
sizes="220px"
|
||||
style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* primary robot — front-right, slightly larger */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '4%',
|
||||
bottom: '6%',
|
||||
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))',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={primary.src}
|
||||
alt={primary.alt}
|
||||
fill
|
||||
sizes="280px"
|
||||
style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '0.5rem',
|
||||
right: '0.5rem',
|
||||
padding: '0.25rem 0.55rem',
|
||||
borderRadius: 999,
|
||||
background: 'rgba(14,13,18,0.7)',
|
||||
border: `1px solid ${accent}55`,
|
||||
color: accent,
|
||||
fontSize: '0.55rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.22em',
|
||||
textTransform: 'uppercase',
|
||||
backdropFilter: 'blur(6px)',
|
||||
}}
|
||||
>
|
||||
UAE
|
||||
</span>
|
||||
</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 }}>
|
||||
{tag}
|
||||
</span>
|
||||
<span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
|
||||
<span style={{ fontSize: '1rem', fontWeight: 700, letterSpacing: '-0.01em' }}>{brand}</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={accent} 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>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({ value, label }: { value: string; label: string }) {
|
||||
function TerritoryTile() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: '1.25rem',
|
||||
borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, rgba(28, 27, 33,0.7), rgba(5,5,5,0.92))',
|
||||
border: '1px solid rgba(39, 63, 148,0.22)',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.4rem',
|
||||
minHeight: 130,
|
||||
justifyContent: 'center',
|
||||
justifyContent: 'space-between',
|
||||
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',
|
||||
overflow: 'hidden',
|
||||
minHeight: 170,
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
}}
|
||||
>
|
||||
<span className="text-gradient-accent" style={{ fontSize: 'clamp(1.5rem, 2.6vw, 1.9rem)', fontWeight: 700, letterSpacing: '-0.02em' }}>
|
||||
{value}
|
||||
{/* abstract UAE "territory" graphic — ring map style */}
|
||||
<svg
|
||||
aria-hidden
|
||||
viewBox="0 0 220 140"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
opacity: 0.4,
|
||||
}}
|
||||
>
|
||||
<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" />
|
||||
</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="#BFC3E2" 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 }}>
|
||||
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' }}>
|
||||
Exclusive sales rights — selected Unitree & Pudu solutions.
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ShowroomTile() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
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',
|
||||
overflow: 'hidden',
|
||||
minHeight: 170,
|
||||
boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
aria-hidden
|
||||
viewBox="0 0 220 140"
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.38 }}
|
||||
>
|
||||
<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" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{/* perspective floor */}
|
||||
{[0, 1, 2, 3, 4].map((i) => (
|
||||
<line
|
||||
key={i}
|
||||
x1={20 - i * 5}
|
||||
x2={200 + i * 5}
|
||||
y1={70 + i * 14}
|
||||
y2={70 + i * 14}
|
||||
stroke="#DEE0F0"
|
||||
strokeOpacity={0.35 - i * 0.06}
|
||||
/>
|
||||
))}
|
||||
{[0, 1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<line
|
||||
key={`v-${i}`}
|
||||
x1={30 + i * 27}
|
||||
y1={70}
|
||||
x2={30 + i * 36 - 30}
|
||||
y2={140}
|
||||
stroke="#DEE0F0"
|
||||
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" />
|
||||
</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 }}>
|
||||
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' }}>
|
||||
Live demos · City Bay Business Center.
|
||||
</span>
|
||||
<span style={{ fontSize: '0.7rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase' }}>{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -10,100 +10,314 @@ const SPLINE_SCENE = 'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splineco
|
||||
|
||||
export function RoboticsSplineShowcase() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-[#221F20] px-4 py-20 text-white sm:px-6 lg:px-8">
|
||||
<section
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
background: '#221F20',
|
||||
color: '#FBFBFD',
|
||||
padding: 'clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(39,63,148,0.42),transparent_42%),radial-gradient(circle_at_20%_80%,rgba(222,224,240,0.10),transparent_36%)]"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background:
|
||||
'radial-gradient(circle at 70% 30%, rgba(39,63,148,0.42), transparent 42%), radial-gradient(circle at 20% 80%, rgba(222,224,240,0.10), transparent 36%)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.045)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.035)_1px,transparent_1px)] bg-[size:64px_64px] opacity-30"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px)',
|
||||
backgroundSize: '64px 64px',
|
||||
opacity: 0.3,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative mx-auto max-w-7xl">
|
||||
<Card className="relative min-h-[680px] overflow-hidden border-[#DEE0F0]/15 bg-[#221F20]/70">
|
||||
<div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
|
||||
<Card style={{ overflow: 'hidden', borderColor: 'rgba(222,224,240,0.15)', background: 'rgba(34,31,32,0.7)' }}>
|
||||
<Spotlight size={460} />
|
||||
|
||||
<div className="grid min-h-[680px] grid-cols-1 lg:grid-cols-2">
|
||||
{/* Left: copy + CTA */}
|
||||
<div className="relative z-10 flex flex-col justify-center p-6 sm:p-10 lg:p-14">
|
||||
<div className="mb-6 inline-flex w-fit items-center gap-2 rounded-full border border-[#DEE0F0]/25 bg-[#273F94]/20 px-4 py-2 text-[10px] font-bold uppercase tracking-[0.3em] text-[#DEE0F0]">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-[#DEE0F0]" />
|
||||
Exclusive UAE Access
|
||||
</div>
|
||||
<div className="spline-grid">
|
||||
{/* Left: copy + CTAs */}
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: 'clamp(1.5rem, 4vw, 3rem)',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
width: 'fit-content',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
marginBottom: '1.5rem',
|
||||
padding: '0.5rem 1rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(222,224,240,0.25)',
|
||||
background: 'rgba(39,63,148,0.20)',
|
||||
fontSize: '0.65rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.3em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#DEE0F0',
|
||||
}}
|
||||
>
|
||||
<span style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0' }} />
|
||||
Robotics Catalog · UAE
|
||||
</span>
|
||||
|
||||
<h2 className="max-w-2xl text-4xl font-semibold leading-[1.02] tracking-[-0.04em] text-white sm:text-5xl lg:text-6xl xl:text-7xl">
|
||||
Advanced robotics.
|
||||
<span className="block bg-gradient-to-r from-white via-[#DEE0F0] to-[#8891C7] bg-clip-text text-transparent">
|
||||
Built for UAE innovation.
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: 'clamp(1.9rem, 4.2vw, 3.4rem)',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.05,
|
||||
letterSpacing: '-0.035em',
|
||||
color: '#FBFBFD',
|
||||
overflowWrap: 'break-word',
|
||||
wordBreak: 'normal',
|
||||
hyphens: 'manual',
|
||||
}}
|
||||
>
|
||||
Explore Exclusive{' '}
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
background:
|
||||
'linear-gradient(110deg, #FBFBFD 0%, #DEE0F0 35%, #BFC3E2 60%, #3a55c4 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
backgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
color: 'transparent',
|
||||
filter: 'drop-shadow(0 4px 18px rgba(58,85,196,0.32))',
|
||||
}}
|
||||
>
|
||||
Robotics Solutions.
|
||||
</span>
|
||||
</h2>
|
||||
</h1>
|
||||
|
||||
<p className="mt-6 max-w-xl text-base leading-7 text-[#DEE0F0]/78 sm:text-lg sm:leading-8">
|
||||
YS Lootah Robotics is the exclusive 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
|
||||
style={{
|
||||
marginTop: '1.5rem',
|
||||
marginBottom: 0,
|
||||
maxWidth: 560,
|
||||
fontSize: 'clamp(0.95rem, 1.6vw, 1.1rem)',
|
||||
lineHeight: 1.7,
|
||||
color: 'rgba(222,224,240,0.82)',
|
||||
}}
|
||||
>
|
||||
Browse selected Unitree and Pudu Robotics solutions available exclusively in the UAE through YS Lootah Robotics — humanoid, quadruped, service, delivery, and cleaning robots ready for Dubai businesses.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||
<div
|
||||
style={{
|
||||
marginTop: '2rem',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '0.625rem',
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href="/robots/"
|
||||
className="group inline-flex items-center justify-center rounded-full bg-gradient-to-br from-[#3a55c4] via-[#273F94] to-[#1a2e6e] px-6 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white shadow-[0_18px_45px_rgba(39,63,148,0.45)] transition hover:brightness-110"
|
||||
href="/contact/"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.4rem',
|
||||
padding: '0.85rem 1.5rem',
|
||||
borderRadius: 999,
|
||||
background: 'linear-gradient(135deg, #3a55c4 0%, #273F94 55%, #1a2e6e 100%)',
|
||||
color: '#FBFBFD',
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase',
|
||||
textDecoration: 'none',
|
||||
boxShadow: '0 14px 40px rgba(39,63,148,0.5)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
Explore robots
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition group-hover:translate-x-1" />
|
||||
Request UAE quotation
|
||||
<ArrowRight size={14} />
|
||||
</Link>
|
||||
<Link
|
||||
href="/book-demo/"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.4rem',
|
||||
padding: '0.85rem 1.5rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(222,224,240,0.3)',
|
||||
background: 'rgba(255,255,255,0.04)',
|
||||
color: '#DEE0F0',
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase',
|
||||
textDecoration: 'none',
|
||||
backdropFilter: 'blur(12px)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
Book a demo
|
||||
<ArrowRight size={14} />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/configure/"
|
||||
className="group inline-flex items-center justify-center rounded-full border border-[#DEE0F0]/25 bg-white/[0.04] px-6 py-3 text-xs font-bold uppercase tracking-[0.16em] text-[#DEE0F0] backdrop-blur-xl transition hover:bg-white/[0.08]"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.4rem',
|
||||
padding: '0.85rem 1.5rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(136,145,199,0.5)',
|
||||
background: 'transparent',
|
||||
color: '#BFC3E2',
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase',
|
||||
textDecoration: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
Configure your solution
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition group-hover:translate-x-1" />
|
||||
<ArrowRight size={14} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 grid max-w-xl grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<div
|
||||
style={{
|
||||
marginTop: '2rem',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(min(150px, 100%), 1fr))',
|
||||
gap: '0.75rem',
|
||||
maxWidth: 560,
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ icon: BadgeCheck, label: 'Exclusive UAE', value: 'Access' },
|
||||
{ icon: Cpu, label: 'Unitree + Pudu', value: 'Robotics' },
|
||||
{ icon: MapPin, label: 'Dubai', value: 'Showroom & Demo' },
|
||||
{ Icon: BadgeCheck, label: 'Exclusive UAE', value: 'Access' },
|
||||
{ Icon: Cpu, label: 'Unitree + Pudu', value: 'Robotics' },
|
||||
{ Icon: MapPin, label: 'Dubai', value: 'Demo & Sales' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="rounded-2xl border border-[#DEE0F0]/12 bg-white/[0.045] p-4 backdrop-blur-xl"
|
||||
style={{
|
||||
padding: '0.875rem 1rem',
|
||||
borderRadius: 16,
|
||||
border: '1px solid rgba(222,224,240,0.12)',
|
||||
background: 'rgba(255,255,255,0.045)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<item.icon className="mb-3 h-5 w-5 text-[#DEE0F0]" />
|
||||
<div className="text-sm font-semibold text-white">{item.label}</div>
|
||||
<div className="mt-1 text-xs uppercase tracking-[0.18em] text-[#BFC3E2]/70">
|
||||
<item.Icon size={18} style={{ color: '#DEE0F0', marginBottom: '0.5rem' }} />
|
||||
<div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#FBFBFD' }}>{item.label}</div>
|
||||
<div style={{ marginTop: 4, fontSize: '0.66rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(191,195,226,0.72)' }}>
|
||||
{item.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-8 text-[11px] font-semibold uppercase tracking-[0.32em] text-[#BFC3E2]">
|
||||
<p
|
||||
style={{
|
||||
marginTop: '1.75rem',
|
||||
marginBottom: 0,
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.32em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#BFC3E2',
|
||||
}}
|
||||
>
|
||||
In Tech We Innovate · In Trust We Lead
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right: Spline 3D scene */}
|
||||
<div className="relative min-h-[520px] overflow-hidden lg:min-h-full">
|
||||
{/* Right: Spline scene */}
|
||||
<div
|
||||
className="spline-stage"
|
||||
style={{
|
||||
position: 'relative',
|
||||
minHeight: 'clamp(360px, 60vw, 600px)',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-6 rounded-[2rem] border border-[#DEE0F0]/15 bg-[#273F94]/10 shadow-[inset_0_0_80px_rgba(222,224,240,0.05)] backdrop-blur-xl"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: '1.25rem',
|
||||
borderRadius: '2rem',
|
||||
border: '1px solid rgba(222,224,240,0.15)',
|
||||
background: 'rgba(39,63,148,0.10)',
|
||||
boxShadow: 'inset 0 0 80px rgba(222,224,240,0.05)',
|
||||
backdropFilter: 'blur(14px)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute left-8 top-8 z-10 rounded-full border border-[#DEE0F0]/20 bg-[#221F20]/70 px-4 py-2 text-[10px] font-bold uppercase tracking-[0.24em] text-[#DEE0F0] backdrop-blur">
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '1.75rem',
|
||||
top: '1.75rem',
|
||||
zIndex: 10,
|
||||
padding: '0.5rem 0.9rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(222,224,240,0.22)',
|
||||
background: 'rgba(34,31,32,0.72)',
|
||||
color: '#DEE0F0',
|
||||
fontSize: '0.6rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.26em',
|
||||
textTransform: 'uppercase',
|
||||
backdropFilter: 'blur(8px)',
|
||||
}}
|
||||
>
|
||||
Interactive Robot Scene
|
||||
</div>
|
||||
<div className="absolute bottom-8 right-8 z-10 rounded-2xl border border-[#DEE0F0]/15 bg-[#221F20]/75 px-5 py-4 backdrop-blur-xl">
|
||||
<div className="text-[10px] uppercase tracking-[0.22em] text-[#BFC3E2]/70">
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '1.75rem',
|
||||
bottom: '1.75rem',
|
||||
zIndex: 10,
|
||||
padding: '0.85rem 1.1rem',
|
||||
borderRadius: 16,
|
||||
border: '1px solid rgba(222,224,240,0.15)',
|
||||
background: 'rgba(34,31,32,0.78)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '0.62rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(191,195,226,0.7)' }}>
|
||||
YS Lootah Robotics
|
||||
</div>
|
||||
<div className="mt-1 text-sm font-semibold text-white">In Tech We Innovate</div>
|
||||
<div style={{ marginTop: 4, fontSize: '0.88rem', fontWeight: 600, color: '#FBFBFD' }}>
|
||||
In Tech We Innovate
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SplineScene scene={SPLINE_SCENE} className="relative z-[2] h-full w-full" />
|
||||
|
||||
{/* Replacement note (visible only in dev) */}
|
||||
<span className="sr-only">
|
||||
Interactive 3D scene — placeholder Spline reference robot for development. Replace
|
||||
with approved YS Lootah Robotics custom Spline scene when available.
|
||||
@ -112,6 +326,26 @@ export function RoboticsSplineShowcase() {
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.spline-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
min-height: 600px;
|
||||
}
|
||||
.spline-stage {
|
||||
min-height: clamp(360px, 65vw, 520px);
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
.spline-grid {
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
|
||||
min-height: 680px;
|
||||
}
|
||||
.spline-stage {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user