first commit

app/(auth)/login/page.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import Link from "next/link"
+import { Eye, EyeOff } from "lucide-react"
+
+export default function LoginPage() {
+  const [showPassword, setShowPassword] = useState(false)
+  const [formData, setFormData] = useState({
+    username: "",
+    password: ""
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Здесь будет логика авторизации
+    console.log("Login attempt:", formData)
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0a0e1a] flex items-center justify-center p-6">
+      {/* Background grid */}
+      <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'
+        }}
+      />
+
+      {/* Glowing effects */}
+      <div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] animate-pulse" />
+      <div className="fixed bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-pulse" />
+
+      <Card className="w-full max-w-md bg-[#0d1117] border-2 border-cyan-500/40 shadow-[0_0_50px_rgba(6,182,212,0.2)] relative overflow-hidden">
+        {/* Top accent line */}
+        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent" />
+        
+        <div className="p-8">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <h1 className="text-4xl font-bold text-cyan-400 font-mono mb-2">
+              Login
+            </h1>
+            <p className="text-cyan-400/50 font-mono text-sm">
+              Access your learning dashboard
+            </p>
+          </div>
+
+          {/* Login Form */}
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <Label 
+                htmlFor="username" 
+                className="text-cyan-400 font-mono text-sm"
+              >
+                Username
+              </Label>
+              <Input
+                id="username"
+                type="text"
+                placeholder="Enter your username"
+                value={formData.username}
+                onChange={(e) => setFormData({...formData, username: e.target.value})}
+                className="bg-[#0a0e1a] border-cyan-500/30 text-cyan-400 placeholder:text-cyan-400/30 font-mono focus:border-cyan-400 focus:ring-cyan-400/20"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label 
+                htmlFor="password" 
+                className="text-cyan-400 font-mono text-sm"
+              >
+                Password
+              </Label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  onChange={(e) => setFormData({...formData, password: e.target.value})}
+                  className="bg-[#0a0e1a] border-cyan-500/30 text-cyan-400 placeholder:text-cyan-400/30 font-mono focus:border-cyan-400 focus:ring-cyan-400/20 pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-cyan-400/50 hover:text-cyan-400 transition-colors"
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-4 h-4" />
+                  ) : (
+                    <Eye className="w-4 h-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between text-sm">
+              <label className="flex items-center gap-2 cursor-pointer group">
+                <input 
+                  type="checkbox" 
+                  className="w-4 h-4 rounded border-cyan-500/30 bg-[#0a0e1a] text-cyan-400 focus:ring-cyan-400/20"
+                />
+                <span className="text-cyan-400/60 group-hover:text-cyan-400/80 font-mono transition-colors">
+                  Remember me
+                </span>
+              </label>
+              <Link 
+                href="/reset-password"
+                className="text-cyan-400/60 hover:text-cyan-400 font-mono transition-colors"
+              >
+                Forgot password?
+              </Link>
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider py-6 text-base shadow-[0_0_30px_rgba(6,182,212,0.3)] hover:shadow-[0_0_50px_rgba(6,182,212,0.5)] transition-all"
+            >
+              LOGIN
+            </Button>
+          </form>
+
+          {/* Footer Links */}
+          <div className="mt-8 text-center space-y-4">
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-cyan-500/20"></div>
+              </div>
+              <div className="relative flex justify-center text-xs">
+                <span className="bg-[#0d1117] px-4 text-cyan-400/40 font-mono">
+                  OR
+                </span>
+              </div>
+            </div>
+
+            <p className="text-cyan-400/60 font-mono text-sm">
+              Don't have an account?{" "}
+              <Link 
+                href="/register"
+                className="text-cyan-400 hover:text-cyan-300 font-bold transition-colors"
+              >
+                Sign up
+              </Link>
+            </p>
+
+            <Link 
+              href="/"
+              className="inline-block text-cyan-400/50 hover:text-cyan-400 font-mono text-xs transition-colors"
+            >
+              ← Back to home
+            </Link>
+          </div>
+        </div>
+
+        {/* Corner decorations */}
+        <div className="absolute top-2 left-2 w-4 h-4 border-t-2 border-l-2 border-cyan-500/30"></div>
+        <div className="absolute top-2 right-2 w-4 h-4 border-t-2 border-r-2 border-cyan-500/30"></div>
+        <div className="absolute bottom-2 left-2 w-4 h-4 border-b-2 border-l-2 border-cyan-500/30"></div>
+        <div className="absolute bottom-2 right-2 w-4 h-4 border-b-2 border-r-2 border-cyan-500/30"></div>
+      </Card>
+    </div>
+  )
+}

