From d7c343ac7deee3dd418f0c3270460b3c290b51aa Mon Sep 17 00:00:00 2001
From: "Najjar\\NajjarV02" <mglnaj6>
Date: Wed, 20 May 2026 17:56:07 +0400
Subject: [PATCH] refactor: update Hero3DRobotics and RoboticsSplineShowcase
 components for improved styling and layout

- Adjusted padding, opacity, and transform properties for robot images in Hero3DRobotics.
- Updated sizes for images to enhance responsiveness.
- Modified floor reflection styles for better visual consistency.
- Refactored RoboticsSplineShowcase to use inline styles for layout and design consistency.
- Enhanced text styles and button designs for better user experience.
- Improved grid layout for better responsiveness across different screen sizes.
---
 src/app/robots/page.tsx                       |  28 +-
 src/components/robotics/CompanyStory.tsx      | 413 ++++++++++++++++--
 .../robotics/ExclusiveAccessSection.tsx       | 383 +++++++++++++---
 src/components/robotics/Hero3DRobotics.tsx    |  36 +-
 .../sections/robotics-spline-showcase.tsx     | 322 ++++++++++++--
 5 files changed, 1012 insertions(+), 170 deletions(-)

diff --git a/src/app/robots/page.tsx b/src/app/robots/page.tsx
index ff6e8ab..e0410fe 100644
--- a/src/app/robots/page.tsx
+++ b/src/app/robots/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Navbar } from '@/components/Navbar';
 import { FooterAndContact } from '@/components/FooterAndContact';
 import { CatalogClient } from './CatalogClient';
