feat: add robotics components and data structures
- Introduced RobotProductCard component for displaying robot details. - Added WhyUs component highlighting key reasons for choosing our robotics solutions. - Implemented CursorSpotlight for enhanced user interaction. - Created GlassPanel for a stylish UI element. - Developed MotionSection for animated section visibility. - Added PremiumButton for versatile button options. - Established data structures for industries and robots, including detailed specifications and use cases. - Included utility functions for retrieving robots by slug and category.
This commit is contained in:
Najjar\NajjarV02
@@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { PremiumButton } from '@/components/ui/PremiumButton';
|
||||
|
||||
export function ExclusiveAccessSection() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderRadius: '2rem',
|
||||
padding: 'clamp(2rem, 5vw, 4rem)',
|
||||
overflow: 'hidden',
|
||||
background:
|
||||
'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(224,200,150,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(139,111,71,0.22), transparent 60%), linear-gradient(135deg, rgba(20,17,11,0.92), rgba(5,5,5,0.97))',
|
||||
border: '1px solid rgba(196,162,101,0.32)',
|
||||
boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,240,200,0.06)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background:
|
||||
'linear-gradient(rgba(196,162,101,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(196,162,101,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%)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
<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' }}>
|
||||
<span
|
||||
style={{
|
||||
alignSelf: 'flex-start',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.6rem',
|
||||
padding: '0.5rem 0.9rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(196,162,101,0.4)',
|
||||
background: 'rgba(196,162,101,0.08)',
|
||||
color: '#e0c896',
|
||||
fontSize: '0.7rem',
|
||||
letterSpacing: '0.24em',
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
<span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#e0c896', boxShadow: '0 0 10px rgba(224,200,150,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' }}>
|
||||
<span className="text-gradient" style={{ fontWeight: 500 }}>
|
||||
The UAE's dedicated destination for selected Unitree and Pudu Robotics solutions.
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p style={{ margin: 0, color: '#cbc4b3', 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>
|
||||
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||||
{[
|
||||
'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.',
|
||||
'End-to-end procurement, training, and ongoing support.',
|
||||
].map((b) => (
|
||||
<li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#f5f1e8', fontSize: '0.95rem', lineHeight: 1.55 }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#e0c896" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 3 }} aria-hidden="true">
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
{b}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', 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="#e0c896" />
|
||||
<BrandTile name="Pudu Robotics" sub="Service · Delivery · Cleaning" href="/brands/#pudu" accent="#8b6f47" />
|
||||
<Stat value="UAE" label="Exclusive sales territory" />
|
||||
<Stat value="Dubai" label="Showroom & demo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BrandTile({ name, sub, href, accent }: { name: string; sub: string; href: string; accent: string }) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
gap: '0.6rem',
|
||||
padding: '1.25rem',
|
||||
borderRadius: 16,
|
||||
background: `linear-gradient(135deg, rgba(20,17,11,0.85), rgba(5,5,5,0.95))`,
|
||||
border: `1px solid ${accent}44`,
|
||||
color: '#f5f1e8',
|
||||
textDecoration: 'none',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
minHeight: 130,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-1rem',
|
||||
right: '-1rem',
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${accent}33, transparent 70%)`,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontSize: '1.05rem', fontWeight: 600, letterSpacing: '-0.01em' }}>{name}</span>
|
||||
<span style={{ fontSize: '0.72rem', color: '#94908a', 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>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({ value, label }: { value: string; label: string }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: '1.25rem',
|
||||
borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, rgba(20,17,11,0.7), rgba(5,5,5,0.92))',
|
||||
border: '1px solid rgba(196,162,101,0.22)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.4rem',
|
||||
minHeight: 130,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<span className="text-gradient-accent" style={{ fontSize: 'clamp(1.5rem, 2.6vw, 1.9rem)', fontWeight: 700, letterSpacing: '-0.02em' }}>
|
||||
{value}
|
||||
</span>
|
||||
<span style={{ fontSize: '0.7rem', color: '#94908a', letterSpacing: '0.22em', textTransform: 'uppercase' }}>{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user