From fb41977b1841a51c5a1e729931226f7a4a81d492 Mon Sep 17 00:00:00 2001
From: "Najjar\\NajjarV02" <mglnaj6>
Date: Thu, 21 May 2026 17:08:24 +0400
Subject: [PATCH] feat: enhance UI components and update Instagram post data

---
 src/app/bu-sunaidah/page.tsx           |  4 +--
 src/components/ConfigPanel.tsx         | 49 +++++++++++++++++++-------
 src/components/ConfiguratorSection.tsx |  2 +-
 src/components/Navbar.tsx              | 14 ++++----
 src/components/RobotCanvas.tsx         | 47 ++++++++++++++++++------
 src/data/bu-sunaidah-posts.json        | 14 ++++----
 6 files changed, 90 insertions(+), 40 deletions(-)

diff --git a/src/app/bu-sunaidah/page.tsx b/src/app/bu-sunaidah/page.tsx
index cd45b87..b8d4e2f 100644
--- a/src/app/bu-sunaidah/page.tsx
+++ b/src/app/bu-sunaidah/page.tsx
@@ -636,8 +636,8 @@ export default async function BuSunaidahPage() {
           border: 1px solid rgba(222, 224, 240, 0.12);
           background: rgba(14, 13, 18, 0.6);
           box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
-          aspect-ratio: 9 / 16;
-          min-height: 620px;
+          height: 720px;
+          width: 100%;
         }
         /* The Instagram embed iframe ships an in-frame header (avatar +
            username + "View profile") at the top. It is cross-origin so we
diff --git a/src/components/ConfigPanel.tsx b/src/components/ConfigPanel.tsx
index c28dbf3..f918b26 100644
--- a/src/components/ConfigPanel.tsx
+++ b/src/components/ConfigPanel.tsx
@@ -264,21 +264,46 @@ function ColorInput({ label, value, onChange }: { label: string; value: string;
         background: 'linear-gradient(135deg, rgba(22, 21, 30, 0.78), rgba(14, 13, 20, 0.92))',
       }}
     >
-      <input
-        type="color"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
+      <label
+        htmlFor={`color-${label}`}
         style={{
-          width: '36px',
-          height: '36px',
-          border: '1px solid rgba(120, 140, 255, 0.38)',
-          borderRadius: '8px',
-          background: 'transparent',
+          position: 'relative',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '40px',
+          height: '40px',
+          borderRadius: '10px',
+          border: '1px solid rgba(120, 140, 255, 0.45)',
+          background: value,
+          backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18))',
           cursor: 'pointer',
-          padding: 0,
+          boxShadow:
+            '0 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.30)',
+          overflow: 'hidden',
+          flexShrink: 0,
         }}
-        aria-label={`${label} color`}
-      />
+        aria-label={`${label} color picker`}
+      >
+        <input
+          id={`color-${label}`}
+          type="color"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            opacity: 0,
+            cursor: 'pointer',
+            border: 'none',
+            padding: 0,
+            background: 'transparent',
+          }}
+          aria-label={`${label} color`}
+        />
+      </label>
       <div style={{ flex: 1 }}>
         <div style={{ fontSize: '0.82rem', color: '#FFFFFF', fontWeight: 600, marginBottom: '2px', letterSpacing: '-0.005em' }}>{label}</div>
         <div style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', letterSpacing: '0.08em' }}>{value.toUpperCase()}</div>
diff --git a/src/components/ConfiguratorSection.tsx b/src/components/ConfiguratorSection.tsx
index ebd52a8..e2ff69d 100644
--- a/src/components/ConfiguratorSection.tsx
+++ b/src/components/ConfiguratorSection.tsx
@@ -156,7 +156,7 @@ export function ConfiguratorSection() {
             width: '100%',
             height: '100%',
             background:
-              'radial-gradient(ellipse 80% 60% at 50% 40%, rgba(74, 102, 216, 0.12), transparent 65%), radial-gradient(ellipse 60% 70% at 50% 90%, rgba(255, 255, 255, 0.04), transparent 70%), linear-gradient(180deg, rgba(8, 8, 14, 0.98), rgba(4, 4, 8, 1))',
+              'radial-gradient(ellipse 100% 70% at 50% 45%, rgba(80, 110, 200, 0.22), transparent 70%), radial-gradient(ellipse 60% 24% at 50% 92%, rgba(220, 228, 245, 0.20), transparent 70%), linear-gradient(180deg, rgba(24, 26, 40, 0.98), rgba(12, 13, 22, 1))',
           }}
           role="main"
           aria-label={t('app.title')}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 603a22c..0d573b1 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -13,7 +13,7 @@ const NAV_LINKS = [
   { label: 'Bu Sunaidah', href: '/bu-sunaidah/' },
   { label: 'About', href: '/about/' },
   { label: 'Contact', href: '/contact/' },
-  { label: 'Book Demo', href: '/book-demo/' },
+  { label: 'Configure', href: '/configure/' },
 ];
 
 export function Navbar() {
@@ -134,11 +134,11 @@ export function Navbar() {
 
           <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
             <Link
-              href="/configure/"
+              href="/book-demo/"
               className="nav-desktop-cta btn btn-primary"
               style={{ padding: '0.7rem 1.2rem', fontSize: '0.78rem' }}
             >
-              Configure
+              Book Demo
             </Link>
             <button
               type="button"
@@ -216,20 +216,20 @@ export function Navbar() {
           </Link>
         ))}
         <Link
-          href="/configure/"
+          href="/book-demo/"
           onClick={() => setMobileOpen(false)}
           className="btn btn-primary"
           style={{ marginTop: '1rem', justifyContent: 'center' }}
         >
-          Configure your robot
+          Book a demo
         </Link>
         <Link
-          href="/book-demo/"
+          href="/configure/"
           onClick={() => setMobileOpen(false)}
           className="btn btn-ghost"
           style={{ justifyContent: 'center' }}
         >
-          Book a demo
+          Configure your robot
         </Link>
       </div>
 
diff --git a/src/components/RobotCanvas.tsx b/src/components/RobotCanvas.tsx
index 219b99d..c12eb18 100644
--- a/src/components/RobotCanvas.tsx
+++ b/src/components/RobotCanvas.tsx
@@ -49,15 +49,42 @@ function SceneContent({ onCapture }: { onCapture: (gl: WebGLRenderer, scene: Sce
   return (
     <>
       <SceneCapture onCapture={onCapture} />
-      <Environment preset="studio" />
-      <ambientLight intensity={1.1} />
-      <directionalLight position={[5, 5, 5]} intensity={2.4} color="#ffffff" castShadow shadow-mapSize={[1024, 1024]} />
-      <directionalLight position={[-4, 3, 2]} intensity={1.3} color="#dfeaff" />
-      <directionalLight position={[0, 3, -5]} intensity={1.1} color="#A6B2D8" />
-      <spotLight position={[0, 8, 0]} intensity={1.6} angle={0.6} penumbra={0.5} color="#ffffff" />
-      <directionalLight position={[0, 2, 5]} intensity={1.1} color="#ffffff" />
+      <Environment preset="studio" environmentIntensity={2.2} />
+      <ambientLight intensity={3.4} />
+      <hemisphereLight args={['#ffffff', '#3a4a78', 2.6]} />
+      {/* Key — front-right, strong white */}
+      <directionalLight position={[5, 5, 5]} intensity={6.0} color="#ffffff" castShadow shadow-mapSize={[1024, 1024]} />
+      {/* Fill — front-left, cool tint */}
+      <directionalLight position={[-4, 3, 2]} intensity={4.0} color="#e8f0ff" />
+      {/* Rim — behind */}
+      <directionalLight position={[0, 3, -5]} intensity={2.8} color="#A6B2D8" />
+      {/* Top spotlight */}
+      <spotLight position={[0, 8, 0]} intensity={4.5} angle={0.8} penumbra={0.45} color="#ffffff" />
+      {/* Front fill — direct face/torso */}
+      <directionalLight position={[0, 1.5, 6]} intensity={4.0} color="#ffffff" />
+      {/* Face spotlight — soft direct head light */}
+      <spotLight position={[0, 2.2, 4.2]} intensity={3.0} angle={0.55} penumbra={0.6} color="#ffffff" />
+      {/* Bottom fill — lift the legs */}
+      <directionalLight position={[0, -1, 4]} intensity={1.4} color="#dfe8ff" />
+      {/* Side accents */}
+      <pointLight position={[3, 1.5, 3]} intensity={2.4} color="#ffffff" distance={10} />
+      <pointLight position={[-3, 1.5, 3]} intensity={2.4} color="#dfe8ff" distance={10} />
+      {/* Back side accents — define silhouette */}
+      <pointLight position={[2.5, 2.5, -2]} intensity={1.6} color="#b0c4ff" distance={10} />
+      <pointLight position={[-2.5, 2.5, -2]} intensity={1.6} color="#b0c4ff" distance={10} />
       <RobotModel />
