43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
export default function AmbientBackground() {
|
|
return (
|
|
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none" aria-hidden>
|
|
{/* Main gradient orbs */}
|
|
<div
|
|
className="absolute -top-[40%] -left-[20%] w-[70vw] h-[70vw] rounded-full opacity-[0.035]"
|
|
style={{
|
|
background: 'radial-gradient(circle, #00e87b 0%, transparent 70%)',
|
|
animation: 'float-orb 20s ease-in-out infinite',
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute -bottom-[30%] -right-[20%] w-[60vw] h-[60vw] rounded-full opacity-[0.025]"
|
|
style={{
|
|
background: 'radial-gradient(circle, #06b6d4 0%, transparent 70%)',
|
|
animation: 'float-orb 25s ease-in-out infinite reverse',
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute top-[40%] left-[50%] w-[40vw] h-[40vw] rounded-full opacity-[0.02]"
|
|
style={{
|
|
background: 'radial-gradient(circle, #a78bfa 0%, transparent 70%)',
|
|
animation: 'float-orb 30s ease-in-out infinite 5s',
|
|
}}
|
|
/>
|
|
|
|
{/* Dot grid pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle, #8896b8 1px, transparent 1px)',
|
|
backgroundSize: '32px 32px',
|
|
}}
|
|
/>
|
|
|
|
{/* Top gradient line */}
|
|
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-g-green/20 to-transparent" />
|
|
</div>
|
|
)
|
|
}
|