From dfa2fb49d924ac459dcef9b0b583dd3bb44e63be Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 2 Mar 2026 21:33:35 +0000
Subject: [PATCH] Add src/app/dashboard/page.tsx

---
 src/app/dashboard/page.tsx | 155 +++++++++++++++++++++++++++++++++++++
 1 file changed, 155 insertions(+)
 create mode 100644 src/app/dashboard/page.tsx

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..57de005
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { BarChart3, Trophy, TrendingUp, Clock } from 'lucide-react';
+
+export default function DashboardPage() {
+  const stats = [
+    { icon: Clock, label: "Hours Learned", value: "24.5", color: "text-blue-500" },
+    { icon: Trophy, label: "Badges Earned", value: "12", color: "text-yellow-500" },
+    { icon: TrendingUp, label: "Courses Completed", value: "3", color: "text-green-500" },
+    { icon: BarChart3, label: "Current Streak", value: "7 days", color: "text-purple-500" },
+  ];
+
+  const recentCourses = [
+    { title: "Beginner's Guide to Stocks", progress: 75, status: "In Progress" },
+    { title: "Personal Budgeting", progress: 100, status: "Completed" },
+    { title: "Crypto 101 Course", progress: 45, status: "In Progress" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Learn", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Community", id: "/" },
+            { name: "FAQ", id: "/" },
+            { name: "Dashboard", id: "/dashboard" },
+          ]}
+          button={{
+            text: "Log Out",            href: "/login"
+          }}
+          brandName="FinHub"
+        />
+      </div>
+
+      <div className="min-h-screen bg-background pt-20 pb-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold text-foreground mb-2">Welcome Back, Learner!</h1>
+            <p className="text-lg text-foreground opacity-75">Here's your learning progress and achievements</p>
+          </div>
+
+          {/* Stats Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+            {stats.map((stat, index) => {
+              const Icon = stat.icon;
+              return (
+                <div key={index} className="bg-card rounded-lg p-6 shadow-md">
+                  <div className="flex items-center justify-between mb-4">
+                    <Icon className={`${stat.color}`} size={32} />
+                  </div>
+                  <p className="text-sm text-foreground opacity-75 mb-2">{stat.label}</p>
+                  <p className="text-3xl font-bold text-foreground">{stat.value}</p>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Recent Courses */}
+          <div className="bg-card rounded-lg shadow-md p-8 mb-12">
+            <h2 className="text-2xl font-bold text-foreground mb-6">Your Learning Progress</h2>
+            <div className="space-y-6">
+              {recentCourses.map((course, index) => (
+                <div key={index}>
+                  <div className="flex justify-between items-center mb-2">
+                    <h3 className="text-lg font-semibold text-foreground">{course.title}</h3>
+                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                      course.status === "Completed" 
+                        ? "bg-green-100 text-green-800" 
+                        : "bg-blue-100 text-blue-800"
+                    }`}>
+                      {course.status}
+                    </span>
+                  </div>
+                  <div className="w-full bg-background rounded-full h-3 overflow-hidden">
+                    <div
+                      className="bg-primary-cta h-full transition-all duration-500"
+                      style={{ width: `${course.progress}%` }}
+                    />
+                  </div>
+                  <p className="text-sm text-foreground opacity-75 mt-1">{course.progress}% Complete</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Call to Action */}
+          <div className="bg-gradient-to-r from-primary-cta to-accent rounded-lg p-8 text-center">
+            <h3 className="text-2xl font-bold text-white mb-4">Continue Your Learning Journey</h3>
+            <p className="text-white opacity-90 mb-6">
+              You're making great progress! Check out new courses to expand your financial knowledge.
+            </p>
+            <a
+              href="/courses"
+              className="inline-block bg-white text-primary-cta px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+            >
+              Browse More Courses
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
+          imageAlt="FinHub gradient background"
+          logoText="FinHub"
+          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Courses", href: "/courses" },
+                { label: "Lessons", href: "/" },
+                { label: "Challenges", href: "#" },
+                { label: "Resources", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forum", href: "#" },
+                { label: "Discord", href: "#" },
+                { label: "Leaderboard", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}