frontend/src/pages/Home.jsx

import React from "react";

const Home = () => {
  return (
    <div className="relative w-full h-screen">
      {/* Video Background */}
      <video
        className="absolute inset-0 w-full h-full object-cover"
        autoPlay
        loop
        muted
      >
        <source
          src="https://www.shutterstock.com/shutterstock/videos/3534426181/preview/stock-footage-blue-spinning-dna-strand-and-fluid-particles-biotechnology-human-genome-laboratory-research.webm"
          type="video/webm"
        />
        Your browser does not support the video tag.
      </video>

      {/* Overlaying Text */}
      <div className="relative z-10 flex items-center justify-center w-full h-full flex-col text-center bg-black bg-opacity-50">
        {/* Title with Gradient */}
        <h1 className="text-5xl font-bold bg-clip-text text-transparent" style={{color: "#37B34C"}}>
          VarDiG
        </h1>

        {/* Subtitle */}
        <p className="mt-4 text-xl text-white">
          Genomics Simplified
        </p>
      </div>
    </div>
  );
};

export default Home;