288 lines
16 KiB
TypeScript
288 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||
import { Sparkles, Users, MessageSquareText, Book, Swords } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-bubble"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="pill"
|
||
contentWidth="compact"
|
||
sizing="mediumLargeSizeLargeTitles"
|
||
background="grid"
|
||
cardStyle="gradient-mesh"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="medium"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#home"},
|
||
{
|
||
name: "Features", id: "#features"},
|
||
{
|
||
name: "Packs", id: "#packs"},
|
||
{
|
||
name: "Community", id: "#community"},
|
||
{
|
||
name: "Support", id: "#faq"},
|
||
]}
|
||
button={{
|
||
text: "Play Now", href: "#contact"}}
|
||
logoSrc="http://img.b2bpic.net/free-vector/gaming-logo-template_23-2149588433.jpg"
|
||
logoAlt="GameVerse Logo"
|
||
brandName="GameVerse"
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroBillboard
|
||
background={{
|
||
variant: "downward-rays-animated-grid"}}
|
||
title="Unleash Your Power: Open Packs, Battle, and Connect!"
|
||
description="Dive into GameVerse, the ultimate social gaming platform where every pack you open could change your destiny. Engage in thrilling battles, forge new friendships, and share your epic moments with a vibrant community."
|
||
tag="Adventure Awaits"
|
||
tagIcon={Sparkles}
|
||
buttons={[
|
||
{
|
||
text: "Start Your Journey", href: "#features"},
|
||
{
|
||
text: "Discover Packs", href: "#packs"},
|
||
]}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5105.jpg", alt: "Gamer Avatar 1"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419475.jpg", alt: "Gamer Avatar 2"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-holding-controller-close-up_23-2149005239.jpg", alt: "Gamer Avatar 3"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/scene-professional-esports-gamer-profile-colored-with-red-blue-light-generative-ai_191095-1975.jpg", alt: "Gamer Avatar 4"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/focused-man-rgb-lights-lit-living-room-playing-videogames_482257-116287.jpg", alt: "Focused man in rgb lights lit living room playing videogames"},
|
||
]}
|
||
avatarText="Join thousands of players!"
|
||
imageSrc="http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-neon-colors-futuristic-technology_23-2151672064.jpg"
|
||
imageAlt="GameVerse Dashboard showing battles, packs, and social features"
|
||
mediaAnimation="slide-up"
|
||
marqueeItems={[
|
||
{
|
||
type: "text", text: "New packs every week!"},
|
||
{
|
||
type: "text", text: "Compete in daily tournaments!"},
|
||
{
|
||
type: "text", text: "Connect with friends globally!"},
|
||
{
|
||
type: "text", text: "Unlock exclusive rewards!"},
|
||
{
|
||
type: "text", text: "Experience next-gen battles!"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<InlineImageSplitTextAbout
|
||
useInvertedBackground={true}
|
||
heading={[
|
||
{
|
||
type: "text", content: "Experience the Thrill of GameVerse"},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "How It Works", href: "#"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/woman-enjoy-using-vr-pointing-with-fingers_23-2148513482.jpg"
|
||
imageAlt="holographic game ui coins packs"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentySix
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Friend System", description: "Easily add friends, track their activity, and invite them to battles or private chats. Build your inner circle within GameVerse.", imageSrc: "http://img.b2bpic.net/free-photo/cute-couple-playing-videogames-indoors_23-2148969237.jpg", imageAlt: "Friends connecting online", buttonIcon: Users,
|
||
},
|
||
{
|
||
title: "Dynamic Chat", description: "Communicate with friends and guild members using rich media. Share images, videos, create polls, and post statuses directly in your chat.", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-opened-ai-chat-it_1268-21624.jpg", imageAlt: "In-game chat interface", buttonIcon: MessageSquareText,
|
||
},
|
||
{
|
||
title: "Post Statuses & Media", description: "Express yourself! Post updates, share your epic wins, or stream your latest pack opening with followers. Engage your community with multimedia content.", imageSrc: "http://img.b2bpic.net/free-photo/communication-social-media-icons-personal-computer_23-2150781062.jpg", imageAlt: "User profile with status updates", buttonIcon: Book,
|
||
},
|
||
{
|
||
title: "Epic Battles", description: "Utilize the cards from your opened packs in strategic battles against other players. Climb the leaderboards and prove your tactical prowess.", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-interior-mall_23-2151591435.jpg", imageAlt: "Two game characters battling", buttonIcon: Swords,
|
||
},
|
||
]}
|
||
title="Connect and Conquer"
|
||
description="GameVerse offers robust features designed for both fierce competitors and social butterflies."
|
||
tag="Key Features"
|
||
buttons={[
|
||
{
|
||
text: "Explore All", href: "#"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="packs" data-section="packs">
|
||
<ProductCardOne
|
||
animationType="scale-rotate"
|
||
textboxLayout="default"
|
||
gridVariant="bento-grid"
|
||
useInvertedBackground={true}
|
||
products={[
|
||
{
|
||
id: "pack-gold", name: "Gold Booster Pack", price: "500 Coins", imageSrc: "http://img.b2bpic.net/free-vector/chests-with-treasure-open-closed-wooden-trunk_107791-12637.jpg", imageAlt: "Gold Booster Pack"},
|
||
{
|
||
id: "pack-silver", name: "Silver Starter Pack", price: "250 Coins", imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg", imageAlt: "Silver Starter Pack"},
|
||
{
|
||
id: "pack-bronze", name: "Bronze Basic Pack", price: "100 Coins", imageSrc: "http://img.b2bpic.net/free-vector/egyptian-treasure-chests-with-gold-coins_107791-19757.jpg", imageAlt: "Bronze Basic Pack"},
|
||
{
|
||
id: "pack-epic", name: "Epic Challenge Pack", price: "1200 Coins", imageSrc: "http://img.b2bpic.net/free-photo/purple-pigment-ob-lack_23-2147745463.jpg", imageAlt: "Epic Challenge Pack"},
|
||
{
|
||
id: "pack-legendary", name: "Legendary Mythos Crate", price: "2500 Coins", imageSrc: "http://img.b2bpic.net/free-photo/close-up-mystery-box_23-2149631424.jpg", imageAlt: "Legendary Mythos Crate"},
|
||
{
|
||
id: "pack-starter", name: "New Player Bundle", price: "50 Coins", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-3d-rendering-modern-tech-device_187299-46717.jpg", imageAlt: "New Player Bundle"},
|
||
]}
|
||
title="Unlock New Power"
|
||
description="Discover a variety of packs, each with unique cards to strengthen your deck. Use your hard-earned coins to reveal new units, abilities, and rare collectibles."
|
||
tag="Game Packs"
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardFourteen
|
||
useInvertedBackground={false}
|
||
title="Our Growing Community"
|
||
tag="Platform Stats"
|
||
metrics={[
|
||
{
|
||
id: "users", value: "500k+", description: "Registered Players"},
|
||
{
|
||
id: "battles", value: "1M+", description: "Total Battles Fought"},
|
||
{
|
||
id: "packs", value: "2.5M+", description: "Packs Opened"},
|
||
{
|
||
id: "friends", value: "10M+", description: "Friendships Forged"},
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="team" data-section="team">
|
||
<TeamCardOne
|
||
animationType="depth-3d"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={true}
|
||
members={[
|
||
{
|
||
id: "member-1", name: "Alex Chen", role: "CEO & Founder", imageSrc: "http://img.b2bpic.net/free-photo/gamer-streaming-game-dark-studio-entertaining-audience_482257-121650.jpg", imageAlt: "Alex Chen, CEO & Founder"},
|
||
{
|
||
id: "member-2", name: "Sarah Lee", role: "Lead Game Designer", imageSrc: "http://img.b2bpic.net/free-photo/young-man-plaid-shirt-headphones-sitting-desk-holding-digital-camera-looking-photos_1098-17096.jpg", imageAlt: "Sarah Lee, Lead Game Designer"},
|
||
{
|
||
id: "member-3", name: "Michael Brown", role: "Community Lead", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-late-night_23-2150171110.jpg", imageAlt: "Michael Brown, Community Lead"},
|
||
]}
|
||
title="Meet the Masterminds"
|
||
description="Behind every epic adventure is a dedicated team. Get to know the passionate creators building GameVerse."
|
||
tag="Our Team"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "testimonial-1", name: "GamerX", role: "Veteran Player", testimonial: "GameVerse has completely revolutionized my online gaming. The pack opening thrill is real, and the battles are intensely strategic. Plus, connecting with friends directly in-game is a game-changer!", imageSrc: "http://img.b2bpic.net/free-photo/view-adult-male-soccer-player_23-2150888463.jpg", imageAlt: "GamerX profile picture"},
|
||
{
|
||
id: "testimonial-2", name: "PixelPrincess", role: "Streamer", testimonial: "As a streamer, the social features like posting images and polls are amazing for engaging my audience. GameVerse isn't just a game; it's a community where everyone feels connected.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-with-controller_23-2148542744.jpg", imageAlt: "PixelPrincess profile picture"},
|
||
{
|
||
id: "testimonial-3", name: "BattleMage7", role: "Competitive Player", testimonial: "The depth of strategy in battles is incredible, and the variety of cards from packs keeps the meta fresh. This is the competitive platform I've been waiting for.", imageSrc: "http://img.b2bpic.net/free-photo/man-having-fun-gaming-laughing-with-friends_482257-116059.jpg", imageAlt: "BattleMage7 profile picture"},
|
||
{
|
||
id: "testimonial-4", name: "Social_Siren", role: "Community Builder", testimonial: "Building my guild has never been easier! The chat features, combined with status updates, create a truly immersive social experience. Love it!", imageSrc: "http://img.b2bpic.net/free-photo/expressive-women-playing-game-home_23-2147745104.jpg", imageAlt: "Social_Siren profile picture"},
|
||
{
|
||
id: "testimonial-5", name: "CardMaster", role: "Collector", testimonial: "The card art is stunning, and the anticipation of opening each pack is addictive. GameVerse perfectly blends collecting with competitive play. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/young-happy-man-laughing-playing-video-games-weekend_231208-8871.jpg", imageAlt: "CardMaster profile picture"},
|
||
]}
|
||
title="What Players Are Saying"
|
||
description="Don't just take our word for it – hear from the community members who are already living the GameVerse experience!"
|
||
tag="Player Reviews"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
faqs={[
|
||
{
|
||
id: "faq-1", title: "How do I earn coins in GameVerse?", content: "Coins are earned by winning battles, completing daily quests, participating in events, and sometimes found as bonus rewards in packs. You can also acquire them through in-app purchases."},
|
||
{
|
||
id: "faq-2", title: "What types of packs are available?", content: "We offer a variety of packs including Basic, Starter, Gold, Epic, and Legendary. Each pack has a different chance of yielding rare cards and unique items to boost your collection."},
|
||
{
|
||
id: "faq-3", title: "Can I trade cards with other players?", content: "Currently, direct card trading is not available. However, we regularly introduce new ways to earn and discover cards, and this feature is under consideration for future updates!"},
|
||
{
|
||
id: "faq-4", title: "How do I add friends and chat?", content: "You can add friends by searching for their username within the 'Friends' tab. Once added, you can initiate private chats, invite them to battles, or share your status updates."},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/gamification-concept-with-woman-controller_23-2149447487.jpg"
|
||
imageAlt="Abstract question mark with game icons"
|
||
mediaAnimation="slide-up"
|
||
title="Frequently Asked Questions"
|
||
description="Have questions about coins, packs, battles, or social features? Find answers to the most common inquiries here."
|
||
tag="Support"
|
||
faqsAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "sparkles-gradient"}}
|
||
tag="Join the Battle"
|
||
title="Ready to Ascend to Legend?"
|
||
description="Join GameVerse today and start your epic journey. Your next adventure is just a click away!"
|
||
buttons={[
|
||
{
|
||
text: "Sign Up Now", href: "#"},
|
||
{
|
||
text: "Learn More", href: "#home"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoReveal
|
||
logoSrc="http://img.b2bpic.net/free-vector/gaming-logo-template_23-2149588433.jpg"
|
||
logoAlt="GameVerse Logo"
|
||
logoText="GameVerse"
|
||
leftLink={{
|
||
text: "Privacy Policy", href: "#"}}
|
||
rightLink={{
|
||
text: "Terms of Service", href: "#"}}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|