873026a4a9
- Convert site from royal-blue theme to black/white monochrome (desaturate all blue-hued colors; keep WhatsApp green and error red) - Swap blue circular brand logo for mono YS mark; regenerate favicon/PWA icons - Add 6 Pudu robots (CC1 Pro, MT1 Max, MT1 Vac, T600, T600 Underride, BG1 Pro) - Fix favicon.ico to RGBA (Next 16 Turbopack decode) and Stripe apiVersion type Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
type Stat = { label: string; value: string; sub?: string };
|
|
|
|
const STATS: Stat[] = [
|
|
{ label: 'Sales territory', value: 'UAE', sub: 'YS Lootah Robotics' },
|
|
{ label: 'Premier brands', value: '2', sub: 'Unitree · Pudu Robotics' },
|
|
{ label: 'Robot models', value: '11+', sub: 'Humanoid, quadruped, service, delivery' },
|
|
{ label: 'Based in', value: 'Dubai', sub: 'Showroom · demo · deployment' },
|
|
];
|
|
|
|
export function FloatingTechPanel() {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gap: '1rem',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(min(180px, 100%), 1fr))',
|
|
}}
|
|
>
|
|
{STATS.map((s, i) => (
|
|
<div
|
|
key={s.label}
|
|
className="card"
|
|
style={{
|
|
padding: '1.5rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.4rem',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<span
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-1rem',
|
|
right: '-1rem',
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: '50%',
|
|
background: `radial-gradient(circle, ${['#e7e7e7', '#5e5e5e', '#a8a8a8', '#e7e7e7'][i % 4]}33, transparent 70%)`,
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
<span style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#a8a8a8' }}>{s.label}</span>
|
|
<span className="text-gradient-accent" style={{ fontSize: 'clamp(1.7rem, 3vw, 2.2rem)', fontWeight: 700, letterSpacing: '-0.02em' }}>
|
|
{s.value}
|
|
</span>
|
|
{s.sub && <span style={{ color: '#e7e7e7', fontSize: '0.82rem', lineHeight: 1.5 }}>{s.sub}</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|