[bug]: /docs/components/meteors

[bdiazc90]

Describe the bug When you use <Meteors /> near to another custom component like <Header /> or <NavBar />, these components may grow up accidentally, due to an overflow cause by meteors.

I've made some changes to meteors.tsx to fix it, basically, I added a div container with position relative and overflow = hidden:

return (
<div className="relative overflow-hidden w-screen">
        {[...meteorStyles].map((style, idx) => (
            // Meteor Head
            <span key={idx} className={cn("pointer-events-none absolute left-1/2 top-1/2 size-0.5 rotate-[215deg] animate-meteor rounded-full bg-blue-500 shadow-[0_0_0_1px_#ffffff10]")} style={style}>
                {/* Meteor Tail */}
                <div className="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-blue-200 to-transparent" />
            </span>
        ))}
    </div>
);