-      <OrbitControls enablePan enableZoom enableRotate minDistance={2} maxDistance={10} minPolarAngle={0} maxPolarAngle={Math.PI} dampingFactor={0.05} enableDamping />
+      <OrbitControls
+        target={[0, 0.5, 0]}
+        enablePan
+        enableZoom
+        enableRotate
+        minDistance={2}
+        maxDistance={10}
+        minPolarAngle={0}
+        maxPolarAngle={Math.PI}
+        dampingFactor={0.05}
+        enableDamping
+      />
       <ContactShadows position={[0, -1, 0]} opacity={0.55} scale={10} blur={2.4} far={4} resolution={256} color="#000000" />
     </>
   );
@@ -136,11 +163,11 @@ export function RobotCanvas() {
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
       <Canvas
         dpr={[1, 1.5]}
-        camera={{ position: [0, 1, 5], fov: 50 }}
+        camera={{ position: [0, 0.7, 4.6], fov: 42 }}
         gl={{ antialias: true, powerPreference: 'high-performance' }}
         style={{
           background:
-            'radial-gradient(ellipse 38% 18% at 50% 80%, rgba(200, 210, 240, 0.22), transparent 70%), radial-gradient(ellipse 55% 55% at 50% 50%, rgba(58, 85, 196, 0.22), transparent 65%), linear-gradient(180deg, #0e0e16 0%, #060609 100%)',
+            'radial-gradient(ellipse 45% 22% at 50% 82%, rgba(220, 228, 245, 0.32), transparent 70%), radial-gradient(ellipse 70% 65% at 50% 45%, rgba(80, 110, 200, 0.38), transparent 65%), linear-gradient(180deg, #1c1d2c 0%, #0f1018 60%, #0a0b13 100%)',
         }}
       >
         <Suspense fallback={<Loader />}>
diff --git a/src/data/bu-sunaidah-posts.json b/src/data/bu-sunaidah-posts.json
index 867360c..b0274e0 100644
--- a/src/data/bu-sunaidah-posts.json
+++ b/src/data/bu-sunaidah-posts.json
@@ -1,10 +1,8 @@
 [
-  {
-    "url": "https://www.instagram.com/reel/DX6pDm9Mkwe/",
-    "caption": "Make It in the Emirates 2026 — Abu Dhabi appearance."
-  },
-  {
-    "url": "https://www.instagram.com/reel/DYg5KQsC8pW/",
-    "caption": "Abu Dhabi Global Sustainable Security Summit activation."
-  }
+  { "url": "https://www.instagram.com/reel/DYFUSrTNJcZ/" },
+  { "url": "https://www.instagram.com/reel/DVO0Pp2k0Y-/" },
+  { "url": "https://www.instagram.com/reel/DVJtcu3E_oc/" },
+  { "url": "https://www.instagram.com/reel/DYE2K2uNYs3/" },
+  { "url": "https://www.instagram.com/reel/DYE1rISN6Ut/" },
+  { "url": "https://www.instagram.com/reel/DYC_yu1OTnk/" }
 ]