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

refactor: update Hero3DRobotics and RoboticsSplineShowcase components for improved styling and layout
Some checks are pending
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/robots/page.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from 'next';
import { Navbar } from '@/components/Navbar'; import { Navbar } from '@/components/Navbar';
import { FooterAndContact } from '@/components/FooterAndContact'; import { FooterAndContact } from '@/components/FooterAndContact';
import { CatalogClient } from './CatalogClient'; import { CatalogClient } from './CatalogClient';
import { RoboticsSplineShowcase } from '@/components/sections/robotics-spline-showcase';
import { ROBOTS } from '@/data/robots'; import { ROBOTS } from '@/data/robots';
export const metadata: Metadata = { export const metadata: Metadata = {
@ -14,17 +15,30 @@ export default function RobotsPage() {
return ( return (
<> <>
<Navbar /> <Navbar />
<main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}> <main>
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}> <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 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
<span className="eyebrow">Robot Catalog · Dubai · UAE</span> <span className="eyebrow">Catalog · Filter & Browse</span>
<h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}> <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 }}> <span className="text-gradient" style={{ fontWeight: 500 }}>
Robots ready to deploy across the UAE. {ROBOTS.length}+ models across the UAE portfolio.
</span> </span>
</h1> </h2>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}> <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> </p>
</div> </div>

413
src/components/robotics/CompanyStory.tsx
View File

