style: update 3D battery model material colors and adjust handle position

src/components/ui/3d/HeroBackground3D.tsx

@@ -102,20 +102,56 @@ function AeroxModel() {
   );
 }
 
-function Crystal({ position, color, scale = 1 }: { position: [number, number, number]; color: string; scale?: number }) {
+function Battery({ position, scale = 1, rotation = [0, 0, 0] }: { position: [number, number, number]; scale?: number; rotation?: [number, number, number] }) {
-  const ref = useRef<THREE.Mesh>(null);
+  const group = useRef<THREE.Group>(null);
+  const logoTexture = useLoader(THREE.TextureLoader, '/jaiben.png');
+
   useFrame((state, delta) => {
-    if (ref.current) {
+    if (group.current) {
-      ref.current.rotation.y += delta * 0.5;
+      group.current.rotation.y += delta * 0.4;
-      ref.current.position.y = position[1] + Math.sin(state.clock.elapsedTime + position[0]) * 0.3;
+      group.current.position.y = position[1] + Math.sin(state.clock.elapsedTime + position[0]) * 0.2;
     }
   });
+
   return (
-    <Float speed={3} rotationIntensity={1} floatIntensity={2}>
+    <Float speed={2} rotationIntensity={0.5} floatIntensity={1}>
-      <mesh ref={ref} position={position} scale={scale}>
+      <group ref={group} position={position} scale={scale} rotation={new THREE.Euler(...rotation)}>
-        <octahedronGeometry args={[0.4, 0]} />
+        {/* Main Battery Body */}
-        <meshStandardMaterial color={color} emissive={color} emissiveIntensity={0.3} roughness={0.1} metalness={0.3} flatShading />
+        <mesh position={[0, 0, 0]} castShadow receiveShadow>
+          <boxGeometry args={[0.6, 1.2, 0.4]} />
+          <meshStandardMaterial color="#41694cff" roughness={0.4} metalness={0.8} />
         </mesh>
+
+        {/* Top Cap */}
+        <mesh position={[0, 0.65, 0]} castShadow receiveShadow>
+          <boxGeometry args={[0.62, 0.1, 0.42]} />
+          <meshStandardMaterial color={ACCENT} roughness={0.3} metalness={0.5} />
+        </mesh>
+
+        {/* Handle */}
+        <mesh position={[0, 0.70, 0]} castShadow receiveShadow>
+          <torusGeometry args={[0.15, 0.04, 16, 32, Math.PI]} />
+          <meshStandardMaterial color="#0d7a33ff" roughness={0.2} metalness={0.9} />
+        </mesh>
+
+        {/* Glowing Indicator Light */}
+        <mesh position={[0.2, 0.5, 0.201]}>
+          <circleGeometry args={[0.03, 16]} />
+          <meshBasicMaterial color={ACCENT_BRIGHT} />
+        </mesh>
+
+        {/* Logo Decal Plane */}
+        <mesh position={[0, 0, 0.201]}>
+          <planeGeometry args={[0.35, 0.35]} />
+          <meshBasicMaterial map={logoTexture} transparent={true} />
+        </mesh>
+
+        {/* Back Logo Decal Plane */}
+        <mesh position={[0, 0, -0.201]} rotation={[0, Math.PI, 0]}>
+          <planeGeometry args={[0.35, 0.35]} />
+          <meshBasicMaterial map={logoTexture} transparent={true} />
+        </mesh>
+      </group>
     </Float>
   );
 }
@@ -140,13 +176,12 @@ function Scene() {
 
       <Suspense fallback={<Loader />}>
         <AeroxModel />
+        <Battery position={[-3.8, 1.6, -1]} scale={1.1} />
+        <Battery position={[3.8, 1.2, -0.5]} scale={0.8} rotation={[0.2, 0, 0]} />
+        <Battery position={[3.4, -0.8, 0.6]} scale={0.6} rotation={[-0.2, 0.5, 0]} />
+        <Battery position={[-4.0, -0.4, 0.8]} scale={0.7} rotation={[0, -0.5, 0.1]} />
       </Suspense>
 
-      <Crystal position={[-3.8, 1.6, -1]} color={ACCENT_BRIGHT} scale={1.1} />
-      <Crystal position={[3.8, 1.2, -0.5]} color={ACCENT} scale={0.8} />
-      <Crystal position={[3.4, -0.8, 0.6]} color="#34d399" scale={0.6} />
-      <Crystal position={[-4.0, -0.4, 0.8]} color="#34d399" scale={0.7} />
-
       <Sparkles count={90} scale={[11, 7, 7]} size={3} speed={0.4} color={ACCENT_BRIGHT} opacity={0.7} />
 
       <ContactShadows position={[0, -1.06, 0]} opacity={0.55} scale={14} blur={2.5} far={4} color={ACCENT} />