234 lines
10 KiB
TypeScript
234 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Zap, Sparkles, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="radialGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="layered-depth"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Vitaliy Glek"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Highlights", id: "features" },
|
|
{ name: "Legacy", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Watch Now", href: "https://twitch.tv" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="The Greatest Flash Player Alive"
|
|
description="Witness the legendary moments of Vitaliy The Glek Mulika preparing for the Major. The worst player in the world with the most perfect flash timing."
|
|
tag="Preparing for Major"
|
|
tagIcon={Zap}
|
|
mediaItems={[
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508782701-rgpzxtr6.jpg", imageAlt: "Tournament moment" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508783414-ln52bf3j.jpg", imageAlt: "Flash gameplay" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508784027-qwzfwcyl.jpg", imageAlt: "Championship stage" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508784624-wrt2s2wl.jpg", imageAlt: "Dramatic moment" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508785324-xclruxem.jpg", imageAlt: "Focused player" }
|
|
]}
|
|
buttons={[
|
|
{ text: "View Highlight Reel", href: "#features" },
|
|
{ text: "Subscribe for Updates", href: "#contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<ParallaxAbout
|
|
title="The Legend of Flashes"
|
|
description="From underground tournaments to the brightest stage, Vitaliy The Glek has perfected one thing and one thing only: the art of flashing his entire team. His dedication to this singular skill is unmatched. Other players may aim for headshots, but Glek aims for your retinas."
|
|
tag="About The Flash Master"
|
|
tagIcon={Sparkles}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508785324-xclruxem.jpg"
|
|
imageAlt="Vitaliy focused"
|
|
buttons={[{ text: "Read Full Bio", href: "#contact" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
title="Iconic Flash Moments"
|
|
description="Experience the timeline of legendary flash incidents that define a career"
|
|
tag="Highlight Reel"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "The Pre-Round Flash",
|
|
description: "Glek flashes his team during the buy phase, setting the tone for what's to come. A classic move that has cost countless rounds.",
|
|
phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786174-10lisua2.jpg" },
|
|
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786785-0m6ci3fd.jpg" }
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "The Clutch Darkness",
|
|
description: "One vs five situation. Glek's solution? Flash the remaining teammate. Strategy at its finest.",
|
|
phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786174-10lisua2.jpg" },
|
|
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786785-0m6ci3fd.jpg" }
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "The Major Qualifier Incident",
|
|
description: "A moment so bright, teammates needed sunglasses indoors for a week. The flashback heard around the world.",
|
|
phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786174-10lisua2.jpg" },
|
|
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786785-0m6ci3fd.jpg" }
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="Teammate Testimonials"
|
|
description="Hear from those who've had the privilege of being flashed by the master"
|
|
tag="Team Reviews"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Alex K.",
|
|
handle: "@alexkilled",
|
|
testimonial: "Every round with Glek is an adventure. Mostly in darkness.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508787668-x39wdug2.jpg"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Marcus T.",
|
|
handle: "@marcusblind",
|
|
testimonial: "I've never seen someone so consistently good at one thing. Blinding us, that is.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508788281-5nv8qss5.jpg"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Sarah R.",
|
|
handle: "@sarahcantaimbot",
|
|
testimonial: "Playing with Glek taught me patience. And how to predict flash trajectories.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508788859-5wy6d9m5.jpg"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "DarkMode Dave",
|
|
handle: "@davelovesdark",
|
|
testimonial: "Glek's flashes are so bright, I play in dark mode to compensate.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508789656-lmoyoqdw.jpg"
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Echo E.",
|
|
handle: "@echoesofflash",
|
|
testimonial: "The echo of his flashes still rings in my ears. Literally.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508790236-99qgyazg.jpg"
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Tommy T.",
|
|
handle: "@tommyturned",
|
|
testimonial: "Turned into a flash enthusiast after playing with Glek. Still can't see though.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508790862-n4p6b120.jpg"
|
|
}
|
|
]}
|
|
showRating={true}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Common Questions"
|
|
description="Everything you need to know about The Glek and his legendary flash technique"
|
|
tag="FAQ"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How did Vitaliy master the flash?",
|
|
content: "Years of dedication. Mostly accidental, but dedication nonetheless."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Can teammates predict his flashes?",
|
|
content: "No. Even Glek himself doesn't know when they're coming."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Has he ever flashed an enemy?",
|
|
content: "Once. By accident. They walked directly into smokes afterwards."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "What's his secret?",
|
|
content: "Practice, timing, and a mysterious ability to make purple and white combine in the most inconvenient ways."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Is he attending the Major?",
|
|
content: "Yes. Bring sunglasses."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "How can I learn from Glek?",
|
|
content: "Embrace the darkness. Accept the flash. Become one with the retinas."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Stay Updated"
|
|
title="Join the Flash Community"
|
|
description="Subscribe to get the latest Glek highlights, flash tutorials, and team coordination guides."
|
|
tagIcon={Mail}
|
|
useInvertedBackground="noInvert"
|
|
inputPlaceholder="your.blinded.email@example.com"
|
|
buttonText="Subscribe"
|
|
termsText="By subscribing, you agree to receive weekly flash notifications and tactical darkness updates."
|
|
onSubmit={(email) => console.log(email)}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Vitaliy Glek"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |