This is the code snippet for app/page.tsx:
export default function Home() {
return (
<>
<main className='min-h-screen'>
<video
muted
loop
autoPlay
className="fixed -top-2 left-0 min-w-full min-h-full -z-50 object-cover"
>
<source src= '@/assets/video/videoBg.mp4'type="video/mp4" />
<source src='@/assets/video/videoBg.mp4' type="video/ogg" />
Your browser does not support the video tag.
</video>
<div className=" bg-black opacity-80 w-full min-h-[140vh] absolute top-0 left-0 -z-40"></div>
<div className=" w-full py-10 px-0 flex flex-col justify-end">
<div className="w-[90%] m-auto flex flex-col items-center gap-10">
<h1 className="font-medium text-center sm:text-start text-2xl md:text-3xl lg:text-4xl xl:text-5xl leading-loose text-white">
Empower Your Wellness Journey with Health Optima
</h1>
<h3 className="text-white text-3xl font-light">Your Ultimate Health and Wellness Companion</h3>
</div>
</div>
</main>
</>
)
}
The video may not be rendering correctly within the structure.
There could be an issue with the Tailwind CSS implementation.