design

components/TechBackground.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+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}%` 
+          }}
+        />
+      ))}
+    </div>
+  );
+};