Update src/app/progress-tracking/page.tsx

src/app/progress-tracking/page.tsx

@@ -3,8 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import { Activity, Award, Gauge, Users, Goal, Dumbbell } from "lucide-react";
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import TextNumberCount from '@/components/text/TextNumberCount';
+import { ArrowUpCircle, Target, Trophy } from "lucide-react";
 
 export default function ProgressTrackingPage() {
   return (
@@ -24,30 +25,14 @@ export default function ProgressTrackingPage() {
         <div id="nav" data-section="nav">
           <NavbarStyleCentered
             navItems={[
-              {
-                name: "Home",                id: "/"
-              },
-              {
-                name: "Features",                id: "/#features"
-              },
-              {
-                name: "Progress",                id: "/progress-tracking"
-              },
-              {
-                name: "Trainers",                id: "/trainers"
-              },
-              {
-                name: "Testimonials",                id: "/#testimonials"
-              },
-              {
-                name: "FAQ",                id: "/#faq"
-              },
-              {
-                name: "Pricing",                id: "/#pricing"
-              },
-              {
-                name: "Contact",                id: "/#contact"
-              }
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/#features" },
+              { name: "Progress", id: "/progress-tracking" },
+              { name: "Trainers", id: "/trainers" },
+              { name: "Testimonials", id: "/#testimonials" },
+              { name: "FAQ", id: "/#faq" },
+              { name: "Pricing", id: "/#pricing" },
+              { name: "Contact", id: "/#contact" }
             ]}
             button={{
               text: "Start Your Journey",              href: "/signup"
@@ -56,28 +41,69 @@ export default function ProgressTrackingPage() {
           />
         </div>
 
-        <div id="progress-hero" data-section="progress-hero">
-          {/* Placeholder for a hero section specific to progress tracking */}
-          <MetricCardOne
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            gridVariant="uniform-all-items-equal"
-            metrics={[
+        <div id="hero" data-section="hero">
+          <HeroBillboard
+            background={{
+              variant: "animated-grid"
+            }}
+            title="Your Fitness Journey, Visualized"
+            description="Track every workout, measure your progress, and celebrate milestones with interactive dashboards and real-time insights."
+            buttons={[
               {
-                id: "1",                value: "90%",                title: "Goals Achieved",                description: "Users successfully reaching their fitness targets.",                icon: Goal
+                text: "Start Tracking",                href: "#metrics-summary"
               },
-              {
-                id: "2",                value: "500k+",                title: "Workouts Completed",                description: "Total intense workout sessions tracked on the platform.",                icon: Dumbbell
-              }
             ]}
-            title="Your Progress, Our Priority"
-            description="Visualize every step of your fitness journey with detailed analytics and motivating insights."
+            buttonAnimation="slide-up"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-sleek-dark-ui-dashboard-displaying-rea-1774476371465-f4675a84.png?_wi=1"
+            imageAlt="Sleek dashboard with real-time progress tracking"
+            mediaAnimation="blur-reveal"
           />
         </div>
 
-        {/* Add more sections specific to progress tracking as needed */}
+        <div id="metrics-summary" data-section="metrics-summary" className="py-20 bg-background-accent">
+          <div className="container mx-auto px-4 text-center">
+            <h2 className="text-4xl font-bold mb-12 text-foreground">Key Progress Metrics</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
+                <div className="text-primary-cta text-5xl font-bold mb-4 flex items-center justify-center">
+                  <ArrowUpCircle size={48} className="mr-4" />
+                  <TextNumberCount value={120} suffix="%" duration={2} animateOnScroll />
+                </div>
+                <p className="text-lg text-foreground-secondary">Strength Gain</p>
+              </div>
+              <div className="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
+                <div className="text-primary-cta text-5xl font-bold mb-4 flex items-center justify-center">
+                  <Target size={48} className="mr-4" />
+                  <TextNumberCount value={25000} duration={2.5} animateOnScroll format={{ notation: 'compact' }} />
+                </div>
+                <p className="text-lg text-foreground-secondary">Workouts Completed</p>
+              </div>
+              <div className="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
+                <div className="text-primary-cta text-5xl font-bold mb-4 flex items-center justify-center">
+                  <Trophy size={48} className="mr-4" />
+                  <TextNumberCount value={500} duration={3} animateOnScroll />
+                </div>
+                <p className="text-lg text-foreground-secondary">Milestones Achieved</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="interactive-charts" data-section="interactive-charts" className="py-20">
+            <div className="container mx-auto px-4">
+                <h2 className="text-4xl font-bold text-center mb-12 text-foreground">Interactive Performance Dashboards</h2>
+                <p className="text-lg text-center text-foreground-secondary mb-12">
+                    (Interactive Recharts line, area, radial, and bar charts would be displayed here with glassmorphism tooltips and real-time updates.)
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 h-[600px]">
+                    <div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Line Chart Placeholder</div>
+                    <div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Area Chart Placeholder</div>
+                    <div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Bar Chart Placeholder</div>
+                    <div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Radial Bar Chart Placeholder</div>
+                </div>
+            </div>
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}