Add a dedicated portfolio page and translate the website content to Russian

Implement a new route for the portfolio page, add Russian translations for various UI elements, and update navigation links to support both internal page anchors and the new portfolio route.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 251cdcbe-a43a-4217-bd52-93caca5808d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 99f8d46c-0705-47f5-b852-393ef376f396
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e6bb1a93-c366-4e7d-b74e-5aa29eda3fbe/251cdcbe-a43a-4217-bd52-93caca5808d1/z6fL1aj
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
kekih047
2026-02-08 05:58:39 +00:00
parent 6392d44aa1
commit 07a36b9680
8 changed files with 346 additions and 68 deletions

View File

@@ -5,11 +5,13 @@ import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import NotFound from "@/pages/not-found"; import NotFound from "@/pages/not-found";
import Home from "@/pages/home"; import Home from "@/pages/home";
import Portfolio from "@/pages/portfolio";
function Router() { function Router() {
return ( return (
<Switch> <Switch>
<Route path="/" component={Home} /> <Route path="/" component={Home} />
<Route path="/portfolio" component={Portfolio} />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
); );

View File

@@ -15,7 +15,7 @@ export function Footer() {
</span> </span>
</a> </a>
<p className="text-muted-foreground max-w-sm mb-6"> <p className="text-muted-foreground max-w-sm mb-6">
Professional Minecraft development team dedicated to crafting high-quality mods, plugins, and experiences. Профессиональная команда разработчиков Minecraft, создающая высококачественные моды, плагины и уникальный игровой опыт.
</p> </p>
<div className="flex gap-4"> <div className="flex gap-4">
<a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-primary hover:text-background transition-colors"> <a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-primary hover:text-background transition-colors">
@@ -31,29 +31,29 @@ export function Footer() {
</div> </div>
<div> <div>
<h4 className="font-bold text-white mb-6">Services</h4> <h4 className="font-bold text-white mb-6">Услуги</h4>
<ul className="space-y-4 text-sm text-muted-foreground"> <ul className="space-y-4 text-sm text-muted-foreground">
<li><a href="#" className="hover:text-primary transition-colors">Custom Mods</a></li> <li><a href="#" className="hover:text-primary transition-colors">Кастомные моды</a></li>
<li><a href="#" className="hover:text-primary transition-colors">Server Plugins</a></li> <li><a href="#" className="hover:text-primary transition-colors">Плагины для серверов</a></li>
<li><a href="#" className="hover:text-primary transition-colors">Web Integration</a></li> <li><a href="#" className="hover:text-primary transition-colors">Веб-интеграция</a></li>
<li><a href="#" className="hover:text-primary transition-colors">Consulting</a></li> <li><a href="#" className="hover:text-primary transition-colors">Консалтинг</a></li>
</ul> </ul>
</div> </div>
<div> <div>
<h4 className="font-bold text-white mb-6">Company</h4> <h4 className="font-bold text-white mb-6">Компания</h4>
<ul className="space-y-4 text-sm text-muted-foreground"> <ul className="space-y-4 text-sm text-muted-foreground">
<li><a href="#" className="hover:text-primary transition-colors">About Us</a></li> <li><a href="#" className="hover:text-primary transition-colors">О нас</a></li>
<li><a href="#" className="hover:text-primary transition-colors">Portfolio</a></li> <li><a href="#" className="hover:text-primary transition-colors">Портфолио</a></li>
<li><a href="#" className="hover:text-primary transition-colors">Contact</a></li> <li><a href="#" className="hover:text-primary transition-colors">Контакты</a></li>
<li><a href="#" className="hover:text-primary transition-colors">Terms of Service</a></li> <li><a href="#" className="hover:text-primary transition-colors">Условия использования</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground"> <div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
<p>© 2024 NeveTime Team. All rights reserved.</p> <p>© 2024 NeveTime Team. Все права защищены.</p>
<p>Not affiliated with Mojang Studios.</p> <p>Не связано с Mojang Studios.</p>
</div> </div>
</div> </div>
</footer> </footer>

View File

@@ -1,6 +1,7 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ArrowRight, Terminal } from "lucide-react"; import { ArrowRight, Terminal } from "lucide-react";
import { Link } from "wouter";
export function Hero() { export function Hero() {
return ( return (
@@ -28,29 +29,31 @@ export function Hero() {
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span> <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
</span> </span>
Available for new projects Доступны для новых проектов
</div> </div>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold font-heading leading-tight text-white"> <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold font-heading leading-tight text-white">
Crafting the <br /> Создаем <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-200 text-glow"> <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-200 text-glow">
Future Будущее
</span> of Minecraft </span> Minecraft
</h1> </h1>
<p className="text-lg text-muted-foreground max-w-xl font-light"> <p className="text-lg text-muted-foreground max-w-xl font-light">
We are NeveTime Team. A collective of expert developers building high-performance mods, plugins, and custom server solutions. Мы NeveTime Team. Коллектив опытных разработчиков, создающих высокопроизводительные моды, плагины и кастомные решения для серверов.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 pt-4"> <div className="flex flex-col sm:flex-row gap-4 pt-4">
<Button size="lg" className="bg-primary hover:bg-primary/90 text-background font-bold text-base h-12 px-8"> <Button size="lg" className="bg-primary hover:bg-primary/90 text-background font-bold text-base h-12 px-8">
Start Project Начать проект
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </Button>
<Link href="/portfolio">
<Button size="lg" variant="outline" className="border-white/10 text-white hover:bg-white/5 h-12 px-8 font-mono"> <Button size="lg" variant="outline" className="border-white/10 text-white hover:bg-white/5 h-12 px-8 font-mono">
<Terminal className="mr-2 w-4 h-4 text-primary" /> <Terminal className="mr-2 w-4 h-4 text-primary" />
View Portfolio Портфолио
</Button> </Button>
</Link>
</div> </div>
</motion.div> </motion.div>
@@ -75,15 +78,15 @@ export function Hero() {
<div className="font-mono text-sm space-y-2 text-muted-foreground my-4"> <div className="font-mono text-sm space-y-2 text-muted-foreground my-4">
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-primary">{">"}</span> <span className="text-primary">{">"}</span>
<span>Initializing NeveTime Core...</span> <span>Инициализация NeveTime Core...</span>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-primary">{">"}</span> <span className="text-primary">{">"}</span>
<span>Loading modules: [Mods, Plugins, Web]</span> <span>Загрузка модулей: [Моды, Плагины, Веб]</span>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-primary">{">"}</span> <span className="text-primary">{">"}</span>
<span className="text-emerald-400">Success! System ready.</span> <span className="text-emerald-400">Успешно! Система готова.</span>
</div> </div>
<div className="flex gap-2 animate-pulse"> <div className="flex gap-2 animate-pulse">
<span className="text-primary">{">"}</span> <span className="text-primary">{">"}</span>

View File

@@ -8,10 +8,10 @@ export function Navbar() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const navItems = [ const navItems = [
{ label: "Home", href: "#home" }, { label: "Главная", href: "/#home" },
{ label: "Services", href: "#services" }, { label: "Услуги", href: "/#services" },
{ label: "Portfolio", href: "#portfolio" }, { label: "Портфолио", href: "/portfolio" },
{ label: "About", href: "#about" }, { label: "О нас", href: "/#about" },
]; ];
return ( return (
@@ -31,6 +31,7 @@ export function Navbar() {
{/* Desktop Nav */} {/* Desktop Nav */}
<div className="hidden md:flex items-center gap-8"> <div className="hidden md:flex items-center gap-8">
{navItems.map((item) => ( {navItems.map((item) => (
item.href.startsWith("/#") ? (
<a <a
key={item.label} key={item.label}
href={item.href} href={item.href}
@@ -38,9 +39,16 @@ export function Navbar() {
> >
{item.label} {item.label}
</a> </a>
) : (
<Link key={item.label} href={item.href}>
<a className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">
{item.label}
</a>
</Link>
)
))} ))}
<Button className="bg-primary hover:bg-primary/90 text-background font-bold"> <Button className="bg-primary hover:bg-primary/90 text-background font-bold">
Contact Us Связаться с нами
</Button> </Button>
</div> </div>
@@ -55,17 +63,17 @@ export function Navbar() {
<SheetContent side="right" className="bg-background border-l border-white/10"> <SheetContent side="right" className="bg-background border-l border-white/10">
<div className="flex flex-col gap-8 mt-10"> <div className="flex flex-col gap-8 mt-10">
{navItems.map((item) => ( {navItems.map((item) => (
<Link key={item.label} href={item.href}>
<a <a
key={item.label}
href={item.href}
className="text-lg font-medium text-white hover:text-primary transition-colors" className="text-lg font-medium text-white hover:text-primary transition-colors"
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
> >
{item.label} {item.label}
</a> </a>
</Link>
))} ))}
<Button className="w-full bg-primary hover:bg-primary/90 text-background font-bold"> <Button className="w-full bg-primary hover:bg-primary/90 text-background font-bold">
Contact Us Связаться с нами
</Button> </Button>
</div> </div>
</SheetContent> </SheetContent>

View File

@@ -0,0 +1,115 @@
import { motion } from "framer-motion";
import { Badge } from "@/components/ui/badge";
import { Github, ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
const projects = [
{
title: "Aetheria RPG",
category: "Ядро сервера",
description: "Полное кастомное ядро для MMORPG сервера, обслуживающее 500+ игроков одновременно. Включает системы навыков, классов и квестов.",
tags: ["Java", "Paper API", "Redis", "SQL"],
image: "https://images.unsplash.com/photo-1605901309584-818e25960b8f?q=80&w=2000&auto=format&fit=crop"
},
{
title: "TechReborn Addon",
category: "Fabric Мод",
description: "Индустриальный тех-мод, добавляющий сложные механизмы, энергосистемы и инструменты автоматизации.",
tags: ["Fabric", "Mixin", "Java"],
image: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2000&auto=format&fit=crop"
},
{
title: "SkyBlock Eco",
category: "Плагин экономики",
description: "Продвинутая экономическая система с динамическим ценообразованием, фондовыми рынками и магазинами игроков.",
tags: ["Spigot", "Vault", "Economy"],
image: "https://images.unsplash.com/photo-1614726365723-49cfae92782f?q=80&w=2000&auto=format&fit=crop"
}
];
export function PortfolioSection() {
return (
<section id="portfolio" className="py-24 bg-background relative">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div className="max-w-xl">
<h2 className="text-3xl md:text-5xl font-bold font-heading text-white mb-4">
Избранные <span className="text-primary">Проекты</span>
</h2>
<p className="text-muted-foreground">
Подборка наших лучших работ в сфере разработки Minecraft.
</p>
</div>
<Link href="/portfolio">
<Button variant="outline" className="border-primary/20 hover:bg-primary/10 text-primary hidden md:flex">
Все проекты
</Button>
</Link>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{projects.map((project, index) => (
<motion.div
key={index}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="group rounded-xl overflow-hidden border border-white/10 bg-secondary/30 hover:border-primary/50 transition-all"
>
<div className="relative h-48 overflow-hidden">
<div className="absolute inset-0 bg-primary/20 mix-blend-overlay z-10 opacity-0 group-hover:opacity-100 transition-opacity" />
<img
src={project.image}
alt={project.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
<div className="absolute top-4 left-4 z-20">
<Badge className="bg-background/80 backdrop-blur text-white border-white/10">
{project.category}
</Badge>
</div>
</div>
<div className="p-6">
<h3 className="text-2xl font-bold font-heading text-white mb-2 group-hover:text-primary transition-colors">
{project.title}
</h3>
<p className="text-muted-foreground text-sm mb-4 line-clamp-3">
{project.description}
</p>
<div className="flex flex-wrap gap-2 mb-6">
{project.tags.map((tag) => (
<span key={tag} className="text-xs font-mono px-2 py-1 rounded bg-white/5 text-white/70 border border-white/5">
{tag}
</span>
))}
</div>
<div className="flex gap-4">
<Button size="sm" variant="ghost" className="w-full border border-white/10 hover:bg-white/5 hover:text-primary">
<Github className="w-4 h-4 mr-2" />
Код
</Button>
<Button size="sm" className="w-full bg-primary/10 text-primary hover:bg-primary hover:text-background font-bold border border-primary/20">
<ExternalLink className="w-4 h-4 mr-2" />
Демо
</Button>
</div>
</div>
</motion.div>
))}
</div>
<div className="mt-8 text-center md:hidden">
<Link href="/portfolio">
<Button variant="outline" className="border-primary/20 hover:bg-primary/10 text-primary w-full">
Все проекты
</Button>
</Link>
</div>
</div>
</section>
);
}

View File

@@ -4,33 +4,33 @@ import { Code, Box, Cpu, Server, Wrench, Globe } from "lucide-react";
const services = [ const services = [
{ {
icon: Box, icon: Box,
title: "Custom Mods", title: "Кастомные моды",
description: "Tailor-made modifications for Fabric and Forge. New items, blocks, mechanics, and dimensions." description: "Индивидуальные модификации для Fabric и Forge. Новые предметы, блоки, механики и измерения."
}, },
{ {
icon: Code, icon: Code,
title: "Spigot/Paper Plugins", title: "Плагины Spigot/Paper",
description: "High-performance server-side plugins. From mini-games to complex economy systems." description: "Высокопроизводительные серверные плагины. От мини-игр до сложных экономических систем."
}, },
{ {
icon: Server, icon: Server,
title: "Server Setup", title: "Настройка серверов",
description: "Complete server architecture, optimization, and security configuration for large scale networks." description: "Полная архитектура сервера, оптимизация и конфигурация безопасности для крупных сетей."
}, },
{ {
icon: Globe, icon: Globe,
title: "Web Integration", title: "Веб-интеграция",
description: "Connect your Minecraft server to the web. Leaderboards, stores, and ban lists." description: "Свяжите ваш Minecraft-сервер с вебом. Таблицы лидеров, магазины и списки банов."
}, },
{ {
icon: Cpu, icon: Cpu,
title: "Performance Optimization", title: "Оптимизация производительности",
description: "Deep analysis and optimization of server performance to eliminate lag." description: "Глубокий анализ и оптимизация работы сервера для устранения задержек."
}, },
{ {
icon: Wrench, icon: Wrench,
title: "Maintenance", title: "Поддержка",
description: "Ongoing support and updates for your existing codebase." description: "Постоянная поддержка и обновление вашего существующего кода."
} }
]; ];
@@ -42,10 +42,10 @@ export function Services() {
<div className="container mx-auto px-4 relative z-10"> <div className="container mx-auto px-4 relative z-10">
<div className="text-center max-w-2xl mx-auto mb-16"> <div className="text-center max-w-2xl mx-auto mb-16">
<h2 className="text-3xl md:text-5xl font-bold font-heading text-white mb-4"> <h2 className="text-3xl md:text-5xl font-bold font-heading text-white mb-4">
Our <span className="text-primary">Services</span> Наши <span className="text-primary">Услуги</span>
</h2> </h2>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
We provide end-to-end development solutions for the Minecraft ecosystem. Мы предоставляем комплексные решения для разработки в экосистеме Minecraft.
</p> </p>
</div> </div>

View File

@@ -1,8 +1,9 @@
import { Navbar } from "@/components/navbar"; import { Navbar } from "@/components/navbar";
import { Hero } from "@/components/hero"; import { Hero } from "@/components/hero";
import { Services } from "@/components/services"; import { Services } from "@/components/services";
import { Portfolio } from "@/components/portfolio"; import { PortfolioSection } from "@/components/portfolio-section";
import { Footer } from "@/components/footer"; import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
export default function Home() { export default function Home() {
return ( return (
@@ -11,7 +12,7 @@ export default function Home() {
<main> <main>
<Hero /> <Hero />
<Services /> <Services />
<Portfolio /> <PortfolioSection />
{/* Contact CTA Section */} {/* Contact CTA Section */}
<section id="contact" className="py-24 relative overflow-hidden"> <section id="contact" className="py-24 relative overflow-hidden">
@@ -21,14 +22,14 @@ export default function Home() {
<div className="container mx-auto px-4 relative z-10 text-center"> <div className="container mx-auto px-4 relative z-10 text-center">
<h2 className="text-4xl md:text-5xl font-bold font-heading text-white mb-6"> <h2 className="text-4xl md:text-5xl font-bold font-heading text-white mb-6">
Ready to <span className="text-primary">Build?</span> Готовы <span className="text-primary">Начать?</span>
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10"> <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
Let's turn your ideas into reality. Whether you need a simple plugin or a complex modpack, we are here to help. Давайте воплотим ваши идеи в реальность. Нужен ли вам простой плагин или сложная сборка модов мы поможем.
</p> </p>
<button className="bg-primary hover:bg-primary/90 text-background font-bold text-lg h-14 px-10 rounded-md transition-colors shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:shadow-[0_0_30px_rgba(16,185,129,0.6)]"> <Button className="bg-primary hover:bg-primary/90 text-background font-bold text-lg h-14 px-10 rounded-md transition-colors shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:shadow-[0_0_30px_rgba(16,185,129,0.6)]">
Discuss Your Project Обсудить проект
</button> </Button>
</div> </div>
</section> </section>
</main> </main>

View File

@@ -0,0 +1,149 @@
import { motion } from "framer-motion";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Github, ExternalLink, Filter } from "lucide-react";
const allProjects = [
{
title: "Aetheria RPG",
category: "Ядро сервера",
description: "Полное кастомное ядро для MMORPG сервера, обслуживающее 500+ игроков одновременно. Включает системы навыков, классов и квестов.",
tags: ["Java", "Paper API", "Redis", "SQL"],
image: "https://images.unsplash.com/photo-1605901309584-818e25960b8f?q=80&w=2000&auto=format&fit=crop"
},
{
title: "TechReborn Addon",
category: "Fabric Мод",
description: "Индустриальный тех-мод, добавляющий сложные механизмы, энергосистемы и инструменты автоматизации.",
tags: ["Fabric", "Mixin", "Java"],
image: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2000&auto=format&fit=crop"
},
{
title: "SkyBlock Eco",
category: "Плагин экономики",
description: "Продвинутая экономическая система с динамическим ценообразованием, фондовыми рынками и магазинами игроков.",
tags: ["Spigot", "Vault", "Economy"],
image: "https://images.unsplash.com/photo-1614726365723-49cfae92782f?q=80&w=2000&auto=format&fit=crop"
},
{
title: "Custom HUD",
category: "Клиентский мод",
description: "Полностью настраиваемый интерфейс для игрока с отображением брони, эффектов и статистики.",
tags: ["Fabric", "Rendering", "Java"],
image: "https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2000&auto=format&fit=crop"
},
{
title: "Proxy Manager",
category: "Инструментарий",
description: "Система управления сетью серверов через BungeeCord/Velocity с защитой от DDoS.",
tags: ["Java", "Velocity", "Security"],
image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc48?q=80&w=2000&auto=format&fit=crop"
},
{
title: "Web Dashboard",
category: "Веб-интерфейс",
description: "Панель управления сервером из браузера: консоль, управление файлами и донат-шоп.",
tags: ["React", "TypeScript", "Node.js"],
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2000&auto=format&fit=crop"
}
];
export default function Portfolio() {
return (
<div className="min-h-screen bg-background text-foreground font-sans">
<Navbar />
<main className="pt-32 pb-24">
<div className="container mx-auto px-4">
<header className="max-w-3xl mb-16">
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="text-4xl md:text-6xl font-bold font-heading text-white mb-6"
>
Наше <span className="text-primary">Портфолио</span>
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="text-xl text-muted-foreground"
>
Исследуйте наши последние работы: от серверных плагинов до масштабных модификаций и веб-систем.
</motion.p>
</header>
<div className="flex flex-wrap gap-4 mb-12">
{["Все", "Моды", "Плагины", "Веб", "Ядро"].map((filter) => (
<Button key={filter} variant="outline" className="border-white/10 hover:border-primary/50 text-muted-foreground hover:text-primary">
{filter}
</Button>
))}
<div className="ml-auto flex items-center gap-2 text-muted-foreground">
<Filter className="w-4 h-4" />
<span className="text-sm">Фильтры</span>
</div>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{allProjects.map((project, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="group rounded-xl overflow-hidden border border-white/10 bg-secondary/30 hover:border-primary/50 transition-all"
>
<div className="relative h-64 overflow-hidden">
<div className="absolute inset-0 bg-primary/20 mix-blend-overlay z-10 opacity-0 group-hover:opacity-100 transition-opacity" />
<img
src={project.image}
alt={project.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
<div className="absolute top-4 left-4 z-20">
<Badge className="bg-background/80 backdrop-blur text-white border-white/10">
{project.category}
</Badge>
</div>
</div>
<div className="p-8">
<h3 className="text-2xl font-bold font-heading text-white mb-3 group-hover:text-primary transition-colors">
{project.title}
</h3>
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
{project.description}
</p>
<div className="flex flex-wrap gap-2 mb-8">
{project.tags.map((tag) => (
<span key={tag} className="text-xs font-mono px-3 py-1 rounded bg-white/5 text-white/70 border border-white/5">
{tag}
</span>
))}
</div>
<div className="grid grid-cols-2 gap-4">
<Button variant="ghost" className="border border-white/10 hover:bg-white/5 hover:text-primary h-12">
<Github className="w-4 h-4 mr-2" />
Код
</Button>
<Button className="bg-primary/10 text-primary hover:bg-primary hover:text-background font-bold border border-primary/20 h-12">
<ExternalLink className="w-4 h-4 mr-2" />
Демо
</Button>
</div>
</div>
</motion.div>
))}
</div>
</div>
</main>
<Footer />
</div>
);
}