31 lines
1.4 KiB
TypeScript
31 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
|
|
export default function GridBackground() {
|
|
return (
|
|
<div className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none z-[0]">
|
|
{/* Dynamic Ambient Glows */}
|
|
<div className="absolute top-[10%] left-[20%] w-[35vw] h-[35vw] bg-accent-emerald-dim rounded-full blur-[120px] animate-pulse-slow opacity-60" />
|
|
<div className="absolute bottom-[20%] right-[10%] w-[45vw] h-[45vw] bg-accent-cyan-dim rounded-full blur-[150px] animate-pulse-slow opacity-50" style={{ animationDelay: "2s" }} />
|
|
|
|
{/* Grid Pattern */}
|
|
<div
|
|
className="absolute inset-0 w-full h-full"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(to right, rgba(13, 242, 147, 0.03) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(13, 242, 147, 0.03) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "60px 60px",
|
|
}}
|
|
/>
|
|
|
|
{/* Decorative vertical lines */}
|
|
<div className="absolute left-[15%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-accent-emerald/5 to-transparent" />
|
|
<div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-accent-cyan/5 to-transparent" />
|
|
<div className="absolute right-[15%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-accent-emerald/5 to-transparent" />
|
|
</div>
|
|
);
|
|
}
|