From ce5909bb4ed0e08a82e73e2da752ae59660e387b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 16:49:38 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 384 +++++++++++++++--------------------------------
 1 file changed, 117 insertions(+), 267 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 79f4f40..79be5e1 100644
--- a/src/app/page.tsx
+++ b/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>
   );