+import { RoboticsSplineShowcase } from '@/components/sections/robotics-spline-showcase';
 import { ROBOTS } from '@/data/robots';
 
 export const metadata: Metadata = {
@@ -14,17 +15,30 @@ export default function RobotsPage() {
   return (
     <>
       <Navbar />
-      <main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
-        <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
+      <main>
+        <div style={{ paddingTop: 'clamp(5rem, 8vw, 7rem)' }}>
+          <RoboticsSplineShowcase />
+        </div>
+
+        <div
+          className="container-wide"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2.5rem',
+            paddingTop: 'clamp(3rem, 6vw, 5rem)',
+            paddingBottom: 'clamp(4rem, 8vw, 6rem)',
+          }}
+        >
           <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
-            <span className="eyebrow">Robot Catalog · Dubai · UAE</span>
-            <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
+            <span className="eyebrow">Catalog · Filter & Browse</span>
+            <h2 style={{ margin: 0, fontSize: 'clamp(1.6rem, 3.6vw, 2.4rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
               <span className="text-gradient" style={{ fontWeight: 500 }}>
-                Robots ready to deploy across the UAE.
+                {ROBOTS.length}+ models across the UAE portfolio.
               </span>
-            </h1>
+            </h2>
             <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.
+              Filter by brand or category, then request a UAE quotation or book a live demo at our Dubai showroom.
             </p>
           </div>
 
diff --git a/src/components/robotics/CompanyStory.tsx b/src/components/robotics/CompanyStory.tsx
index 6b66873..6199d4c 100644
--- a/src/components/robotics/CompanyStory.tsx
+++ b/src/components/robotics/CompanyStory.tsx
@@ -1,61 +1,394 @@
 'use client';
 
-const PILLARS = [
-  { title: 'Artificial intelligence', body: 'AI applications tailored for UAE government and private sector clients.' },
-  { title: 'Robotics', body: 'Humanoid, quadruped, service, and delivery robotics deployed across Dubai and the UAE.' },
-  { title: 'Digital transformation', body: 'Automation systems and smart projects that modernize operations end to end.' },
-  { title: 'Training & enablement', body: 'Coding and robotics training programs that prepare the next generation of talent.' },
+import { Brain, Bot, Workflow, GraduationCap, Building2, BadgeCheck } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+type Pillar = {
+  num: string;
+  title: string;
+  body: string;
+  Icon: LucideIcon;
+  accent: string;
+};
+
+const PILLARS: Pillar[] = [
+  {
+    num: '01',
+    title: 'Artificial Intelligence',
+    body: 'AI applications tailored for UAE government and private sector.',
+    Icon: Brain,
+    accent: '#DEE0F0',
+  },
+  {
+    num: '02',
+    title: 'Robotics Deployment',
+    body: 'Humanoid, quadruped, service, and delivery robots across the UAE.',
+    Icon: Bot,
+    accent: '#3a55c4',
+  },
+  {
+    num: '03',
+    title: 'Digital Transformation',
+    body: 'Automation systems and smart projects that modernize operations.',
+    Icon: Workflow,
+    accent: '#BFC3E2',
+  },
+  {
+    num: '04',
+    title: 'Training & Enablement',
+    body: 'Coding and robotics programs preparing the next generation of UAE talent.',
+    Icon: GraduationCap,
+    accent: '#8891C7',
+  },
 ];
 
 export function CompanyStory() {
   return (
     <div
       style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
-        gap: 'clamp(2rem, 5vw, 3rem)',
-        alignItems: 'flex-start',
+        position: 'relative',
+        borderRadius: '2rem',
+        padding: 'clamp(1.75rem, 4vw, 3rem)',
+        overflow: 'hidden',
+        background:
+          'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(58,85,196,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(222,224,240,0.10), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.94), rgba(5,5,5,0.98))',
+        border: '1px solid rgba(222,224,240,0.12)',
+        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
       }}
     >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-        <span className="eyebrow">About YS Lootah Robotics</span>
-        <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.03em' }}>
-          <span className="text-gradient" style={{ fontWeight: 500 }}>
-            A trusted UAE technology and robotics partner.
-          </span>
-        </h2>
-        <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
-          YS Lootah Robotics is part of the <strong style={{ color: '#DEE0F0' }}>Yousuf Saeed Lootah Investment Group</strong>. We help organizations innovate, automate, and deploy intelligent robotic solutions across artificial intelligence, robotics, digital transformation, automation systems, and smart projects — for government and private sector clients alike.
-        </p>
-        <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
-          Beyond hardware, we also run coding and robotics training programs that prepare the UAE&apos;s next generation of talent for an automated future.
-        </p>
-        <p style={{ margin: 0, color: '#8891C7', fontSize: '0.82rem', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>
-          In Tech We Innovate · In Trust We Lead
-        </p>
+      {/* blueprint grid background */}
+      <div
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'linear-gradient(rgba(191,195,226,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191,195,226,0.06) 1px, transparent 1px)',
+          backgroundSize: '36px 36px',
+          maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
+          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* subtle YS watermark */}
+      <div
+        aria-hidden
+        style={{
+          position: 'absolute',
+          top: '8%',
+          right: '6%',
+          fontSize: 'clamp(8rem, 18vw, 14rem)',
+          fontWeight: 800,
+          color: 'transparent',
+          WebkitTextStroke: '1px rgba(222,224,240,0.06)',
+          letterSpacing: '-0.06em',
+          lineHeight: 1,
+          pointerEvents: 'none',
+          userSelect: 'none',
+        }}
+      >
+        YS
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(180px, 100%), 1fr))', gap: '1rem' }}>
-        {PILLARS.map((p, i) => (
-          <div
-            key={p.title}
-            className="card"
+      <div
+        className="cs-grid"
+        style={{
+          position: 'relative',
+          display: 'grid',
+          gap: 'clamp(1.5rem, 3.5vw, 2.5rem)',
+          alignItems: 'stretch',
+        }}
+      >
+        {/* Left — narrative */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
+          <span className="eyebrow">About YS Lootah Robotics</span>
+
+          <h2
             style={{
-              padding: '1.5rem',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.5rem',
-              minHeight: 160,
+              margin: 0,
+              fontSize: 'clamp(1.7rem, 4vw, 2.6rem)',
+              fontWeight: 300,
+              lineHeight: 1.1,
+              letterSpacing: '-0.03em',
             }}
           >
-            <span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7', fontWeight: 700 }}>
-              0{i + 1}
+            <span className="text-gradient" style={{ fontWeight: 500 }}>
+              A trusted UAE technology and robotics partner.
             </span>
-            <h3 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 600, color: '#FBFBFD' }}>{p.title}</h3>
-            <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.55, fontSize: '0.88rem' }}>{p.body}</p>
+          </h2>
+
+          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.7vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
+            YS Lootah Robotics is part of the{' '}
+            <span style={{ color: '#FBFBFD', fontWeight: 600 }}>Yousuf Saeed Lootah Investment Group</span>.
+            We deliver AI, robotics, digital transformation, smart projects, and training programs to government and private sector clients across the UAE.
+          </p>
+
+          {/* Group credibility row */}
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '0.25rem' }}>
+            <CredibilityBadge Icon={Building2} text="Yousuf Saeed Lootah Investment Group" />
+            <CredibilityBadge Icon={BadgeCheck} text="Trusted UAE Partner" />
           </div>
-        ))}
+
+          {/* Pull-quote card */}
+          <div
+            style={{
+              marginTop: '0.5rem',
+              padding: '1.25rem 1.25rem 1.25rem 1.5rem',
+              borderRadius: 18,
+              background:
+                'linear-gradient(135deg, rgba(39,63,148,0.18) 0%, rgba(28,27,33,0.7) 60%)',
+              border: '1px solid rgba(222,224,240,0.16)',
+              position: 'relative',
+              overflow: 'hidden',
+            }}
+          >
+            <span
+              aria-hidden
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                bottom: 0,
+                width: 3,
+                background: 'linear-gradient(180deg, #DEE0F0, #3a55c4)',
+                boxShadow: '0 0 16px rgba(58,85,196,0.7)',
+              }}
+            />
+            <p
+              style={{
+                margin: 0,
+                fontSize: 'clamp(1rem, 1.8vw, 1.15rem)',
+                fontStyle: 'italic',
+                lineHeight: 1.5,
+                color: '#FBFBFD',
+                fontWeight: 300,
+              }}
+            >
+              In Tech We Innovate.
+              <br />
+              <span className="text-gradient-accent" style={{ fontWeight: 600, fontStyle: 'normal' }}>
+                In Trust We Lead.
+              </span>
+            </p>
+            <p
+              style={{
+                margin: '0.6rem 0 0',
+                fontSize: '0.65rem',
+                letterSpacing: '0.28em',
+                textTransform: 'uppercase',
+                color: '#8891C7',
+                fontWeight: 700,
+              }}
+            >
+              YS Lootah Robotics · Dubai · UAE
+            </p>
+          </div>
+        </div>
+
+        {/* Right — capability modules */}
+        <div
+          style={{
+            position: 'relative',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: '0.875rem',
+            minWidth: 0,
+          }}
+        >
+          {/* connector lines */}
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '8%',
+              right: '8%',
+              height: 1,
+              background:
+                'linear-gradient(90deg, transparent, rgba(58,85,196,0.45), rgba(222,224,240,0.45), transparent)',
+              filter: 'blur(0.3px)',
+              pointerEvents: 'none',
+            }}
+          />
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              left: '50%',
+              top: '8%',
+              bottom: '8%',
+              width: 1,
+              background:
+                'linear-gradient(180deg, transparent, rgba(222,224,240,0.4), rgba(58,85,196,0.5), transparent)',
+              filter: 'blur(0.3px)',
+              pointerEvents: 'none',
+            }}
+          />
+
+          {PILLARS.map((p, i) => (
+            <CapabilityTile key={p.num} pillar={p} offset={i % 2 === 1 ? 'down' : 'up'} />
+          ))}
+        </div>
       </div>
+
+      <style jsx>{`
+        .cs-grid {
+          grid-template-columns: 1fr;
+        }
+        @media (min-width: 1024px) {
+          .cs-grid {
+            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+          }
+        }
+      `}</style>
     </div>
   );
 }
