feat: enhance UI with glowing effects and visual improvements

- Added new MagicCard component for interactive hover effects with gradient lighting
- Enhanced CubeLight component with cyan glow effects and improved visual styling
- Added new GlowingEffect component for dynamic lighting animations
- Updated StackedCubesLight with ambient gradient background and smoother transitions
- Added tracking-wide property to CP text component for better readability
- Added new networkhero.png image asset

src/pages/home/HomeGlobe.tsx

@@ -4,6 +4,7 @@ import { Globe } from "@/components/ui/Globe"
 import { motion } from "framer-motion"
 import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 import { CountUpNumber } from '@/components/CountUpNumber'
+import { MagicCard } from '@/components/magicui/magic-card'
 
 export function WorldMap() {
   return (
@@ -62,13 +63,18 @@ export function WorldMap() {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
-              className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:top-12 lg:-left-12 w-80"
             >
-              <div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
-              <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total Central Processing Unit Cores available on the grid.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
+                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total Central Processing Unit Cores available on the grid.
+                </CP>
+              </MagicCard>
             </motion.div>
 
             <motion.div
@@ -76,13 +82,18 @@ export function WorldMap() {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
-              className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:-top-10 lg:right-0 w-80"
             >
-              <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
-              <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total number of nodes on the grid.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl  shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
+                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total number of nodes on the grid.
+                </CP>
+              </MagicCard>
             </motion.div>
 
             <motion.div
@@ -90,13 +101,18 @@ export function WorldMap() {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
-              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
             >
-              <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
-              <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
+                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total GB amount of storage (SSD, HDD, & RAM) on the grid.
+                </CP>
+              </MagicCard>
             </motion.div>
 
             <motion.div
@@ -104,13 +120,18 @@ export function WorldMap() {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
-              className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:top-47 lg:right-0 w-80"
             >
-              <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
-              <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total number of countries with active nodes.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
+                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total number of countries with active nodes.
+                </CP>
+              </MagicCard>
             </motion.div>
           </div>
         </div>

src/pages/home/StackSection.tsx

@@ -4,25 +4,32 @@ import { motion } from "framer-motion";
 import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
 import { P, SectionHeader, Eyebrow } from "@/components/Texts";
 import { FadeIn } from "@/components/ui/FadeIn";
-import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
 
 export function StackSectionLight() {
   return (
     <section className="relative w-full overflow-hidden py-24 lg:py-40">
       {/* === Background Layer === */}
       <div className="absolute inset-0 -z-10 bg-transparent">
-        {/* Dotted Glow Background */}
-        <DottedGlowBackground
-          gap={15}
-          radius={2}
-          color="rgba(0,0,0,0.4)"
-          glowColor="rgba(0,170,255,0.85)"
-          opacity={0.2}
+       
+
+        {/* === Center Radial Glow Aura === */}
+        <motion.div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(173,255,255,0.5) 0%, rgba(0,220,255,0.3) 30%, rgba(255,255,255,0) 70%)",
+            filter: "blur(120px)",
+          }}
+          animate={{
+            opacity: [0.6, 0.8, 0.6],
+            scale: [1, 1.05, 1],
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
         />
-        {/* Faint 3D grid floor */}
-        <div className="absolute inset-0 flex items-end justify-center overflow-hidden">
-          <div className="w-[200vw] h-[200vh] bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [transform:perspective(800px)_rotateX(70deg)] origin-bottom opacity-50" />
-        </div>
       </div>
 
       {/* === Content === */}