weird fkn globe

components/3d/HeroModel.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React, { useRef } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, PerspectiveCamera, useTexture } from '@react-three/drei';
+import * as THREE from 'three';
+
+function RotatingCube() {
+  const meshRef = useRef<THREE.Mesh>(null);
+  
+  // Animation loop
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.x += delta * 0.2;
+      meshRef.current.rotation.y += delta * 0.3;
+    }
+  });
+
+  return (
+    <mesh ref={meshRef} position={[0, 0, 0]} castShadow receiveShadow>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial 
+        color="#D53F8C" 
+        metalness={0.6}
+        roughness={0.2}
+        emissive="#300020"
+        emissiveIntensity={0.3}
+      />
+    </mesh>
+  );
+}
+
+function FloatingGlobe() {
+  const meshRef = useRef<THREE.Mesh>(null);
+  
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.y += delta * 0.1;
+      meshRef.current.position.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.2;
+    }
+  });
+
+  return (
+    <mesh ref={meshRef} position={[0, 0, 0]} castShadow>
+      <sphereGeometry args={[1.5, 64, 64]} />
+      <meshStandardMaterial 
+        color="#111111"
+        metalness={0.8}
+        roughness={0.1}
+        emissive="#D53F8C"
+        emissiveIntensity={0.2}
+        wireframe={true}
+      />
+    </mesh>
+  );
+}
+
+export default function HeroModel() {
+  return (
+    <div className="w-full h-[300px] md:h-[400px]">
+      <Canvas shadows dpr={[1, 2]}>
+        <ambientLight intensity={0.5} />
+        <directionalLight 
+          position={[10, 10, 5]} 
+          intensity={1} 
+          castShadow 
+          shadow-mapSize-width={1024} 
+          shadow-mapSize-height={1024}
+        />
+        <pointLight position={[-10, -10, -10]} color="#D53F8C" intensity={1} />
+        
+        <FloatingGlobe />
+        
+        <PerspectiveCamera makeDefault position={[0, 0, 6]} fov={40} />
+        <OrbitControls 
+          enableZoom={false}
+          enablePan={false}
+          rotateSpeed={0.5}
+          autoRotate
+          autoRotateSpeed={0.5}
+        />
+      </Canvas>
+    </div>
+  );
+}