first commit
This commit is contained in:
Daniil
280
app/(home)/main/page.tsx
Normal file
280
app/(home)/main/page.tsx
Normal file
@@ -0,0 +1,280 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user