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
@@ -71,7 +71,7 @@ function CatalogInner() {
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.5rem' }}>
|
||||
<span style={{ color: '#94908a', fontSize: '0.85rem' }}>
|
||||
<span style={{ color: '#8891C7', fontSize: '0.85rem' }}>
|
||||
{filtered.length} robot{filtered.length === 1 ? '' : 's'} found
|
||||
</span>
|
||||
{(filter.brand !== 'all' || filter.category !== 'all') && (
|
||||
@@ -81,7 +81,7 @@ function CatalogInner() {
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: '#e0c896',
|
||||
color: '#DEE0F0',
|
||||
fontSize: '0.78rem',
|
||||
letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase',
|
||||
@@ -95,9 +95,9 @@ function CatalogInner() {
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<div className="card" style={{ padding: '2rem', textAlign: 'center', color: '#cbc4b3' }}>
|
||||
<div className="card" style={{ padding: '2rem', textAlign: 'center', color: '#DEE0F0' }}>
|
||||
No robots match these filters yet. Try a different brand or category, or{' '}
|
||||
<a href="/contact/" style={{ color: '#e0c896', textDecoration: 'none' }}>contact us</a> for tailored options.
|
||||
<a href="/contact/" style={{ color: '#DEE0F0', textDecoration: 'none' }}>contact us</a> for tailored options.
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
@@ -118,7 +118,7 @@ function CatalogInner() {
|
||||
|
||||
export function CatalogClient() {
|
||||
return (
|
||||
<Suspense fallback={<div className="card" style={{ padding: '2rem', color: '#cbc4b3' }}>Loading catalog…</div>}>
|
||||
<Suspense fallback={<div className="card" style={{ padding: '2rem', color: '#DEE0F0' }}>Loading catalog…</div>}>
|
||||
<CatalogInner />
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
@@ -43,12 +43,12 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
|
||||
|
||||
<main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(3rem, 6vw, 5rem)' }}>
|
||||
<nav style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#94908a' }}>
|
||||
<Link href="/" style={{ color: '#94908a', textDecoration: 'none' }}>Home</Link>
|
||||
<nav style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8891C7' }}>
|
||||
<Link href="/" style={{ color: '#8891C7', textDecoration: 'none' }}>Home</Link>
|
||||
<span>/</span>
|
||||
<Link href="/robots/" style={{ color: '#94908a', textDecoration: 'none' }}>Robots</Link>
|
||||
<Link href="/robots/" style={{ color: '#8891C7', textDecoration: 'none' }}>Robots</Link>
|
||||
<span>/</span>
|
||||
<span style={{ color: '#cbc4b3' }}>{robot.name}</span>
|
||||
<span style={{ color: '#DEE0F0' }}>{robot.name}</span>
|
||||
</nav>
|
||||
|
||||
<section
|
||||
@@ -73,8 +73,8 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
|
||||
padding: '0.3rem 0.55rem',
|
||||
borderRadius: 999,
|
||||
background: 'rgba(5, 5, 5,0.6)',
|
||||
border: '1px solid rgba(196, 162, 101,0.2)',
|
||||
color: '#94908a',
|
||||
border: '1px solid rgba(39, 63, 148,0.2)',
|
||||
color: '#8891C7',
|
||||
fontSize: '0.62rem',
|
||||
letterSpacing: '0.2em',
|
||||
textTransform: 'uppercase',
|
||||
@@ -94,8 +94,8 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
|
||||
{robot.name}
|
||||
</span>
|
||||
</h1>
|
||||
<p style={{ margin: 0, color: '#e0c896', fontSize: '1.05rem', lineHeight: 1.5 }}>{robot.tagline}</p>
|
||||
<p style={{ margin: 0, color: '#cbc4b3', fontSize: '1rem', lineHeight: 1.7 }}>{robot.longDescription}</p>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: '1.05rem', lineHeight: 1.5 }}>{robot.tagline}</p>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: '1rem', lineHeight: 1.7 }}>{robot.longDescription}</p>
|
||||
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem' }}>
|
||||
<a className="btn btn-primary" href="#inquire">Request quotation</a>
|
||||
@@ -123,14 +123,14 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
|
||||
<Block title="Key features">
|
||||
<ul style={{ margin: 0, paddingLeft: '1.1rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||||
{robot.features.map((f) => (
|
||||
<li key={f} style={{ color: '#cbc4b3', lineHeight: 1.6 }}>{f}</li>
|
||||
<li key={f} style={{ color: '#DEE0F0', lineHeight: 1.6 }}>{f}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Block>
|
||||
<Block title="Use cases">
|
||||
<ul style={{ margin: 0, paddingLeft: '1.1rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||||
{robot.useCases.map((u) => (
|
||||
<li key={u} style={{ color: '#cbc4b3', lineHeight: 1.6 }}>{u}</li>
|
||||
<li key={u} style={{ color: '#DEE0F0', lineHeight: 1.6 }}>{u}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Block>
|
||||
@@ -156,7 +156,7 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
|
||||
Request a quotation for {robot.name}.
|
||||
</span>
|
||||
</h2>
|
||||
<p style={{ margin: 0, color: '#cbc4b3', lineHeight: 1.7 }}>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7 }}>
|
||||
Tell us about your venue, timeline, and use case. We will respond with availability, configuration options, and pricing for the UAE.
|
||||
</p>
|
||||
</div>
|
||||
@@ -166,12 +166,12 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
|
||||
<div className="card" style={{ padding: 'clamp(1.5rem, 4vw, 2.25rem)', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<span className="eyebrow">Talk to an advisor</span>
|
||||
<h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Prefer a quick conversation?</h3>
|
||||
<p style={{ margin: 0, color: '#cbc4b3', lineHeight: 1.7 }}>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7 }}>
|
||||
Call our Dubai team or message us on WhatsApp — we will share availability and demo slots for {robot.name}.
|
||||
</p>
|
||||
<a className="btn btn-ghost" href="tel:+971559482728">Call +971 55 948 2728</a>
|
||||
<a className="btn btn-outline" href="https://wa.me/971559482728" target="_blank" rel="noopener noreferrer">WhatsApp us</a>
|
||||
<a className="btn btn-ghost" href="mailto:info@yslootahtech.com">Email info@yslootahtech.com</a>
|
||||
<a className="btn btn-ghost" href="mailto:info@yslootahrobotics.com">Email info@yslootahrobotics.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function RobotsPage() {
|
||||
Robots ready to deploy across the UAE.
|
||||
</span>
|
||||
</h1>
|
||||
<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 }}>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user