From b9db1367bbaa84e4d18aca82bca6278777f242e1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 22 Apr 2026 18:01:19 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 528 +++++++++++++----------------------------------
 1 file changed, 147 insertions(+), 381 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 28a7d4a..4706c56 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,397 +30,163 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Pensi Battles"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Features", id: "features" },
+              { name: "Products", id: "products" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Pensi Battles"
+            button={{ text: "Join Now" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      title="Where Freestyle Legends Battle Live"
-      description="Pensi Battles brings Spain's top freestyle rappers head-to-head in high-energy tournament competition. Watch, compete, and join the community."
-      tag="Spain's #1 Rap Battle"
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-perfect-slim-body-woman-posing-bodysuit-red-light-smoke_1157-47713.jpg",
-          imageAlt: "rap battle stage",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/microphone-with-motivational-message_1134-376.jpg",
-          imageAlt: "microphone on stage",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/hackers-detected-by-police-collecting-technology-equipment-running-from-abandoned-warehouse-scared-internet-scammers-stopped-by-cybercops-while-breaking-into-database-server_482257-64004.jpg",
-          imageAlt: "Hackers detected by police collecting technology equipment and running from abandoned warehouse.",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/hacker-arriving-underground-base-looking-spray-cans_482257-124369.jpg",
-          imageAlt: "Hacker arriving in underground base looking at spray cans",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/people-with-gothic-style-costumes-make-up-performing-drama-world-theatre-day_23-2151182165.jpg",
-          imageAlt: "People with gothic style costumes and make-up performing drama for world theatre day",
-        },
-      ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="Trusted by 10k+ Fans"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitDualMedia
+            background={{ variant: "sparkles-gradient" }}
+            title="Where Freestyle Legends Battle Live"
+            description="Pensi Battles brings Spain's top freestyle rappers head-to-head in high-energy tournament competition. Watch, compete, and join the community."
+            tag="Spain's #1 Rap Battle"
+            mediaItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/girl-with-perfect-slim-body-woman-posing-bodysuit-red-light-smoke_1157-47713.jpg", imageAlt: "rap battle stage" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/microphone-with-motivational-message_1134-376.jpg", imageAlt: "microphone on stage" }
+            ]}
+            mediaAnimation="slide-up"
+            rating={5}
+            ratingText="Trusted by 10k+ Fans"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={true}
-      title="The Pensi Battles Phenomenon"
-      metrics={[
-        {
-          icon: Mic,
-          label: "Battle Archives",
-          value: "500+",
-        },
-        {
-          icon: Award,
-          label: "Tournament Editions",
-          value: "25+",
-        },
-        {
-          icon: Users,
-          label: "Active Community",
-          value: "10k+",
-        },
-      ]}
-      metricsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            useInvertedBackground={true}
+            title="The Pensi Battles Phenomenon"
+            metrics={[
+              { icon: Mic, label: "Battle Archives", value: "500+" },
+              { icon: Award, label: "Tournament Editions", value: "25+" },
+              { icon: Users, label: "Active Community", value: "10k+" },
+            ]}
+            metricsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyFour
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Live Streaming",
-          author: "Pensi Team",
-          description: "Watch every tournament live in high definition.",
-          tags: [
-            "live",
-            "streaming",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/male-couch-holding-musical-note-icon_53876-41267.jpg",
-        },
-        {
-          id: "f2",
-          title: "Artist Profiles",
-          author: "Rapper Admin",
-          description: "Build your personal brand and track battle stats.",
-          tags: [
-            "artist",
-            "profile",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/fake-news-works-coming-out-man-mouth_23-2149261956.jpg",
-        },
-        {
-          id: "f3",
-          title: "Battle Leaderboards",
-          author: "Pensi Stats",
-          description: "Follow the top contenders in the national rankings.",
-          tags: [
-            "stats",
-            "ranking",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/brazil-vs-denmark_187299-30919.jpg",
-        },
-      ]}
-      title="Community Experience"
-      description="Discover all the ways we support the freestyle culture."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyFour
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { id: "f1", title: "Live Streaming", author: "Pensi Team", description: "Watch every tournament live in high definition.", tags: ["live", "streaming"], imageSrc: "http://img.b2bpic.net/free-photo/male-couch-holding-musical-note-icon_53876-41267.jpg" },
+              { id: "f2", title: "Artist Profiles", author: "Rapper Admin", description: "Build your personal brand and track battle stats.", tags: ["artist", "profile"], imageSrc: "http://img.b2bpic.net/free-photo/fake-news-works-coming-out-man-mouth_23-2149261956.jpg" },
+              { id: "f3", title: "Battle Leaderboards", author: "Pensi Stats", description: "Follow the top contenders in the national rankings.", tags: ["stats", "ranking"], imageSrc: "http://img.b2bpic.net/free-photo/brazil-vs-denmark_187299-30919.jpg" },
+            ]}
+            title="Community Experience"
+            description="Discover all the ways we support the freestyle culture."
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "Pensi Battles Tee",
-          price: "$25.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-monday-with-man-with-headphones_23-2149814530.jpg",
-        },
-        {
-          id: "p2",
-          name: "Legendary Battles Vinyl",
-          price: "$40.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-vintage-objects_23-2150244550.jpg",
-        },
-        {
-          id: "p3",
-          name: "Grand Finale Ticket",
-          price: "$15.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/arrangement-bright-tickets-cinema_23-2147807352.jpg",
-        },
-        {
-          id: "p4",
-          name: "Tournament Wall Art",
-          price: "$30.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/clean-concrete-white-background-no-people-lighting-equipment_53876-16240.jpg",
-        },
-        {
-          id: "p5",
-          name: "Pro Mic Set",
-          price: "$150.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/asmr-microphone-with-breadsticks-sound_23-2149329790.jpg",
-        },
-        {
-          id: "p6",
-          name: "Snapback Cap",
-          price: "$20.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/skater-wearing-trucker-hat_23-2149431181.jpg",
-        },
-      ]}
-      title="Official Merch & Access"
-      description="Get exclusive gear and tournament tickets."
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={true}
+            products={[
+              { id: "p1", name: "Pensi Battles Tee", price: "$25.00", imageSrc: "http://img.b2bpic.net/free-photo/happy-monday-with-man-with-headphones_23-2149814530.jpg" },
+              { id: "p2", name: "Legendary Battles Vinyl", price: "$40.00", imageSrc: "http://img.b2bpic.net/free-photo/still-life-vintage-objects_23-2150244550.jpg" },
+              { id: "p3", name: "Grand Finale Ticket", price: "$15.00", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-bright-tickets-cinema_23-2147807352.jpg" },
+            ]}
+            title="Official Merch & Access"
+            description="Get exclusive gear and tournament tickets."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "free",
-          price: "$0",
-          name: "Fan",
-          buttons: [
-            {
-              text: "Get Started",
-            },
-          ],
-          features: [
-            "Watch Public Battles",
-            "Community Forum Access",
-          ],
-        },
-        {
-          id: "supporter",
-          price: "$9/mo",
-          name: "Supporter",
-          badge: "Popular",
-          buttons: [
-            {
-              text: "Upgrade",
-            },
-          ],
-          features: [
-            "Ad-free Viewing",
-            "Exclusive Behind-the-Scenes",
-          ],
-        },
-        {
-          id: "pro",
-          price: "$29/mo",
-          name: "Legend",
-          buttons: [
-            {
-              text: "Go Pro",
-            },
-          ],
-          features: [
-            "Pro Content Access",
-            "Priority Event Booking",
-            "Artist Badge",
-          ],
-        },
-      ]}
-      title="Become a Member"
-      description="Support the battles and get extra perks."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "free", price: "$0", name: "Fan", buttons: [{ text: "Get Started" }], features: ["Watch Public Battles", "Community Forum Access"] },
+              { id: "supporter", price: "$9/mo", name: "Supporter", badge: "Popular", buttons: [{ text: "Upgrade" }], features: ["Ad-free Viewing", "Exclusive Behind-the-Scenes"] },
+              { id: "pro", price: "$29/mo", name: "Legend", buttons: [{ text: "Go Pro" }], features: ["Pro Content Access", "Priority Event Booking", "Artist Badge"] },
+            ]}
+            title="Become a Member"
+            description="Support the battles and get extra perks."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      textboxLayout="default"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          icon: TrendingUp,
-          title: "Views per Event",
-          value: "200k+",
-        },
-        {
-          id: "m2",
-          icon: Clock,
-          title: "Streaming Hours",
-          value: "1.2M+",
-        },
-        {
-          id: "m3",
-          icon: UserCheck,
-          title: "Battle Participants",
-          value: "150+",
-        },
-      ]}
-      title="Tournament Impact"
-      description="Evidence of the growing freestyle movement."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            animationType="depth-3d"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", icon: TrendingUp, title: "Views per Event", value: "200k+" },
+              { id: "m2", icon: Clock, title: "Streaming Hours", value: "1.2M+" },
+              { id: "m3", icon: UserCheck, title: "Battle Participants", value: "150+" },
+            ]}
+            title="Tournament Impact"
+            description="Evidence of the growing freestyle movement."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Carlos M.",
-          role: "Fan",
-          testimonial: "The best freestyle platform in Spain!",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-fashionable-man-smiles-broadly-demonstrates-white-even-teeth-wears-hood-from-anorak-listens-music-earphones_273609-8834.jpg",
-        },
-        {
-          id: "t2",
-          name: "Lucia R.",
-          role: "Rapper",
-          testimonial: "Pensi Battles opened doors for my career.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-hat_23-2149439818.jpg",
-        },
-        {
-          id: "t3",
-          name: "Javier P.",
-          role: "Fan",
-          testimonial: "The energy in every tournament is insane.",
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-excited-audience-with-arms-raised-cheering-front-stage-music-concert-copy-space_637285-538.jpg",
-        },
-        {
-          id: "t4",
-          name: "Sofia G.",
-          role: "Fan",
-          testimonial: "I watch every single event release.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-volunteer-smiling_23-2149134455.jpg",
-        },
-        {
-          id: "t5",
-          name: "Mario F.",
-          role: "Fan",
-          testimonial: "Amazing production quality throughout.",
-          imageSrc: "http://img.b2bpic.net/free-photo/red-hair-girl-sport-outfits_114579-17768.jpg",
-        },
-      ]}
-      title="Community Voices"
-      description="What our battle fans and rappers say."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Carlos M.", role: "Fan", testimonial: "The best freestyle platform in Spain!", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-fashionable-man-smiles-broadly-demonstrates-white-even-teeth-wears-hood-from-anorak-listens-music-earphones_273609-8834.jpg" },
+              { id: "t2", name: "Lucia R.", role: "Rapper", testimonial: "Pensi Battles opened doors for my career.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-hat_23-2149439818.jpg" },
+              { id: "t3", name: "Javier P.", role: "Fan", testimonial: "The energy in every tournament is insane.", imageSrc: "http://img.b2bpic.net/free-photo/back-view-excited-audience-with-arms-raised-cheering-front-stage-music-concert-copy-space_637285-538.jpg" },
+            ]}
+            title="Community Voices"
+            description="What our battle fans and rappers say."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "How do I compete?",
-          content: "Register through the artist portal in the menu.",
-        },
-        {
-          id: "q2",
-          title: "Is it free to watch?",
-          content: "Basic battles are free for everyone.",
-        },
-        {
-          id: "q3",
-          title: "Can I sponsor events?",
-          content: "Contact us using the form below.",
-        },
-      ]}
-      title="Got Questions?"
-      description="Here is what you need to know."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqDouble
+            textboxLayout="default"
+            useInvertedBackground={true}
+            faqs={[
+              { id: "q1", title: "How do I compete?", content: "Register through the artist portal in the menu." },
+              { id: "q2", title: "Is it free to watch?", content: "Basic battles are free for everyone." },
+              { id: "q3", title: "Can I sponsor events?", content: "Contact us using the form below." },
+            ]}
+            title="Got Questions?"
+            description="Here is what you need to know."
+            faqsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Stay Informed"
-      title="Join Our Mailing List"
-      description="Get updates on upcoming tournament editions."
-      imageSrc="http://img.b2bpic.net/free-photo/developing-photographs-darkroom-work_23-2149893780.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
+            tag="Stay Informed"
+            title="Join Our Mailing List"
+            description="Get updates on upcoming tournament editions."
+            imageSrc="http://img.b2bpic.net/free-photo/developing-photographs-darkroom-work_23-2149893780.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Platform",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Merch",
-              href: "#products",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Pensi Battles"
-      bottomRightText="Built by the community"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Platform", items: [{ label: "About", href: "#about" }, { label: "Merch", href: "#products" }] },
+              { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
+            ]}
+            bottomLeftText="© 2024 Pensi Battles"
+            bottomRightText="Built by the community"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file