design

components/TechBackground.tsx

@@ -1,91 +1,21 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
+import React from 'react';
 
 export const TechBackground = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
-        <div className="absolute inset-0 grid-pattern opacity-[0.15]" />
-      </div>
-    );
-  }
-
   return (
     <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
-      <div className="absolute inset-0 grid-pattern opacity-[0.15]" />
-      
-      {/* Animated Tech Lines */}
-      {[...Array(5)].map((_, i) => (
-        <motion.div
-          key={`line-${i}`}
-          initial={{ x: '-100%', opacity: 0 }}
-          animate={{ x: '100%', opacity: [0, 0.4, 0] }}
-          transition={{ 
-            duration: 8 + i * 2, 
-            repeat: Infinity, 
-            ease: "linear",
-            delay: i * 2
-          }}
-          className="absolute h-[2px] bg-gradient-to-r from-transparent via-accent/40 to-transparent w-full"
-          style={{ top: `${20 * (i + 1)}%` }}
-        />
-      ))}
-
-      {/* Floating Tech Squares */}
-      {[...Array(8)].map((_, i) => (
-        <motion.div
-          key={`square-${i}`}
-          initial={{ opacity: 0, scale: 0 }}
-          animate={{ 
-            opacity: [0, 0.2, 0],
-            scale: [0, 1, 0],
-            rotate: [0, 90, 180],
-            x: [0, Math.random() * 200 - 100, 0],
-            y: [0, Math.random() * 200 - 100, 0]
-          }}
-          transition={{ 
-            duration: 8 + Math.random() * 4, 
-            repeat: Infinity, 
-            ease: "easeInOut",
-            delay: i * 2
-          }}
-          className="absolute w-8 h-8 border border-accent/10 rounded-sm"
-          style={{ 
-            left: `${Math.random() * 100}%`, 
-            top: `${Math.random() * 100}%` 
-          }}
-        />
-      ))}
-
-      {/* Pulsing Dots */}
-      {[...Array(15)].map((_, i) => (
-        <motion.div
-          key={`dot-${i}`}
-          animate={{ 
-            opacity: [0.1, 0.4, 0.1],
-            scale: [1, 1.5, 1]
-          }}
-          transition={{ 
-            duration: 3 + Math.random() * 2, 
-            repeat: Infinity, 
-            ease: "easeInOut",
-            delay: i * 0.5
-          }}
-          className="tech-dot"
-          style={{ 
-            left: `${Math.random() * 100}%`, 
-            top: `${Math.random() * 100}%` 
-          }}
-        />
-      ))}
+      {/* Very subtle large grid */}
+      <div 
+        className="absolute inset-0 opacity-[0.05]" 
+        style={{ 
+          backgroundImage: `
+            linear-gradient(to right, var(--color-accent) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--color-accent) 1px, transparent 1px)
+          `,
+          backgroundSize: '120px 120px'
+        }} 
+      />
     </div>
   );
 };