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
+155
-29
@@ -1,41 +1,167 @@
|
||||
"use client";
|
||||
import type { Metadata } from 'next';
|
||||
import { Navbar } from '@/components/Navbar';
|
||||
import { FooterAndContact } from '@/components/FooterAndContact';
|
||||
import { Hero3DRobotics } from '@/components/robotics/Hero3DRobotics';
|
||||
import { BrandShowcase } from '@/components/robotics/BrandShowcase';
|
||||
import { RobotCategoryGrid } from '@/components/robotics/RobotCategoryGrid';
|
||||
import { RobotProductCard } from '@/components/robotics/RobotProductCard';
|
||||
import { IndustryUseCases } from '@/components/robotics/IndustryUseCases';
|
||||
import { DemoCTA } from '@/components/robotics/DemoCTA';
|
||||
import { ConfigureCTA } from '@/components/robotics/ConfigureCTA';
|
||||
import { ExclusiveAccessSection } from '@/components/robotics/ExclusiveAccessSection';
|
||||
import { MarqueeStrip } from '@/components/robotics/MarqueeStrip';
|
||||
import { BentoGrid } from '@/components/robotics/BentoGrid';
|
||||
import { HowItWorks } from '@/components/robotics/HowItWorks';
|
||||
import { MotionSection } from '@/components/ui/MotionSection';
|
||||
import { FEATURED_ROBOTS } from '@/data/robots';
|
||||
|
||||
import { useRef } from "react";
|
||||
import { ClientOnly } from "@/components/ClientOnly";
|
||||
import { ScrollScene } from "@/components/ScrollScene";
|
||||
import { ScrollOverlays } from "@/components/ScrollOverlays";
|
||||
import { FooterAndContact } from "@/components/FooterAndContact";
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
export const metadata: Metadata = {
|
||||
title: 'YS Lootah Robotics — Exclusive UAE Access to Unitree & Pudu Robotics',
|
||||
description:
|
||||
'YS Lootah Robotics is the exclusive UAE sales destination for selected Unitree and Pudu Robotics solutions. Explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.',
|
||||
keywords: [
|
||||
'YS Lootah Robotics',
|
||||
'robotics Dubai',
|
||||
'robotics UAE',
|
||||
'exclusive robotics UAE',
|
||||
'Unitree robots UAE',
|
||||
'Pudu Robotics UAE',
|
||||
'humanoid robots Dubai',
|
||||
'quadruped robots UAE',
|
||||
'service robots UAE',
|
||||
'robotics showroom Dubai',
|
||||
'robotics configuration UAE',
|
||||
'robot sales and demo UAE',
|
||||
],
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
|
||||
{/* Fixed 3D scene behind everything */}
|
||||
<ClientOnly>
|
||||
<ScrollScene scrollContainerRef={scrollContainerRef} />
|
||||
</ClientOnly>
|
||||
|
||||
{/* Text overlays that fade based on scroll */}
|
||||
<ScrollOverlays />
|
||||
<main>
|
||||
<Hero3DRobotics />
|
||||
|
||||
{/* Scroll spacer with snap sections -- 7 sections for the landing */}
|
||||
<div ref={scrollContainerRef} style={{ position: "relative", zIndex: 1, pointerEvents: "none" }}>
|
||||
<div className="snap-section" />
|
||||
<div className="snap-section" />
|
||||
<div className="snap-section" />
|
||||
<div className="snap-section" />
|
||||
<div className="snap-section" />
|
||||
<div className="snap-section" />
|
||||
<div className="snap-section" />
|
||||
</div>
|
||||
<MarqueeStrip />
|
||||
|
||||
<div className="snap-section" style={{ scrollSnapAlign: 'start' }}>
|
||||
<FooterAndContact />
|
||||
</div>
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="exclusive">
|
||||
<div className="container-wide">
|
||||
<ExclusiveAccessSection />
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="brands">
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||
<SectionHeading
|
||||
eyebrow="Featured robotics brands"
|
||||
title="Unitree & Pudu — available exclusively in the UAE."
|
||||
description="We hold exclusive UAE sales rights for selected Unitree and Pudu Robotics solutions — curated for proven performance in the field and full local support across Dubai."
|
||||
/>
|
||||
<BrandShowcase />
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="why">
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||
<SectionHeading
|
||||
eyebrow="Why YS Lootah Robotics"
|
||||
title="A premium robotics partner — not a marketplace."
|
||||
description="From inquiry to live deployment, we manage your robotics program end to end with a UAE-based team and exclusive access to Unitree and Pudu portfolios."
|
||||
/>
|
||||
<BentoGrid />
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="categories">
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||
<SectionHeading
|
||||
eyebrow="Robot categories"
|
||||
title="From quadruped patrol to humanoid concierge."
|
||||
description="Find the right robot for your business — humanoid for events and education, quadruped for inspection and security, service and delivery for hospitality."
|
||||
/>
|
||||
<RobotCategoryGrid />
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="featured">
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||
<SectionHeading
|
||||
eyebrow="Featured robots"
|
||||
title="Available exclusively in the UAE through YS Lootah Robotics."
|
||||
description="A live snapshot of robots ready to demo at our Dubai showroom or deploy at your venue. Request a UAE quotation or book a live demo."
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gap: '1.25rem',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
|
||||
}}
|
||||
>
|
||||
{FEATURED_ROBOTS.map((r, idx) => (
|
||||
<RobotProductCard key={r.id} robot={r} priority={idx === 0} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(2rem, 5vw, 3.5rem) 0' }}>
|
||||
<div className="container-wide">
|
||||
<ConfigureCTA />
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="how-it-works">
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||
<SectionHeading
|
||||
eyebrow="How we work"
|
||||
title="From inquiry to live deployment."
|
||||
description="Three steps from your first message to a robot running in your venue — fully supported by our Dubai team."
|
||||
/>
|
||||
<HowItWorks />
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="industries">
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||
<SectionHeading
|
||||
eyebrow="Industries served"
|
||||
title="Robotics solutions for UAE businesses."
|
||||
description="From restaurants to security operators to government innovation programs — we deliver robotics fits for the venue."
|
||||
/>
|
||||
<IndustryUseCases limit={8} />
|
||||
</div>
|
||||
</MotionSection>
|
||||
|
||||
<MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem)' }}>
|
||||
<div className="container-wide">
|
||||
<DemoCTA
|
||||
title="Talk to our robotics team."
|
||||
description="Book a live demo at our Dubai showroom or request a UAE quotation. Our local team responds within one business day."
|
||||
primaryLabel="Book a live demo"
|
||||
secondaryLabel="Talk to our team"
|
||||
/>
|
||||
</div>
|
||||
</MotionSection>
|
||||
</main>
|
||||
|
||||
<FooterAndContact />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeading({ eyebrow, title, description }: { eyebrow: string; title: string; description?: string }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
|
||||
<span className="eyebrow">{eyebrow}</span>
|
||||
<h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.5vw, 3rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
|
||||
<span className="text-gradient" style={{ fontWeight: 500 }}>{title}</span>
|
||||
</h2>
|
||||
{description && (
|
||||
<p style={{ margin: 0, color: '#cbc4b3', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user