File size: 1,318 Bytes
894fa47 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import { cn } from "@/lib/utils";
interface CellularBackgroundProps {
children: React.ReactNode;
className?: string;
}
const CellularBackground = ({ children, className }: CellularBackgroundProps) => {
return (
<div className={cn("min-h-screen bg-background relative overflow-hidden", className)}>
{/* Animated floating orbs */}
<div
className="floating-orb w-72 h-72 bg-primary/30"
style={{ top: '5%', left: '5%', animationDelay: '0s' }}
/>
<div
className="floating-orb w-48 h-48 bg-success/20"
style={{ top: '60%', right: '10%', animationDelay: '2s' }}
/>
<div
className="floating-orb w-56 h-56 bg-warning/15"
style={{ bottom: '10%', left: '20%', animationDelay: '4s' }}
/>
<div
className="floating-orb w-40 h-40 bg-primary/20"
style={{ top: '30%', right: '20%', animationDelay: '1s' }}
/>
<div
className="floating-orb w-32 h-32 bg-secondary/25"
style={{ bottom: '30%', right: '5%', animationDelay: '3s' }}
/>
{/* Cellular pattern overlay */}
<div className="absolute inset-0 cellular-bg" />
{/* Content */}
<div className="relative z-10">
{children}
</div>
</div>
);
};
export default CellularBackground;
|