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.
2026-05-20 17:22:47 +04:00
parent 2eac53dac3
commit 92cf4aba3b
87 changed files with 6887 additions and 1430 deletions
@@ -0,0 +1,56 @@
+import type { Metadata } from 'next';
+import { Navbar } from '@/components/Navbar';
+import { FooterAndContact } from '@/components/FooterAndContact';
+import { InquiryForm } from '@/components/robotics/InquiryForm';
+
+export const metadata: Metadata = {
+  title: 'Book a Robotics Demo in Dubai — YS Lootah Robotics',
+  description:
+    'Book a live robot demo at our Dubai showroom or at your venue. See selected Unitree and Pudu Robotics solutions in action — available exclusively in the UAE through YS Lootah Robotics.',
+};
+
+export default function BookDemoPage() {
+  return (
+    <>
+      <Navbar />
+
+      <main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
+        <div className="container-wide" style={{ display: 'grid', gap: 'clamp(2rem, 5vw, 3rem)', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', alignItems: 'flex-start' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+            <span className="eyebrow">Book a live demo · Dubai showroom</span>
+            <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.2rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
+              <span className="text-gradient" style={{ fontWeight: 500 }}>See the future in person.</span>
+            </h1>
+            <p style={{ margin: 0, color: '#cbc4b3', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
+              Book a live robot demo at our Dubai showroom or schedule an on-site demo at your venue. Our team will tailor the demo to your use case before you arrive.
+            </p>
+
+            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+              {[
+                'Choose a humanoid, quadruped, or service robot to see live',
+                'Designed around your industry — restaurant, mall, hotel, security, etc.',
+                'Walk through configuration and deployment options',
+                'Get UAE-specific pricing and availability',
+              ].map((b) => (
+                <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#cbc4b3', lineHeight: 1.55 }}>
+                  <span style={{ width: 8, height: 8, marginTop: 8, borderRadius: 999, background: '#e0c896', flex: 'none' }} />
+                  {b}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="card" style={{ padding: 'clamp(1.5rem, 4vw, 2.5rem)' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '1.5rem' }}>
+              <span className="eyebrow">Demo request</span>
+              <h2 style={{ margin: 0, fontSize: '1.4rem', fontWeight: 500 }}>Tell us when and where</h2>
+            </div>
+            <InquiryForm intent="demo" />
+          </div>
+        </div>
+      </main>
+
+      <FooterAndContact />
+    </>
+  );
+}