Add src/app/dashboard/page.tsx
This commit is contained in:
155
src/app/dashboard/page.tsx
Normal file
155
src/app/dashboard/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user