+
+function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'down' }) {
+  const { num, title, body, Icon, accent } = pillar;
+  return (
+    <article
+      className="cap-tile"
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem',
+        padding: '1.25rem',
+        borderRadius: 18,
+        background:
+          'linear-gradient(135deg, rgba(28,27,33,0.78), rgba(8,8,10,0.94))',
+        border: '1px solid rgba(222,224,240,0.10)',
+        color: '#FBFBFD',
+        overflow: 'hidden',
+        minHeight: 200,
+        boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+        transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease',
+        transform: offset === 'down' ? 'translateY(8px)' : 'translateY(0)',
+      }}
+    >
+      {/* gradient border ring */}
+      <div
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 0,
+          borderRadius: 18,
+          padding: 1,
+          background: `linear-gradient(135deg, ${accent}55, transparent 50%, ${accent}33)`,
+          WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+          WebkitMaskComposite: 'xor',
+          maskComposite: 'exclude',
+          pointerEvents: 'none',
+        }}
+      />
+      {/* hover glow */}
+      <span
+        className="cap-tile-glow"
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: '-20%',
+          background: `radial-gradient(circle at 50% 0%, ${accent}33, transparent 60%)`,
+          opacity: 0,
+          transition: 'opacity 0.4s ease',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span
+          style={{
+            width: 42,
+            height: 42,
+            borderRadius: 12,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: `${accent}1A`,
+            border: `1px solid ${accent}55`,
+            boxShadow: `0 0 18px ${accent}33`,
+          }}
+        >
+          <Icon size={20} style={{ color: accent }} />
+        </span>
+        <span
+          style={{
+            fontSize: '0.7rem',
+            fontWeight: 800,
+            letterSpacing: '0.18em',
+            color: '#8891C7',
+            padding: '0.25rem 0.55rem',
+            borderRadius: 999,
+            border: '1px solid rgba(136,145,199,0.3)',
+            background: 'rgba(14,13,18,0.6)',
+          }}
+        >
+          {num}
+        </span>
+      </div>
+
+      <h3
+        style={{
+          margin: 0,
+          fontSize: 'clamp(1.05rem, 1.8vw, 1.2rem)',
+          fontWeight: 600,
+          letterSpacing: '-0.01em',
+          lineHeight: 1.2,
+          position: 'relative',
+        }}
+      >
+        {title}
+      </h3>
+
+      <p
+        style={{
+          margin: 0,
+          fontSize: '0.88rem',
+          lineHeight: 1.55,
+          color: '#BFC3E2',
+          position: 'relative',
+        }}
+      >
+        {body}
+      </p>
+
+      <style jsx>{`
+        .cap-tile:hover {
+          transform: translateY(${offset === 'down' ? '2px' : '-6px'});
+          border-color: ${accent}66;
+          box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7), 0 0 30px ${accent}33;
+        }
+        .cap-tile:hover .cap-tile-glow {
+          opacity: 1;
+        }
+      `}</style>
+    </article>
+  );
+}
+
+function CredibilityBadge({ Icon, text }: { Icon: LucideIcon; text: string }) {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        padding: '0.45rem 0.8rem',
+        borderRadius: 999,
+        background: 'rgba(14,13,18,0.7)',
+        border: '1px solid rgba(222,224,240,0.18)',
+        color: '#DEE0F0',
+        fontSize: '0.7rem',
+        fontWeight: 700,
+        letterSpacing: '0.16em',
+        textTransform: 'uppercase',
+      }}
+    >
+      <Icon size={13} style={{ color: '#DEE0F0' }} />
+      {text}
+    </span>
+  );
+}
diff --git a/src/components/robotics/ExclusiveAccessSection.tsx b/src/components/robotics/ExclusiveAccessSection.tsx
index 63369b3..615bb9e 100644
--- a/src/components/robotics/ExclusiveAccessSection.tsx
+++ b/src/components/robotics/ExclusiveAccessSection.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { PremiumButton } from '@/components/ui/PremiumButton';
 
@@ -9,12 +10,12 @@ export function ExclusiveAccessSection() {
       style={{
         position: 'relative',
         borderRadius: '2rem',
-        padding: 'clamp(2rem, 5vw, 4rem)',
+        padding: 'clamp(1.75rem, 4vw, 3rem)',
         overflow: 'hidden',
         background:
-          'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(222, 224, 240,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(136, 145, 199,0.22), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.92), rgba(5,5,5,0.97))',
-        border: '1px solid rgba(39, 63, 148,0.32)',
-        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222, 224, 240,0.06)',
+          'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(222,224,240,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(136,145,199,0.22), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.92), rgba(5,5,5,0.97))',
+        border: '1px solid rgba(39,63,148,0.32)',
+        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
       }}
     >
       <div
@@ -23,7 +24,7 @@ export function ExclusiveAccessSection() {
           position: 'absolute',
           inset: 0,
           background:
-            'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
+            'linear-gradient(rgba(39,63,148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39,63,148,0.05) 1px, transparent 1px)',
           backgroundSize: '48px 48px',
           maskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
           WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
@@ -31,8 +32,12 @@ export function ExclusiveAccessSection() {
         }}
       />
 
