49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface HeroProps {
|
|
events?: any[];
|
|
}
|
|
|
|
const Hero: React.FC<HeroProps> = () => {
|
|
return (
|
|
<section className="relative w-full h-screen flex items-center justify-center overflow-hidden bg-[#F3F4F6] font-sans select-none">
|
|
{/* Optimized Video Background Container */}
|
|
<div className="absolute inset-0 z-0 overflow-hidden">
|
|
<video
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="auto"
|
|
className="w-full h-full object-cover scale-125 pointer-events-none"
|
|
style={{ imageRendering: 'auto' }}
|
|
>
|
|
<source src="https://mhvdpopbbtllhvzcpqkf.supabase.co/storage/v1/object/public/HERO_SECTION_VIDEO/VN20260331_201749.mp4" type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
|
|
{/* Centered Content */}
|
|
<div className="relative z-20 text-center px-6 max-w-5xl">
|
|
<h1 className="text-white text-6xl md:text-[8rem] font-serif mb-8 tracking-tight leading-[0.9] animate-in fade-in slide-in-from-bottom-20 duration-1000 drop-shadow-lg">
|
|
The Future is <br /> Built Here
|
|
</h1>
|
|
<p className="text-white/90 text-sm md:text-xl font-sans uppercase tracking-[0.6em] animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-500 drop-shadow-md">
|
|
Welcome to the RIT Events Hub
|
|
</p>
|
|
</div>
|
|
|
|
{/* Scroll Down Arrow */}
|
|
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 z-20 animate-bounce cursor-pointer opacity-40 hover:opacity-100 transition-opacity">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<span className="text-[10px] text-white font-sans uppercase tracking-[0.3em] mb-2">Scroll Down</span>
|
|
<i className="fas fa-chevron-down text-white text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|