185 lines
7.5 KiB
TypeScript
185 lines
7.5 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { ArrowRight, BadgeCheck, Cpu, MapPin, Sparkles, Bot, Truck } from 'lucide-react';
|
|
import { ContainerScroll } from '@/components/ui/container-scroll-animation';
|
|
|
|
const SHOWROOM_ROBOTS = [
|
|
{
|
|
name: 'Unitree G1',
|
|
slug: 'unitree-g1',
|
|
image: '/images/robots/unitree-g1.png',
|
|
category: 'Humanoid',
|
|
accent: '#DEE0F0',
|
|
},
|
|
{
|
|
name: 'Unitree Go2',
|
|
slug: 'unitree-go2',
|
|
image: '/images/robots/unitree-go2.png',
|
|
category: 'Quadruped',
|
|
accent: '#BFC3E2',
|
|
},
|
|
{
|
|
name: 'Pudu BellaBot',
|
|
slug: 'pudu-bellabot',
|
|
image: '/images/robots/pudu-bellabot.svg',
|
|
category: 'Delivery',
|
|
accent: '#8891C7',
|
|
},
|
|
];
|
|
|
|
const TABS = [
|
|
{ label: 'All', icon: Sparkles, active: true },
|
|
{ label: 'Unitree', icon: Bot },
|
|
{ label: 'Pudu', icon: Truck },
|
|
{ label: 'Humanoid', icon: BadgeCheck },
|
|
{ label: 'Quadruped', icon: Cpu },
|
|
];
|
|
|
|
export function RoboticsScrollShowcase() {
|
|
return (
|
|
<section
|
|
style={{
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
background:
|
|
'radial-gradient(ellipse 60% 50% at 50% 0%, rgba(39,63,148,0.18), transparent 60%)',
|
|
}}
|
|
>
|
|
<ContainerScroll
|
|
titleComponent={
|
|
<div className="flex flex-col items-center gap-4">
|
|
<span
|
|
className="inline-flex items-center gap-2 rounded-full border border-[#DEE0F0]/30 bg-[#273F94]/15 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.32em] text-[#DEE0F0]"
|
|
>
|
|
<span className="h-1.5 w-1.5 rounded-full bg-[#DEE0F0]" />
|
|
Exclusive UAE Robotics Showroom
|
|
</span>
|
|
<h2 className="text-4xl font-light leading-[1.05] tracking-[-0.035em] text-white sm:text-5xl md:text-6xl lg:text-7xl">
|
|
Advanced robotics.
|
|
<span className="block bg-gradient-to-r from-white via-[#DEE0F0] to-[#3a55c4] bg-clip-text font-semibold text-transparent">
|
|
Exclusive UAE access.
|
|
</span>
|
|
<span className="mt-3 block text-base font-normal text-[#BFC3E2] sm:text-lg md:text-xl">
|
|
Built for Dubai's next generation of automation.
|
|
</span>
|
|
</h2>
|
|
<p className="max-w-2xl text-sm leading-relaxed text-[#DEE0F0]/75 sm:text-base">
|
|
Explore selected Unitree and Pudu Robotics solutions through an immersive showroom experience built for UAE businesses, venues, and innovators.
|
|
</p>
|
|
</div>
|
|
}
|
|
>
|
|
<ConsoleInterior />
|
|
</ContainerScroll>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ConsoleInterior() {
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
{/* left sidebar category rail */}
|
|
<aside className="hidden h-full w-44 flex-col gap-1.5 border-r border-[#DEE0F0]/10 bg-[#0a0a0c]/60 p-3 md:flex md:absolute md:inset-y-0 md:left-0">
|
|
<div className="px-2 py-2 text-[9px] font-semibold uppercase tracking-[0.28em] text-[#8891C7]">
|
|
Categories
|
|
</div>
|
|
{TABS.map((t) => (
|
|
<button
|
|
key={t.label}
|
|
type="button"
|
|
className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 text-left text-xs font-semibold uppercase tracking-[0.12em] transition ${
|
|
t.active
|
|
? 'border-[#DEE0F0]/40 bg-[#273F94]/30 text-[#DEE0F0]'
|
|
: 'border-transparent text-[#BFC3E2]/80 hover:bg-white/[0.04]'
|
|
}`}
|
|
>
|
|
<t.icon className="h-3.5 w-3.5" />
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
<div className="mt-auto rounded-xl border border-[#DEE0F0]/10 bg-[#221F20]/60 p-3 text-[10px] uppercase tracking-[0.18em] text-[#BFC3E2]/70">
|
|
<span className="block text-[#DEE0F0]">YS Lootah Robotics</span>
|
|
In Tech We Innovate
|
|
</div>
|
|
</aside>
|
|
|
|
{/* main display */}
|
|
<div className="absolute inset-0 md:left-44">
|
|
{/* top breadcrumb */}
|
|
<div className="flex items-center justify-between border-b border-[#DEE0F0]/10 px-4 py-2 text-[10px] uppercase tracking-[0.22em] text-[#8891C7] md:px-6">
|
|
<span>Robots · Exclusive UAE Portfolio</span>
|
|
<span className="hidden sm:inline">11 Models · 2 Brands · Dubai</span>
|
|
</div>
|
|
|
|
{/* product grid */}
|
|
<div className="grid grid-cols-3 gap-3 p-4 md:p-6">
|
|
{SHOWROOM_ROBOTS.map((r) => (
|
|
<article
|
|
key={r.slug}
|
|
className="relative flex flex-col gap-2 overflow-hidden rounded-xl border border-[#DEE0F0]/15 bg-[#0a0a0c]/70 p-3 backdrop-blur-xl md:p-4"
|
|
>
|
|
<div
|
|
className="relative aspect-[4/5] overflow-hidden rounded-lg"
|
|
style={{
|
|
background: `radial-gradient(ellipse 70% 50% at 50% 60%, ${r.accent}22 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
|
|
}}
|
|
>
|
|
<Image
|
|
src={r.image}
|
|
alt={`${r.name} robot`}
|
|
fill
|
|
sizes="(max-width: 768px) 33vw, 240px"
|
|
className="object-contain p-2 md:p-4"
|
|
/>
|
|
<span
|
|
className="absolute left-1.5 top-1.5 rounded-full border px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-[0.2em] backdrop-blur md:left-2 md:top-2 md:px-2 md:py-0.5 md:text-[9px]"
|
|
style={{ borderColor: `${r.accent}66`, color: r.accent, background: 'rgba(10,10,12,0.7)' }}
|
|
>
|
|
{r.category}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-[#8891C7]">
|
|
Available in UAE
|
|
</div>
|
|
<div className="text-xs font-semibold text-white md:text-sm">{r.name}</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA strip */}
|
|
<div className="absolute bottom-0 left-0 right-0 flex flex-wrap items-center justify-between gap-2 border-t border-[#DEE0F0]/10 bg-[#0a0a0c]/85 px-4 py-3 backdrop-blur-xl md:px-6">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Link
|
|
href="/book-demo/"
|
|
className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-br from-[#3a55c4] via-[#273F94] to-[#1a2e6e] px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-white shadow-[0_8px_24px_rgba(39,63,148,0.45)] md:text-[11px]"
|
|
>
|
|
Book demo
|
|
<ArrowRight className="h-3 w-3" />
|
|
</Link>
|
|
<Link
|
|
href="/configure/"
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-[#DEE0F0]/30 bg-white/5 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#DEE0F0] backdrop-blur md:text-[11px]"
|
|
>
|
|
Configure solution
|
|
<ArrowRight className="h-3 w-3" />
|
|
</Link>
|
|
<Link
|
|
href="/contact/"
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-[#DEE0F0]/30 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#BFC3E2] md:text-[11px]"
|
|
>
|
|
Request UAE quotation
|
|
</Link>
|
|
</div>
|
|
<div className="hidden items-center gap-2 text-[10px] uppercase tracking-[0.22em] text-[#8891C7] md:flex">
|
|
<MapPin className="h-3 w-3" /> Dubai · UAE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|