Initial commit
This commit is contained in:
234
src/app/page.tsx
Normal file
234
src/app/page.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user