a

2026-09-09 16:03:24 +03:30
parent ce2cf49edc
commit 71cd5c8072
16 changed files with 6191 additions and 190 deletions
@@ -0,0 +1,39 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function InteractiveAuroraBackground({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative h-screen w-full bg-gray-950">
+      {/* 
+        اینجا اصل جادو اتفاق می‌افتد.
+        یک شبه‌المان (pseudo-element) روی کل صفحه کشیده می‌شود.
+        پس‌زمینه آن یک گرادیان شعاعی (radial-gradient) است که در موقعیت متغیرهای --x و --y قرار گرفته.
+        این متغیرها توسط حرکت موس آپدیت می‌شوند.
+      */}
+      <div
+        className="
+          absolute inset-0 z-0
+          bg-[radial-gradient(40%_40%_at_var(--x,30%)_var(--y,30%),#214374_0%,transparent_100%)]
+          [background-size:150%_150%]
+          [background-repeat:no-repeat]
+        "
+        onMouseMove={(e) => {
+          const { clientX, clientY, currentTarget } = e;
+          const { left, top, width, height } = currentTarget.getBoundingClientRect();
+          const xPercent = ((clientX - left) / width) * 100;
+          const yPercent = ((clientY - top) / height) * 100;
+
+          currentTarget.style.setProperty("--x", `${xPercent.toFixed(2)}%`);
+          currentTarget.style.setProperty("--y", `${yPercent.toFixed(2)}%`);
+        }}
+      />
+      
+      {/* خطوط گرید برای حفظ حس مهندسی */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] z-10 pointer-events-none" />
+
+      {/* محتوای اصلی صفحه در لایه بالاتر قرار می‌گیرد */}
+      <div className="relative z-20">{children}</div>
+    </div>
+  );
+}