Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-27 14:23:13 +00:00

View File

@@ -19,393 +19,178 @@ export default function LandingPage() {
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Trending",
id: "trending",
},
{
name: "Categories",
id: "categories",
},
{
name: "Support",
id: "faq",
},
]}
brandName="GamePortal"
button={{
text: "Login",
href: "#",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Trending", id: "trending" },
{ name: "Categories", id: "categories" },
{ name: "Support", id: "faq" },
{ name: "Contact", id: "contact" }
]}
brandName="GamePortal"
button={{ text: "Login", href: "#" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars",
}}
title="Play Thousands of Games Instantly"
description="The ultimate browser gaming experience. Dive into action, strategy, and puzzle games with zero downloads required."
kpis={[
{
value: "10K+",
label: "Games Available",
},
{
value: "5M+",
label: "Monthly Players",
},
{
value: "4.8",
label: "Community Rating",
},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Explore Games",
href: "#categories",
},
]}
imageSrc="http://img.b2bpic.net/free-vector/game-menu-scene-status-money-power-collectible-items-it-can-be-used-all-types-games-such-as-adventure-racing-rpg-shooting-games-other-types-games_1150-55214.jpg?_wi=1"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-vector/man-red-shirt-with-white-collar_90220-2873.jpg",
alt: "Gamer 1",
},
{
src: "http://img.b2bpic.net/free-vector/blond-man-with-beard_24877-83058.jpg",
alt: "Gamer 2",
},
{
src: "http://img.b2bpic.net/free-vector/colorful-pack-young-men-avatars_23-2147684958.jpg",
alt: "Gamer 3",
},
{
src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg",
alt: "Gamer 4",
},
{
src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034081.jpg",
alt: "Gamer 5",
},
]}
avatarText="Join our 5M+ player community"
marqueeItems={[
{
type: "text",
text: "Ultra-fast loading",
},
{
type: "text",
text: "No downloads required",
},
{
type: "text",
text: "100% Free to play",
},
{
type: "text",
text: "Cross-platform support",
},
{
type: "text",
text: "New games weekly",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "gradient-bars" }}
title="Play Thousands of Games Instantly"
description="The ultimate browser gaming experience. Dive into action, strategy, and puzzle games with zero downloads required."
kpis={[
{ value: "10K+", label: "Games Available" },
{ value: "5M+", label: "Monthly Players" },
{ value: "4.8", label: "Community Rating" }
]}
enableKpiAnimation={true}
buttons={[{ text: "Explore Games", href: "#categories" }]}
imageSrc="http://img.b2bpic.net/free-vector/game-menu-scene-status-money-power-collectible-items-it-can-be-used-all-types-games-such-as-adventure-racing-rpg-shooting-games-other-types-games_1150-55214.jpg"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-vector/man-red-shirt-with-white-collar_90220-2873.jpg", alt: "Gamer 1" },
{ src: "http://img.b2bpic.net/free-vector/blond-man-with-beard_24877-83058.jpg", alt: "Gamer 2" },
{ src: "http://img.b2bpic.net/free-vector/colorful-pack-young-men-avatars_23-2147684958.jpg", alt: "Gamer 3" },
{ src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "Gamer 4" },
{ src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034081.jpg", alt: "Gamer 5" }
]}
avatarText="Join our 5M+ player community"
marqueeItems={[
{ type: "text", text: "Ultra-fast loading" },
{ type: "text", text: "No downloads required" },
{ type: "text", text: "100% Free to play" },
{ type: "text", text: "Cross-platform support" },
{ type: "text", text: "New games weekly" }
]}
/>
</div>
<div id="categories" data-section="categories">
<FeatureCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Action Games",
description: "High-octane excitement and fast reflexes.",
imageSrc: "http://img.b2bpic.net/free-photo/3d-female-figure-with-speed-effect-background-flowing-dots_1048-9156.jpg",
},
{
title: "Puzzle Games",
description: "Challenge your brain with daily riddles.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289212.jpg",
},
{
title: "Multiplayer",
description: "Compete against friends in real-time.",
imageSrc: "http://img.b2bpic.net/free-photo/esport-scenario-background-3d-illustration_1419-2780.jpg",
},
{
title: "Strategy",
description: "Outsmart your opponents.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-training-boxing_23-2150169355.jpg",
},
{
title: "Arcade",
description: "Classic retro experiences.",
imageSrc: "http://img.b2bpic.net/free-photo/athlete-playing-sport-with-hand-drawn-doodles_23-2150036335.jpg",
},
]}
title="Explore Top Categories"
description="Find your next obsession across dozens of genres curated for every type of player."
/>
</div>
<div id="categories" data-section="categories">
<FeatureCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Action Games", description: "High-octane excitement and fast reflexes.", imageSrc: "http://img.b2bpic.net/free-photo/3d-female-figure-with-speed-effect-background-flowing-dots_1048-9156.jpg" },
{ title: "Puzzle Games", description: "Challenge your brain with daily riddles.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289212.jpg" },
{ title: "Multiplayer", description: "Compete against friends in real-time.", imageSrc: "http://img.b2bpic.net/free-photo/esport-scenario-background-3d-illustration_1419-2780.jpg" },
{ title: "Strategy", description: "Outsmart your opponents.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-training-boxing_23-2150169355.jpg" },
{ title: "Arcade", description: "Classic retro experiences.", imageSrc: "http://img.b2bpic.net/free-photo/athlete-playing-sport-with-hand-drawn-doodles_23-2150036335.jpg" }
]}
title="Explore Top Categories"
description="Find your next obsession across dozens of genres curated for every type of player."
/>
</div>
<div id="trending" data-section="trending">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "g1",
brand: "Studio A",
name: "Neon Racer",
price: "Free",
rating: 5,
reviewCount: "1.2k",
imageSrc: "http://img.b2bpic.net/free-photo/synthwave-nightscape_23-2151955581.jpg",
},
{
id: "g2",
brand: "Studio B",
name: "Block Breaker",
price: "Free",
rating: 4,
reviewCount: "800",
imageSrc: "http://img.b2bpic.net/free-photo/retro-computer-desk-indoors_52683-106174.jpg",
},
{
id: "g3",
brand: "Studio C",
name: "Galactic War",
price: "Free",
rating: 5,
reviewCount: "2.1k",
imageSrc: "http://img.b2bpic.net/free-photo/laptop-showcases-green-screen-display-surrounded-by-ai-brain-systems_482257-126607.jpg",
},
{
id: "g4",
brand: "Studio D",
name: "Zombie Survival",
price: "Free",
rating: 4,
reviewCount: "1.5k",
imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151127945.jpg",
},
{
id: "g5",
brand: "Studio E",
name: "Puzzle King",
price: "Free",
rating: 5,
reviewCount: "950",
imageSrc: "http://img.b2bpic.net/free-photo/magnifying-glass-loupe-wooden-table_93675-131298.jpg",
},
{
id: "g6",
brand: "Studio F",
name: "Space Escape",
price: "Free",
rating: 4,
reviewCount: "700",
imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636220.jpg",
},
]}
title="Trending Games"
description="Check out what everyone is playing today."
/>
</div>
<div id="trending" data-section="trending">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{ id: "g1", brand: "Studio A", name: "Neon Racer", price: "Free", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/synthwave-nightscape_23-2151955581.jpg" },
{ id: "g2", brand: "Studio B", name: "Block Breaker", price: "Free", rating: 4, reviewCount: "800", imageSrc: "http://img.b2bpic.net/free-photo/retro-computer-desk-indoors_52683-106174.jpg" },
{ id: "g3", brand: "Studio C", name: "Galactic War", price: "Free", rating: 5, reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/laptop-showcases-green-screen-display-surrounded-by-ai-brain-systems_482257-126607.jpg" },
{ id: "g4", brand: "Studio D", name: "Zombie Survival", price: "Free", rating: 4, reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151127945.jpg" },
{ id: "g5", brand: "Studio E", name: "Puzzle King", price: "Free", rating: 5, reviewCount: "950", imageSrc: "http://img.b2bpic.net/free-photo/magnifying-glass-loupe-wooden-table_93675-131298.jpg" },
{ id: "g6", brand: "Studio F", name: "Space Escape", price: "Free", rating: 4, reviewCount: "700", imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636220.jpg" }
]}
title="Trending Games"
description="Check out what everyone is playing today."
/>
</div>
<div id="featured" data-section="featured">
<BlogCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Featured Insights"
description="Developer highlights and weekly top picks."
blogs={[
{
id: "b1",
category: "News",
title: "Game Dev Jam Winners",
excerpt: "The results are in from this month...",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-gamer-playing-with-controller_23-2149829173.jpg",
authorName: "Jane Doe",
authorAvatar: "http://img.b2bpic.net/free-vector/hand-drawn-different-people-icons-pack_23-2149086480.jpg",
date: "Oct 12",
},
{
id: "b2",
category: "Guide",
title: "How to level up fast",
excerpt: "Master these skills in seconds...",
imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204915.jpg",
authorName: "Jane Doe",
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman-emotion-concept-emotion-joy_169016-66653.jpg",
date: "Oct 10",
},
{
id: "b3",
category: "News",
title: "New Platform Update",
excerpt: "Faster loading times are here...",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-futuristic-screen_23-2149126945.jpg",
authorName: "Jane Doe",
authorAvatar: "http://img.b2bpic.net/free-vector/young-prince-vector-illustration_1308-174367.jpg",
date: "Oct 08",
},
]}
/>
</div>
<div id="featured" data-section="featured">
<BlogCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Featured Insights"
description="Developer highlights and weekly top picks."
blogs={[
{ id: "b1", category: "News", title: "Game Dev Jam Winners", excerpt: "The results are in from this month...", imageSrc: "http://img.b2bpic.net/free-photo/top-view-gamer-playing-with-controller_23-2149829173.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-vector/hand-drawn-different-people-icons-pack_23-2149086480.jpg", date: "Oct 12" },
{ id: "b2", category: "Guide", title: "How to level up fast", excerpt: "Master these skills in seconds...", imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204915.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman-emotion-concept-emotion-joy_169016-66653.jpg", date: "Oct 10" },
{ id: "b3", category: "News", title: "New Platform Update", excerpt: "Faster loading times are here...", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-futuristic-screen_23-2149126945.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-vector/young-prince-vector-illustration_1308-174367.jpg", date: "Oct 08" }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Alex R.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-playing-video-game-with-controller_23-2152006706.jpg",
},
{
id: "t2",
name: "Maria L.",
imageSrc: "http://img.b2bpic.net/free-photo/male-athlete-standing-with-basketball-plastic-bottle-soft-blue-background_23-2148203716.jpg",
},
{
id: "t3",
name: "Sam B.",
imageSrc: "http://img.b2bpic.net/free-photo/mature-sporty-man-headband-looking-front-crazy-happy-holding-his-head-with-arms-standing-orange-wall_141793-51037.jpg",
},
{
id: "t4",
name: "Jordan P.",
imageSrc: "http://img.b2bpic.net/free-photo/concentrated-man-sitting-home-indoors-play-games_171337-16839.jpg",
},
{
id: "t5",
name: "Casey W.",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-standing-beside-wall-holding-basketball_23-2148203641.jpg",
},
]}
cardTitle="What Players Say"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{ id: "t1", name: "Alex R.", imageSrc: "http://img.b2bpic.net/free-photo/woman-playing-video-game-with-controller_23-2152006706.jpg" },
{ id: "t2", name: "Maria L.", imageSrc: "http://img.b2bpic.net/free-photo/male-athlete-standing-with-basketball-plastic-bottle-soft-blue-background_23-2148203716.jpg" },
{ id: "t3", name: "Sam B.", imageSrc: "http://img.b2bpic.net/free-photo/mature-sporty-man-headband-looking-front-crazy-happy-holding-his-head-with-arms-standing-orange-wall_141793-51037.jpg" },
{ id: "t4", name: "Jordan P.", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-man-sitting-home-indoors-play-games_171337-16839.jpg" },
{ id: "t5", name: "Casey W.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-standing-beside-wall-holding-basketball_23-2148203641.jpg" }
]}
cardTitle="What Players Say"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="stats" data-section="stats">
<MetricCardFourteen
useInvertedBackground={false}
title="Platform Growth"
tag="Live Stats"
metrics={[
{
id: "m1",
value: "10M",
description: "Games Played",
},
{
id: "m2",
value: "500K",
description: "Active Daily Users",
},
{
id: "m3",
value: "24/7",
description: "Global Uptime",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="stats" data-section="stats">
<MetricCardFourteen
useInvertedBackground={false}
title="Platform Growth"
tag="Live Stats"
metrics={[
{ id: "m1", value: "10M", description: "Games Played" },
{ id: "m2", value: "500K", description: "Active Daily Users" },
{ id: "m3", value: "24/7", description: "Global Uptime" }
]}
metricsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "f1",
title: "Is it free?",
content: "Yes, all games on our platform are completely free.",
},
{
id: "f2",
title: "Do I need to sign up?",
content: "No sign-up is required to play.",
},
{
id: "f3",
title: "Can I play on mobile?",
content: "Yes, our games are fully mobile optimized.",
},
]}
title="Frequently Asked"
description="Have questions about our platform?"
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/game-menu-scene-status-money-power-collectible-items-it-can-be-used-all-types-games-such-as-adventure-racing-rpg-shooting-games-other-types-games_1150-55214.jpg?_wi=2"
mediaAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{ id: "f1", title: "Is it free?", content: "Yes, all games on our platform are completely free." },
{ id: "f2", title: "Do I need to sign up?", content: "No sign-up is required to play." },
{ id: "f3", title: "Can I play on mobile?", content: "Yes, our games are fully mobile optimized." }
]}
title="Frequently Asked"
description="Have questions about our platform?"
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/game-menu-scene-status-money-power-collectible-items-it-can-be-used-all-types-games-such-as-adventure-racing-rpg-shooting-games-other-types-games_1150-55214.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
title="Get Our Newsletter"
description="Receive updates on the latest games and features directly in your inbox."
tag="Stay Updated"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "sparkles-gradient" }}
title="Get Our Newsletter"
description="Receive updates on the latest games and features directly in your inbox."
tag="Stay Updated"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Explore",
items: [
{
label: "Trending",
href: "#trending",
},
{
label: "Categories",
href: "#categories",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Contact",
href: "#",
},
],
},
]}
logoText="GamePortal"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Explore", items: [{ label: "Trending", href: "#trending" }, { label: "Categories", href: "#categories" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
]}
logoText="GamePortal"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}