Update src/app/leaderboards/page.tsx

src/app/leaderboards/page.tsx

@@ -3,41 +3,43 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Trophy } from "lucide-react";
 
 export default function LeaderboardsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Teams", id: "/teams" },
-            { name: "Leaderboards", id: "/leaderboards" }
-          ]}
-          brandName="ClanForce"
-        />
-        <div className="pt-24">
-          <MetricCardOne
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Teams", id: "/teams" },
+              { name: "Leaderboards", id: "/leaderboards" }
+            ]}
+            brandName="ClanForce"
+            button={{ text: "Join" }}
+          />
+        </div>
+        <div className="pt-24" id="metrics" data-section="metrics">
+          <MetricCardFourteen
             title="Global Leaderboards"
-            description="Ranked standings based on competitive performance across all platforms."
-            gridVariant="bento-grid"
-            animationType="slide-up"
-            textboxLayout="default"
+            tag="Rankings"
+            metricsAnimation="slide-up"
             useInvertedBackground={false}
             metrics={[
-              { id: "1", value: "#1", title: "Alpha Vanguard", description: "Score: 24,500", icon: Trophy },
-              { id: "2", value: "#2", title: "Nova Squad", description: "Score: 23,800", icon: Trophy },
-              { id: "3", value: "#3", title: "Zero Point", description: "Score: 22,100", icon: Trophy }
+              { id: "1", value: "#1", description: "Alpha Vanguard - 24,500 pts" },
+              { id: "2", value: "#2", description: "Nova Squad - 23,800 pts" },
+              { id: "3", value: "#3", description: "Zero Point - 22,100 pts" }
             ]}
           />
         </div>
-        <FooterBase
-          columns={[]}
-          logoText="ClanForce"
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[]}
+            logoText="ClanForce"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );