Update src/app/page.tsx

This commit is contained in:
2026-05-04 16:36:54 +00:00
parent af7155af47
commit 3b01dcc3bd

View File

@@ -32,22 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Games",
id: "games",
},
{
name: "Leaderboard",
id: "metrics",
},
{
name: "FAQ",
id: "faq",
},
{ name: "Home", id: "hero" },
{ name: "Games", id: "games" },
{ name: "Leaderboard", id: "metrics" },
{ name: "FAQ", id: "faq" },
]}
brandName="GameHub"
/>
@@ -55,48 +43,17 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="Play Instantly. Compete Globally. Win Big."
description="Experience five addictive minigames with zero load times, realtime leaderboards, and exclusive achievements. Track your progress, unlock badges, and dominate the competition—all in one beautifully designed platform."
buttons={[
{
text: "Start Playing Now",
href: "#games",
},
]}
buttons={[{ text: "Start Playing Now", href: "#games" }]}
carouselItems={[
{
id: "1",
imageSrc: "http://img.b2bpic.net/free-photo/gamer-looking-internet-websites-gaming-guide-mockup-phone_482257-121625.jpg?_wi=1",
imageAlt: "modern gaming platform interface",
},
{
id: "2",
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103272.jpg",
imageAlt: "modern gaming platform interface",
},
{
id: "3",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-octagon-mandala-design-with-neon-blue-light_181624-23226.jpg",
imageAlt: "modern gaming platform interface",
},
{
id: "4",
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-gaming-device_23-2151005796.jpg",
imageAlt: "modern gaming platform interface",
},
{
id: "5",
imageSrc: "http://img.b2bpic.net/free-photo/gradient-background-with-sunset-projector-lamp_53876-124198.jpg",
imageAlt: "modern gaming platform interface",
},
{
id: "6",
imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-cyber-particles_1048-12380.jpg",
imageAlt: "modern gaming platform interface",
},
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/gamer-looking-internet-websites-gaming-guide-mockup-phone_482257-121625.jpg", imageAlt: "modern gaming platform interface" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103272.jpg", imageAlt: "modern gaming platform interface" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-octagon-mandala-design-with-neon-blue-light_181624-23226.jpg", imageAlt: "modern gaming platform interface" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-gaming-device_23-2151005796.jpg", imageAlt: "modern gaming platform interface" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/gradient-background-with-sunset-projector-lamp_53876-124198.jpg", imageAlt: "modern gaming platform interface" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-cyber-particles_1048-12380.jpg", imageAlt: "modern gaming platform interface" },
]}
/>
</div>
@@ -106,9 +63,7 @@ export default function LandingPage() {
useInvertedBackground={false}
title="Built for the Modern Gamer"
description={[
"GameHub brings together a curated collection of classic and innovative minigames, designed for quick sessions and high-score battles.",
"Our platform features seamless performance, intuitive controls, and a persistent profile system that tracks your gaming journey across devices.",
]}
"GameHub brings together a curated collection of classic and innovative minigames, designed for quick sessions and high-score battles.", "Our platform features seamless performance, intuitive controls, and a persistent profile system that tracks your gaming journey across devices."]}
/>
</div>
@@ -119,55 +74,25 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
title: "Instant Play Technology",
description: "No installs or long waits. Load any game in seconds.",
icon: Zap,
title: "Instant Play Technology", description: "No installs or long waits. Load any game in seconds.", icon: Zap,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-white-keyboard-desk_23-2149680249.jpg?_wi=1",
imageAlt: "gaming controller neon lighting",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-gamer-holding-controller_23-2149829149.jpg",
imageAlt: "gaming controller neon lighting",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/gamer-looking-internet-websites-gaming-guide-mockup-phone_482257-121625.jpg?_wi=2",
imageAlt: "gaming controller neon lighting",
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-white-keyboard-desk_23-2149680249.jpg", imageAlt: "gaming controller neon lighting" },
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-gamer-holding-controller_23-2149829149.jpg", imageAlt: "gaming controller neon lighting" },
]
},
{
title: "Global Leaderboards",
description: "Compete with friends and strangers for top rankings.",
icon: Trophy,
title: "Global Leaderboards", description: "Compete with friends and strangers for top rankings.", icon: Trophy,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/lamp-design-with-fantastical-artistic-style_23-2151101657.jpg?_wi=1",
imageAlt: "esports leaderboard graphic",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-streamer-winning-shooting-video-games-tournament-celebrating-success-online-live-stream-cheerful-person-feeling-happy-about-action-gameplay-championship-win-computer_482257-41448.jpg",
imageAlt: "esports leaderboard graphic",
},
],
imageSrc: "http://img.b2bpic.net/free-vector/medal-low-poly-design-reward-abstract-geometric-image-prize-place-wireframe-mesh-polygonal_271628-278.jpg?_wi=1",
imageAlt: "gaming controller neon lighting",
{ imageSrc: "http://img.b2bpic.net/free-photo/lamp-design-with-fantastical-artistic-style_23-2151101657.jpg", imageAlt: "esports leaderboard graphic" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-streamer-winning-shooting-video-games-tournament-celebrating-success-online-live-stream-cheerful-person-feeling-happy-about-action-gameplay-championship-win-computer_482257-41448.jpg", imageAlt: "esports leaderboard graphic" },
]
},
{
title: "Achievement Badges",
description: "Unlock rare cosmetic items and custom badges.",
icon: Award,
title: "Achievement Badges", description: "Unlock rare cosmetic items and custom badges.", icon: Award,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg?_wi=1",
imageAlt: "gaming achievement badge",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-brilliant-cartoon-diamond_23-2151752794.jpg",
imageAlt: "gaming achievement badge",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/3d-dice-outdoors_23-2151110387.jpg?_wi=1",
imageAlt: "gaming controller neon lighting",
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg", imageAlt: "gaming achievement badge" },
{ imageSrc: "http://img.b2bpic.net/free-photo/view-brilliant-cartoon-diamond_23-2151752794.jpg", imageAlt: "gaming achievement badge" },
]
},
]}
title="Elevate Your Experience"
@@ -177,64 +102,15 @@ export default function LandingPage() {
<div id="games" data-section="games">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "g1",
brand: "Classic",
name: "Tic Tac Toe",
price: "Casual",
rating: 5,
reviewCount: "1.2k",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg?_wi=2",
},
{
id: "g2",
brand: "Arcade",
name: "Snake",
price: "High Score",
rating: 4,
reviewCount: "800",
imageSrc: "http://img.b2bpic.net/free-photo/3d-dice-outdoors_23-2151110387.jpg?_wi=2",
},
{
id: "g3",
brand: "Logic",
name: "Memory Card",
price: "Brainy",
rating: 5,
reviewCount: "950",
imageSrc: "http://img.b2bpic.net/free-vector/video-game-health-bar-element-collection_23-2150256881.jpg",
},
{
id: "g4",
brand: "Action",
name: "Sky Hopper",
price: "Fast",
rating: 4,
reviewCount: "1.5k",
imageSrc: "http://img.b2bpic.net/free-vector/game-background-template-with-elements_1308-114451.jpg",
},
{
id: "g5",
brand: "Social",
name: "Rock Paper Scissors",
price: "Fun",
rating: 5,
reviewCount: "2.1k",
imageSrc: "http://img.b2bpic.net/free-photo/color-detail-backgammon-game-with-two-dice-close-up_114579-50877.jpg",
},
{
id: "g6",
brand: "Puzzle",
name: "Grid Breaker",
price: "Challenging",
rating: 4,
reviewCount: "600",
imageSrc: "http://img.b2bpic.net/free-vector/mirror-text-effect-editable-glass-chrome-text-style_314614-3081.jpg",
},
{ id: "g1", brand: "Classic", name: "Tic Tac Toe", price: "Casual", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg" },
{ id: "g2", brand: "Arcade", name: "Snake", price: "High Score", rating: 4, reviewCount: "800", imageSrc: "http://img.b2bpic.net/free-photo/3d-dice-outdoors_23-2151110387.jpg" },
{ id: "g3", brand: "Logic", name: "Memory Card", price: "Brainy", rating: 5, reviewCount: "950", imageSrc: "http://img.b2bpic.net/free-vector/video-game-health-bar-element-collection_23-2150256881.jpg" },
{ id: "g4", brand: "Action", name: "Sky Hopper", price: "Fast", rating: 4, reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-vector/game-background-template-with-elements_1308-114451.jpg" },
]}
title="Explore Our Library"
description="Choose your game and start your journey."
@@ -247,33 +123,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "50k+",
title: "Active Players",
items: [
"Global engagement",
"Daily users",
],
},
{
id: "m2",
value: "1.2M",
title: "Games Played",
items: [
"Total sessions",
"High scores recorded",
],
},
{
id: "m3",
value: "15k",
title: "Badges Unlocked",
items: [
"Rare achievements",
"Total rewards",
],
},
{ id: "m1", value: "50k+", title: "Active Players", items: ["Global engagement", "Daily users"] },
{ id: "m2", value: "1.2M", title: "Games Played", items: ["Total sessions", "High scores recorded"] },
{ id: "m3", value: "15k", title: "Badges Unlocked", items: ["Rare achievements", "Total rewards"] },
]}
title="Community Stats"
description="See where you stand in our growing community."
@@ -285,61 +137,8 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah",
date: "Oct 2023",
title: "Pro Player",
quote: "The instant load times are incredible. I play between meetings!",
tag: "Top Player",
avatarSrc: "http://img.b2bpic.net/free-photo/sweet-kid-records-dance-tutorial-video-apartment-her-online-fans_482257-76751.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/gamer-looking-internet-websites-gaming-guide-mockup-phone_482257-121625.jpg?_wi=3",
imageAlt: "young gamer with headphones",
},
{
id: "2",
name: "David",
date: "Sep 2023",
title: "Hardcore Enthusiast",
quote: "Leaderboards make every session competitive and exciting.",
tag: "Ranked #1",
avatarSrc: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-white-keyboard-desk_23-2149680249.jpg?_wi=2",
imageAlt: "young gamer with headphones",
},
{
id: "3",
name: "Emily",
date: "Aug 2023",
title: "Casual User",
quote: "So many games to choose from. Love the clean design.",
tag: "Daily User",
avatarSrc: "http://img.b2bpic.net/free-photo/young-happy-man-laughing-playing-video-games-weekend_231208-8873.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/lamp-design-with-fantastical-artistic-style_23-2151101657.jpg?_wi=2",
imageAlt: "young gamer with headphones",
},
{
id: "4",
name: "Mark",
date: "July 2023",
title: "Tech Buff",
quote: "The glassmorphism UI feels very modern and sleek.",
tag: "Reviewer",
avatarSrc: "http://img.b2bpic.net/free-photo/person-using-futuristic-virtual-reality-headset_23-2150946729.jpg",
imageSrc: "http://img.b2bpic.net/free-vector/medal-low-poly-design-reward-abstract-geometric-image-prize-place-wireframe-mesh-polygonal_271628-278.jpg?_wi=2",
imageAlt: "young gamer with headphones",
},
{
id: "5",
name: "Sophie",
date: "June 2023",
title: "Casual Player",
quote: "Achievements keep me coming back every day to play.",
tag: "Game Addict",
avatarSrc: "http://img.b2bpic.net/free-photo/view-adult-male-soccer-player_23-2150888463.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg?_wi=3",
imageAlt: "young gamer with headphones",
},
{ id: "1", name: "Sarah", date: "Oct 2023", title: "Pro Player", quote: "The instant load times are incredible. I play between meetings!", tag: "Top Player", avatarSrc: "http://img.b2bpic.net/free-photo/sweet-kid-records-dance-tutorial-video-apartment-her-online-fans_482257-76751.jpg", imageSrc: "http://img.b2bpic.net/free-photo/gamer-looking-internet-websites-gaming-guide-mockup-phone_482257-121625.jpg" },
{ id: "2", name: "David", date: "Sep 2023", title: "Hardcore Enthusiast", quote: "Leaderboards make every session competitive and exciting.", tag: "Ranked #1", avatarSrc: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-white-keyboard-desk_23-2149680249.jpg" },
]}
title="Player Voices"
description="Don't just take our word for it—join our community today."
@@ -348,28 +147,16 @@ export default function LandingPage() {
<div id="faq" data-section="faq">
<FaqSplitMedia
faqsAnimation="slide-up"
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "Is it free to play?",
content: "Yes, all basic games are free forever.",
},
{
id: "q2",
title: "How does scoring work?",
content: "Scores are saved to your profile in real-time.",
},
{
id: "q3",
title: "Can I play on my phone?",
content: "Yes, our platform is fully responsive for all devices.",
},
{ id: "q1", title: "Is it free to play?", content: "Yes, all basic games are free forever." },
{ id: "q2", title: "How does scoring work?", content: "Scores are saved to your profile in real-time." },
{ id: "q3", title: "Can I play on my phone?", content: "Yes, our platform is fully responsive for all devices." },
]}
title="Questions Answered"
description="Find everything you need to get started."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/tips-playing-online-games-with-moderation_23-2148527134.jpg"
mediaAnimation="slide-up"
/>
@@ -381,22 +168,10 @@ export default function LandingPage() {
title="Need Support?"
description="We're here to help. Contact us if you have any feedback or game suggestions."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Your Email",
},
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "email", type: "email", placeholder: "Your Email" },
]}
textarea={{
name: "message",
placeholder: "What's on your mind?",
rows: 4,
}}
textarea={{ name: "message", placeholder: "What's on your mind?", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/african-american-guy-working-laptop-celebrating-achievement-neon-lights-sitting-couch_482257-132161.jpg"
/>
</div>
@@ -406,47 +181,13 @@ export default function LandingPage() {
logoText="GameHub"
columns={[
{
title: "Games",
items: [
{
label: "Arcade",
href: "#games",
},
{
label: "Puzzle",
href: "#games",
},
{
label: "Action",
href: "#games",
},
],
title: "Games", items: [{ label: "Arcade", href: "#games" }, { label: "Puzzle", href: "#games" }, { label: "Action", href: "#games" }],
},
{
title: "Community",
items: [
{
label: "Leaderboard",
href: "#metrics",
},
{
label: "Support",
href: "#contact",
},
],
title: "Community", items: [{ label: "Leaderboard", href: "#metrics" }, { label: "Support", href: "#contact" }],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }],
},
]}
/>