Merge version_1 into main #1
384
src/app/page.tsx
384
src/app/page.tsx
@@ -27,281 +27,131 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="HoponMC"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Community", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="HoponMC"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Welcome to HoponMC"
|
||||
description="The ultimate Minecraft experience with custom features, friendly community, and non-stop action. Hop on today!"
|
||||
tag="Play Now: play.hoponmc.com"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-city-with-lots-vegetation-greenery_23-2150842808.jpg",
|
||||
imageAlt: "Minecraft lush landscape",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-friends-playing-console_23-2147824900.jpg",
|
||||
imageAlt: "Exploration gameplay",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fantasy-scene-with-surreal-elements-mystical-atmosphere_23-2151254424.jpg",
|
||||
imageAlt: "Fantasy scene with surreal elements and mystical atmosphere",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-city-with-lots-vegetation-greenery_23-2150842814.jpg",
|
||||
imageAlt: "View of futuristic city with lots of vegetation and greenery",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-city-with-lots-vegetation-greenery_23-2150842784.jpg",
|
||||
imageAlt: "View of futuristic city with lots of vegetation and greenery",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Join our 5-star community"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Welcome to HoponMC"
|
||||
description="The ultimate Minecraft experience with custom features, friendly community, and non-stop action. Hop on today!"
|
||||
tag="Play Now: play.hoponmc.com"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-city-with-lots-vegetation-greenery_23-2150842808.jpg", imageAlt: "Minecraft lush landscape"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-friends-playing-console_23-2147824900.jpg", imageAlt: "Exploration gameplay"}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Join our 5-star community"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Craft, Conquer, and Build Your Future"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Craft, Conquer, and Build Your Future"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Lag Free Server",
|
||||
"No Pay-To-Win",
|
||||
"Always Up-To-Date",
|
||||
"No Toxic Environment",
|
||||
"No Unfair Bans",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Custom Economy System",
|
||||
"Frequent Giveaways",
|
||||
"Anti-Grief Protection",
|
||||
"Dedicated Support",
|
||||
"High Performance",
|
||||
],
|
||||
}}
|
||||
title="Unrivaled Gameplay Experience"
|
||||
description="Discover what makes our server the best place to play."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Lag Free Server", "No Pay-To-Win", "Always Up-To-Date", "No Toxic Environment", "No Unfair Bans"] }}
|
||||
positiveCard={{ items: ["Custom Economy System", "Frequent Giveaways", "Anti-Grief Protection", "Dedicated Support", "High Performance"] }}
|
||||
title="Unrivaled Gameplay Experience"
|
||||
description="Discover what makes our server the best place to play."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10k+",
|
||||
title: "Players",
|
||||
description: "Active community members",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-shine-diamonds-digital-art_23-2151695022.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
title: "Uptime",
|
||||
description: "Always online for you",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/8-bits-characters-gaming-assets_23-2151143786.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "50+",
|
||||
title: "Plugins",
|
||||
description: "Custom coded gameplay",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/8-bits-character-heads-gaming-assets_23-2151143631.jpg",
|
||||
},
|
||||
]}
|
||||
title="Server Stats"
|
||||
description="The numbers behind the magic."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "10k+", title: "Players", description: "Active community members", imageSrc: "http://img.b2bpic.net/free-photo/luxury-shine-diamonds-digital-art_23-2151695022.jpg" },
|
||||
{ id: "m2", value: "24/7", title: "Uptime", description: "Always online for you", imageSrc: "http://img.b2bpic.net/free-photo/8-bits-characters-gaming-assets_23-2151143786.jpg" },
|
||||
{ id: "m3", value: "50+", title: "Plugins", description: "Custom coded gameplay", imageSrc: "http://img.b2bpic.net/free-photo/8-bits-character-heads-gaming-assets_23-2151143631.jpg" },
|
||||
]}
|
||||
title="Server Stats"
|
||||
description="The numbers behind the magic."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex",
|
||||
role: "Pro Builder",
|
||||
company: "HoponMC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-listening-music_23-2149443785.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah",
|
||||
role: "Adventurer",
|
||||
company: "HoponMC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-beautiful-woman-black-turtleneck-glasses-playing-using-joystick-smiling-standing-pink-wall_141793-53771.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mike",
|
||||
role: "PvP Legend",
|
||||
company: "HoponMC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-influencer-endorsing-wireless-mouse-from-sponsor_482257-128136.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Jane",
|
||||
role: "Farmer",
|
||||
company: "HoponMC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-close-up-street_1321-25.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Tom",
|
||||
role: "Miner",
|
||||
company: "HoponMC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-gamer-with-gamepad-playing-video-game-blue-wall_140725-152160.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Community Rating",
|
||||
},
|
||||
{
|
||||
value: "1M+",
|
||||
label: "Blocks Placed",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Active Staff",
|
||||
},
|
||||
]}
|
||||
title="Community Love"
|
||||
description="Here is what our players say about HoponMC."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex", role: "Pro Builder", company: "HoponMC", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-listening-music_23-2149443785.jpg" },
|
||||
{ id: "t2", name: "Sarah", role: "Adventurer", company: "HoponMC", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-beautiful-woman-black-turtleneck-glasses-playing-using-joystick-smiling-standing-pink-wall_141793-53771.jpg" },
|
||||
{ id: "t3", name: "Mike", role: "PvP Legend", company: "HoponMC", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-influencer-endorsing-wireless-mouse-from-sponsor_482257-128136.jpg" },
|
||||
{ id: "t4", name: "Jane", role: "Farmer", company: "HoponMC", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-close-up-street_1321-25.jpg" },
|
||||
{ id: "t5", name: "Tom", role: "Miner", company: "HoponMC", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-gamer-with-gamepad-playing-video-game-blue-wall_140725-152160.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "4.9", label: "Community Rating" },
|
||||
{ value: "1M+", label: "Blocks Placed" },
|
||||
{ value: "500+", label: "Active Staff" },
|
||||
]}
|
||||
title="Community Love"
|
||||
description="Here is what our players say about HoponMC."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I join?",
|
||||
content: "Simply use our IP: play.hoponmc.com in your Minecraft launcher.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is it free to play?",
|
||||
content: "Yes, HoponMC is completely free for all players.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are there staff support?",
|
||||
content: "Yes, our staff team is available 24/7 on Discord.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do I join?", content: "Simply use our IP: play.hoponmc.com in your Minecraft launcher." },
|
||||
{ id: "f2", title: "Is it free to play?", content: "Yes, HoponMC is completely free for all players." },
|
||||
{ id: "f3", title: "Are there staff support?", content: "Yes, our staff team is available 24/7 on Discord." },
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Support"
|
||||
title="Need Help?"
|
||||
description="Have questions or need assistance? Reach out to our team."
|
||||
buttons={[
|
||||
{
|
||||
text: "Join our Discord",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Support"
|
||||
title="Need Help?"
|
||||
description="Have questions or need assistance? Reach out to our team."
|
||||
buttons={[{ text: "Join our Discord", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Server",
|
||||
items: [
|
||||
{
|
||||
label: "Play Now",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 HoponMC"
|
||||
bottomRightText="Built for players"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Server", items: [{ label: "Play Now", href: "#hero" }, { label: "About", href: "#about" }],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 HoponMC"
|
||||
bottomRightText="Built for players"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user