-      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 'clamp(2rem, 4vw, 3rem)', alignItems: 'center' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+      <div
+        className="exa-grid"
+        style={{ position: 'relative', display: 'grid', gap: 'clamp(1.5rem, 3.5vw, 2.5rem)', alignItems: 'stretch' }}
+      >
+        {/* Left — copy */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
           <span
             style={{
               alignSelf: 'flex-start',
@@ -41,8 +46,8 @@ export function ExclusiveAccessSection() {
               gap: '0.6rem',
               padding: '0.5rem 0.9rem',
               borderRadius: 999,
-              border: '1px solid rgba(39, 63, 148,0.4)',
-              background: 'rgba(39, 63, 148,0.08)',
+              border: '1px solid rgba(39,63,148,0.45)',
+              background: 'rgba(39,63,148,0.10)',
               color: '#DEE0F0',
               fontSize: '0.7rem',
               letterSpacing: '0.24em',
@@ -50,29 +55,29 @@ export function ExclusiveAccessSection() {
               fontWeight: 700,
             }}
           >
-            <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 10px rgba(222, 224, 240,0.8)' }} />
+            <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 10px rgba(222,224,240,0.8)' }} />
             Exclusive UAE Access
           </span>
 
-          <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
+          <h2 style={{ margin: 0, fontSize: 'clamp(1.7rem, 4vw, 2.6rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
             <span className="text-gradient" style={{ fontWeight: 500 }}>
-              The UAE&apos;s dedicated destination for selected Unitree and Pudu Robotics solutions.
+              The UAE&apos;s dedicated destination for Unitree and Pudu Robotics.
             </span>
           </h2>
 
-          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
-            YS Lootah Robotics holds exclusive sales rights in the UAE for selected Unitree and Pudu Robotics solutions. We deliver advanced robots to businesses, venues, and innovators across Dubai and the UAE — from inquiry to live deployment.
+          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
+            Selected solutions delivered to UAE businesses, venues, and innovators — from inquiry to live deployment, fully supported in Dubai.
           </p>
 
-          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
             {[
-              'Available exclusively in the UAE through YS Lootah Robotics.',
-              'Local Dubai team handles sales, demos, configuration, and deployment.',
-              'Curated portfolio across humanoid, quadruped, service, and delivery robots.',
+              'Exclusive UAE sales territory.',
+              'Local Dubai sales, demo, and deployment team.',
+              'Humanoid, quadruped, service, delivery, cleaning robots.',
               'End-to-end procurement, training, and ongoing support.',
             ].map((b) => (
-              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.95rem', lineHeight: 1.55 }}>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 3 }} aria-hidden="true">
+              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.92rem', lineHeight: 1.5 }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
                   <path d="M20 6 9 17l-5-5" />
                 </svg>
                 {b}
@@ -80,84 +85,340 @@ export function ExclusiveAccessSection() {
             ))}
           </ul>
 
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginTop: '0.5rem' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginTop: '0.5rem' }}>
             <PremiumButton href="/robots/">Explore exclusive robots</PremiumButton>
             <PremiumButton href="/contact/" variant="ghost">Request UAE quotation</PremiumButton>
           </div>
         </div>
 
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem' }}>
-          <BrandTile name="Unitree" sub="Quadruped · Humanoid" href="/brands/#unitree" accent="#DEE0F0" />
-          <BrandTile name="Pudu Robotics" sub="Service · Delivery · Cleaning" href="/brands/#pudu" accent="#8891C7" />
-          <Stat value="UAE" label="Exclusive sales territory" />
-          <Stat value="Dubai" label="Showroom & demo" />
+        {/* Right — premium showroom grid */}
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: '0.875rem',
+            minWidth: 0,
+          }}
+        >
+          <BrandShowcaseTile
+            href="/brands/#unitree"
+            brand="Unitree"
+            tag="Quadruped · Humanoid"
+            accent="#DEE0F0"
+            primary={{ src: '/images/robots/unitree-g1.png', alt: 'Unitree G1 humanoid robot' }}
+            secondary={{ src: '/images/robots/unitree-go2.png', alt: 'Unitree Go2 quadruped robot' }}
+          />
+          <BrandShowcaseTile
+            href="/brands/#pudu"
+            brand="Pudu Robotics"
+            tag="Service · Delivery · Cleaning"
+            accent="#8891C7"
+            primary={{ src: '/images/robots/pudu-bellabot.svg', alt: 'Pudu BellaBot delivery robot' }}
+            secondary={{ src: '/images/robots/pudu-kettybot.svg', alt: 'Pudu KettyBot service robot' }}
+          />
+          <TerritoryTile />
+          <ShowroomTile />
         </div>
       </div>
+
+      <style jsx>{`
+        .exa-grid {
+          grid-template-columns: 1fr;
+        }
+        @media (min-width: 1024px) {
+          .exa-grid {
+            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+          }
+        }
+      `}</style>
     </div>
   );
 }
 
