UI design Updated

app/components/canvas/DNAHeroBackground.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Canvas, useFrame } from "@react-three/fiber";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { useRef, useMemo } from "react";
 import * as THREE from "three";
 import { Float, PerspectiveCamera } from "@react-three/drei";
@@ -8,31 +8,29 @@ import { Float, PerspectiveCamera } from "@react-three/drei";
 function DNAParticles() {
     const points = useMemo(() => {
         const p = [];
-        const count = 100;
-        const radius = 2;
-        const height = 15;
+        const count = 120; // Reduced density for simplicity
+        const radius = 2.5;
+        const height = 20;
 
         for (let i = 0; i < count; i++) {
-            const angle = (i / count) * Math.PI * 4;
+            const angle = (i / count) * Math.PI * 6;
             const x = Math.cos(angle) * radius;
             const y = (i / count) * height - height / 2;
             const z = Math.sin(angle) * radius;
 
-            // Strand 1
-            p.push(new THREE.Vector3(x, y, z));
-            // Strand 2 (180 deg offset)
-            p.push(new THREE.Vector3(-x, y, -z));
+            // Simple Monochromatic Strands
+            p.push({ pos: new THREE.Vector3(x, y, z), color: "#ffffff" });
+            p.push({ pos: new THREE.Vector3(-x, y, -z), color: "#71717a" }); // Zinc-400 equivalent
 
-            // Connecting rungs
-            if (i % 5 === 0) {
-                const rungPoints = 5;
+            // Minimalist Rungs
+            if (i % 6 === 0) {
+                const rungPoints = 6;
                 for (let j = 1; j < rungPoints; j++) {
                     const t = j / rungPoints;
-                    p.push(new THREE.Vector3(
-                        x * (1 - 2 * t),
-                        y,
-                        z * (1 - 2 * t)
-                    ));
+                    p.push({
+                        pos: new THREE.Vector3(x * (1 - 2 * t), y, z * (1 - 2 * t)),
+                        color: "#3f3f46" // Zinc-600 equivalent
+                    });
                 }
             }
         }
@@ -40,23 +38,27 @@ function DNAParticles() {
     }, []);
 
     const groupRef = useRef<THREE.Group>(null);
+    const { mouse } = useThree();
 
-    useFrame((state) => {
+    useFrame(() => {
         if (groupRef.current) {
-            groupRef.current.rotation.y += 0.005;
-            groupRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.5) * 0.1;
+            groupRef.current.rotation.y += 0.0015; // Slower, more professional rotation
+            groupRef.current.rotation.x = THREE.MathUtils.lerp(groupRef.current.rotation.x, mouse.y * 0.1, 0.05);
+            groupRef.current.rotation.z = THREE.MathUtils.lerp(groupRef.current.rotation.z, -mouse.x * 0.05, 0.05);
         }
     });
 
     return (
         <group ref={groupRef}>
-            {points.map((pos, i) => (
-                <mesh key={i} position={pos}>
-                    <sphereGeometry args={[0.04, 8, 8]} />
+            {points.map((p, i) => (
+                <mesh key={i} position={p.pos}>
+                    <sphereGeometry args={[p.color === "#ffffff" ? 0.03 : 0.015, 8, 8]} />
                     <meshStandardMaterial
-                        color={i % 2 === 0 ? "#3b82f6" : "#8b5cf6"}
-                        emissive={i % 2 === 0 ? "#1e40af" : "#5b21b6"}
-                        emissiveIntensity={2}
+                        color={p.color}
+                        emissive={p.color}
+                        emissiveIntensity={p.color === "#ffffff" ? 0.8 : 0.2}
+                        transparent
+                        opacity={0.6}
                     />
                 </mesh>
             ))}
@@ -64,21 +66,36 @@ function DNAParticles() {
     );
 }
 
+function GridOverlay() {
+    return (
+        <gridHelper
+            args={[100, 40, "#ffffff", "#18181b"]}
+            position={[0, -12, 0]}
+            rotation={[0, 0, 0]}
+        >
+            <meshBasicMaterial attach="material" transparent opacity={0.03} />
+        </gridHelper>
+    );
+}
+
 export default function DNAHeroBackground() {
     return (
-        <div className="fixed inset-0 -z-10 bg-background">
-            <Canvas shadows dpr={[1, 2]}>
-                <PerspectiveCamera makeDefault position={[0, 0, 10]} fov={50} />
-                <ambientLight intensity={0.5} />
-                <pointLight position={[10, 10, 10]} intensity={1} color="#3b82f6" />
-                <pointLight position={[-10, -10, -10]} intensity={1} color="#8b5cf6" />
-                <spotLight position={[0, 5, 0]} angle={0.3} penumbra={1} intensity={2} castShadow />
+        <div className="fixed inset-0 -z-10 bg-black overflow-hidden">
+            <div className="noise-overlay" />
+            <Canvas dpr={[1, 2]}>
+                <PerspectiveCamera makeDefault position={[0, 0, 15]} fov={45} />
 
-                <Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
+                <ambientLight intensity={0.4} />
+                <pointLight position={[10, 10, 10]} intensity={0.5} color="#ffffff" />
+                <pointLight position={[-10, -10, -10]} intensity={0.3} color="#ffffff" />
+
+                <GridOverlay />
+
+                <Float speed={0.8} rotationIntensity={0.05} floatIntensity={0.2}>
                     <DNAParticles />
                 </Float>
             </Canvas>
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background pointer-events-none" />
+            <div className="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black pointer-events-none" />
         </div>
     );
 }