@ -1,61 +1,394 @@
'use client'; 'use client';
const PILLARS = [ import { Brain, Bot, Workflow, GraduationCap, Building2, BadgeCheck } from 'lucide-react';
{ title: 'Artificial intelligence', body: 'AI applications tailored for UAE government and private sector clients.' }, import type { LucideIcon } from 'lucide-react';
{ 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.' }, type Pillar = {
{ title: 'Training & enablement', body: 'Coding and robotics training programs that prepare the next generation of talent.' }, 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() { export function CompanyStory() {
return ( return (
<div <div
style={{ style={{
display: 'grid', position: 'relative',
gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', borderRadius: '2rem',
gap: 'clamp(2rem, 5vw, 3rem)', padding: 'clamp(1.75rem, 4vw, 3rem)',
alignItems: 'flex-start', 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' }}> {/* blueprint grid background */}
<span className="eyebrow">About YS Lootah Robotics</span> <div
<h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.03em' }}> aria-hidden
<span className="text-gradient" style={{ fontWeight: 500 }}> style={{
A trusted UAE technology and robotics partner. position: 'absolute',
</span> inset: 0,
</h2> backgroundImage:
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}> 'linear-gradient(rgba(191,195,226,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191,195,226,0.06) 1px, transparent 1px)',
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. backgroundSize: '36px 36px',
</p> maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}> WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
Beyond hardware, we also run coding and robotics training programs that prepare the UAE&apos;s next generation of talent for an automated future. pointerEvents: 'none',
</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> {/* 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>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(180px, 100%), 1fr))', gap: '1rem' }}> <div
{PILLARS.map((p, i) => ( className="cs-grid"
<div style={{
key={p.title} position: 'relative',
className="card" 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={{ style={{
padding: '1.5rem', margin: 0,
display: 'flex', fontSize: 'clamp(1.7rem, 4vw, 2.6rem)',
flexDirection: 'column', fontWeight: 300,
gap: '0.5rem', lineHeight: 1.1,
minHeight: 160, letterSpacing: '-0.03em',
}} }}
> >
<span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7', fontWeight: 700 }}> <span className="text-gradient" style={{ fontWeight: 500 }}>
0{i + 1} A trusted UAE technology and robotics partner.
</span> </span>
<h3 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 600, color: '#FBFBFD' }}>{p.title}</h3> </h2>
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.55, fontSize: '0.88rem' }}>{p.body}</p>
<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> </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> </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> </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>
);
}

383
src/components/robotics/ExclusiveAccessSection.tsx
View File

@ -1,5 +1,6 @@
'use client'; 'use client';
import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { PremiumButton } from '@/components/ui/PremiumButton'; import { PremiumButton } from '@/components/ui/PremiumButton';
@ -9,12 +10,12 @@ export function ExclusiveAccessSection() {
style={{ style={{
position: 'relative', position: 'relative',
borderRadius: '2rem', borderRadius: '2rem',
padding: 'clamp(2rem, 5vw, 4rem)', padding: 'clamp(1.75rem, 4vw, 3rem)',
overflow: 'hidden', overflow: 'hidden',
background: 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))', '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)', 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)', boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
}} }}
> >
<div <div
@ -23,7 +24,7 @@ export function ExclusiveAccessSection() {
position: 'absolute', position: 'absolute',
inset: 0, inset: 0,
background: 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', backgroundSize: '48px 48px',
maskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)', 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%)', 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
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}> 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 <span
style={{ style={{
alignSelf: 'flex-start', alignSelf: 'flex-start',
@ -41,8 +46,8 @@ export function ExclusiveAccessSection() {
gap: '0.6rem', gap: '0.6rem',
padding: '0.5rem 0.9rem', padding: '0.5rem 0.9rem',
borderRadius: 999, borderRadius: 999,
border: '1px solid rgba(39, 63, 148,0.4)', border: '1px solid rgba(39,63,148,0.45)',
background: 'rgba(39, 63, 148,0.08)', background: 'rgba(39,63,148,0.10)',
color: '#DEE0F0', color: '#DEE0F0',
fontSize: '0.7rem', fontSize: '0.7rem',
letterSpacing: '0.24em', letterSpacing: '0.24em',
@ -50,29 +55,29 @@ export function ExclusiveAccessSection() {
fontWeight: 700, 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 Exclusive UAE Access
</span> </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 }}> <span className="text-gradient" style={{ fontWeight: 500 }}>
The UAE&apos;s dedicated destination for selected Unitree and Pudu Robotics solutions. The UAE&apos;s dedicated destination for Unitree and Pudu Robotics.
</span> </span>
</h2> </h2>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}> <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
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. Selected solutions delivered to UAE businesses, venues, and innovators — from inquiry to live deployment, fully supported in Dubai.
</p> </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.', 'Exclusive UAE sales territory.',
'Local Dubai team handles sales, demos, configuration, and deployment.', 'Local Dubai sales, demo, and deployment team.',
'Curated portfolio across humanoid, quadruped, service, and delivery robots.', 'Humanoid, quadruped, service, delivery, cleaning robots.',
'End-to-end procurement, training, and ongoing support.', 'End-to-end procurement, training, and ongoing support.',
].map((b) => ( ].map((b) => (
<li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.95rem', lineHeight: 1.55 }}> <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.92rem', lineHeight: 1.5 }}>
<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"> <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" /> <path d="M20 6 9 17l-5-5" />
</svg> </svg>
{b} {b}
@ -80,84 +85,340 @@ export function ExclusiveAccessSection() {
))} ))}
</ul> </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="/robots/">Explore exclusive robots</PremiumButton>
<PremiumButton href="/contact/" variant="ghost">Request UAE quotation</PremiumButton> <PremiumButton href="/contact/" variant="ghost">Request UAE quotation</PremiumButton>
</div> </div>
</div> </div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem' }}> {/* Right — premium showroom grid */}
<BrandTile name="Unitree" sub="Quadruped · Humanoid" href="/brands/#unitree" accent="#DEE0F0" /> <div
<BrandTile name="Pudu Robotics" sub="Service · Delivery · Cleaning" href="/brands/#pudu" accent="#8891C7" /> style={{
<Stat value="UAE" label="Exclusive sales territory" /> display: 'grid',
<Stat value="Dubai" label="Showroom & demo" /> 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>
</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> </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 ( return (
<Link <Link
href={href} href={href}
style={{ style={{
position: 'relative',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between', gap: '0.5rem',
gap: '0.6rem', padding: '1rem',
padding: '1.25rem', borderRadius: 18,
borderRadius: 16, background:
background: `linear-gradient(135deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))`, `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`, border: `1px solid ${accent}44`,
color: '#FBFBFD', color: '#FBFBFD',
textDecoration: 'none', textDecoration: 'none',
position: 'relative',
overflow: 'hidden', 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 {/* product visual area */}
aria-hidden <div
style={{ style={{
position: 'absolute', position: 'relative',
top: '-1rem', flex: 1,
right: '-1rem', minHeight: 130,
width: 80, borderRadius: 12,
height: 80, background:
borderRadius: '50%', `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))`,
background: `radial-gradient(circle, ${accent}33, transparent 70%)`, overflow: 'hidden',
pointerEvents: 'none', border: '1px solid rgba(222,224,240,0.08)',
}} }}
/> >
<span style={{ fontSize: '1.05rem', fontWeight: 600, letterSpacing: '-0.01em' }}>{name}</span> <div
<span style={{ fontSize: '0.72rem', color: '#8891C7', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{sub}</span> aria-hidden
<span style={{ fontSize: '0.68rem', color: accent, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, marginTop: 'auto' }}> style={{
Available in UAE position: 'absolute',
</span> 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> </Link>
); );
} }
function Stat({ value, label }: { value: string; label: string }) { function TerritoryTile() {
return ( return (
<div <div
style={{ style={{
padding: '1.25rem', position: 'relative',
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)',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '0.4rem', justifyContent: 'space-between',
minHeight: 130, padding: '1rem',
justifyContent: 'center', 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' }}> {/* abstract UAE "territory" graphic — ring map style */}
{value} <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>
<span style={{ fontSize: '0.7rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase' }}>{label}</span>
</div> </div>
); );
} }

36
src/components/robotics/Hero3DRobotics.tsx
View File

@ -309,7 +309,7 @@ export function Hero3DRobotics() {
}} }}
/> />
{/* Robot image — main (enlarged ~12%) */} {/* Robot image — main */}
{FEATURED_ROBOTS.map((r, idx) => ( {FEATURED_ROBOTS.map((r, idx) => (
<div <div
key={r.id} key={r.id}
@ -319,20 +319,20 @@ export function Hero3DRobotics() {
display: 'flex', display: 'flex',
alignItems: 'flex-end', alignItems: 'flex-end',
justifyContent: 'center', justifyContent: 'center',
paddingTop: 'clamp(0.75rem, 2.5vw, 1.5rem)', paddingTop: 'clamp(2rem, 5vw, 3rem)',
paddingBottom: '30%', paddingBottom: '36%',
paddingLeft: 'clamp(0.5rem, 2vw, 1rem)', paddingLeft: 'clamp(1rem, 4vw, 2rem)',
paddingRight: 'clamp(0.5rem, 2vw, 1rem)', paddingRight: 'clamp(1rem, 4vw, 2rem)',
opacity: idx === activeIdx ? 1 : 0, opacity: idx === activeIdx ? 1 : 0,
transform: transform:
idx === activeIdx idx === activeIdx
? `translateY(0) translateX(${tilt.ry * 0.45}px) scale(1.12)` ? `translateY(0) translateX(${tilt.ry * 0.4}px) scale(1)`
: 'translateY(22px) scale(0.97)', : 'translateY(18px) scale(0.96)',
transformOrigin: 'center bottom', transformOrigin: 'center bottom',
transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)', transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
filter: filter:
idx === activeIdx 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', : 'none',
willChange: 'transform', willChange: 'transform',
}} }}
@ -343,7 +343,7 @@ export function Hero3DRobotics() {
src={r.image} src={r.image}
alt={`${r.brandLabel} ${r.name}`} alt={`${r.brandLabel} ${r.name}`}
fill fill
sizes="(max-width: 768px) 90vw, 720px" sizes="(max-width: 768px) 90vw, 620px"
style={{ objectFit: 'contain', objectPosition: 'center bottom' }} style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
priority={idx === 0} 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) => ( {FEATURED_ROBOTS.map((r, idx) => (
<div <div
key={`reflect-${r.id}`} key={`reflect-${r.id}`}
aria-hidden aria-hidden
style={{ style={{
position: 'absolute', position: 'absolute',
left: 'clamp(0.5rem, 2vw, 1rem)', left: 'clamp(1rem, 4vw, 2rem)',
right: 'clamp(0.5rem, 2vw, 1rem)', right: 'clamp(1rem, 4vw, 2rem)',
bottom: '4%', bottom: '6%',
height: '24%', height: '22%',
opacity: idx === activeIdx ? 0.32 : 0, opacity: idx === activeIdx ? 0.28 : 0,
transform: `scaleY(-1) translateX(${tilt.ry * 0.45}px) scale(1.12)`, transform: `scaleY(-1) translateX(${tilt.ry * 0.4}px)`,
transformOrigin: 'center top', transformOrigin: 'center top',
maskImage: maskImage:
'linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%)', '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%)', '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)', transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
pointerEvents: 'none', pointerEvents: 'none',
filter: 'blur(1.4px) hue-rotate(220deg)', filter: 'blur(1.2px)',
}} }}
> >
<Image <Image
src={r.image} src={r.image}
alt="" alt=""
fill fill
sizes="(max-width: 768px) 90vw, 720px" sizes="(max-width: 768px) 90vw, 620px"
style={{ objectFit: 'contain', objectPosition: 'center top' }} style={{ objectFit: 'contain', objectPosition: 'center top' }}
/> />
</div> </div>

322
src/components/sections/robotics-spline-showcase.tsx
View File

@ -10,100 +10,314 @@ const SPLINE_SCENE = 'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splineco
export function RoboticsSplineShowcase() { export function RoboticsSplineShowcase() {
return ( 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 <div
aria-hidden 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 <div
aria-hidden 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"> <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
<Card className="relative min-h-[680px] overflow-hidden border-[#DEE0F0]/15 bg-[#221F20]/70"> <Card style={{ overflow: 'hidden', borderColor: 'rgba(222,224,240,0.15)', background: 'rgba(34,31,32,0.7)' }}>
<Spotlight size={460} /> <Spotlight size={460} />
<div className="grid min-h-[680px] grid-cols-1 lg:grid-cols-2"> <div className="spline-grid">
{/* Left: copy + CTA */} {/* Left: copy + CTAs */}
<div className="relative z-10 flex flex-col justify-center p-6 sm:p-10 lg:p-14"> <div
<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]"> style={{
<span className="h-1.5 w-1.5 rounded-full bg-[#DEE0F0]" /> position: 'relative',
Exclusive UAE Access zIndex: 10,
</div> 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"> <h1
Advanced robotics. style={{
<span className="block bg-gradient-to-r from-white via-[#DEE0F0] to-[#8891C7] bg-clip-text text-transparent"> margin: 0,
Built for UAE innovation. 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> </span>
</h2> </h1>
<p className="mt-6 max-w-xl text-base leading-7 text-[#DEE0F0]/78 sm:text-lg sm:leading-8"> <p
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. 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> </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 <Link
href="/robots/" href="/contact/"
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" 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 Request UAE quotation
<ArrowRight className="ml-2 h-4 w-4 transition group-hover:translate-x-1" /> <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>
<Link <Link
href="/configure/" 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 Configure your solution
<ArrowRight className="ml-2 h-4 w-4 transition group-hover:translate-x-1" /> <ArrowRight size={14} />
</Link> </Link>
</div> </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: BadgeCheck, label: 'Exclusive UAE', value: 'Access' },
{ icon: Cpu, label: 'Unitree + Pudu', value: 'Robotics' }, { Icon: Cpu, label: 'Unitree + Pudu', value: 'Robotics' },
{ icon: MapPin, label: 'Dubai', value: 'Showroom & Demo' }, { Icon: MapPin, label: 'Dubai', value: 'Demo & Sales' },
].map((item) => ( ].map((item) => (
<div <div
key={item.label} 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]" /> <item.Icon size={18} style={{ color: '#DEE0F0', marginBottom: '0.5rem' }} />
<div className="text-sm font-semibold text-white">{item.label}</div> <div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#FBFBFD' }}>{item.label}</div>
<div className="mt-1 text-xs uppercase tracking-[0.18em] text-[#BFC3E2]/70"> <div style={{ marginTop: 4, fontSize: '0.66rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(191,195,226,0.72)' }}>
{item.value} {item.value}
</div> </div>
</div> </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 In Tech We Innovate · In Trust We Lead
</p> </p>
</div> </div>
{/* Right: Spline 3D scene */} {/* Right: Spline scene */}
<div className="relative min-h-[520px] overflow-hidden lg:min-h-full"> <div
className="spline-stage"
style={{
position: 'relative',
minHeight: 'clamp(360px, 60vw, 600px)',
overflow: 'hidden',
}}
>
<div <div
aria-hidden 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 Interactive Robot Scene
</div> </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
<div className="text-[10px] uppercase tracking-[0.22em] text-[#BFC3E2]/70"> 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 YS Lootah Robotics
</div> </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> </div>
<SplineScene scene={SPLINE_SCENE} className="relative z-[2] h-full w-full" /> <SplineScene scene={SPLINE_SCENE} className="relative z-[2] h-full w-full" />
{/* Replacement note (visible only in dev) */}
<span className="sr-only"> <span className="sr-only">
Interactive 3D scene — placeholder Spline reference robot for development. Replace Interactive 3D scene — placeholder Spline reference robot for development. Replace
with approved YS Lootah Robotics custom Spline scene when available. with approved YS Lootah Robotics custom Spline scene when available.
@ -112,6 +326,26 @@ export function RoboticsSplineShowcase() {
</div> </div>
</Card> </Card>
</div> </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> </section>
); );
} }