78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Button, BackgroundSection } from "@/components/ui";
|
|
|
|
interface HeroSectionProps {
|
|
backgroundImage: string;
|
|
}
|
|
|
|
export default function HeroSection({ backgroundImage }: HeroSectionProps) {
|
|
return (
|
|
<BackgroundSection backgroundImage={backgroundImage} className="pt-24">
|
|
<div className="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 font-gaming"
|
|
style={{
|
|
backgroundImage: `linear-gradient(90deg, var(--accent-color) 0%, var(--accent) 30%, var(--accent) 50%, var(--accent) 70%, var(--accent-color) 100%)`,
|
|
backgroundSize: "200% auto",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
color: "transparent",
|
|
filter: `drop-shadow(0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent))`,
|
|
}}
|
|
>
|
|
GAME.OF.TECH
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<div
|
|
className="text-xl md:text-2xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 mb-8 tracking-wider"
|
|
style={{ color: "var(--accent-color)" }}
|
|
>
|
|
<span>✦</span>
|
|
<span>Peaksys</span>
|
|
<span>✦</span>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p
|
|
className="text-base md:text-lg max-w-3xl mx-auto mb-12 leading-relaxed px-4"
|
|
style={{ color: "var(--foreground)" }}
|
|
>
|
|
Transformez votre apprentissage en aventure. Participez aux ateliers,
|
|
défiez-vous sur les katas, partagez vos connaissances lors des
|
|
présentations et progressez dans votre parcours tech. Gagnez de
|
|
l'expérience, montez en niveau et affrontez vos collègues sur le
|
|
classement. L'excellence technique, ça se joue.
|
|
</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 variant="primary" size="lg">
|
|
See events
|
|
</Button>
|
|
</Link>
|
|
<Link href="/leaderboard">
|
|
<Button
|
|
variant="primary"
|
|
size="lg"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<span>⏵</span>
|
|
<span>See leaderboard</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</BackgroundSection>
|
|
);
|
|
}
|