feat: enhance UI components and update Instagram post data

2026-05-21 17:08:24 +04:00 · 2026-05-21 17:08:24 +04:00 · fb41977b18
commit fb41977b18
parent e7fde29a21
6 changed files with 90 additions and 40 deletions
--- 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
--- 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>
--- 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')}
--- 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>

--- 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 />}>
--- 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/" }
 ]