File size: 2,154 Bytes
ad83ff7 8b105ad ad83ff7 8b105ad ad83ff7 8b105ad ad83ff7 8b105ad a58a274 8b105ad ad83ff7 8b105ad ad83ff7 8b105ad ad83ff7 8b105ad bb51b11 ad83ff7 8b105ad ad83ff7 8b105ad |
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import React, { useEffect } from "react";
import { ReactTyped } from "react-typed";
import { Hero_video } from "../utils/index";
import Logo from "../assets/images/genomatics-logo.png";
import { useLoader } from "../components/LoaderContext"; // Import global loader state
const Home = () => {
const { isLoaderShown, setIsLoaderShown } = useLoader();
useEffect(() => {
if (isLoaderShown) {
setTimeout(() => setIsLoaderShown(false), 2500); // Loader stays for at least 2.5s
}
}, [isLoaderShown, setIsLoaderShown]);
return (
<div className="relative w-full h-screen">
{/* Loader (Only appears on first visit) */}
{isLoaderShown && (
<div className="fixed inset-0 flex items-center justify-center bg-black z-[9999] transition-opacity duration-1000">
<img
src={Logo}
alt="Loading..."
className="w-40 h-40 animate-pulse" // Blinking effect
/>
</div>
)}
{/* Video Background */}
<video
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${
isLoaderShown ? "opacity-0" : "opacity-100"
}`}
autoPlay
loop
muted
preload="auto"
>
<source src={Hero_video} type="video/mp4" />
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 transition-opacity duration-1000 ${
isLoaderShown ? "opacity-0" : "opacity-100"
}`}
>
{/* Title with Gradient */}
<h1 className="text-5xl font-bold bg-clip-text text-transparent" style={{ color: "#3267B9" }}>
<ReactTyped
strings={["Variants, Diseases and Genes", "VarDiG"]}
typeSpeed={50}
backSpeed={30}
backDelay={1500}
loop
/>
</h1>
{/* Subtitle */}
<p className="mt-4 text-xl text-white">Variants Deciphered</p>
</div>
</div>
);
};
export default Home; |