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
This commit is contained in:
		@@ -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 === */}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user