-function BrandTile({ name, sub, href, accent }: { name: string; sub: string; href: string; accent: string }) {
+function BrandShowcaseTile({
+  href,
+  brand,
+  tag,
+  accent,
+  primary,
+  secondary,
+}: {
+  href: string;
+  brand: string;
+  tag: string;
+  accent: string;
+  primary: { src: string; alt: string };
+  secondary: { src: string; alt: string };
+}) {
   return (
     <Link
       href={href}
       style={{
+        position: 'relative',
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'space-between',
-        gap: '0.6rem',
-        padding: '1.25rem',
-        borderRadius: 16,
-        background: `linear-gradient(135deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))`,
+        gap: '0.5rem',
+        padding: '1rem',
+        borderRadius: 18,
+        background:
+          `radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))`,
         border: `1px solid ${accent}44`,
         color: '#FBFBFD',
         textDecoration: 'none',
-        position: 'relative',
         overflow: 'hidden',
-        minHeight: 130,
+        minHeight: 220,
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
       }}
     >
-      <span
-        aria-hidden
+      {/* product visual area */}
+      <div
         style={{
-          position: 'absolute',
-          top: '-1rem',
-          right: '-1rem',
-          width: 80,
-          height: 80,
-          borderRadius: '50%',
-          background: `radial-gradient(circle, ${accent}33, transparent 70%)`,
-          pointerEvents: 'none',
+          position: 'relative',
+          flex: 1,
+          minHeight: 130,
+          borderRadius: 12,
+          background:
+            `radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
+          overflow: 'hidden',
+          border: '1px solid rgba(222,224,240,0.08)',
         }}
-      />
-      <span style={{ fontSize: '1.05rem', fontWeight: 600, letterSpacing: '-0.01em' }}>{name}</span>
-      <span style={{ fontSize: '0.72rem', color: '#8891C7', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{sub}</span>
-      <span style={{ fontSize: '0.68rem', color: accent, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, marginTop: 'auto' }}>
-        Available in UAE
-      </span>
+      >
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundImage:
+              'linear-gradient(rgba(191,195,226,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191,195,226,0.06) 1px, transparent 1px)',
+            backgroundSize: '24px 24px',
+            maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
+            WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
+            pointerEvents: 'none',
+          }}
+        />
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            top: '8%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: '70%',
+            height: '70%',
+            background:
+              'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(58,85,196,0.35) 0%, transparent 65%)',
+            filter: 'blur(8px)',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* secondary robot — back-left */}
+        <div
+          style={{
+            position: 'absolute',
+            left: '6%',
+            bottom: '8%',
+            width: '46%',
+            height: '78%',
+            opacity: 0.7,
+            filter: 'drop-shadow(0 12px 20px rgba(0,0,0,0.6))',
+            transform: 'scale(0.88)',
+            transformOrigin: 'bottom left',
+          }}
+        >
+          <Image
+            src={secondary.src}
+            alt={secondary.alt}
+            fill
+            sizes="220px"
+            style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
+          />
+        </div>
+
+        {/* primary robot — front-right, slightly larger */}
+        <div
+          style={{
+            position: 'absolute',
+            right: '4%',
+            bottom: '6%',
+            width: '62%',
+            height: '90%',
+            filter:
+              'drop-shadow(0 16px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(58,85,196,0.4))',
+          }}
+        >
+          <Image
+            src={primary.src}
+            alt={primary.alt}
+            fill
+            sizes="280px"
+            style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
+          />
+        </div>
+
+        <span
+          style={{
+            position: 'absolute',
+            top: '0.5rem',
+            right: '0.5rem',
+            padding: '0.25rem 0.55rem',
+            borderRadius: 999,
+            background: 'rgba(14,13,18,0.7)',
+            border: `1px solid ${accent}55`,
+            color: accent,
+            fontSize: '0.55rem',
+            fontWeight: 700,
+            letterSpacing: '0.22em',
+            textTransform: 'uppercase',
+            backdropFilter: 'blur(6px)',
+          }}
+        >
+          UAE
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '0.25rem 0.25rem 0' }}>
+        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+          {tag}
+        </span>
+        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
+          <span style={{ fontSize: '1rem', fontWeight: 700, letterSpacing: '-0.01em' }}>{brand}</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <line x1="5" y1="12" x2="19" y2="12" />
+            <polyline points="12 5 19 12 12 19" />
+          </svg>
+        </span>
+      </div>
     </Link>
   );
 }
 
-function Stat({ value, label }: { value: string; label: string }) {
+function TerritoryTile() {
   return (
     <div
       style={{
-        padding: '1.25rem',
-        borderRadius: 16,
-        background: 'linear-gradient(135deg, rgba(28, 27, 33,0.7), rgba(5,5,5,0.92))',
-        border: '1px solid rgba(39, 63, 148,0.22)',
+        position: 'relative',
         display: 'flex',
         flexDirection: 'column',
-        gap: '0.4rem',
-        minHeight: 130,
-        justifyContent: 'center',
+        justifyContent: 'space-between',
+        padding: '1rem',
+        borderRadius: 18,
+        background:
+          'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(58,85,196,0.30), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
+        border: '1px solid rgba(58,85,196,0.45)',
+        color: '#FBFBFD',
+        overflow: 'hidden',
+        minHeight: 170,
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
       }}
     >
-      <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.5rem, 2.6vw, 1.9rem)', fontWeight: 700, letterSpacing: '-0.02em' }}>
-        {value}
+      {/* abstract UAE "territory" graphic — ring map style */}
+      <svg
+        aria-hidden
+        viewBox="0 0 220 140"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          opacity: 0.4,
+        }}
+      >
+        <defs>
+          <radialGradient id="terr-glow" cx="50%" cy="50%" r="60%">
+            <stop offset="0%" stopColor="#3a55c4" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+        <circle cx="155" cy="55" r="42" fill="url(#terr-glow)" />
+        <circle cx="155" cy="55" r="32" fill="none" stroke="#DEE0F0" strokeOpacity="0.45" strokeDasharray="2 4" />
+        <circle cx="155" cy="55" r="22" fill="none" stroke="#DEE0F0" strokeOpacity="0.65" />
+        <circle cx="155" cy="55" r="3.5" fill="#DEE0F0" />
+        <text x="160" y="44" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="3" fill="#BFC3E2" textAnchor="start">DXB</text>
+      </svg>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+          Sales Territory
+        </span>
+        <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.6rem, 2.8vw, 2rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
+          UAE
+        </span>
+      </div>
+      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
+        Exclusive sales rights — selected Unitree & Pudu solutions.
+      </span>
+    </div>
+  );
+}
+
+function ShowroomTile() {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '1rem',
+        borderRadius: 18,
+        background:
+          'radial-gradient(ellipse 80% 80% at 0% 100%, rgba(222,224,240,0.18), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
+        border: '1px solid rgba(222,224,240,0.22)',
+        color: '#FBFBFD',
+        overflow: 'hidden',
+        minHeight: 170,
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+      }}
+    >
+      <svg
+        aria-hidden
+        viewBox="0 0 220 140"
+        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.38 }}
+      >
+        <defs>
+          <linearGradient id="show-floor" x1="0" y1="1" x2="0" y2="0">
+            <stop offset="0%" stopColor="#3a55c4" stopOpacity="0.6" />
+            <stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        {/* perspective floor */}
+        {[0, 1, 2, 3, 4].map((i) => (
+          <line
+            key={i}
+            x1={20 - i * 5}
+            x2={200 + i * 5}
+            y1={70 + i * 14}
+            y2={70 + i * 14}
+            stroke="#DEE0F0"
+            strokeOpacity={0.35 - i * 0.06}
+          />
+        ))}
+        {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+          <line
+            key={`v-${i}`}
+            x1={30 + i * 27}
+            y1={70}
+            x2={30 + i * 36 - 30}
+            y2={140}
+            stroke="#DEE0F0"
+            strokeOpacity={0.2}
+          />
+        ))}
+        <rect x="60" y="40" width="100" height="55" fill="url(#show-floor)" />
+        <rect x="60" y="40" width="100" height="55" fill="none" stroke="#DEE0F0" strokeOpacity="0.4" />
+        <circle cx="110" cy="68" r="6" fill="#DEE0F0" />
+      </svg>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+          Showroom & Demo
+        </span>
+        <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.4rem, 2.6vw, 1.85rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
+          Dubai
+        </span>
+      </div>
+      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
+        Live demos · City Bay Business Center.
       </span>
-      <span style={{ fontSize: '0.7rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase' }}>{label}</span>
     </div>
   );
 }
diff --git a/src/components/robotics/Hero3DRobotics.tsx b/src/components/robotics/Hero3DRobotics.tsx
index 050a193..85c9c10 100644
--- a/src/components/robotics/Hero3DRobotics.tsx
+++ b/src/components/robotics/Hero3DRobotics.tsx
@@ -309,7 +309,7 @@ export function Hero3DRobotics() {
                 }}
               />
 
-              {/* Robot image — main (enlarged ~12%) */}
+              {/* Robot image — main */}
               {FEATURED_ROBOTS.map((r, idx) => (
                 <div
                   key={r.id}
@@ -319,20 +319,20 @@ export function Hero3DRobotics() {
                     display: 'flex',
                     alignItems: 'flex-end',
                     justifyContent: 'center',
-                    paddingTop: 'clamp(0.75rem, 2.5vw, 1.5rem)',
-                    paddingBottom: '30%',
-                    paddingLeft: 'clamp(0.5rem, 2vw, 1rem)',
-                    paddingRight: 'clamp(0.5rem, 2vw, 1rem)',
+                    paddingTop: 'clamp(2rem, 5vw, 3rem)',
+                    paddingBottom: '36%',
+                    paddingLeft: 'clamp(1rem, 4vw, 2rem)',
+                    paddingRight: 'clamp(1rem, 4vw, 2rem)',
                     opacity: idx === activeIdx ? 1 : 0,
                     transform:
                       idx === activeIdx
-                        ? `translateY(0) translateX(${tilt.ry * 0.45}px) scale(1.12)`
-                        : 'translateY(22px) scale(0.97)',
+                        ? `translateY(0) translateX(${tilt.ry * 0.4}px) scale(1)`
+                        : 'translateY(18px) scale(0.96)',
                     transformOrigin: 'center bottom',
                     transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
                     filter:
                       idx === activeIdx
-                        ? 'drop-shadow(0 32px 50px rgba(0,0,0,0.85)) drop-shadow(0 18px 28px rgba(0,0,0,0.6)) drop-shadow(0 0 36px rgba(58,85,196,0.55))'
+                        ? 'drop-shadow(0 26px 42px rgba(0,0,0,0.78)) drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(58,85,196,0.45))'
                         : 'none',
                     willChange: 'transform',
                   }}
@@ -343,7 +343,7 @@ export function Hero3DRobotics() {
                       src={r.image}
                       alt={`${r.brandLabel} ${r.name}`}
                       fill
-                      sizes="(max-width: 768px) 90vw, 720px"
+                      sizes="(max-width: 768px) 90vw, 620px"
                       style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
                       priority={idx === 0}
                     />
@@ -367,19 +367,19 @@ export function Hero3DRobotics() {
                 }}
               />
 
-              {/* Floor reflection (mirror image, faded, blue-tinted) */}
+              {/* Floor reflection (mirror image, faded) */}
               {FEATURED_ROBOTS.map((r, idx) => (
                 <div
                   key={`reflect-${r.id}`}
                   aria-hidden
                   style={{
                     position: 'absolute',
-                    left: 'clamp(0.5rem, 2vw, 1rem)',
-                    right: 'clamp(0.5rem, 2vw, 1rem)',
-                    bottom: '4%',
-                    height: '24%',
-                    opacity: idx === activeIdx ? 0.32 : 0,
-                    transform: `scaleY(-1) translateX(${tilt.ry * 0.45}px) scale(1.12)`,
+                    left: 'clamp(1rem, 4vw, 2rem)',
+                    right: 'clamp(1rem, 4vw, 2rem)',
+                    bottom: '6%',
+                    height: '22%',
+                    opacity: idx === activeIdx ? 0.28 : 0,
+                    transform: `scaleY(-1) translateX(${tilt.ry * 0.4}px)`,
                     transformOrigin: 'center top',
                     maskImage:
                       'linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%)',
@@ -387,14 +387,14 @@ export function Hero3DRobotics() {
                       'linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%)',
                     transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
                     pointerEvents: 'none',
-                    filter: 'blur(1.4px) hue-rotate(220deg)',
+                    filter: 'blur(1.2px)',
                   }}
                 >
                   <Image
                     src={r.image}
                     alt=""
                     fill
-                    sizes="(max-width: 768px) 90vw, 720px"
+                    sizes="(max-width: 768px) 90vw, 620px"
                     style={{ objectFit: 'contain', objectPosition: 'center top' }}
                   />
                 </div>
diff --git a/src/components/sections/robotics-spline-showcase.tsx b/src/components/sections/robotics-spline-showcase.tsx
index ffb4303..7357c65 100644
--- a/src/components/sections/robotics-spline-showcase.tsx
+++ b/src/components/sections/robotics-spline-showcase.tsx
@@ -10,100 +10,314 @@ const SPLINE_SCENE = 'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splineco
 
 export function RoboticsSplineShowcase() {
   return (
-    <section className="relative overflow-hidden bg-[#221F20] px-4 py-20 text-white sm:px-6 lg:px-8">
+    <section
+      style={{
+        position: 'relative',
+        overflow: 'hidden',
+        background: '#221F20',
+        color: '#FBFBFD',
+        padding: 'clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem)',
+      }}
+    >
       <div
         aria-hidden
-        className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(39,63,148,0.42),transparent_42%),radial-gradient(circle_at_20%_80%,rgba(222,224,240,0.10),transparent_36%)]"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'radial-gradient(circle at 70% 30%, rgba(39,63,148,0.42), transparent 42%), radial-gradient(circle at 20% 80%, rgba(222,224,240,0.10), transparent 36%)',
+          pointerEvents: 'none',
+        }}
       />
       <div
         aria-hidden
-        className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.045)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.035)_1px,transparent_1px)] bg-[size:64px_64px] opacity-30"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px)',
+          backgroundSize: '64px 64px',
+          opacity: 0.3,
+          pointerEvents: 'none',
+        }}
       />
 
-      <div className="relative mx-auto max-w-7xl">
-        <Card className="relative min-h-[680px] overflow-hidden border-[#DEE0F0]/15 bg-[#221F20]/70">
+      <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
+        <Card style={{ overflow: 'hidden', borderColor: 'rgba(222,224,240,0.15)', background: 'rgba(34,31,32,0.7)' }}>
           <Spotlight size={460} />
 
-          <div className="grid min-h-[680px] grid-cols-1 lg:grid-cols-2">
-            {/* Left: copy + CTA */}
-            <div className="relative z-10 flex flex-col justify-center p-6 sm:p-10 lg:p-14">
-              <div className="mb-6 inline-flex w-fit items-center gap-2 rounded-full border border-[#DEE0F0]/25 bg-[#273F94]/20 px-4 py-2 text-[10px] font-bold uppercase tracking-[0.3em] text-[#DEE0F0]">
-                <span className="h-1.5 w-1.5 rounded-full bg-[#DEE0F0]" />
-                Exclusive UAE Access
-              </div>
+          <div className="spline-grid">
+            {/* Left: copy + CTAs */}
+            <div
+              style={{
+                position: 'relative',
+                zIndex: 10,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                padding: 'clamp(1.5rem, 4vw, 3rem)',
+                minWidth: 0,
+              }}
+            >
+              <span
+                style={{
+                  display: 'inline-flex',
+                  width: 'fit-content',
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                  marginBottom: '1.5rem',
+                  padding: '0.5rem 1rem',
+                  borderRadius: 999,
+                  border: '1px solid rgba(222,224,240,0.25)',
+                  background: 'rgba(39,63,148,0.20)',
+                  fontSize: '0.65rem',
+                  fontWeight: 700,
+                  letterSpacing: '0.3em',
+                  textTransform: 'uppercase',
+                  color: '#DEE0F0',
+                }}
+              >
+                <span style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0' }} />
+                Robotics Catalog · UAE
+              </span>
 
-              <h2 className="max-w-2xl text-4xl font-semibold leading-[1.02] tracking-[-0.04em] text-white sm:text-5xl lg:text-6xl xl:text-7xl">
-                Advanced robotics.
-                <span className="block bg-gradient-to-r from-white via-[#DEE0F0] to-[#8891C7] bg-clip-text text-transparent">
-                  Built for UAE innovation.
+              <h1
+                style={{
+                  margin: 0,
+                  fontSize: 'clamp(1.9rem, 4.2vw, 3.4rem)',
+                  fontWeight: 600,
+                  lineHeight: 1.05,
+                  letterSpacing: '-0.035em',
+                  color: '#FBFBFD',
+                  overflowWrap: 'break-word',
+                  wordBreak: 'normal',
+                  hyphens: 'manual',
+                }}
+              >
+                Explore Exclusive{' '}
+                <span
+                  style={{
+                    display: 'inline-block',
+                    background:
+                      'linear-gradient(110deg, #FBFBFD 0%, #DEE0F0 35%, #BFC3E2 60%, #3a55c4 100%)',
+                    WebkitBackgroundClip: 'text',
+                    backgroundClip: 'text',
+                    WebkitTextFillColor: 'transparent',
+                    color: 'transparent',
+                    filter: 'drop-shadow(0 4px 18px rgba(58,85,196,0.32))',
+                  }}
+                >
+                  Robotics Solutions.
                 </span>
-              </h2>
+              </h1>
 
-              <p className="mt-6 max-w-xl text-base leading-7 text-[#DEE0F0]/78 sm:text-lg sm:leading-8">
-                YS Lootah Robotics is the exclusive UAE sales destination for selected Unitree and Pudu Robotics solutions — helping businesses explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.
+              <p
+                style={{
+                  marginTop: '1.5rem',
+                  marginBottom: 0,
+                  maxWidth: 560,
+                  fontSize: 'clamp(0.95rem, 1.6vw, 1.1rem)',
+                  lineHeight: 1.7,
+                  color: 'rgba(222,224,240,0.82)',
+                }}
+              >
+                Browse selected Unitree and Pudu Robotics solutions available exclusively in the UAE through YS Lootah Robotics — humanoid, quadruped, service, delivery, and cleaning robots ready for Dubai businesses.
               </p>
 
-              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <div
+                style={{
+                  marginTop: '2rem',
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '0.625rem',
+                }}
+              >
                 <Link
-                  href="/robots/"
-                  className="group inline-flex items-center justify-center rounded-full bg-gradient-to-br from-[#3a55c4] via-[#273F94] to-[#1a2e6e] px-6 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white shadow-[0_18px_45px_rgba(39,63,148,0.45)] transition hover:brightness-110"
+                  href="/contact/"
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '0.4rem',
+                    padding: '0.85rem 1.5rem',
+                    borderRadius: 999,
+                    background: 'linear-gradient(135deg, #3a55c4 0%, #273F94 55%, #1a2e6e 100%)',
+                    color: '#FBFBFD',
+                    fontSize: '0.78rem',
+                    fontWeight: 700,
+                    letterSpacing: '0.14em',
+                    textTransform: 'uppercase',
+                    textDecoration: 'none',
+                    boxShadow: '0 14px 40px rgba(39,63,148,0.5)',
+                    whiteSpace: 'nowrap',
+                  }}
                 >
-                  Explore robots
-                  <ArrowRight className="ml-2 h-4 w-4 transition group-hover:translate-x-1" />
+                  Request UAE quotation
+                  <ArrowRight size={14} />
+                </Link>
+                <Link
+                  href="/book-demo/"
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '0.4rem',
+                    padding: '0.85rem 1.5rem',
+                    borderRadius: 999,
+                    border: '1px solid rgba(222,224,240,0.3)',
+                    background: 'rgba(255,255,255,0.04)',
+                    color: '#DEE0F0',
+                    fontSize: '0.78rem',
+                    fontWeight: 700,
+                    letterSpacing: '0.14em',
+                    textTransform: 'uppercase',
+                    textDecoration: 'none',
+                    backdropFilter: 'blur(12px)',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  Book a demo
+                  <ArrowRight size={14} />
                 </Link>
-
                 <Link
                   href="/configure/"
-                  className="group inline-flex items-center justify-center rounded-full border border-[#DEE0F0]/25 bg-white/[0.04] px-6 py-3 text-xs font-bold uppercase tracking-[0.16em] text-[#DEE0F0] backdrop-blur-xl transition hover:bg-white/[0.08]"
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '0.4rem',
+                    padding: '0.85rem 1.5rem',
+                    borderRadius: 999,
+                    border: '1px solid rgba(136,145,199,0.5)',
+                    background: 'transparent',
+                    color: '#BFC3E2',
+                    fontSize: '0.78rem',
+                    fontWeight: 700,
+                    letterSpacing: '0.14em',
+                    textTransform: 'uppercase',
+                    textDecoration: 'none',
+                    whiteSpace: 'nowrap',
+                  }}
                 >
                   Configure your solution
-                  <ArrowRight className="ml-2 h-4 w-4 transition group-hover:translate-x-1" />
+                  <ArrowRight size={14} />
                 </Link>
               </div>
 
-              <div className="mt-10 grid max-w-xl grid-cols-1 gap-3 sm:grid-cols-3">
+              <div
+                style={{
+                  marginTop: '2rem',
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(150px, 100%), 1fr))',
+                  gap: '0.75rem',
+                  maxWidth: 560,
+                }}
+              >
                 {[
-                  { icon: BadgeCheck, label: 'Exclusive UAE', value: 'Access' },
-                  { icon: Cpu, label: 'Unitree + Pudu', value: 'Robotics' },
-                  { icon: MapPin, label: 'Dubai', value: 'Showroom & Demo' },
+                  { Icon: BadgeCheck, label: 'Exclusive UAE', value: 'Access' },
+                  { Icon: Cpu, label: 'Unitree + Pudu', value: 'Robotics' },
+                  { Icon: MapPin, label: 'Dubai', value: 'Demo & Sales' },
                 ].map((item) => (
                   <div
                     key={item.label}
-                    className="rounded-2xl border border-[#DEE0F0]/12 bg-white/[0.045] p-4 backdrop-blur-xl"
+                    style={{
+                      padding: '0.875rem 1rem',
+                      borderRadius: 16,
+                      border: '1px solid rgba(222,224,240,0.12)',
+                      background: 'rgba(255,255,255,0.045)',
+                      backdropFilter: 'blur(12px)',
+                      minWidth: 0,
+                    }}
                   >
-                    <item.icon className="mb-3 h-5 w-5 text-[#DEE0F0]" />
-                    <div className="text-sm font-semibold text-white">{item.label}</div>
-                    <div className="mt-1 text-xs uppercase tracking-[0.18em] text-[#BFC3E2]/70">
+                    <item.Icon size={18} style={{ color: '#DEE0F0', marginBottom: '0.5rem' }} />
+                    <div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#FBFBFD' }}>{item.label}</div>
+                    <div style={{ marginTop: 4, fontSize: '0.66rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(191,195,226,0.72)' }}>
                       {item.value}
                     </div>
                   </div>
                 ))}
               </div>
 
-              <p className="mt-8 text-[11px] font-semibold uppercase tracking-[0.32em] text-[#BFC3E2]">
+              <p
+                style={{
+                  marginTop: '1.75rem',
+                  marginBottom: 0,
+                  fontSize: '0.7rem',
+                  fontWeight: 600,
+                  letterSpacing: '0.32em',
+                  textTransform: 'uppercase',
+                  color: '#BFC3E2',
+                }}
+              >
                 In Tech We Innovate · In Trust We Lead
               </p>
             </div>
 
-            {/* Right: Spline 3D scene */}
-            <div className="relative min-h-[520px] overflow-hidden lg:min-h-full">
+            {/* Right: Spline scene */}
+            <div
+              className="spline-stage"
+              style={{
+                position: 'relative',
+                minHeight: 'clamp(360px, 60vw, 600px)',
+                overflow: 'hidden',
+              }}
+            >
               <div
                 aria-hidden
-                className="absolute inset-6 rounded-[2rem] border border-[#DEE0F0]/15 bg-[#273F94]/10 shadow-[inset_0_0_80px_rgba(222,224,240,0.05)] backdrop-blur-xl"
+                style={{
+                  position: 'absolute',
+                  inset: '1.25rem',
+                  borderRadius: '2rem',
+                  border: '1px solid rgba(222,224,240,0.15)',
+                  background: 'rgba(39,63,148,0.10)',
+                  boxShadow: 'inset 0 0 80px rgba(222,224,240,0.05)',
+                  backdropFilter: 'blur(14px)',
+                  pointerEvents: 'none',
+                }}
               />
-              <div className="absolute left-8 top-8 z-10 rounded-full border border-[#DEE0F0]/20 bg-[#221F20]/70 px-4 py-2 text-[10px] font-bold uppercase tracking-[0.24em] text-[#DEE0F0] backdrop-blur">
+              <div
+                style={{
+                  position: 'absolute',
+                  left: '1.75rem',
+                  top: '1.75rem',
+                  zIndex: 10,
+                  padding: '0.5rem 0.9rem',
+                  borderRadius: 999,
+                  border: '1px solid rgba(222,224,240,0.22)',
+                  background: 'rgba(34,31,32,0.72)',
+                  color: '#DEE0F0',
+                  fontSize: '0.6rem',
+                  fontWeight: 700,
+                  letterSpacing: '0.26em',
+                  textTransform: 'uppercase',
+                  backdropFilter: 'blur(8px)',
+                }}
+              >
                 Interactive Robot Scene
               </div>
-              <div className="absolute bottom-8 right-8 z-10 rounded-2xl border border-[#DEE0F0]/15 bg-[#221F20]/75 px-5 py-4 backdrop-blur-xl">
-                <div className="text-[10px] uppercase tracking-[0.22em] text-[#BFC3E2]/70">
+              <div
+                style={{
+                  position: 'absolute',
+                  right: '1.75rem',
+                  bottom: '1.75rem',
+                  zIndex: 10,
+                  padding: '0.85rem 1.1rem',
+                  borderRadius: 16,
+                  border: '1px solid rgba(222,224,240,0.15)',
+                  background: 'rgba(34,31,32,0.78)',
+                  backdropFilter: 'blur(12px)',
+                }}
+              >
+                <div style={{ fontSize: '0.62rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(191,195,226,0.7)' }}>
                   YS Lootah Robotics
                 </div>
-                <div className="mt-1 text-sm font-semibold text-white">In Tech We Innovate</div>
+                <div style={{ marginTop: 4, fontSize: '0.88rem', fontWeight: 600, color: '#FBFBFD' }}>
+                  In Tech We Innovate
+                </div>
               </div>
 
               <SplineScene scene={SPLINE_SCENE} className="relative z-[2] h-full w-full" />
 
-              {/* Replacement note (visible only in dev) */}
               <span className="sr-only">
                 Interactive 3D scene — placeholder Spline reference robot for development. Replace
                 with approved YS Lootah Robotics custom Spline scene when available.
@@ -112,6 +326,26 @@ export function RoboticsSplineShowcase() {
           </div>
         </Card>
       </div>
+
+      <style jsx>{`
+        .spline-grid {
+          display: grid;
+          grid-template-columns: 1fr;
+          min-height: 600px;
+        }
+        .spline-stage {
+          min-height: clamp(360px, 65vw, 520px);
+        }
+        @media (min-width: 1100px) {
+          .spline-grid {
+            grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+            min-height: 680px;
+          }
+          .spline-stage {
+            min-height: 100%;
+          }
+        }
+      `}</style>
     </section>
   );
 }