280 lines
11 KiB
TypeScript
280 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
BookOpen,
|
|
Trophy,
|
|
Target,
|
|
TrendingUp,
|
|
Clock,
|
|
Award,
|
|
CheckCircle2,
|
|
PlayCircle
|
|
} from "lucide-react"
|
|
|
|
export default function Home() {
|
|
const [activeTab, setActiveTab] = useState("main")
|
|
|
|
// Mock data для демонстрации
|
|
const stats = {
|
|
coursesInProgress: 3,
|
|
completedCourses: 12,
|
|
totalPoints: 2450,
|
|
rank: "Advanced"
|
|
}
|
|
|
|
const recentCourses = [
|
|
{ id: 1, title: "Advanced React Patterns", progress: 65, time: "2h 30m left" },
|
|
{ id: 2, title: "System Design", progress: 40, time: "5h 15m left" },
|
|
{ id: 3, title: "TypeScript Deep Dive", progress: 85, time: "45m left" }
|
|
]
|
|
|
|
const achievements = [
|
|
{ id: 1, title: "Fast Learner", icon: Trophy, unlocked: true },
|
|
{ id: 2, title: "Course Master", icon: Award, unlocked: true },
|
|
{ id: 3, title: "Consistency King", icon: Target, unlocked: false }
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0e1a]">
|
|
{/* Header */}
|
|
<header className="bg-[#0d1117] border-b border-cyan-500/30 sticky top-0 z-50 backdrop-blur-sm">
|
|
<nav className="container mx-auto px-6 py-4">
|
|
<div className="flex items-center justify-center">
|
|
<div className="flex items-center gap-12">
|
|
<button
|
|
onClick={() => setActiveTab("main")}
|
|
className={`text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase ${
|
|
activeTab === "main"
|
|
? "text-cyan-400"
|
|
: "text-cyan-500/50 hover:text-cyan-400/80"
|
|
}`}
|
|
>
|
|
Main
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("progress")}
|
|
className={`text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase ${
|
|
activeTab === "progress"
|
|
? "text-cyan-400"
|
|
: "text-cyan-500/50 hover:text-cyan-400/80"
|
|
}`}
|
|
>
|
|
Progress
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("profile")}
|
|
className={`text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase ${
|
|
activeTab === "profile"
|
|
? "text-cyan-400"
|
|
: "text-cyan-500/50 hover:text-cyan-400/80"
|
|
}`}
|
|
>
|
|
Profile
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("rules")}
|
|
className={`text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase ${
|
|
activeTab === "rules"
|
|
? "text-cyan-400"
|
|
: "text-cyan-500/50 hover:text-cyan-400/80"
|
|
}`}
|
|
>
|
|
Rules
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("login")}
|
|
className={`text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase ${
|
|
activeTab === "login"
|
|
? "text-cyan-400"
|
|
: "text-cyan-500/50 hover:text-cyan-400/80"
|
|
}`}
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="container mx-auto px-6 py-8">
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<BookOpen className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
|
|
<span className="text-xs font-mono text-cyan-400/50">IN PROGRESS</span>
|
|
</div>
|
|
<div className="text-3xl font-bold text-cyan-400 font-mono">
|
|
{stats.coursesInProgress}
|
|
</div>
|
|
<p className="text-sm text-cyan-400/60 font-mono mt-1">Active Courses</p>
|
|
</Card>
|
|
|
|
<Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<CheckCircle2 className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
|
|
<span className="text-xs font-mono text-cyan-400/50">COMPLETED</span>
|
|
</div>
|
|
<div className="text-3xl font-bold text-cyan-400 font-mono">
|
|
{stats.completedCourses}
|
|
</div>
|
|
<p className="text-sm text-cyan-400/60 font-mono mt-1">Finished</p>
|
|
</Card>
|
|
|
|
<Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Trophy className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
|
|
<span className="text-xs font-mono text-cyan-400/50">TOTAL</span>
|
|
</div>
|
|
<div className="text-3xl font-bold text-cyan-400 font-mono">
|
|
{stats.totalPoints}
|
|
</div>
|
|
<p className="text-sm text-cyan-400/60 font-mono mt-1">Points Earned</p>
|
|
</Card>
|
|
|
|
<Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<TrendingUp className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
|
|
<span className="text-xs font-mono text-cyan-400/50">RANK</span>
|
|
</div>
|
|
<div className="text-3xl font-bold text-cyan-400 font-mono">
|
|
{stats.rank}
|
|
</div>
|
|
<p className="text-sm text-cyan-400/60 font-mono mt-1">Current Level</p>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Continue Learning Section */}
|
|
<Card className="lg:col-span-2 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-cyan-400 font-mono">
|
|
Continue Learning
|
|
</h2>
|
|
<Button
|
|
variant="outline"
|
|
className="border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10 font-mono text-xs"
|
|
>
|
|
VIEW ALL
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{recentCourses.map((course) => (
|
|
<Card
|
|
key={course.id}
|
|
className="bg-[#0a0e1a] border border-cyan-500/20 p-4 hover:border-cyan-500/40 transition-all group cursor-pointer"
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-bold text-cyan-400 font-mono mb-1 group-hover:text-cyan-300 transition-colors">
|
|
{course.title}
|
|
</h3>
|
|
<div className="flex items-center gap-2 text-xs text-cyan-400/50 font-mono">
|
|
<Clock className="w-3 h-3" />
|
|
{course.time}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
className="bg-cyan-500 hover:bg-cyan-400 text-black font-mono"
|
|
>
|
|
<PlayCircle className="w-4 h-4 mr-1" />
|
|
RESUME
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-xs font-mono">
|
|
<span className="text-cyan-400/60">Progress</span>
|
|
<span className="text-cyan-400">{course.progress}%</span>
|
|
</div>
|
|
<div className="h-2 bg-[#0d1117] rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full transition-all duration-500"
|
|
style={{ width: `${course.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Achievements Section */}
|
|
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
|
<h2 className="text-2xl font-bold text-cyan-400 font-mono mb-6">
|
|
Achievements
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
{achievements.map((achievement) => {
|
|
const Icon = achievement.icon
|
|
return (
|
|
<Card
|
|
key={achievement.id}
|
|
className={`p-4 transition-all ${
|
|
achievement.unlocked
|
|
? 'bg-cyan-500/10 border-cyan-500/40'
|
|
: 'bg-[#0a0e1a] border-cyan-500/10 opacity-50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
|
|
achievement.unlocked
|
|
? 'bg-cyan-500/20'
|
|
: 'bg-cyan-500/5'
|
|
}`}>
|
|
<Icon className={`w-6 h-6 ${
|
|
achievement.unlocked
|
|
? 'text-cyan-400'
|
|
: 'text-cyan-400/30'
|
|
}`} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className={`font-bold font-mono text-sm ${
|
|
achievement.unlocked
|
|
? 'text-cyan-400'
|
|
: 'text-cyan-400/30'
|
|
}`}>
|
|
{achievement.title}
|
|
</h3>
|
|
<p className="text-xs text-cyan-400/50 font-mono">
|
|
{achievement.unlocked ? 'Unlocked' : 'Locked'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<Button
|
|
className="w-full mt-6 bg-[#0a0e1a] border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-mono"
|
|
variant="outline"
|
|
>
|
|
VIEW ALL ACHIEVEMENTS
|
|
</Button>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Subtle grid background */}
|
|
<div
|
|
className="fixed inset-0 pointer-events-none -z-10"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '50px 50px'
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
} |