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/page.tsx

@@ -12,6 +12,10 @@ import { ExclusiveAccessSection } from '@/components/robotics/ExclusiveAccessSec
 import { MarqueeStrip } from '@/components/robotics/MarqueeStrip';
 import { BentoGrid } from '@/components/robotics/BentoGrid';
 import { HowItWorks } from '@/components/robotics/HowItWorks';
+import { CompanyStory } from '@/components/robotics/CompanyStory';
+import { ServicesGrid } from '@/components/robotics/ServicesGrid';
+import { FounderSection } from '@/components/robotics/FounderSection';
+import { BuSunaidahSection } from '@/components/robotics/BuSunaidahSection';
 import { MotionSection } from '@/components/ui/MotionSection';
 import { FEATURED_ROBOTS } from '@/data/robots';
 
@@ -51,6 +55,12 @@ export default function HomePage() {
           </div>
         </MotionSection>
 
+        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="about">
+          <div className="container-wide">
+            <CompanyStory />
+          </div>
+        </MotionSection>
+
         <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="brands">
           <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
             <SectionHeading
@@ -111,6 +121,29 @@ export default function HomePage() {
           </div>
         </MotionSection>
 
+        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="services">
+          <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+            <SectionHeading
+              eyebrow="Our solutions"
+              title="Intelligent robotics across the full lifecycle."
+              description="From autonomous robotics and intelligent automation to motion programming, SDKs, and remote diagnostics — a complete robotics partner for UAE businesses."
+            />
+            <ServicesGrid />
+          </div>
+        </MotionSection>
+
+        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="leadership">
+          <div className="container-wide">
+            <FounderSection />
+          </div>
+        </MotionSection>
+
+        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="bu-sunaidah">
+          <div className="container-wide">
+            <BuSunaidahSection />
+          </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
@@ -158,7 +191,7 @@ function SectionHeading({ eyebrow, title, description }: { eyebrow: string; titl
         <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 }}>
+        <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
           {description}
         </p>
       )}