feat: update homepage UI with new cloud section and simplified gradient backgrounds

src/components/ui/HalfGlobe.tsx

@@ -0,0 +1,81 @@
+"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";
+
+function Globe() {
+  const groupRef = useRef<THREE.Group>(null);
+  const cloudTexture = useTexture("/images/cloud1.png");
+
+  // Rotate the globe slowly
+  useFrame(() => {
+    if (groupRef.current) {
+      groupRef.current.rotation.y += 0.002;
+    }
+  });
+
+  // Coordinates for markers (half-globe)
+  const points = [
+    [0, 1, 0],
+    [0.7, 0.5, 0.2],
+    [-0.5, 0.4, 0.5],
+    [0.4, 0.3, -0.7],
+    [-0.6, -0.1, 0.3],
+    [0.3, -0.2, 0.8],
+  ];
+
+  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>
+        );
+      })}
+
+      {/* Cloud markers */}
+      {points.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}
+          />
+        </mesh>
+      ))}
+    </group>
+  );
+}
+
+export function HalfGlobe() {
+  return (
+    <div className="w-full h-[500px] bg-white flex items-center justify-center">
+      <Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
+        <ambientLight intensity={0.8} />
+        <Globe />
+        <OrbitControls enableZoom={false} enablePan={false} />
+      </Canvas>
+    </div>
+  );
+}