From 07a36b9680125cef8589be95471a588da5319ce9 Mon Sep 17 00:00:00 2001
From: kekih047 <24789791-kekih047@users.noreply.replit.com>
Date: Sun, 8 Feb 2026 05:58:39 +0000
Subject: [PATCH] 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
---
 client/src/App.tsx                          |   2 +
 client/src/components/footer.tsx            |  26 ++--
 client/src/components/hero.tsx              |  29 ++--
 client/src/components/navbar.tsx            |  50 ++++---
 client/src/components/portfolio-section.tsx | 115 +++++++++++++++
 client/src/components/services.tsx          |  28 ++--
 client/src/pages/home.tsx                   |  15 +-
 client/src/pages/portfolio.tsx              | 149 ++++++++++++++++++++
 8 files changed, 346 insertions(+), 68 deletions(-)
 create mode 100644 client/src/components/portfolio-section.tsx
 create mode 100644 client/src/pages/portfolio.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index f86c957..7006c59 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -5,11 +5,13 @@ import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import NotFound from "@/pages/not-found";
 import Home from "@/pages/home";
+import Portfolio from "@/pages/portfolio";
 
 function Router() {
   return (
     <Switch>
       <Route path="/" component={Home} />
+      <Route path="/portfolio" component={Portfolio} />
       <Route component={NotFound} />
     </Switch>
   );
diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx
index 5b0c780..ff964a2 100644
--- a/client/src/components/footer.tsx
+++ b/client/src/components/footer.tsx
@@ -15,7 +15,7 @@ export function Footer() {
               </span>
             </a>
             <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>
             <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">
@@ -31,29 +31,29 @@ export function Footer() {
           </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">
-              <li><a href="#" className="hover:text-primary transition-colors">Custom Mods</a></li>
-              <li><a href="#" className="hover:text-primary transition-colors">Server Plugins</a></li>
-              <li><a href="#" className="hover:text-primary transition-colors">Web Integration</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>
+              <li><a href="#" className="hover:text-primary transition-colors">Плагины для серверов</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Веб-интеграция</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Консалтинг</a></li>
             </ul>
           </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">
-              <li><a href="#" className="hover:text-primary transition-colors">About Us</a></li>
-              <li><a href="#" className="hover:text-primary transition-colors">Portfolio</a></li>
-              <li><a href="#" className="hover:text-primary transition-colors">Contact</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>
+              <li><a href="#" className="hover:text-primary transition-colors">Портфолио</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Контакты</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Условия использования</a></li>
             </ul>
           </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">
-          <p>© 2024 NeveTime Team. All rights reserved.</p>
-          <p>Not affiliated with Mojang Studios.</p>
+          <p>© 2024 NeveTime Team. Все права защищены.</p>
+          <p>Не связано с Mojang Studios.</p>
         </div>
       </div>
     </footer>
diff --git a/client/src/components/hero.tsx b/client/src/components/hero.tsx
index 2932cd6..eabf314 100644
--- a/client/src/components/hero.tsx
+++ b/client/src/components/hero.tsx
@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, Terminal } from "lucide-react";
+import { Link } from "wouter";
 
 export function Hero() {
   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="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
             </span>
-            Available for new projects
+            Доступны для новых проектов
           </div>
           
           <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">
-              Future
-            </span> of Minecraft
+              Будущее
+            </span> Minecraft
           </h1>
           
           <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>
           
           <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">
-              Start Project
+              Начать проект
               <ArrowRight className="ml-2 w-4 h-4" />
             </Button>
-            <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" />
-              View Portfolio
-            </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">
+                <Terminal className="mr-2 w-4 h-4 text-primary" />
+                Портфолио
+              </Button>
+            </Link>
           </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="flex gap-2">
                 <span className="text-primary">{">"}</span>
-                <span>Initializing NeveTime Core...</span>
+                <span>Инициализация NeveTime Core...</span>
               </div>
               <div className="flex gap-2">
                 <span className="text-primary">{">"}</span>
-                <span>Loading modules: [Mods, Plugins, Web]</span>
+                <span>Загрузка модулей: [Моды, Плагины, Веб]</span>
               </div>
               <div className="flex gap-2">
                 <span className="text-primary">{">"}</span>
-                <span className="text-emerald-400">Success! System ready.</span>
+                <span className="text-emerald-400">Успешно! Система готова.</span>
               </div>
               <div className="flex gap-2 animate-pulse">
                 <span className="text-primary">{">"}</span>
diff --git a/client/src/components/navbar.tsx b/client/src/components/navbar.tsx
index d7bcd47..7142359 100644
--- a/client/src/components/navbar.tsx
+++ b/client/src/components/navbar.tsx
@@ -8,10 +8,10 @@ export function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
 
   const navItems = [
-    { label: "Home", href: "#home" },
-    { label: "Services", href: "#services" },
-    { label: "Portfolio", href: "#portfolio" },
-    { label: "About", href: "#about" },
+    { label: "Главная", href: "/#home" },
+    { label: "Услуги", href: "/#services" },
+    { label: "Портфолио", href: "/portfolio" },
+    { label: "О нас", href: "/#about" },
   ];
 
   return (
@@ -31,16 +31,24 @@ export function Navbar() {
         {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-8">
           {navItems.map((item) => (
-            <a
-              key={item.label}
-              href={item.href}
-              className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
-            >
-              {item.label}
-            </a>
+            item.href.startsWith("/#") ? (
+              <a
+                key={item.label}
+                href={item.href}
+                className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
+              >
+                {item.label}
+              </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">
-            Contact Us
+            Связаться с нами
           </Button>
         </div>
 
@@ -55,17 +63,17 @@ export function Navbar() {
             <SheetContent side="right" className="bg-background border-l border-white/10">
               <div className="flex flex-col gap-8 mt-10">
                 {navItems.map((item) => (
-                  <a
-                    key={item.label}
-                    href={item.href}
-                    className="text-lg font-medium text-white hover:text-primary transition-colors"
-                    onClick={() => setIsOpen(false)}
-                  >
-                    {item.label}
-                  </a>
+                  <Link key={item.label} href={item.href}>
+                    <a
+                      className="text-lg font-medium text-white hover:text-primary transition-colors"
+                      onClick={() => setIsOpen(false)}
+                    >
+                      {item.label}
+                    </a>
+                  </Link>
                 ))}
                 <Button className="w-full bg-primary hover:bg-primary/90 text-background font-bold">
-                  Contact Us
+                  Связаться с нами
                 </Button>
               </div>
             </SheetContent>
diff --git a/client/src/components/portfolio-section.tsx b/client/src/components/portfolio-section.tsx
new file mode 100644
index 0000000..2961c0d
--- /dev/null
+++ b/client/src/components/portfolio-section.tsx
@@ -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>
+  );
+}
diff --git a/client/src/components/services.tsx b/client/src/components/services.tsx
index aefb509..75afc23 100644
--- a/client/src/components/services.tsx
+++ b/client/src/components/services.tsx
@@ -4,33 +4,33 @@ import { Code, Box, Cpu, Server, Wrench, Globe } from "lucide-react";
 const services = [
   {
     icon: Box,
-    title: "Custom Mods",
-    description: "Tailor-made modifications for Fabric and Forge. New items, blocks, mechanics, and dimensions."
+    title: "Кастомные моды",
+    description: "Индивидуальные модификации для Fabric и Forge. Новые предметы, блоки, механики и измерения."
   },
   {
     icon: Code,
-    title: "Spigot/Paper Plugins",
-    description: "High-performance server-side plugins. From mini-games to complex economy systems."
+    title: "Плагины Spigot/Paper",
+    description: "Высокопроизводительные серверные плагины. От мини-игр до сложных экономических систем."
   },
   {
     icon: Server,
-    title: "Server Setup",
-    description: "Complete server architecture, optimization, and security configuration for large scale networks."
+    title: "Настройка серверов",
+    description: "Полная архитектура сервера, оптимизация и конфигурация безопасности для крупных сетей."
   },
   {
     icon: Globe,
-    title: "Web Integration",
-    description: "Connect your Minecraft server to the web. Leaderboards, stores, and ban lists."
+    title: "Веб-интеграция",
+    description: "Свяжите ваш Minecraft-сервер с вебом. Таблицы лидеров, магазины и списки банов."
   },
   {
     icon: Cpu,
-    title: "Performance Optimization",
-    description: "Deep analysis and optimization of server performance to eliminate lag."
+    title: "Оптимизация производительности",
+    description: "Глубокий анализ и оптимизация работы сервера для устранения задержек."
   },
   {
     icon: Wrench,
-    title: "Maintenance",
-    description: "Ongoing support and updates for your existing codebase."
+    title: "Поддержка",
+    description: "Постоянная поддержка и обновление вашего существующего кода."
   }
 ];
 
@@ -42,10 +42,10 @@ export function Services() {
       <div className="container mx-auto px-4 relative z-10">
         <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">
-            Our <span className="text-primary">Services</span>
+            Наши <span className="text-primary">Услуги</span>
           </h2>
           <p className="text-muted-foreground">
-            We provide end-to-end development solutions for the Minecraft ecosystem.
+            Мы предоставляем комплексные решения для разработки в экосистеме Minecraft.
           </p>
         </div>
 
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 1a988a6..9a95b3c 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -1,8 +1,9 @@
 import { Navbar } from "@/components/navbar";
 import { Hero } from "@/components/hero";
 import { Services } from "@/components/services";
-import { Portfolio } from "@/components/portfolio";
+import { PortfolioSection } from "@/components/portfolio-section";
 import { Footer } from "@/components/footer";
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
   return (
@@ -11,7 +12,7 @@ export default function Home() {
       <main>
         <Hero />
         <Services />
-        <Portfolio />
+        <PortfolioSection />
         
         {/* Contact CTA Section */}
         <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">
             <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>
             <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>
-            <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 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>
           </div>
         </section>
       </main>
diff --git a/client/src/pages/portfolio.tsx b/client/src/pages/portfolio.tsx
new file mode 100644
index 0000000..c2ce1fd
--- /dev/null
+++ b/client/src/pages/portfolio.tsx
@@ -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>
+  );
+}