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:
2025-10-24 20:41:42 +02:00
parent 94f4e72e57
commit 68b2119c76
8 changed files with 430 additions and 109 deletions

View File

@@ -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 === */}