230 lines
10 KiB
TypeScript
230 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Award, Code, Flag, Shield } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "Stats", id: "#stats"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "How It Works", id: "#how-it-works"},
|
|
{
|
|
name: "Early Access", id: "#early-access"},
|
|
]}
|
|
button={{
|
|
text: "Enter the Game", href: "#early-access"}}
|
|
brandName="ZERODAY"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "animated-grid"}}
|
|
imagePosition="right"
|
|
title="ZERODAY"
|
|
description="Hack the system. Master the art of ethical intrusion."
|
|
buttons={[
|
|
{
|
|
text: "Enter the Game", href: "#early-access"},
|
|
{
|
|
text: "Watch Trailer", href: "#"},
|
|
]}
|
|
imageSrc="https://wtx.b-cdn.net/webild-assets/animated-characters/animated-character-1.webp"
|
|
imageAlt="Terminal with cybersecurity code"
|
|
mediaAnimation="slide-up"
|
|
fixedMediaHeight={true}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/dark-style-ninja-naruto_23-2151140105.jpg", alt: "Anonymous Hacker 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/image-skull-sheet-orange-paper_23-2147908150.jpg", alt: "Anonymous Hacker 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/hacker-with-laptop_23-2147985342.jpg", alt: "Anonymous Hacker 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/christmas-background-layout-black-background_1303-12738.jpg", alt: "Anonymous Hacker 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/yellow-dummy-head-orange-background_53876-96744.jpg", alt: "Anonymous Hacker 5"},
|
|
]}
|
|
avatarText="Join 2400+ elite hackers"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "NETWORK INTRUSION"},
|
|
{
|
|
type: "text", text: "SYSTEM EXPLOITATION"},
|
|
{
|
|
type: "text", text: "VULNERABILITY RESEARCH"},
|
|
{
|
|
type: "text", text: "DIGITAL FORENSICS"},
|
|
{
|
|
type: "text", text: "CTF CHALLENGES"},
|
|
]}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="stats" data-section="stats">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "players", value: "2400+", title: "Active Players", description: "Join a growing community of aspiring ethical hackers.", imageSrc: "http://img.b2bpic.net/free-vector/set-people-avatars-isolated-round-icons-faces_107791-12891.jpg", imageAlt: "Players icon"},
|
|
{
|
|
id: "challenges", value: "180+", title: "Unique Challenges", description: "From beginner to advanced, test your skills in diverse scenarios.", imageSrc: "http://img.b2bpic.net/free-vector/working-process-design_1133-73.jpg", imageAlt: "Challenges icon"},
|
|
{
|
|
id: "uptime", value: "99.9%", title: "System Uptime", description: "Always ready for your next exploit, with minimal downtime.", imageSrc: "http://img.b2bpic.net/free-vector/internet-connection-designs-collection_1209-49.jpg", imageAlt: "Uptime icon"},
|
|
]}
|
|
title="Game-Changing Stats"
|
|
description="See the impact of Zeroday's community and challenges."
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Unleash Your Inner Hacker"
|
|
description={[
|
|
"Zeroday is more than just a game; it's a dynamic platform engineered for cybersecurity enthusiasts and aspiring ethical hackers. Dive into a meticulously crafted virtual environment where you can practice and hone your skills against realistic vulnerabilities and complex systems. Our challenges mirror real-world scenarios, offering an unparalleled learning experience without real-world risks.", "Forget flashy arcade aesthetics. Zeroday offers a dark, matte, and serious interface, designed to immerse you in the raw, authentic feel of terminal-based hacking. Develop your understanding of network protocols, exploit techniques, and defensive strategies through engaging, hands-on modules. Master the art of ethical intrusion and earn your stripes in a community built on precision and knowledge."]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
icon: Shield,
|
|
title: "Real CVE Scenarios", description: "Tackle challenges based on actual Common Vulnerabilities and Exposures."},
|
|
{
|
|
icon: Flag,
|
|
title: "CTF Challenges", description: "Engage in Capture The Flag events designed to test your penetration skills."},
|
|
{
|
|
icon: Award,
|
|
title: "Live Leaderboard", description: "Compete globally, track your progress, and climb the ranks of top hackers."},
|
|
{
|
|
icon: Code,
|
|
title: "Skill Progression Tree", description: "Visualize and advance your hacking expertise through a structured skill path."},
|
|
]}
|
|
title="Master Core Cyber Skills"
|
|
description="Dive deep into the methodologies and tools of ethical hacking."
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "step1", title: "Step 1: Create Your Secure Account", content: "> create_account --new\\\nConnecting to Zeroday network...\\\nAccount created: user@zeroday.org\\\nAuth token generated: ##########\\\nWelcome, [USERNAME]. Your journey begins."},
|
|
{
|
|
id: "step2", title: "Step 2: Select a Scenario", content: "> select_scenario --difficulty=hard\\\nFetching advanced scenarios...\\\nScenario 'Phoenix Rising' loaded. Type 'exploit --help' for options.\\\nObjective: Breach firewall, exfiltrate data from secure server."},
|
|
{
|
|
id: "step3", title: "Step 3: Exploit & Learn", content: "> exploit --learn --score\\\nInitiating exploit module...\\\nAnalyzing vulnerabilities in real-time...\\\nExploit successful. Data exfiltrated. Score updated: +500pts\\\nNew skill unlocked: Advanced Buffer Overflow. Read 'man buffer_overflow'."},
|
|
]}
|
|
title="Your Path to Mastery"
|
|
description="A streamlined process to become a cybersecurity expert with Zeroday."
|
|
faqsAnimation="slide-up"
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="early-access" data-section="early-access">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
tag="Join the Elite"
|
|
title="Get Early Access"
|
|
description="Be among the first to experience Zeroday. Sign up for exclusive beta invitations and critical updates on game development and new challenges."
|
|
imageSrc="https://wtx.b-cdn.net/webild-assets/animated-characters/animated-character-2.webp"
|
|
imageAlt="Secure network illustration"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Your secure email"
|
|
buttonText="Request Early Access"
|
|
termsText="By clicking Request Early Access you're confirming that you agree with our Terms of Service."
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="ZERODAY"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Contact", href: "#early-access"},
|
|
],
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{
|
|
label: "Discord", href: "https://discord.com"},
|
|
{
|
|
label: "GitHub", href: "https://github.com"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Zeroday. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|