components/Starfield copy.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { Star } from "@/types/space"
+
+export default function Starfield() {
+  const [stars] = useState<Star[]>(() => 
+    Array.from({ length: 80 }).map((_, i) => ({
+      id: i,
+      left: `${Math.random() * 100}%`,
+      top: `${Math.random() * 100}%`,
+      size: Math.random() * 2 + 1,
+      duration: 2 + Math.random() * 3,
+      delay: Math.random() * 5,
+    }))
+  );
+
+  return (
+    <div className="fixed inset-0 z-[-1] bg-[#020617] overflow-hidden">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(30,58,138,0.2)_0%,_transparent_50%)]" />
+      {stars.map((star) => (
+        <motion.div
+          key={star.id}
+          className="absolute bg-white rounded-full shadow-[0_0_5px_white]"
+          style={{
+            top: star.top,
+            left: star.left,
+            width: star.size,
+            height: star.size,
+          }}
+          animate={{ opacity: [0.2, 0.8, 0.2] }}
+          transition={{
+            duration: star.duration,
+            repeat: Infinity,
+            delay: star.delay,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

components/Starfield.tsx

@@ -1,81 +1,42 @@
 "use client";
 import { motion } from "framer-motion";
 import { useState } from "react";
+import { Star } from "@/types/space"
 
-export default function ObservatoryBackground() {
-  const [stars] = useState(() => 
-    Array.from({ length: 120 }).map((_, i) => ({
+export default function Starfield() {
+  const [stars] = useState<Star[]>(() => 
+    Array.from({ length: 80 }).map((_, i) => ({
       id: i,
       left: `${Math.random() * 100}%`,
-      top: `${Math.random() * 70}%`, 
+      top: `${Math.random() * 100}%`,
       size: Math.random() * 2 + 1,
-      duration: 3 + Math.random() * 4,
+      duration: 2 + Math.random() * 3,
       delay: Math.random() * 5,
     }))
   );
 
-  const [skyline] = useState(() => {
-    const colors = ['#0b1420ff', '#0d1015ff', '#020408'];
-    const neons = ['#22d3ee', '#fb7185', '#60a5fa', '#ffffff', '#c084fc'];
-    
-    return Array.from({ length: 65 }).map((_, i) => ({
-      id: i,
-      width: `${1.2 + Math.random() * 2.5}%`,
-      height: `${8 + Math.random() * 30}%`,
-      color: colors[i % colors.length],
-      neon: neons[Math.floor(Math.random() * neons.length)],
-      hasWindow: Math.random() > 0.4,
-    }));
-  });
-
   return (
-    <div className="fixed inset-0 z-[-1] bg-[#02040a] overflow-hidden">
-      
-      <div 
-        className="absolute bottom-[-20%] left-1/2 -translate-x-1/2 w-[120%] h-[80%] opacity-50"
-        style={{
-          background: 'radial-gradient(circle at center bottom, #1e3a8a 0%, #050a24 50%, transparent 80%)',
-          filter: 'blur(40px)'
-        }}
-      />
-
+    <div className="fixed inset-0 z-[-1] bg-[#01030F] overflow-hidden">
+    {/* <div className="fixed inset-0 z-[-1] bg-[#020617] overflow-hidden"> */}
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(30,58,138,0.2)_0%,_transparent_50%)]" />
       {stars.map((star) => (
         <motion.div
           key={star.id}
-          className="absolute bg-white rounded-full shadow-[0_0_3px_rgba(255,255,255,0.8)]"
-          style={{ top: star.top, left: star.left, width: star.size, height: star.size }}
-          animate={{ opacity: [0.2, 0.7, 0.2] }}
-          transition={{ duration: star.duration, repeat: Infinity, delay: star.delay }}
+          className="absolute bg-white rounded-full shadow-[0_0_5px_white]"
+          style={{
+            top: star.top,
+            left: star.left,
+            width: star.size,
+            height: star.size,
+          }}
+          animate={{ opacity: [0.2, 0.8, 0.2] }}
+          transition={{
+            duration: star.duration,
+            repeat: Infinity,
+            delay: star.delay,
+          }}
         />
       ))}
-
-      <div 
-        className="absolute bottom-0 w-full h-[30%] flex items-end justify-center px-4"
-        style={{
-          WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)',
-          maskImage: 'linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)'
-        }}
-      >
-        {skyline.map((b) => (
-          <div
-            key={b.id}
-            className="relative flex-shrink-0"
-            style={{ 
-              width: b.width, 
-              height: b.height, 
-              backgroundColor: b.color,
-              backgroundImage: `repeating-linear-gradient(transparent, transparent 3px, rgba(255,255,255,0.01) 3px, rgba(255,255,255,0.01) 4px)`,
-            }}
-          >
-            <div 
-              className="absolute top-0 left-0 w-full h-[1px] opacity-30"
-              style={{ backgroundColor: b.neon, boxShadow: `0 0 8px ${b.neon}` }}
-            />
-          </div>
-        ))}
-      </div>
-
-      <div className="absolute bottom-0 w-full h-16 bg-gradient-to-t from-[#02040a] to-transparent" />
     </div>
   );
 }