Merge version_2 into main #1
372
src/app/page.tsx
372
src/app/page.tsx
@@ -2,16 +2,12 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Briefcase, MessageCircle, Palette, User, Users } from "lucide-react";
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Users, Palette, MessageCircle, User, Briefcase } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,318 +24,62 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="LudoLegends"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Leaderboard", id: "/leaderboard" }
|
||||
]}
|
||||
brandName="LudoLegends"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Master the Board, Roll the Dice"
|
||||
description="The ultimate Ludo experience awaits. Join millions of players globally in the most exciting and fast-paced Ludo game on mobile."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-video-game-elements-collection_52683-111450.jpg",
|
||||
imageAlt: "Game screen 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-dice-with-abstract-scenery_23-2151045383.jpg",
|
||||
imageAlt: "Game screen 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-unrecognizable-man-selecting-flower-bouquet-online-tablet_1098-20134.jpg",
|
||||
imageAlt: "Game screen 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/fantasy-medieval-gold-ring-pendant-ui-game-icon-vector-magic-royal-inventory-asset-element-with-beautiful-gemstone-cartoon-amulet-treasure-accessories-set-fairytale-props-achievements_107791-22172.jpg",
|
||||
imageAlt: "Game screen 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/game-inventory-icon-collection-with-magical-items_107791-32980.jpg",
|
||||
imageAlt: "Game screen 5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-map-with-dices_23-2149352317.jpg",
|
||||
imageAlt: "Game screen 6",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-dimensional-casino-item_23-2151067269.jpg",
|
||||
imageAlt: "Game screen 7",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-dice-nature_23-2151110457.jpg",
|
||||
imageAlt: "Game screen 8",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-people-eating-berries-street_23-2150163541.jpg",
|
||||
imageAlt: "Game screen 9",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-girl-holding-picture_23-2149829771.jpg",
|
||||
imageAlt: "Game screen 10",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-dice-studio_23-2151110451.jpg",
|
||||
imageAlt: "Game screen 11",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-bingo-game-elements_23-2149181816.jpg",
|
||||
imageAlt: "Game screen 12",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Download Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/video-game-element-collection_23-2150253270.jpg",
|
||||
alt: "Gamer avatar 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/cartoon-game-design-ui-composition-with-circle-heart-star-buttons-crown-gemstones-jewels-gold-coins-cup-treasure-chest-fantasy-nature-landscape_1284-35110.jpg",
|
||||
alt: "Gamer avatar 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/gradient-video-game-elements-collection_52683-111447.jpg",
|
||||
alt: "Gamer avatar 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/game-icons-summer-travel-vacation_107791-18684.jpg",
|
||||
alt: "Gamer avatar 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-dice-nature_23-2151110346.jpg",
|
||||
alt: "Gamer avatar 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 10M+ players"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Multiplayer",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Tournaments",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Custom Board Themes",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Live Social Chat",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Easy Controls",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: "plain" }}
|
||||
title="Master the Board, Roll the Dice"
|
||||
description="The ultimate Ludo experience awaits. Join millions of players globally in the most exciting and fast-paced Ludo game on mobile."
|
||||
leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-vector/gradient-video-game-elements-collection_52683-111450.jpg", imageAlt: "Game 1" }]}
|
||||
rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/three-dimensional-casino-item_23-2151067269.jpg", imageAlt: "Game 2" }]}
|
||||
buttons={[{ text: "Download Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About Us"
|
||||
title="Reimagining Classics for the Modern Era"
|
||||
description="We believe in bringing people together through play. LudoLegends combines traditional rules with sleek animations and social features."
|
||||
subdescription="Every roll is a new adventure waiting to happen."
|
||||
icon={Briefcase}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/gamers-having-fun-while-playing-videogames_23-2149142708.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Game Features"
|
||||
description="Explore the exciting tools we built to make your game better."
|
||||
features={[
|
||||
{ title: "Real-time Multiplayer", description: "Play globally.", bentoComponent: "reveal-icon", icon: Users },
|
||||
{ title: "Custom Themes", description: "Personalize board looks.", bentoComponent: "reveal-icon", icon: Palette },
|
||||
{ title: "Live Social Chat", description: "Connect with friends.", bentoComponent: "chat", aiIcon: MessageCircle, userIcon: User, exchanges: [{ userMessage: "Nice roll!", aiResponse: "Haha, luck is on my side!" }], placeholder: "Send a message..." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Real-time Multiplayer",
|
||||
description: "Play against friends or strangers globally.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Users,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg",
|
||||
imageAlt: "digital ludo board",
|
||||
},
|
||||
{
|
||||
title: "Custom Themes",
|
||||
description: "Personalize your board look.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Palette,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-video-game-elements-collection_52683-111450.jpg",
|
||||
imageAlt: "digital ludo board",
|
||||
},
|
||||
{
|
||||
title: "Live Chat",
|
||||
description: "Connect with friends while playing.",
|
||||
bentoComponent: "chat",
|
||||
aiIcon: MessageCircle,
|
||||
userIcon: User,
|
||||
exchanges: [
|
||||
{
|
||||
userMessage: "Nice roll!",
|
||||
aiResponse: "Haha, luck is on my side today!",
|
||||
},
|
||||
],
|
||||
placeholder: "Send a message...",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gamers-having-fun-while-playing-videogames_23-2149142708.jpg",
|
||||
imageAlt: "digital ludo board",
|
||||
},
|
||||
]}
|
||||
title="Game Features"
|
||||
description="Explore the exciting tools we built to make your game better."
|
||||
/>
|
||||
</div>
|
||||
<div id="how-to-play" data-section="how-to-play">
|
||||
<TestimonialAboutCard
|
||||
tag="How to Play"
|
||||
title="Simple & Fun Mechanics"
|
||||
description="Roll the dice, move your pieces, and be the first to reach home! It's that simple and incredibly addictive."
|
||||
subdescription="Learn the ropes in minutes and dominate the board in hours."
|
||||
icon={Briefcase}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/gamers-having-fun-while-playing-videogames_23-2149142708.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10M+",
|
||||
title: "Downloads",
|
||||
items: [
|
||||
"Android",
|
||||
"iOS",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5M+",
|
||||
title: "Monthly Players",
|
||||
items: [
|
||||
"Active users",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "4.8★",
|
||||
title: "Avg. Rating",
|
||||
items: [
|
||||
"From 1M reviews",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Ludo By The Numbers"
|
||||
description="Join our growing community today."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-taking-selfie-close-up_23-2148508991.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mike C.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-happy-man-laughing-playing-video-games-weekend_231208-8873.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-lying-sofa-looking-digital-tablet_23-2148130342.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-cheering-woman-rejoice-man-holds-smartphone-horizontally_273609-32561.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Amy L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-playing-videogames_23-2150573843.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="Loved by Players"
|
||||
cardTag="Community"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is it free?",
|
||||
content: "Yes, it is free to download and play.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How to play?",
|
||||
content: "Just download the app and follow the tutorial.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Play with friends?",
|
||||
content: "Yes, you can invite your friends via invite codes.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Everything you need to know about our game."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Stay Updated"
|
||||
description="Sign up for game updates and exclusive rewards."
|
||||
tag="Newsletter"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="LudoLegends"
|
||||
copyrightText="© 2025 LudoLegends. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="LudoLegends"
|
||||
copyrightText="© 2025 LudoLegends. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user