78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useBackgroundImage } from "@/hooks/usePreferences";
|
|
import Link from "next/link";
|
|
|
|
export default function HeroSection() {
|
|
const backgroundImage = useBackgroundImage("home", "/got-2.jpg");
|
|
|
|
return (
|
|
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: `url('${backgroundImage}')`,
|
|
}}
|
|
>
|
|
{/* Dark overlay for readability */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80 z-[1]"></div>
|
|
</div>
|
|
|
|
{/* Hero Content */}
|
|
<div className="relative z-10 w-full max-w-5xl xl:max-w-6xl mx-auto px-4 sm:px-8 py-16 text-center flex flex-col items-center">
|
|
{/* Game Title */}
|
|
<div className="w-full flex justify-center mb-4 overflow-hidden">
|
|
<h1 className="text-4xl sm:text-5xl md:text-8xl lg:text-9xl xl:text-9xl font-gaming font-black tracking-tight relative break-words">
|
|
<span
|
|
className="title-animated inline-block relative z-10"
|
|
style={{
|
|
backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 30%, #ff8c00 50%, #ffa500 70%, #daa520 100%)`,
|
|
backgroundSize: "200% auto",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
color: "transparent",
|
|
filter: `drop-shadow(0 0 12px rgba(255, 140, 0, 0.4))`,
|
|
}}
|
|
>
|
|
GAME.OF.TECH
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<div className="text-pixel-gold text-xl md:text-2xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 mb-8 tracking-wider">
|
|
<span>✦</span>
|
|
<span>Peaksys</span>
|
|
<span>✦</span>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p className="text-white text-base md:text-lg max-w-3xl mx-auto mb-12 leading-relaxed px-4">
|
|
Dans un monde numérique de technologie de pointe, où les systèmes
|
|
d'IA évoluent et où d'anciens codes attendent d'être
|
|
découverts. Partez pour un voyage épique pour forger des alliances,
|
|
conquérir des défis et raconter votre histoire d'innovation au
|
|
sein d'une communauté de gaming tech florissante.
|
|
</p>
|
|
|
|
{/* Call-to-Action Buttons */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
<Link href="/events">
|
|
<button className="px-8 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
|
|
<span>See events</span>
|
|
</button>
|
|
</Link>
|
|
<Link href="/leaderboard">
|
|
<button className="px-8 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition flex items-center gap-2">
|
|
<span>⏵</span>
|
|
<span>See leaderboard</span>
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|