416 lines
18 KiB
TypeScript
416 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { motion } from "framer-motion";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { useAuth } from "@/lib/auth-context";
|
||
import {
|
||
Trophy,
|
||
Zap,
|
||
Code2,
|
||
Users,
|
||
ArrowRight,
|
||
Terminal,
|
||
Timer,
|
||
BarChart3,
|
||
Cpu,
|
||
Shield,
|
||
Sparkles,
|
||
} from "lucide-react";
|
||
import { CyberBrandText, VolguLogo } from "@/components/VolguLogo";
|
||
import { GlowOrbs, GlitchText, CornerBrackets, TypewriterText } from "@/components/decorative";
|
||
import { HeroIllustration } from "@/components/illustrations";
|
||
import { MatrixRain } from "@/components/effects";
|
||
|
||
const features = [
|
||
{
|
||
icon: Trophy,
|
||
title: "Соревнования",
|
||
description: "Участвуйте в контестах и соревнуйтесь с другими программистами",
|
||
color: "var(--color-neon-green)",
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: "Автопроверка",
|
||
description: "Мгновенная проверка решений с детальными результатами по каждому тесту",
|
||
color: "var(--color-neon-cyan)",
|
||
},
|
||
{
|
||
icon: Code2,
|
||
title: "30+ языков",
|
||
description: "Python, C++, Java, JavaScript, Go, Rust и многие другие языки",
|
||
color: "var(--color-neon-purple)",
|
||
},
|
||
{
|
||
icon: Timer,
|
||
title: "Real-time таймеры",
|
||
description: "Следите за временем контеста и оставшимся временем в реальном времени",
|
||
color: "var(--color-neon-orange)",
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: "Рейтинг",
|
||
description: "Отслеживайте свой прогресс и соревнуйтесь в таблице лидеров",
|
||
color: "var(--color-neon-pink)",
|
||
},
|
||
{
|
||
icon: Terminal,
|
||
title: "Удобный редактор",
|
||
description: "Современный редактор кода с подсветкой синтаксиса и автодополнением",
|
||
color: "var(--color-neon-yellow)",
|
||
},
|
||
];
|
||
|
||
const stats = [
|
||
{ value: "30+", label: "Языков", color: "var(--color-neon-green)" },
|
||
{ value: "∞", label: "Контестов", color: "var(--color-neon-cyan)" },
|
||
{ value: "100%", label: "Автопроверка", color: "var(--color-neon-purple)" },
|
||
{ value: "24/7", label: "Доступность", color: "var(--color-neon-pink)" },
|
||
];
|
||
|
||
const containerVariants = {
|
||
hidden: { opacity: 0 },
|
||
visible: {
|
||
opacity: 1,
|
||
transition: {
|
||
staggerChildren: 0.1,
|
||
},
|
||
},
|
||
};
|
||
|
||
const itemVariants = {
|
||
hidden: { opacity: 0, y: 20 },
|
||
visible: { opacity: 1, y: 0 },
|
||
};
|
||
|
||
export default function HomePage() {
|
||
const { user } = useAuth();
|
||
|
||
return (
|
||
<div className="min-h-[calc(100vh-4rem)] relative">
|
||
{/* Hero Section */}
|
||
<section className="relative overflow-hidden min-h-[90vh] flex items-center">
|
||
{/* Background Effects */}
|
||
<div className="absolute inset-0 overflow-hidden">
|
||
<MatrixRain density="light" color="green" speed="slow" />
|
||
</div>
|
||
<GlowOrbs />
|
||
|
||
{/* Cyber grid overlay */}
|
||
<div className="absolute inset-0 cyber-grid opacity-30" />
|
||
|
||
{/* Scanline effect */}
|
||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[var(--color-neon-green)]/[0.02] to-transparent animate-scanline" />
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 py-16 relative z-10">
|
||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||
{/* Left column - Text content */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
{/* University badge */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="inline-flex items-center gap-3 px-4 py-2 rounded-lg bg-[var(--color-card)] border border-[var(--color-neon-green)]/30 mb-8"
|
||
>
|
||
<VolguLogo className="h-5 w-5" animated />
|
||
<span className="text-sm font-mono text-[var(--color-neon-green)]">
|
||
<TypewriterText text="Волгоградский государственный университет" speed={30} />
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Main heading */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.3 }}
|
||
className="mb-6"
|
||
>
|
||
<GlitchText
|
||
text=">VOLSU.CONTESTS"
|
||
className="text-4xl md:text-5xl lg:text-6xl font-display font-bold"
|
||
/>
|
||
</motion.div>
|
||
|
||
{/* Subtitle with terminal style */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.4 }}
|
||
className="mb-8"
|
||
>
|
||
<p className="text-lg md:text-xl text-muted-foreground font-mono leading-relaxed">
|
||
<span className="text-[var(--color-neon-cyan)]">$</span> Платформа для проведения соревнований по{" "}
|
||
<span className="text-[var(--color-neon-green)] text-glow-green">
|
||
олимпиадному программированию
|
||
</span>
|
||
</p>
|
||
<p className="text-muted-foreground font-mono mt-2 flex items-center gap-2">
|
||
<span className="text-[var(--color-neon-purple)]">></span>
|
||
<span className="animate-blink-cursor">_</span>
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* CTA Buttons */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.5 }}
|
||
className="flex flex-col sm:flex-row gap-4"
|
||
>
|
||
<Button asChild variant="cyber" size="lg" className="group">
|
||
<Link href="/contests">
|
||
<Trophy className="h-5 w-5 mr-2" />
|
||
Перейти к контестам
|
||
<ArrowRight className="h-5 w-5 ml-2 transition-transform group-hover:translate-x-1" />
|
||
</Link>
|
||
</Button>
|
||
{!user && (
|
||
<Button asChild variant="neon" size="lg">
|
||
<Link href="/register">
|
||
<Users className="h-5 w-5 mr-2" />
|
||
Создать аккаунт
|
||
</Link>
|
||
</Button>
|
||
)}
|
||
</motion.div>
|
||
|
||
{/* Stats */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.7 }}
|
||
className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6"
|
||
>
|
||
{stats.map((stat, index) => (
|
||
<div key={index} className="relative group">
|
||
<CornerBrackets color={stat.color} size="sm" />
|
||
<div className="text-center py-4">
|
||
<div
|
||
className="text-2xl md:text-3xl font-display font-bold mb-1"
|
||
style={{ color: stat.color, textShadow: `0 0 20px ${stat.color}` }}
|
||
>
|
||
{stat.value}
|
||
</div>
|
||
<div className="text-xs font-mono text-muted-foreground uppercase tracking-wider">
|
||
{stat.label}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right column - Illustration */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
className="hidden lg:flex justify-center items-center"
|
||
>
|
||
<HeroIllustration className="w-full max-w-lg" />
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom gradient fade */}
|
||
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-background)] to-transparent" />
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section className="py-24 relative">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[var(--color-neon-purple)]/5 to-transparent" />
|
||
|
||
<div className="container mx-auto px-4 relative">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<Badge variant="cyan" className="mb-4 font-mono">
|
||
<Cpu className="h-3 w-3 mr-1" />
|
||
SYSTEM.FEATURES
|
||
</Badge>
|
||
<h2 className="text-3xl md:text-4xl font-display font-bold mb-4">
|
||
<span className="text-[var(--color-neon-green)]"><</span>
|
||
Возможности платформы
|
||
<span className="text-[var(--color-neon-green)]">/></span>
|
||
</h2>
|
||
<p className="text-lg text-muted-foreground font-mono max-w-2xl mx-auto">
|
||
Все необходимые инструменты для проведения и участия в соревнованиях
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
variants={containerVariants}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
|
||
>
|
||
{features.map((feature, index) => {
|
||
const Icon = feature.icon;
|
||
return (
|
||
<motion.div key={index} variants={itemVariants}>
|
||
<Card variant="cyber" className="h-full group hover:border-[var(--color-neon-green)]/50 transition-all duration-300">
|
||
<CardContent className="pt-6 relative">
|
||
{/* Icon with glow */}
|
||
<div
|
||
className="w-14 h-14 rounded-lg flex items-center justify-center mb-4 transition-all duration-300 group-hover:scale-110"
|
||
style={{
|
||
backgroundColor: `color-mix(in srgb, ${feature.color} 15%, transparent)`,
|
||
border: `1px solid ${feature.color}40`,
|
||
boxShadow: `0 0 20px ${feature.color}20`
|
||
}}
|
||
>
|
||
<Icon
|
||
className="h-7 w-7 transition-all duration-300"
|
||
style={{ color: feature.color }}
|
||
/>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h3
|
||
className="text-lg font-display font-semibold mb-2 transition-colors duration-300"
|
||
style={{ color: feature.color }}
|
||
>
|
||
{feature.title}
|
||
</h3>
|
||
|
||
{/* Description */}
|
||
<p className="text-muted-foreground font-mono text-sm leading-relaxed">
|
||
{feature.description}
|
||
</p>
|
||
|
||
{/* Hover effect line */}
|
||
<div
|
||
className="absolute bottom-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||
style={{
|
||
background: `linear-gradient(90deg, transparent, ${feature.color}, transparent)`,
|
||
boxShadow: `0 0 10px ${feature.color}`
|
||
}}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-24 relative">
|
||
<div className="container mx-auto px-4">
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
className="relative overflow-hidden rounded-2xl"
|
||
>
|
||
{/* Background with cyber styling */}
|
||
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-neon-green)]/10 via-[var(--color-neon-cyan)]/10 to-[var(--color-neon-purple)]/10" />
|
||
<div className="absolute inset-0 cyber-grid opacity-20" />
|
||
|
||
{/* Border glow */}
|
||
<div className="absolute inset-0 rounded-2xl border border-[var(--color-neon-green)]/30" />
|
||
<div className="absolute inset-[1px] rounded-2xl border border-[var(--color-neon-cyan)]/20" />
|
||
|
||
{/* Animated corner accents */}
|
||
<div className="absolute top-0 left-0 w-20 h-20">
|
||
<div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--color-neon-green)] to-transparent" />
|
||
<div className="absolute top-0 left-0 h-full w-[2px] bg-gradient-to-b from-[var(--color-neon-green)] to-transparent" />
|
||
</div>
|
||
<div className="absolute top-0 right-0 w-20 h-20">
|
||
<div className="absolute top-0 right-0 w-full h-[2px] bg-gradient-to-l from-[var(--color-neon-cyan)] to-transparent" />
|
||
<div className="absolute top-0 right-0 h-full w-[2px] bg-gradient-to-b from-[var(--color-neon-cyan)] to-transparent" />
|
||
</div>
|
||
<div className="absolute bottom-0 left-0 w-20 h-20">
|
||
<div className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--color-neon-purple)] to-transparent" />
|
||
<div className="absolute bottom-0 left-0 h-full w-[2px] bg-gradient-to-t from-[var(--color-neon-purple)] to-transparent" />
|
||
</div>
|
||
<div className="absolute bottom-0 right-0 w-20 h-20">
|
||
<div className="absolute bottom-0 right-0 w-full h-[2px] bg-gradient-to-l from-[var(--color-neon-pink)] to-transparent" />
|
||
<div className="absolute bottom-0 right-0 h-full w-[2px] bg-gradient-to-t from-[var(--color-neon-pink)] to-transparent" />
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="relative p-12 text-center">
|
||
<motion.div
|
||
animate={{
|
||
boxShadow: [
|
||
"0 0 20px var(--color-neon-green)",
|
||
"0 0 40px var(--color-neon-green)",
|
||
"0 0 20px var(--color-neon-green)"
|
||
]
|
||
}}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
className="w-16 h-16 mx-auto mb-6 rounded-full border-2 border-[var(--color-neon-green)] flex items-center justify-center"
|
||
>
|
||
<Sparkles className="h-8 w-8 text-[var(--color-neon-green)]" />
|
||
</motion.div>
|
||
|
||
<h2 className="text-3xl md:text-4xl font-display font-bold mb-4">
|
||
<span className="text-[var(--color-neon-green)]">Готовы</span>{" "}
|
||
<span className="text-foreground">начать</span>
|
||
<span className="text-[var(--color-neon-cyan)]">?</span>
|
||
</h2>
|
||
|
||
<p className="text-lg text-muted-foreground font-mono mb-8 max-w-xl mx-auto">
|
||
Присоединяйтесь к платформе{" "}
|
||
<span className="text-[var(--color-neon-green)]">>VOLSU.CONTESTS</span>{" "}
|
||
и участвуйте в соревнованиях
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button asChild variant="cyber" size="lg" className="group">
|
||
<Link href={user ? "/contests" : "/register"}>
|
||
<Shield className="h-5 w-5 mr-2" />
|
||
{user ? "Перейти к контестам" : "Начать сейчас"}
|
||
<ArrowRight className="h-5 w-5 ml-2 transition-transform group-hover:translate-x-1" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="relative border-t border-[var(--color-border)] py-8">
|
||
{/* Top border glow */}
|
||
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[var(--color-neon-green)]/30 to-transparent" />
|
||
|
||
<div className="container mx-auto px-4">
|
||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||
<div className="flex items-center gap-3">
|
||
<VolguLogo className="h-6 w-6" />
|
||
<CyberBrandText className="text-sm" />
|
||
</div>
|
||
|
||
<p className="text-sm text-muted-foreground font-mono text-center">
|
||
<span className="text-[var(--color-neon-green)]">©</span> {new Date().getFullYear()}{" "}
|
||
<span className="text-muted-foreground">—</span>{" "}
|
||
Волгоградский государственный университет
|
||
</p>
|
||
|
||
<div className="flex items-center gap-2 text-xs font-mono text-muted-foreground">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-[var(--color-neon-green)] animate-pulse" />
|
||
<span>SYSTEM.ONLINE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|