Update src/app/signup/page.tsx

Merge version_1 into main

src/app/dashboard/page.tsx

@@ -2,179 +2,157 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import { Dumbbell, Zap, BarChart, ListTodo, CalendarDays, TrendingUp, Heart, Dumbbell as DumbbellIcon, Flame } from "lucide-react";
-import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
+
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+export default function DashboardPage() {
-import { Gauge, LayoutDashboard, LineChart, Scale, Dumbbell, CalendarDays, Library } from "lucide-react";
+  // Dummy data for exercises and workouts
+  const exerciseLibrary = [
+    {
+      id: "ex1",      name: "Barbell Squats",      price: "5 sets of 5 reps",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-person-performing-squats-with-a-barbell-1774476370803-5197824e.png?w=800&h=600",      imageAlt: "Person performing barbell squats"},
+    {
+      id: "ex2",      name: "Dumbbell Bicep Curls",      price: "3 sets of 10-12 reps",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-man-doing-bicep-curls-with-dumbbells-1774476371191-03061219.png?w=800&h=600",      imageAlt: "Man doing bicep curls with dumbbells"},
+    {
+      id: "ex3",      name: "Push-ups",      price: "4 sets to failure",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-person-doing-push-ups-on-the-gym-floor-1774476371147-aa6b4c6e.png?w=800&h=600",      imageAlt: "Person doing push-ups on the gym floor"},
+    {
+      id: "ex4",      name: "Yoga Flow",      price: "30 minute session",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-woman-doing-yoga-on-a-mat-in-a-studio-1774476370535-61266b74.png?w=800&h=600",      imageAlt: "Woman doing yoga on a mat in a studio"},
+    {
+      id: "ex5",      name: "Plank",      price: "3 sets of 60s hold",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-person-in-a-plank-position-on-a-gym-ma-1774476371216-950c0c05.png?w=800&h=600",      imageAlt: "Person in a plank position"}
+  ];
+
+  const weeklySchedule = {
+    Monday: [exerciseLibrary[0], exerciseLibrary[1]],
+    Tuesday: [exerciseLibrary[3]],
+    Wednesday: [exerciseLibrary[2], exerciseLibrary[4]],
+    Thursday: [],
+    Friday: [exerciseLibrary[0], exerciseLibrary[1], exerciseLibrary[2]],
+    Saturday: [exerciseLibrary[3]],
+    Sunday: [],
+  };
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
+      defaultButtonVariant="shift-hover"
-        defaultTextAnimation="background-highlight"
+      defaultTextAnimation="background-highlight"
-        borderRadius="soft"
+      borderRadius="soft"
-        contentWidth="compact"
+      contentWidth="compact"
-        sizing="largeSmall"
+      sizing="largeSmall"
-        background="noise"
+      background="noise"
-        cardStyle="gradient-radial"
+      cardStyle="gradient-radial"
-        primaryButtonStyle="double-inset"
+      primaryButtonStyle="double-inset"
-        secondaryButtonStyle="radial-glow"
+      secondaryButtonStyle="radial-glow"
-        headingFontWeight="semibold"
+      headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div className="min-h-screen flex flex-col lg:flex-row bg-background">
-      <NavbarStyleCentered
+          {/* Sidebar (simplified) */}
-      navItems={[
+          <aside className="w-full lg:w-64 bg-card p-6 border-r border-accent/20 lg:min-h-screen">
-        {
+            <h2 className="text-2xl font-bold text-foreground mb-6">Dashboard</h2>
-          name: "Home",          id: "home"},
+            <nav>
-        {
+              <ul className="space-y-3">
-          name: "Features",          id: "features"},
+                <li>
-        {
+                  <a href="#overview" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
-          name: "Progress",          id: "metrics"},
+                    <BarChart className="w-5 h-5" /> Overview
-        {
+                  </a>
-          name: "Trainers",          id: "team"},
+                </li>
-        {
+                <li>
-          name: "Testimonials",          id: "testimonials"},
+                  <a href="#my-workouts" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
-        {
+                    <ListTodo className="w-5 h-5" /> My Workouts
-          name: "FAQ",          id: "faq"},
+                  </a>
-        {
+                </li>
-          name: "Pricing",          id: "pricing"
+                <li>
-        },
+                  <a href="#exercises" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
-        {
+                    <Dumbbell className="w-5 h-5" /> Exercises
-          name: "Contact",          id: "contact"
+                  </a>
-        }
+                </li>
-      ]}
+                <li>
-      button={{
+                  <a href="#progress" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
-        text: "Start Your Journey",        href: "/signup"}}
+                    <TrendingUp className="w-5 h-5" /> Progress
-      brandName="FitForge AI"
+                  </a>
-    />
+                </li>
-  </div>
+              </ul>
+            </nav>
+          </aside>
 
-  <div id="dashboard-overview" data-section="dashboard-overview">
+          {/* Main content */}
-      <FeatureCardTen
+          <main className="flex-1 p-8">
-      animationType="slide-up"
+            <h1 className="text-4xl font-extrabold text-foreground mb-8">Workout Planner</h1>
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "1",          title: "Real-time Progress Insights",          description: "Visualize your gains, track key metrics, and stay motivated with dynamic charts and performance reports.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-sleek-dark-ui-dashboard-displaying-rea-1774476371465-f4675a84.png?_wi=2",            imageAlt: "Dashboard showing progress tracking"},
-          items: [
-            {
-              icon: LineChart,
-              text: "Performance Trends"},
-            {
-              icon: Gauge,
-              text: "Strength Metrics"},
-            {
-              icon: Scale,
-              text: "Weight & Body Composition"},
-          ],
-          reverse: false,
-        },
-        {
-          id: "2",          title: "Smart Workout Planning",          description: "Access your custom AI-generated workout plans, adjust your schedule, and explore new exercises tailored to your goals.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/an-immersive-3d-workout-environment-rend-1774476371159-45f36be3.png?_wi=2",            imageAlt: "3D workout environment in dashboard"},
-          items: [
-            {
-              icon: Dumbbell,
-              text: "Custom Workout Routines"},
-            {
-              icon: CalendarDays,
-              text: "Flexible Scheduling"},
-            {
-              icon: Library,
-              text: "Vast Exercise Library"},
-          ],
-          reverse: true,
-        }
-      ]}
-      title="Your Personalized Fitness Hub"
-      description="The FitForge AI Dashboard provides an intuitive overview of your progress, workouts, and nutrition, all in one place."
-      tag="Intelligent Dashboard"
-      tagIcon={LayoutDashboard}
-    />
-  </div>
 
-  <div id="key-metrics" data-section="key-metrics">
+            {/* Animated Stats */}
-      <MetricCardTen
+            <div id="overview" className="mb-12" data-section="overview">
-      animationType="slide-up"
+              <MetricCardSeven
-      textboxLayout="default"
+                animationType="blur-reveal"
-      useInvertedBackground={true}
+                title="Your Fitness Progress"
-      metrics={[
+                description="Track your journey, celebrate achievements, and stay motivated."
-        {
+                metrics={[
-          id: "1",          title: "Workouts Completed",          subtitle: "Last 30 days",          category: "Training",          value: "24"},
+                  {
-        {
+                    id: "m1",                    value: "120",                    title: "Workouts Completed",                    items: ["Last Week: 5", "This Month: 20"]
-          id: "2",          title: "Calorie Burn",          subtitle: "Average per session",          category: "Activity",          value: "650 kcal"},
+                  },
-        {
+                  {
-          id: "3",          title: "Strength Gain",          subtitle: "Overall improvement",          category: "Progress",          value: "12%"},
+                    id: "m2",                    value: "5000+",                    title: "Calories Burned",                    items: ["Avg. per workout: 400", "Daily target: 600"]
-        {
+                  },
-          id: "4",          title: "Consistency Score",          subtitle: "Weekly average",          category: "Habit",          value: "90%"}
+                  {
-      ]}
+                    id: "m3",                    value: "+15%",                    title: "Strength Increase",                    items: ["Bench Press: +10kg", "Squat: +15kg"]
-      title="Dashboard Key Performance Indicators"
+                  },
-      description="At a glance, see how you're performing across crucial fitness metrics and stay on track with your ultimate body goals."
+                  {
-    />
+                    id: "m4",                    value: "30",                    title: "Personal Bests",                    items: ["New max: Deadlift", "Faster run time"]
-  </div>
+                  }
+                ]}
+                textboxLayout="default"
+                useInvertedBackground={false}
+              />
+            </div>
 
-  <div id="more-features" data-section="more-features">
+            {/* Weekly Calendar */}
-      <FeatureCardThree
+            <div id="my-workouts" className="mb-12" data-section="my-workouts">
-      textboxLayout="default"
+              <h2 className="text-3xl font-bold text-foreground mb-6 flex items-center gap-3">
-      gridVariant="three-columns-all-equal-width"
+                <CalendarDays className="w-7 h-7" /> Weekly Schedule
-      useInvertedBackground={false}
+              </h2>
-      animationType="slide-up"
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-      features={[
+                {Object.entries(weeklySchedule).map(([day, exercises]) => (
-        {
+                  <div key={day} className="bg-card p-6 rounded-lg shadow-md border border-accent/20 transition-all duration-300 hover:scale-[1.01] hover:shadow-lg">
-          id: "1",          title: "AI Nutrition Insights",          description: "Get smart recommendations for macro and micro-nutrient intake based on your activity and goals.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/an-abstract-glowing-ai-holographic-displ-1774476371379-fc4b75ed.png?_wi=2",          imageAlt: "AI nutrition insights"},
+                    <h3 className="text-xl font-semibold text-primary-cta mb-4 flex items-center gap-2">
-        {
+                      {day}
-          id: "2",          title: "Wearable Sync",          description: "Integrate with your favorite fitness trackers to seamlessly sync data and get a holistic view of your health.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-sleek-dark-ui-dashboard-displaying-rea-1774476371465-f4675a84.png?_wi=3",          imageAlt: "Wearable device integration"},
+                    </h3>
-        {
+                    {exercises.length > 0 ? (
-          id: "3",          title: "Community Challenges",          description: "Participate in engaging challenges with the FitForge AI community, earn badges, and stay motivated.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-glowing-futuristic-trophy-or-badge-ico-1774476371090-bdc17671.png?_wi=1",          imageAlt: "Community challenges"}
+                      <div className="space-y-4">
-      ]}
+                        {exercises.map((exercise) => (
-      title="Unlock Advanced Dashboard Capabilities"
+                          <div key={exercise.id} className="flex items-center gap-4 bg-background-accent p-3 rounded-md shadow-sm border border-accent/10">
-      description="Beyond the basics, our dashboard offers sophisticated tools to fine-tune your fitness journey."
+                            <img src={exercise.imageSrc} alt={exercise.imageAlt} className="w-16 h-16 object-cover rounded-md" />
-    />
+                            <div>
-  </div>
+                              <p className="font-medium text-foreground">{exercise.name}</p>
+                              <p className="text-sm text-foreground/80">{exercise.price}</p>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-foreground/60 italic">No workouts planned.</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
 
-  <div id="footer" data-section="footer">
+            {/* Exercise Library */}
-      <FooterBase
+            <div id="exercises" data-section="exercises">
-      columns={[
+              <h2 className="text-3xl font-bold text-foreground mb-6 flex items-center gap-3">
-        {
+                <DumbbellIcon className="w-7 h-7" /> Exercise Library
-          title: "Product",          items: [
+              </h2>
-            {
+              <ProductCardOne
-              label: "Pricing",              href: "/pricing"},
+                animationType="slide-up"
-            {
+                gridVariant="uniform-all-items-equal"
-              label: "Features",              href: "/features"},
+                title="Discover New Exercises"
-            {
+                description="Explore a comprehensive library of exercises with detailed instructions and high-quality images."
-              label: "Dashboard",              href: "/dashboard"}
+                products={exerciseLibrary.map(ex => ({ ...ex, name: ex.name, price: ex.price }))} // Map dummy price to actual price for ProductCardOne
-          ]
+                uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
-        },
+                textboxLayout="default"
-        {
+                useInvertedBackground={false}
-          title: "Company",          items: [
+              />
-            {
+            </div>
-              label: "About Us",              href: "/about"},
+          </main>
-            {
+        </div>
-              label: "Trainers",              href: "/trainers"},
-            {
-              label: "Contact",              href: "/contact"}
-          ]
-        },
-        {
-          title: "Resources",          items: [
-            {
-              label: "Blog",              href: "/blog"},
-            {
-              label: "Support",              href: "/support"},
-            {
-              label: "FAQ",              href: "/faq"}
-          ]
-        }
-      ]}
-      logoText="Build Your Ultimate Body"
-      copyrightText="© 2024 Build Your Ultimate Body. All rights reserved."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/login/page.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import RotatedRaysBackground from '@/components/background/RotatedRaysBackground';
+import { Github, Chrome, Facebook } from "lucide-react";
+import Link from "next/link";
+
+export default function LoginPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="none"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <RotatedRaysBackground animated={true} showGrid={false} className="fixed inset-0 z-0" />
+        <div className="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
+          <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: "Login", id: "/login" },
+                { name: "Sign Up", id: "/signup" }
+              ]}
+              button={{ text: "Start Your Journey", href: "/signup" }}
+              brandName="FitForge AI"
+            />
+          </div>
+
+          <div className="flex-grow flex items-center justify-center w-full max-w-md">
+            <div className="relative p-8 rounded-2xl shadow-xl border border-gray-800 bg-black bg-opacity-30 backdrop-filter backdrop-blur-lg transition-all duration-300 ease-in-out hover:shadow-neon focus-within:shadow-neon w-full">
+              <h2 className="text-3xl font-bold mb-8 text-foreground text-center">Welcome Back!</h2>
+              <form className="space-y-6">
+                <div className="relative group">
+                  <input
+                    type="email"
+                    id="login-email"
+                    className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
+                    placeholder=" "
+                    required
+                  />
+                  <label
+                    htmlFor="login-email"
+                    className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
+                                peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
+                                peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
+                  >
+                    Email
+                  </label>
+                </div>
+                <div className="relative group">
+                  <input
+                    type="password"
+                    id="login-password"
+                    className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
+                    placeholder=" "
+                    required
+                  />
+                  <label
+                    htmlFor="login-password"
+                    className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
+                                peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
+                                peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
+                  >
+                    Password
+                  </label>
+                </div>
+                <button
+                  type="submit"
+                  className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-accent text-lg font-semibold"
+                >
+                  Login
+                </button>
+              </form>
+              <div className="text-center my-6 text-gray-400 text-sm">— Or continue with —</div>
+              <div className="flex justify-center space-x-4 mb-6">
+                <button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
+                  <Chrome size={24} className="text-white" />
+                </button>
+                <button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
+                  <Github size={24} className="text-white" />
+                </button>
+                <button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
+                  <Facebook size={24} className="text-white" />
+                </button>
+              </div>
+              <p className="text-center text-sm text-gray-400">
+                Don't have an account? <Link href="/signup" className="text-accent hover:underline">Sign Up</Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,12 +12,12 @@ import { Activity, Award, Gauge, Users } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
+        defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="background-highlight"
+        defaultTextAnimation="reveal-blur"
         borderRadius="soft"
         contentWidth="compact"
         sizing="largeSmall"
-        background="noise"
+        background="aurora"
         cardStyle="gradient-radial"
         primaryButtonStyle="double-inset"
         secondaryButtonStyle="radial-glow"
@@ -32,19 +32,9 @@ export default function LandingPage() {
         {
           name: "Features",          id: "/#features"},
         {
-          name: "Progress",          id: "/progress-tracking"},
+          name: "About",          id: "/#about"},
         {
-          name: "Trainers",          id: "/trainers"},
+          name: "Metrics",          id: "/#metrics"}
-        {
-          name: "Testimonials",          id: "/#testimonials"},
-        {
-          name: "FAQ",          id: "/#faq"},
-        {
-          name: "Pricing",          id: "/#pricing"
-        },
-        {
-          name: "Contact",          id: "/#contact"
-        }
       ]}
       button={{
         text: "Start Your Journey",        href: "/signup"}}
@@ -117,7 +107,7 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       metrics={[
         {
-          id: "1",          value: "150%",          title: "Strength Gain",          description: "Average increase in key lifts across our community.",          icon: Award,
+          id: "1",          value: "150%",          title: "Strength Gain",          description: "Average increase in key lifts across our community.",          icon: Award
         },
         {
           id: "2",          value: "8000+",          title: "Workouts Logged",          description: "Total workouts tracked on our platform.",          icon: Activity
@@ -130,4 +120,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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 HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import { Activity, Award, Gauge, Users, Goal, Dumbbell } from "lucide-react";
+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: "Home",                id: "/"
+              { name: "Features", id: "/#features" },
-              },
+              { name: "Progress", id: "/progress-tracking" },
-              {
+              { name: "Trainers", id: "/trainers" },
-                name: "Features",                id: "/#features"
+              { name: "Testimonials", id: "/#testimonials" },
-              },
+              { name: "FAQ", id: "/#faq" },
-              {
+              { name: "Pricing", id: "/#pricing" },
-                name: "Progress",                id: "/progress-tracking"
+              { name: "Contact", id: "/#contact" }
-              },
-              {
-                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">
+        <div id="hero" data-section="hero">
-          {/* Placeholder for a hero section specific to progress tracking */}
+          <HeroBillboard
-          <MetricCardOne
+            background={{
-            animationType="slide-up"
+              variant: "animated-grid"
-            textboxLayout="default"
+            }}
-            useInvertedBackground={false}
+            title="Your Fitness Journey, Visualized"
-            gridVariant="uniform-all-items-equal"
+            description="Track every workout, measure your progress, and celebrate milestones with interactive dashboards and real-time insights."
-            metrics={[
+            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"
+            buttonAnimation="slide-up"
-            description="Visualize every step of your fitness journey with detailed analytics and motivating insights."
+            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>
   );
-}
+}

src/app/signup/page.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import RotatedRaysBackground from '@/components/background/RotatedRaysBackground';
+import { Github, Chrome, Facebook } from "lucide-react";
+import Link from "next/link";
+
+export default function SignupPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="none"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <RotatedRaysBackground animated={true} showGrid={false} className="fixed inset-0 z-0" />
+        <div className="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
+          <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: "Login", id: "/login" },
+                { name: "Sign Up", id: "/signup" }
+              ]}
+              button={{ text: "Start Your Journey", href: "/signup" }}
+              brandName="FitForge AI"
+            />
+          </div>
+
+          <div className="flex-grow flex items-center justify-center w-full max-w-md">
+            <div className="relative p-8 rounded-2xl shadow-xl border border-gray-800 bg-black bg-opacity-30 backdrop-filter backdrop-blur-lg transition-all duration-300 ease-in-out hover:shadow-neon focus-within:shadow-neon w-full">
+              <h2 className="text-3xl font-bold mb-8 text-foreground text-center">Create Account</h2>
+              <form className="space-y-6">
+                <div className="relative group">
+                  <input
+                    type="text"
+                    id="signup-username"
+                    className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
+                    placeholder=" "
+                    required
+                  />
+                  <label
+                    htmlFor="signup-username"
+                    className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
+                                peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
+                                peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
+                  >
+                    Username
+                  </label>
+                </div>
+                <div className="relative group">
+                  <input
+                    type="email"
+                    id="signup-email"
+                    className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
+                    placeholder=" "
+                    required
+                  />
+                  <label
+                    htmlFor="signup-email"
+                    className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
+                                peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
+                                peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
+                  >
+                    Email
+                  </label>
+                </div>
+                <div className="relative group">
+                  <input
+                    type="password"
+                    id="signup-password"
+                    className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
+                    placeholder=" "
+                    required
+                  />
+                  <label
+                    htmlFor="signup-password"
+                    className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
+                                peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
+                                peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
+                  >
+                    Password
+                  </label>
+                </div>
+                <div className="relative group">
+                  <input
+                    type="password"
+                    id="signup-confirm-password"
+                    className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
+                    placeholder=" "
+                    required
+                  />
+                  <label
+                    htmlFor="signup-confirm-password"
+                    className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
+                                peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
+                                peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
+                  >
+                    Confirm Password
+                  </label>
+                </div>
+                <button
+                  type="submit"
+                  className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-accent text-lg font-semibold"
+                >
+                  Sign Up
+                </button>
+              </form>
+              <div className="text-center my-6 text-gray-400 text-sm">— Or continue with —</div>
+              <div className="flex justify-center space-x-4 mb-6">
+                <button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
+                  <Chrome size={24} className="text-white" />
+                </button>
+                <button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
+                  <Github size={24} className="text-white" />
+                </button>
+                <button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
+                  <Facebook size={24} className="text-white" />
+                </button>
+              </div>
+              <p className="text-center text-sm text-gray-400">
+                Already have an account? <Link href="/login" className="text-accent hover:underline">Login</Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
+  --background: #000000;
-  --card: #1A1A1A;
+  --card: #0c0c0c;
-  --foreground: #F5F5F5;
+  --foreground: #ffffff;
-  --primary-cta: #00BFFF;
+  --primary-cta: #106EFB;
-  --primary-cta-text: #000000;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #FF3131;
+  --secondary-cta: #000000;
-  --secondary-cta-text: #FFFFFF;
+  --secondary-cta-text: #ffffff;
-  --accent: #555555;
+  --accent: #535353;
-  --background-accent: #004F7F;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);