feat: add robotics showcase components and UI enhancements
- Introduced FounderSection component to highlight leadership and vision. - Created ServicesGrid component to display various robotics services offered. - Developed RoboticsScrollShowcase for showcasing robots with interactive elements. - Implemented RoboticsSplineShowcase featuring a 3D Spline scene for enhanced user experience. - Added reusable Card component for consistent styling across sections. - Integrated ContainerScroll for animated scrolling effects in the showcase. - Built SplineScene component for lazy loading Spline 3D scenes. - Added Spotlight component for interactive hover effects. - Created utility function for class name merging to streamline styling.
This commit is contained in:
Najjar\NajjarV02
@@ -12,9 +12,9 @@ export function ExclusiveAccessSection() {
|
||||
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)',
|
||||
'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 +23,7 @@ export function ExclusiveAccessSection() {
|
||||
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)',
|
||||
'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%)',
|
||||
@@ -41,16 +41,16 @@ export function ExclusiveAccessSection() {
|
||||
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',
|
||||
border: '1px solid rgba(39, 63, 148,0.4)',
|
||||
background: 'rgba(39, 63, 148,0.08)',
|
||||
color: '#DEE0F0',
|
||||
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)' }} />
|
||||
<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>
|
||||
|
||||
@@ -60,7 +60,7 @@ export function ExclusiveAccessSection() {
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p style={{ margin: 0, color: '#cbc4b3', 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 }}>
|
||||
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>
|
||||
|
||||
@@ -71,8 +71,8 @@ export function ExclusiveAccessSection() {
|
||||
'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">
|
||||
<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">
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
{b}
|
||||
@@ -87,8 +87,8 @@ export function ExclusiveAccessSection() {
|
||||
</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" />
|
||||
<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" />
|
||||
</div>
|
||||
@@ -108,9 +108,9 @@ function BrandTile({ name, sub, href, accent }: { name: string; sub: string; hre
|
||||
gap: '0.6rem',
|
||||
padding: '1.25rem',
|
||||
borderRadius: 16,
|
||||
background: `linear-gradient(135deg, rgba(20,17,11,0.85), rgba(5,5,5,0.95))`,
|
||||
background: `linear-gradient(135deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))`,
|
||||
border: `1px solid ${accent}44`,
|
||||
color: '#f5f1e8',
|
||||
color: '#FBFBFD',
|
||||
textDecoration: 'none',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
@@ -131,7 +131,7 @@ function BrandTile({ name, sub, href, accent }: { name: string; sub: string; hre
|
||||
}}
|
||||
/>
|
||||
<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.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>
|
||||
@@ -145,8 +145,8 @@ function Stat({ value, label }: { value: string; label: string }) {
|
||||
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)',
|
||||
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',
|
||||
flexDirection: 'column',
|
||||
gap: '0.4rem',
|
||||
@@ -157,7 +157,7 @@ function Stat({ value, label }: { value: string; label: string }) {
|
||||
<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>
|
||||
<span style={{ fontSize: '0.7rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase' }}>{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user