fixed build errors

src/components/ui/HalfGlobe.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import * as THREE from "three";
 import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls, useTexture } from "@react-three/drei";
-import { useRef } from "react";
+import { Line, OrbitControls, useTexture } from "@react-three/drei";
+import { useMemo, useRef } from "react";
+
+type RotatableGroup = {
+  rotation: { y: number };
+};
 
 function Globe() {
-  const groupRef = useRef<THREE.Group>(null);
+  const groupRef = useRef<RotatableGroup | null>(null);
   const cloudTexture = useTexture("/images/cloud1.png");
 
   // Rotate the globe slowly
@@ -17,7 +20,7 @@ function Globe() {
   });
 
   // Coordinates for markers (half-globe)
-  const points = [
+  const markers = [
     [0, 1, 0],
     [0.7, 0.5, 0.2],
     [-0.5, 0.4, 0.5],
@@ -25,42 +28,47 @@ function Globe() {
     [-0.6, -0.1, 0.3],
     [0.3, -0.2, 0.8],
   ];
+  const arcPoints = useMemo(() => {
+    const radius = 2.5;
+    const verticalRadius = radius / 2;
+    const segments = 120;
+
+    return Array.from({ length: 8 }, () => {
+      const points: number[] = [];
+      for (let i = 0; i < segments; i++) {
+        const t = (i / (segments - 1)) * Math.PI;
+        const x = Math.cos(t) * radius;
+        const z = Math.sin(t) * verticalRadius;
+        const y = Math.sin(x / radius) * 0.5;
+        points.push(x, y, z);
+      }
+      return points;
+    });
+  }, []);
 
   return (
     <group ref={groupRef}>
       {/* Cyan arcs */}
-      {Array.from({ length: 8 }).map((_, i) => {
-        const radius = 2.5;
-        const curve = new THREE.EllipseCurve(
-          0,
-          0,
-          radius,
-          radius / 2,
-          0,
-          Math.PI,
-          false,
-          0
-        );
-        const points = curve.getPoints(100);
-        const geometry = new THREE.BufferGeometry().setFromPoints(
-          points.map((p) => new THREE.Vector3(p.x, Math.sin(p.x / radius) * 0.5, p.y))
-        );
-        return (
-          <line key={i} geometry={geometry}>
-            <lineBasicMaterial color="#00e5ff" linewidth={1} transparent opacity={0.5} />
-          </line>
-        );
-      })}
+      {arcPoints.map((points, i) => (
+        <Line
+          key={i}
+          points={points}
+          color="#00e5ff"
+          lineWidth={1}
+          transparent
+          opacity={0.5}
+        />
+      ))}
 
       {/* Cloud markers */}
-      {points.map(([x, y, z], i) => (
+      {markers.map(([x, y, z], i) => (
         <mesh key={i} position={[x * 2.5, y * 2.5, z * 2.5]}>
           <planeGeometry args={[0.3, 0.3]} />
           <meshBasicMaterial
             map={cloudTexture}
             transparent
             opacity={1}
-            side={THREE.DoubleSide}
+            side={2 /* DoubleSide */}
           />
         </mesh>
       ))}