Upload src/components/GeometricBackground.tsx with huggingface_hub

src/components/GeometricBackground.tsx

@@ -0,0 +1,62 @@
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export default function GeometricBackground() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="fixed inset-0 z-[-1] overflow-hidden pointer-events-none">
+      {/* Soft overlay gradient */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-900/10 via-transparent to-transparent"></div>
+      
+      {/* Floating geometric elements */}
+      <motion.div
+        className="absolute top-[10%] left-[15%] w-64 h-64 rounded-full border border-white/5"
+        animate={{
+          y: [0, -30, 0],
+          x: [0, 20, 0],
+          rotate: [0, 90, 0],
+        }}
+        transition={{
+          duration: 20,
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      />
+      <motion.div
+        className="absolute bottom-[20%] right-[10%] w-96 h-96 rounded-full border border-indigo-500/10"
+        animate={{
+          y: [0, 40, 0],
+          x: [0, -30, 0],
+          scale: [1, 1.1, 1],
+        }}
+        transition={{
+          duration: 25,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      />
+      <motion.div
+        className="absolute top-[40%] right-[30%] w-32 h-32 rotate-45 border border-sky-500/10"
+        animate={{
+          rotate: [45, 225],
+          y: [0, -50, 0],
+        }}
+        transition={{
+          duration: 30,
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      />
+
+      {/* Grid pattern overlay */}
+      <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_20%,transparent_100%)]"></div>
+    </div>
+  );
+}