import React from "react";
import Highlights from "../sections/vardig/Highlights";
import BookDemo from "../sections/vardig/Bookdemo";
import Pricing from "../sections/vardig/Pricing";
import Testimonials from "../sections/vardig/Testimonials";


const VarDiG = () => {
  return (
    <>
      <div className="relative w-full h-[85vh]">
        {/* 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>
      <Highlights/>
      <BookDemo/>
      <Pricing/>
      <Testimonials/>
    </>
  );
};

export default VarDiG;