app/(home)/main/page.tsx

@@ -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>
+  )
+}

app/(home)/main/profile/page.tsx

@@ -0,0 +1,236 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import { User, Award, BookOpen, Trophy, Star } from "lucide-react"
+import Link from "next/link"
+
+export default function ProfilePage() {
+  const [activeTab, setActiveTab] = useState("profile")
+
+  // Mock user data
+  const userData = {
+    name: "Alex Johnson",
+    level: 5,
+    xp: 2450,
+    maxXp: 3000,
+    rank: "Advanced",
+    achievements: 8,
+    coursesCompleted: 12,
+    totalStudyTime: "124h"
+  }
+
+  const stats = [
+    { label: "Level", value: userData.level, icon: Star },
+    { label: "XP", value: `${userData.xp}/${userData.maxXp}`, icon: Trophy },
+    { label: "Rank", value: userData.rank, icon: Award }
+  ]
+
+  const achievements = [
+    { title: "First Steps", description: "Complete your first course", unlocked: true },
+    { title: "Quick Learner", description: "Complete a course in under 24h", unlocked: true },
+    { title: "Dedication", description: "Study 7 days in a row", unlocked: true },
+    { title: "Master", description: "Complete 10 courses", unlocked: true },
+    { title: "Expert", description: "Reach level 5", unlocked: true },
+    { title: "Marathon", description: "Study for 100 hours", unlocked: true },
+    { title: "Perfectionist", description: "Score 100% on 5 tests", unlocked: false },
+    { title: "Legend", description: "Reach level 10", 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">
+        <nav className="container mx-auto px-6 py-4">
+          <div className="flex items-center justify-center">
+            <div className="flex items-center gap-12">
+              <Link href="/home/main">
+                <button
+                  className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
+                >
+                  Main
+                </button>
+              </Link>
+              <Link href="/home/progress">
+                <button
+                  className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
+                >
+                  Progress
+                </button>
+              </Link>
+              <button
+                onClick={() => setActiveTab("profile")}
+                className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
+              >
+                Profile
+              </button>
+              <Link href="/home/rules">
+                <button
+                  className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
+                >
+                  Rules
+                </button>
+              </Link>
+              <Link href="/login">
+                <button
+                  className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
+                >
+                  Login
+                </button>
+              </Link>
+            </div>
+          </div>
+        </nav>
+      </header>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-6 py-8 max-w-6xl">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* User Profile Card */}
+          <Card className="lg:col-span-1 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
+            <div className="text-center">
+              {/* Avatar */}
+              <div className="w-32 h-32 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-cyan-500/30">
+                <User className="w-16 h-16 text-cyan-400" />
+              </div>
+
+              {/* User Info */}
+              <h2 className="text-2xl font-bold text-cyan-400 font-mono mb-1">
+                {userData.name}
+              </h2>
+              <p className="text-cyan-400/60 font-mono text-sm mb-6">
+                {userData.rank} • Level {userData.level}
+              </p>
+
+              {/* XP Progress */}
+              <div className="mb-6">
+                <div className="flex justify-between items-center mb-2">
+                  <span className="text-xs font-mono text-cyan-400/60">XP Progress</span>
+                  <span className="text-xs font-mono text-cyan-400">
+                    {userData.xp}/{userData.maxXp}
+                  </span>
+                </div>
+                <Progress 
+                  value={(userData.xp / userData.maxXp) * 100} 
+                  className="h-3 bg-[#0a0e1a]"
+                />
+              </div>
+
+              {/* Quick Stats */}
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
+                  <BookOpen className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
+                  <div className="text-xl font-bold text-cyan-400 font-mono">
+                    {userData.coursesCompleted}
+                  </div>
+                  <div className="text-xs text-cyan-400/60 font-mono">Courses</div>
+                </div>
+                <div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
+                  <Award className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
+                  <div className="text-xl font-bold text-cyan-400 font-mono">
+                    {userData.achievements}
+                  </div>
+                  <div className="text-xs text-cyan-400/60 font-mono">Badges</div>
+                </div>
+              </div>
+
+              <Button 
+                className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-mono font-bold"
+              >
+                EDIT PROFILE
+              </Button>
+            </div>
+          </Card>
+
+          {/* Stats and Achievements */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Personal Progress Card */}
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
+              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
+                Personal progress
+              </h3>
+              <div className="grid grid-cols-3 gap-4">
+                {stats.map((stat, index) => {
+                  const Icon = stat.icon
+                  return (
+                    <div 
+                      key={index}
+                      className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-4 text-center"
+                    >
+                      <Icon className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
+                      <div className="text-2xl font-bold text-cyan-400 font-mono mb-1">
+                        {stat.value}
+                      </div>
+                      <div className="text-xs text-cyan-400/60 font-mono">
+                        {stat.label}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </Card>
+
+            {/* Achievements Card */}
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
+              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
+                Achievements
+              </h3>
+              <div className="grid grid-cols-2 gap-3">
+                {achievements.map((achievement, index) => (
+                  <Card
+                    key={index}
+                    className={`p-4 transition-all ${
+                      achievement.unlocked
+                        ? 'bg-cyan-500/10 border-cyan-500/40 hover:border-cyan-500/60'
+                        : 'bg-[#0a0e1a] border-cyan-500/10 opacity-40'
+                    }`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                        achievement.unlocked
+                          ? 'bg-cyan-500/20'
+                          : 'bg-cyan-500/5'
+                      }`}>
+                        <Trophy className={`w-5 h-5 ${
+                          achievement.unlocked
+                            ? 'text-cyan-400'
+                            : 'text-cyan-400/30'
+                        }`} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h4 className={`font-bold font-mono text-sm mb-1 ${
+                          achievement.unlocked
+                            ? 'text-cyan-400'
+                            : 'text-cyan-400/30'
+                        }`}>
+                          {achievement.title}
+                        </h4>
+                        <p className="text-xs text-cyan-400/50 font-mono line-clamp-2">
+                          {achievement.description}
+                        </p>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </Card>
+          </div>
+        </div>
+      </main>
+
+      {/* Background grid */}
+      <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>
+  )
+}

app/(home)/main/progress/page.tsx

@@ -0,0 +1,286 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import Link from "next/link"
+import { CheckCircle2, Circle, Clock } from "lucide-react"
+
+export default function ProgressPage() {
+  const [activeTab, setActiveTab] = useState("progress")
+
+  // Mock data
+  const courses = [
+    { id: 1, name: "React", lessons: 12, completed: 8 },
+    { id: 2, name: "TypeScript", lessons: 10, completed: 6 },
+    { id: 3, name: "Next.js", lessons: 15, completed: 4 },
+    { id: 4, name: "Node.js", lessons: 20, completed: 0 }
+  ]
+
+  const assignments = [
+    { id: 1, course: "React", name: "Build a Todo App", grade: 95, status: "completed" },
+    { id: 2, course: "TypeScript", name: "Type System", grade: 88, status: "completed" },
+    { id: 3, course: "Next.js", name: "SSR Project", grade: null, status: "pending" },
+    { id: 4, course: "Node.js", name: "REST API", grade: null, status: "not_started" }
+  ]
+
+  const weekActivity = [
+    { day: "Mon", hours: 2.5 },
+    { day: "Tue", hours: 3.2 },
+    { day: "Wed", hours: 1.8 },
+    { day: "Thu", hours: 4.1 },
+    { day: "Fri", hours: 2.9 },
+    { day: "Sat", hours: 3.5 },
+    { day: "Sun", hours: 1.2 }
+  ]
+
+  const maxHours = Math.max(...weekActivity.map(d => d.hours))
+
+  return (
+    <div className="min-h-screen bg-[#0a0e1a]">
+      {/* Header */}
+      <header className="bg-[#0d1117] border-b border-cyan-500/30 sticky top-0 z-50">
+        <nav className="container mx-auto px-6 py-4">
+          <div className="flex items-center justify-center">
+            <div className="flex items-center gap-12">
+              <Link href="/home/main">
+                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
+                  Main
+                </button>
+              </Link>
+              <button
+                onClick={() => setActiveTab("progress")}
+                className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
+              >
+                Progress
+              </button>
+              <Link href="/home/profile">
+                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
+                  Profile
+                </button>
+              </Link>
+              <Link href="/home/rules">
+                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
+                  Rules
+                </button>
+              </Link>
+              <Link href="/login">
+                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
+                  Login
+                </button>
+              </Link>
+            </div>
+          </div>
+        </nav>
+      </header>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-6 py-8 max-w-7xl">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left Column - Course Progress */}
+          <div className="space-y-6">
+            {/* My Courses */}
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
+              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
+                My courses
+              </h3>
+              <div className="space-y-3">
+                {courses.map((course) => {
+                  const progress = (course.completed / course.lessons) * 100
+                  return (
+                    <Card
+                      key={course.id}
+                      className="bg-[#0a0e1a] border border-cyan-500/20 p-4 hover:border-cyan-500/40 transition-all"
+                    >
+                      <div className="flex justify-between items-start mb-2">
+                        <h4 className="font-bold text-cyan-400 font-mono text-sm">
+                          {course.name}
+                        </h4>
+                        <span className="text-xs text-cyan-400/60 font-mono">
+                          {course.completed}/{course.lessons}
+                        </span>
+                      </div>
+                      <Progress value={progress} className="h-2 bg-[#0d1117]" />
+                    </Card>
+                  )
+                })}
+              </div>
+            </Card>
+
+            {/* My Grades */}
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
+              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
+                My grades
+              </h3>
+              <div className="space-y-3">
+                {assignments.slice(0, 3).map((assignment) => (
+                  <Card
+                    key={assignment.id}
+                    className="bg-[#0a0e1a] border border-cyan-500/20 p-3"
+                  >
+                    <div className="flex justify-between items-center">
+                      <div className="flex-1">
+                        <div className="text-sm font-bold text-cyan-400 font-mono mb-1">
+                          {assignment.course}
+                        </div>
+                        <div className="text-xs text-cyan-400/60 font-mono">
+                          {assignment.name}
+                        </div>
+                      </div>
+                      {assignment.grade ? (
+                        <div className="text-xl font-bold text-cyan-400 font-mono">
+                          {assignment.grade}%
+                        </div>
+                      ) : (
+                        <div className="text-xs text-cyan-400/40 font-mono">
+                          Pending
+                        </div>
+                      )}
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </Card>
+
+            {/* Mathematics (Separate) */}
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
+              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
+                Mathematics
+              </h3>
+              <div className="space-y-3">
+                <Card className="bg-[#0a0e1a] border border-cyan-500/20 p-4">
+                  <div className="flex justify-between items-start mb-2">
+                    <h4 className="font-bold text-cyan-400 font-mono text-sm">
+                      Algebra
+                    </h4>
+                    <span className="text-xs text-cyan-400/60 font-mono">
+                      8/10
+                    </span>
+                  </div>
+                  <Progress value={80} className="h-2 bg-[#0d1117]" />
+                </Card>
+              </div>
+            </Card>
+          </div>
+
+          {/* Center Column - Assignments Table */}
+          <Card className="lg:col-span-2 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
+            <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
+              All Assignments
+            </h3>
+            
+            {/* Table */}
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-cyan-500/20">
+                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
+                      #
+                    </th>
+                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
+                      Course
+                    </th>
+                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
+                      Assignment
+                    </th>
+                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
+                      Grade
+                    </th>
+                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
+                      Status
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {assignments.map((assignment, index) => (
+                    <tr
+                      key={assignment.id}
+                      className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-colors"
+                    >
+                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
+                        {index + 1}
+                      </td>
+                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
+                        {assignment.course}
+                      </td>
+                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
+                        {assignment.name}
+                      </td>
+                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
+                        {assignment.grade ? `${assignment.grade}%` : '-'}
+                      </td>
+                      <td className="py-3 px-4">
+                        <div className="flex items-center gap-2">
+                          {assignment.status === 'completed' ? (
+                            <>
+                              <CheckCircle2 className="w-4 h-4 text-green-400" />
+                              <span className="text-xs font-mono text-green-400">
+                                Completed
+                              </span>
+                            </>
+                          ) : assignment.status === 'pending' ? (
+                            <>
+                              <Clock className="w-4 h-4 text-yellow-400" />
+                              <span className="text-xs font-mono text-yellow-400">
+                                Pending
+                              </span>
+                            </>
+                          ) : (
+                            <>
+                              <Circle className="w-4 h-4 text-cyan-400/30" />
+                              <span className="text-xs font-mono text-cyan-400/30">
+                                Not Started
+                              </span>
+                            </>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Weekly Activity Chart */}
+            <div className="mt-8">
+              <h4 className="text-lg font-bold text-cyan-400 font-mono mb-4">
+                Weekly Activity
+              </h4>
+              <div className="flex items-end justify-between gap-2 h-48">
+                {weekActivity.map((day) => (
+                  <div key={day.day} className="flex-1 flex flex-col items-center gap-2">
+                    <div className="w-full relative flex-1">
+                      <div 
+                        className="absolute bottom-0 w-full bg-gradient-to-t from-cyan-500 to-cyan-400 rounded-t-lg transition-all hover:from-cyan-400 hover:to-cyan-300"
+                        style={{ height: `${(day.hours / maxHours) * 100}%` }}
+                      />
+                    </div>
+                    <div className="text-xs font-mono text-cyan-400/60">
+                      {day.day}
+                    </div>
+                    <div className="text-xs font-mono text-cyan-400 font-bold">
+                      {day.hours}h
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+        </div>
+      </main>
+
+      {/* Background grid */}
+      <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>
+  )
+}

app/(home)/main/reset-password/page.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import Link from "next/link"
+import { ArrowLeft, Mail } from "lucide-react"
+
+export default function ResetPasswordPage() {
+  const [email, setEmail] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Здесь будет логика отправки письма для сброса пароля
+    console.log("Reset password for:", email)
+    setSubmitted(true)
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0a0e1a] flex items-center justify-center p-6">
+      {/* Background grid */}
+      <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'
+        }}
+      />
+
+      {/* Glowing effects */}
+      <div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] animate-pulse" />
+      <div className="fixed bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-pulse" />
+
+      <Card className="w-full max-w-md bg-[#0d1117] border-2 border-cyan-500/40 shadow-[0_0_50px_rgba(6,182,212,0.2)] relative overflow-hidden">
+        {/* Top accent line */}
+        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent" />
+        
+        <div className="p-8">
+          {/* Back button */}
+          <Link 
+            href="/login"
+            className="inline-flex items-center gap-2 text-cyan-400/60 hover:text-cyan-400 font-mono text-sm mb-6 transition-colors group"
+          >
+            <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
+            Back to login
+          </Link>
+
+          {!submitted ? (
+            <>
+              {/* Header */}
+              <div className="text-center mb-8">
+                <div className="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <Mail className="w-8 h-8 text-cyan-400" />
+                </div>
+                <h1 className="text-4xl font-bold text-cyan-400 font-mono mb-2">
+                  Reset my password
+                </h1>
+                <p className="text-cyan-400/50 font-mono text-sm">
+                  Enter your email to receive reset instructions
+                </p>
+              </div>
+
+              {/* Reset Form */}
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="space-y-2">
+                  <Label 
+                    htmlFor="email" 
+                    className="text-cyan-400 font-mono text-sm"
+                  >
+                    Email Address
+                  </Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="your.email@example.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    className="bg-[#0a0e1a] border-cyan-500/30 text-cyan-400 placeholder:text-cyan-400/30 font-mono focus:border-cyan-400 focus:ring-cyan-400/20"
+                  />
+                </div>
+
+                <Button
+                  type="submit"
+                  className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider py-6 text-base shadow-[0_0_30px_rgba(6,182,212,0.3)] hover:shadow-[0_0_50px_rgba(6,182,212,0.5)] transition-all"
+                >
+                  SEND RESET LINK
+                </Button>
+              </form>
+            </>
+          ) : (
+            <>
+              {/* Success State */}
+              <div className="text-center py-8">
+                <div className="w-20 h-20 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
+                  <Mail className="w-10 h-10 text-cyan-400" />
+                </div>
+                <h2 className="text-3xl font-bold text-cyan-400 font-mono mb-3">
+                  Check your email
+                </h2>
+                <p className="text-cyan-400/60 font-mono text-sm mb-6">
+                  We've sent password reset instructions to<br />
+                  <span className="text-cyan-400">{email}</span>
+                </p>
+                <div className="bg-cyan-500/5 border border-cyan-500/20 rounded-lg p-4 mb-6">
+                  <p className="text-cyan-400/70 font-mono text-xs">
+                    Didn't receive the email? Check your spam folder or try again in a few minutes.
+                  </p>
+                </div>
+                <Link href="/login">
+                  <Button
+                    className="w-full bg-[#0a0e1a] border-2 border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-mono"
+                    variant="outline"
+                  >
+                    BACK TO LOGIN
+                  </Button>
+                </Link>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Corner decorations */}
+        <div className="absolute top-2 left-2 w-4 h-4 border-t-2 border-l-2 border-cyan-500/30"></div>
+        <div className="absolute top-2 right-2 w-4 h-4 border-t-2 border-r-2 border-cyan-500/30"></div>
+        <div className="absolute bottom-2 left-2 w-4 h-4 border-b-2 border-l-2 border-cyan-500/30"></div>
+        <div className="absolute bottom-2 right-2 w-4 h-4 border-b-2 border-r-2 border-cyan-500/30"></div>
+      </Card>
+    </div>
+  )
+}

app/globals.css

@@ -1,26 +1,125 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Dashboard App",
+  description: "Modern dashboard application",
 };
 
 export default function RootLayout({
@@ -23,7 +23,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
@@ -31,4 +31,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

app/page.tsx

@@ -1,65 +1,153 @@
-import Image from "next/image";
+"use client"
+
+import { useState, useEffect } from "react"
+import { ArrowRight, Sparkles, Zap, Shield } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+export default function WelcomePage() {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
-export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+    <div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
+      {/* Animated background grid */}
+      <div 
+        className="fixed inset-0 pointer-events-none -z-10 opacity-30"
+        style={{
+          backgroundImage: `
+            linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px)
+          `,
+          backgroundSize: '50px 50px',
+          animation: mounted ? 'grid-move 20s linear infinite' : 'none'
+        }}
+      />
+
+      {/* Glowing orbs */}
+      <div className="fixed top-20 left-20 w-72 h-72 bg-cyan-500/20 rounded-full blur-[100px] animate-pulse" />
+      <div className="fixed bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-pulse delay-1000" />
+
+      {/* Main Content */}
+      <main className="container mx-auto px-6 py-12 relative z-10">
+        <div className="max-w-4xl mx-auto">
+          {/* Hero Section */}
+          <div className="text-center mb-16 pt-20">
+            <div className="inline-block mb-6">
+              <div className="flex items-center gap-2 px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 rounded-full">
+                <Sparkles className="w-4 h-4 text-cyan-400" />
+                <span className="text-xs font-mono text-cyan-400 tracking-wider">
+                  WELCOME TO THE FUTURE
+                </span>
+              </div>
+            </div>
+            
+            <h1 className="text-7xl md:text-8xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-cyan-300 to-blue-400 font-mono tracking-tight">
+              Dashboard
+            </h1>
+            
+            <p className="text-xl text-cyan-400/60 font-mono mb-12 tracking-wide">
+              Управляй своим прогрессом в киберпространстве
+            </p>
+
+            <Link href="/home/main">
+              <Button 
+                size="lg"
+                className="bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider px-8 py-6 text-lg rounded-lg shadow-[0_0_30px_rgba(6,182,212,0.4)] hover:shadow-[0_0_50px_rgba(6,182,212,0.6)] transition-all duration-300 group"
+              >
+                Войти в систему
+                <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </Button>
+            </Link>
+          </div>
+
+          {/* Features Grid */}
+          <div className="grid md:grid-cols-3 gap-6 mt-20">
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all duration-300 group hover:shadow-[0_0_30px_rgba(6,182,212,0.1)]">
+              <div className="w-12 h-12 bg-cyan-500/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-cyan-500/20 transition-colors">
+                <Zap className="w-6 h-6 text-cyan-400" />
+              </div>
+              <h3 className="text-lg font-bold text-cyan-400 font-mono mb-2">
+                Быстрый доступ
+              </h3>
+              <p className="text-sm text-cyan-400/50 font-mono leading-relaxed">
+                Мгновенный доступ ко всем функциям системы
+              </p>
+            </Card>
+
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all duration-300 group hover:shadow-[0_0_30px_rgba(6,182,212,0.1)]">
+              <div className="w-12 h-12 bg-cyan-500/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-cyan-500/20 transition-colors">
+                <Shield className="w-6 h-6 text-cyan-400" />
+              </div>
+              <h3 className="text-lg font-bold text-cyan-400 font-mono mb-2">
+                Безопасность
+              </h3>
+              <p className="text-sm text-cyan-400/50 font-mono leading-relaxed">
+                Защищённое хранение данных и прогресса
+              </p>
+            </Card>
+
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all duration-300 group hover:shadow-[0_0_30px_rgba(6,182,212,0.1)]">
+              <div className="w-12 h-12 bg-cyan-500/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-cyan-500/20 transition-colors">
+                <Sparkles className="w-6 h-6 text-cyan-400" />
+              </div>
+              <h3 className="text-lg font-bold text-cyan-400 font-mono mb-2">
+                Прогресс
+              </h3>
+              <p className="text-sm text-cyan-400/50 font-mono leading-relaxed">
+                Отслеживание достижений в реальном времени
+              </p>
+            </Card>
+          </div>
+
+          {/* Stats Section */}
+          <div className="mt-16 text-center">
+            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-8 shadow-[0_0_50px_rgba(6,182,212,0.15)]">
+              <div className="grid grid-cols-3 gap-8">
+                <div>
+                  <div className="text-4xl font-bold text-cyan-400 font-mono mb-2">
+                    24/7
+                  </div>
+                  <div className="text-sm text-cyan-400/50 font-mono">
+                    Онлайн
+                  </div>
+                </div>
+                <div>
+                  <div className="text-4xl font-bold text-cyan-400 font-mono mb-2">
+                    100%
+                  </div>
+                  <div className="text-sm text-cyan-400/50 font-mono">
+                    Безопасность
+                  </div>
+                </div>
+                <div>
+                  <div className="text-4xl font-bold text-cyan-400 font-mono mb-2">
+                    ∞
+                  </div>
+                  <div className="text-sm text-cyan-400/50 font-mono">
+                    Возможности
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
         </div>
       </main>
+
+      <style jsx>{`
+        @keyframes grid-move {
+          0% {
+            transform: translate(0, 0);
+          }
+          100% {
+            transform: translate(50px, 50px);
+          }
+        }
+      `}</style>
     </div>
-  );
-}
+  )
+}