Update src/app/page.tsx
This commit is contained in:
349
src/app/page.tsx
349
src/app/page.tsx
@@ -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: "#" }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user