153 lines
6.6 KiB
TypeScript
153 lines
6.6 KiB
TypeScript
"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)
|
||
}, [])
|
||
|
||
return (
|
||
<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="/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>
|
||
)
|
||
} |