88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef } from "react";
|
|
import gsap from "gsap";
|
|
import { useGSAP } from "@gsap/react";
|
|
import Link from "next/link";
|
|
|
|
gsap.registerPlugin(useGSAP);
|
|
|
|
interface HeroProps {
|
|
authButton?: React.ReactNode;
|
|
}
|
|
|
|
const Hero = ({ authButton }: HeroProps) => {
|
|
const container = useRef(null);
|
|
const titleRef = useRef(null);
|
|
const textRef = useRef(null);
|
|
const btnRef = useRef(null);
|
|
|
|
useGSAP(
|
|
() => {
|
|
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
|
|
|
|
tl.from(titleRef.current, {
|
|
y: 50,
|
|
opacity: 0,
|
|
duration: 1,
|
|
stagger: 0.2,
|
|
})
|
|
.from(
|
|
textRef.current,
|
|
{
|
|
y: 30,
|
|
opacity: 0,
|
|
duration: 0.8,
|
|
},
|
|
"-=0.5"
|
|
)
|
|
.from(
|
|
btnRef.current,
|
|
{
|
|
y: 20,
|
|
opacity: 0,
|
|
duration: 0.6,
|
|
},
|
|
"-=0.4"
|
|
);
|
|
},
|
|
{ scope: container }
|
|
);
|
|
|
|
return (
|
|
<section
|
|
ref={container}
|
|
className="min-h-screen flex flex-col items-center justify-center text-center px-4 relative"
|
|
>
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
<div className="inline-block px-4 py-1 mb-4 border border-blue-500/30 rounded-full bg-blue-500/10 backdrop-blur-sm">
|
|
<span className="text-sm font-medium text-blue-300">Under Development - If you want pre-release access, contact <span className="font-bold">_void_x_</span> on Discord.</span>
|
|
</div>
|
|
<h1
|
|
ref={titleRef}
|
|
className="text-6xl md:text-8xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-200 to-slate-400"
|
|
>
|
|
VOID SENTINEL
|
|
</h1>
|
|
<p
|
|
ref={textRef}
|
|
className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto italic"
|
|
>
|
|
“I am the sentinel at the edge of the void. A warden against the shadows and an echo of light for those within. I protect, I entertain, I watch.”
|
|
</p>
|
|
<div
|
|
ref={btnRef}
|
|
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
|
>
|
|
{authButton}
|
|
<Link href="/docs" className="px-8 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white rounded-full font-semibold transition-all hover:scale-105 flex items-center gap-2 backdrop-blur-sm">
|
|
Documentation
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|