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.

src/app/about/page.tsx

@@ -5,11 +5,14 @@ import { MotionSection } from '@/components/ui/MotionSection';
 import { DemoCTA } from '@/components/robotics/DemoCTA';
 import { WhyUs } from '@/components/robotics/WhyUs';
 import { FloatingTechPanel } from '@/components/robotics/FloatingTechPanel';
+import { CompanyStory } from '@/components/robotics/CompanyStory';
+import { FounderSection } from '@/components/robotics/FounderSection';
+import { ServicesGrid } from '@/components/robotics/ServicesGrid';
 
 export const metadata: Metadata = {
   title: 'About YS Lootah Robotics — Exclusive UAE Access to Unitree & Pudu',
   description:
-    'YS Lootah Robotics holds exclusive UAE sales rights for selected Unitree and Pudu Robotics solutions — with a Dubai-based team managing sales, demo, configuration, and deployment.',
+    'YS Lootah Robotics is part of the Yousuf Saeed Lootah Investment Group — a trusted UAE robotics partner delivering AI, automation, and intelligent robotics across Dubai and the UAE.',
 };
 
 export default function AboutPage() {
@@ -20,26 +23,43 @@ export default function AboutPage() {
       <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)' }}>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', maxWidth: 820 }}>
-            <span className="eyebrow">About · Exclusive UAE Access</span>
+            <span className="eyebrow">About · YS Lootah Robotics</span>
             <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
-              <span className="text-gradient" style={{ fontWeight: 500 }}>The UAE&apos;s dedicated destination for Unitree and Pudu Robotics.</span>
+              <span className="text-gradient" style={{ fontWeight: 500 }}>In Tech We Innovate. In Trust We Lead.</span>
             </h1>
-            <p style={{ margin: 0, color: '#cbc4b3', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
-              YS Lootah Robotics is the robotics arm of the YS Lootah group — a UAE-based technology partner that holds exclusive sales rights in the UAE for selected Unitree and Pudu Robotics solutions. Our Dubai team manages sales, live demos, configuration, deployment, and ongoing service across the UAE.
-            </p>
-            <p style={{ margin: 0, color: '#94908a', fontSize: '0.92rem', lineHeight: 1.7 }}>
-              Brand names and product trademarks are property of their respective owners. Available exclusively in the UAE through YS Lootah Robotics.
+            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
+              YS Lootah Robotics is part of the Yousuf Saeed Lootah Investment Group — a trusted UAE technology and robotics partner helping businesses innovate, automate, and deploy intelligent robotic solutions. The UAE&apos;s dedicated destination for selected Unitree and Pudu Robotics solutions.
             </p>
           </div>
 
+          <MotionSection>
+            <CompanyStory />
+          </MotionSection>
+
           <MotionSection>
             <FloatingTechPanel />
           </MotionSection>
 
+          <MotionSection>
+            <FounderSection />
+          </MotionSection>
+
           <MotionSection>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
               <h2 style={{ margin: 0, fontSize: 'clamp(1.5rem, 3vw, 2.2rem)', fontWeight: 400, letterSpacing: '-0.02em' }}>
-                <span className="text-gradient" style={{ fontWeight: 500 }}>Why work with us</span>
+                <span className="text-gradient" style={{ fontWeight: 500 }}>Our solutions</span>
+              </h2>
+              <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, maxWidth: 760 }}>
+                Eleven robotics services covering autonomous deployment, integration, motion programming, cloud, analytics, and live diagnostics.
+              </p>
+              <ServicesGrid />
+            </div>
+          </MotionSection>
+
+          <MotionSection>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+              <h2 style={{ margin: 0, fontSize: 'clamp(1.5rem, 3vw, 2.2rem)', fontWeight: 400, letterSpacing: '-0.02em' }}>
+                <span className="text-gradient" style={{ fontWeight: 500 }}>Why businesses choose us</span>
               </h2>
               <WhyUs />
             </div>