Add complete CKE Project implementation with news management system

app/news/[slug]/page.tsx

@@ -0,0 +1,327 @@
+import React from 'react';
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import Image from 'next/image';
+import { NEWS_CATEGORIES } from '@/lib/types';
+
+interface NewsDetailPageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+// Функция для получения новости по slug из API
+async function getNewsFromApi(slug: string) {
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/news?slug=${slug}`, {
+      cache: 'no-store'
+    });
+    
+    if (!response.ok) {
+      return null;
+    }
+    
+    const data = await response.json();
+    if (data.success && data.data.news.length > 0) {
+      return data.data.news[0];
+    }
+    
+    return null;
+  } catch (error) {
+    console.error('Error fetching news:', error);
+    return null;
+  }
+}
+
+// Функция для получения связанных новостей
+async function getRelatedNews(category: string, currentSlug: string) {
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/news?category=${category}&limit=4`, {
+      cache: 'no-store'
+    });
+    
+    if (!response.ok) {
+      return [];
+    }
+    
+    const data = await response.json();
+    if (data.success) {
+      return data.data.news.filter((item: any) => item.slug !== currentSlug);
+    }
+    
+    return [];
+  } catch (error) {
+    console.error('Error fetching related news:', error);
+    return [];
+  }
+}
+
+export default async function NewsDetailPage({ params }: NewsDetailPageProps) {
+  const { slug } = await params;
+  const news = await getNewsFromApi(slug);
+
+  if (!news) {
+    notFound();
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('ru-RU', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  const getCategoryInfo = (categoryId: string) => {
+    return NEWS_CATEGORIES.find(cat => cat.id === categoryId);
+  };
+
+  const categoryInfo = getCategoryInfo(news.category);
+
+  // Получаем связанные новости (из той же категории, исключая текущую)
+  const relatedNews = await getRelatedNews(news.category, news.slug);
+
+  return (
+    <div className="min-h-screen bg-black text-white overflow-x-hidden">
+      {/* Fixed Navigation */}
+      <nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-lg border-b border-white/10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <Link
+              href="/news"
+              className="flex items-center space-x-3 text-white hover:text-blue-400 transition-colors duration-300"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+              <span className="font-medium">Все новости</span>
+            </Link>
+            
+            <div className="flex items-center space-x-4">
+              {categoryInfo && (
+                <span className={`px-3 py-1 rounded-full text-xs font-semibold ${categoryInfo.color}`}>
+                  {categoryInfo.name}
+                </span>
+              )}
+              <div className="text-sm text-gray-400">
+                {formatDate(news.publishedAt)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Full Screen Hero */}
+      <section className="relative h-screen flex items-center justify-center">
+        {/* Background Image */}
+        <div className="absolute inset-0">
+          <Image
+            src={news.imageUrl || '/images/office.jpg'}
+            alt={news.title}
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-black/30"></div>
+        </div>
+
+        {/* Hero Content */}
+        <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="space-y-8">
+            {/* Badges */}
+            <div className="flex items-center justify-center gap-4">
+              {news.featured && (
+                <span className="px-4 py-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-black text-sm font-bold rounded-full">
+                  ВАЖНОЕ
+                </span>
+              )}
+              <span className="px-4 py-2 bg-white/20 backdrop-blur-sm text-white text-sm font-semibold rounded-full border border-white/30">
+                5 МИН ЧТЕНИЯ
+              </span>
+            </div>
+
+            {/* Title */}
+            <h1 className="text-4xl md:text-6xl lg:text-7xl font-black leading-tight tracking-tight">
+              {news.title}
+            </h1>
+
+            {/* Summary */}
+            <p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
+              {news.summary}
+            </p>
+
+            {/* Scroll Indicator */}
+            <div className="pt-16">
+              <div className="flex flex-col items-center space-y-2 text-white/60">
+                <span className="text-sm uppercase tracking-wide">Прокрутите вниз</span>
+                <div className="w-px h-16 bg-gradient-to-b from-white/60 to-transparent"></div>
+                <svg className="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <section className="relative bg-white text-black">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+          {/* Article Content */}
+          <div className="prose prose-xl max-w-none">
+            <div 
+              className="article-content"
+              dangerouslySetInnerHTML={{ __html: news.content }}
+            />
+          </div>
+
+          {/* Share Section */}
+          <div className="mt-20 pt-12 border-t border-gray-200">
+            <div className="text-center">
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">
+                Поделиться статьей
+              </h3>
+              <p className="text-gray-600 mb-8">
+                Расскажите об этой новости в социальных сетях
+              </p>
+              <div className="flex justify-center space-x-4">
+                <button className="group flex items-center space-x-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all duration-300 transform hover:scale-105">
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                  </svg>
+                  <span>Twitter</span>
+                </button>
+                <button className="group flex items-center space-x-2 px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all duration-300 transform hover:scale-105">
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
+                  </svg>
+                  <span>WhatsApp</span>
+                </button>
+                <button className="group flex items-center space-x-2 px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-all duration-300 transform hover:scale-105">
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
+                  </svg>
+                  <span>Поделиться</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Related News - Full Width */}
+      {relatedNews.length > 0 && (
+        <section className="bg-gray-900 text-white py-20">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl md:text-5xl font-bold mb-4">
+                Похожие новости
+              </h2>
+              <p className="text-xl text-gray-400">
+                Другие материалы из категории "{categoryInfo?.name}"
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+              {relatedNews.map((relatedNewsItem: any, index: number) => (
+                <Link
+                  key={relatedNewsItem.id}
+                  href={`/news/${relatedNewsItem.slug}`}
+                  className="group block"
+                >
+                  <article className="bg-gray-800 rounded-2xl overflow-hidden hover:bg-gray-700 transition-all duration-500 transform hover:scale-105">
+                    <div className="relative h-48 overflow-hidden">
+                      <Image
+                        src={relatedNewsItem.imageUrl || '/images/office.jpg'}
+                        alt={relatedNewsItem.title}
+                        fill
+                        className="object-cover group-hover:scale-110 transition-transform duration-700"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                    </div>
+                    
+                    <div className="p-6">
+                      <div className="text-sm text-blue-400 font-semibold mb-2 uppercase tracking-wide">
+                        {formatDate(relatedNewsItem.publishedAt)}
+                      </div>
+                      
+                      <h3 className="text-lg font-bold mb-3 line-clamp-2 group-hover:text-blue-400 transition-colors duration-300">
+                        {relatedNewsItem.title}
+                      </h3>
+                      
+                      <p className="text-gray-400 text-sm line-clamp-3 leading-relaxed">
+                        {relatedNewsItem.summary}
+                      </p>
+                    </div>
+                  </article>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Full Width CTA */}
+      <section className="bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 py-20">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
+            Не пропустите важные новости
+          </h2>
+          <p className="text-xl text-blue-100 mb-10 max-w-2xl mx-auto">
+            Подписывайтесь на обновления и будьте в курсе всех событий и достижений нашей компании
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              href="/news"
+              className="inline-flex items-center px-8 py-4 bg-white text-gray-900 font-bold rounded-xl hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg"
+            >
+              <svg className="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+              </svg>
+              Все новости
+            </Link>
+            <Link
+              href="/"
+              className="inline-flex items-center px-8 py-4 bg-transparent text-white font-bold rounded-xl border-2 border-white hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105"
+            >
+              <svg className="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+              </svg>
+              Главная страница
+            </Link>
+          </div>
+        </div>
+      </section>
+
+
+    </div>
+  );
+}
+
+// Генерация статических параметров для всех новостей
+export async function generateStaticParams() {
+  // Для динамического рендеринга возвращаем пустой массив
+  return [];
+}
+
+// Метаданные для SEO
+export async function generateMetadata({ params }: NewsDetailPageProps) {
+  const { slug } = await params;
+  const news = await getNewsFromApi(slug);
+  
+  if (!news) {
+    return {
+      title: 'Новость не найдена',
+    };
+  }
+
+  return {
+    title: `${news.title} | CKE Project`,
+    description: news.summary,
+    openGraph: {
+      title: news.title,
+      description: news.summary,
+      images: news.imageUrl ? [news.imageUrl] : [],
+    },
+  };
+} 

app/news/page.tsx

@@ -0,0 +1,511 @@
+'use client';
+
+import React, { useState, useMemo, useEffect } from 'react';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import Link from 'next/link';
+import Image from 'next/image';
+import { NEWS_CATEGORIES } from '@/lib/types';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Search, Filter, Calendar, Eye, ArrowRight, TrendingUp, Star, ArrowLeft } from 'lucide-react';
+import Header from '@/app/components/Header';
+import Footer from '@/app/components/Footer';
+
+const ITEMS_PER_PAGE = 6;
+
+type SortOption = 'newest' | 'oldest' | 'alphabetical' | 'featured';
+
+export default function NewsPage() {
+  // Устанавливаем заголовок страницы
+  useEffect(() => {
+    document.title = 'Новости и События - ЦКЭ';
+  }, []);
+
+  const [selectedCity, setSelectedCity] = useState<'Москва' | 'Чебоксары'>('Москва');
+  
+  // Загружаем город из localStorage
+  useEffect(() => {
+    const savedCity = localStorage.getItem('selectedCity');
+    if (savedCity) {
+      setSelectedCity(savedCity as 'Москва' | 'Чебоксары');
+    }
+  }, []);
+
+  const handleCityChange = (city: 'Москва' | 'Чебоксары') => {
+    setSelectedCity(city);
+    localStorage.setItem('selectedCity', city);
+  };
+
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  
+  const [selectedCategory, setSelectedCategory] = useState<string>(searchParams.get('category') || 'all');
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('search') || '');
+  const [sortBy, setSortBy] = useState<SortOption>((searchParams.get('sort') as SortOption) || 'newest');
+  const [currentPage, setCurrentPage] = useState(parseInt(searchParams.get('page') || '1'));
+
+  // Обновление URL при изменении параметров
+  useEffect(() => {
+    const params = new URLSearchParams();
+    
+    if (selectedCategory !== 'all') params.set('category', selectedCategory);
+    if (searchQuery.trim()) params.set('search', searchQuery);
+    if (sortBy !== 'newest') params.set('sort', sortBy);
+    if (currentPage !== 1) params.set('page', currentPage.toString());
+    
+    const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname;
+    router.replace(newUrl, { scroll: false });
+  }, [selectedCategory, searchQuery, sortBy, currentPage, pathname, router]);
+
+  const [news, setNews] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [totalNews, setTotalNews] = useState(0);
+
+  // Загрузка новостей с API
+  useEffect(() => {
+    const loadNews = async () => {
+      try {
+        setLoading(true);
+        
+        const params = new URLSearchParams();
+        params.append('page', currentPage.toString());
+        params.append('limit', ITEMS_PER_PAGE.toString());
+        params.append('published', 'true');
+        
+        if (selectedCategory !== 'all') {
+          params.append('category', selectedCategory);
+        }
+        
+        if (searchQuery.trim()) {
+          params.append('search', searchQuery);
+        }
+        
+        // Преобразуем сортировку в формат API
+        let sortBy_api = 'publishedAt';
+        let sortOrder = 'desc';
+        
+        switch (sortBy) {
+          case 'newest':
+            sortBy_api = 'publishedAt';
+            sortOrder = 'desc';
+            break;
+          case 'oldest':
+            sortBy_api = 'publishedAt';
+            sortOrder = 'asc';
+            break;
+          case 'alphabetical':
+            sortBy_api = 'title';
+            sortOrder = 'asc';
+            break;
+          case 'featured':
+            sortBy_api = 'featured';
+            sortOrder = 'desc';
+            break;
+        }
+        
+        params.append('sortBy', sortBy_api);
+        params.append('sortOrder', sortOrder);
+        
+        const response = await fetch(`/api/news?${params}`);
+        const data = await response.json();
+        
+        if (data.success) {
+          setNews(data.data.news);
+          setTotalNews(data.data.pagination.total);
+        } else {
+          console.error('Error loading news:', data.error);
+        }
+      } catch (error) {
+        console.error('Error loading news:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    loadNews();
+  }, [selectedCategory, searchQuery, sortBy, currentPage]);
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('ru-RU', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  const getCategoryInfo = (categoryId: string) => {
+    return NEWS_CATEGORIES.find(cat => cat.id === categoryId);
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+    setCurrentPage(1);
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    setCurrentPage(1);
+  };
+
+  const handleSortChange = (sort: SortOption) => {
+    setSortBy(sort);
+    setCurrentPage(1);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Получаем главную новость (первую в отсортированном списке)
+  const featuredNews = news.find(item => item.featured) || news[0];
+  const otherNews = news.filter(item => item.id !== featuredNews?.id);
+
+  const getSortOptionName = (option: SortOption) => {
+    switch (option) {
+      case 'newest': return 'Сначала новые';
+      case 'oldest': return 'Сначала старые';
+      case 'alphabetical': return 'По алфавиту';
+      case 'featured': return 'Важные первыми';
+      default: return 'Сначала новые';
+    }
+  };
+
+  const totalPages = Math.ceil(totalNews / ITEMS_PER_PAGE);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-white flex flex-col">
+        <Header selectedCity={selectedCity} onCityChange={handleCityChange} />
+        <main className="flex-1 flex items-center justify-center pt-20">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4"></div>
+            <p className="text-gray-600 text-lg">Загрузка новостей...</p>
+          </div>
+        </main>
+        <Footer selectedCity={selectedCity} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col">
+      <Header selectedCity={selectedCity} onCityChange={handleCityChange} />
+      
+      <main className="flex-1 pt-20">
+        {/* Хлебные крошки */}
+        <div className="bg-gray-50 py-4">
+          <div className="container mx-auto px-4">
+            <div className="flex items-center space-x-2 text-sm text-gray-600">
+              <Link href="/" className="hover:text-blue-600 transition-colors">
+                Главная
+              </Link>
+              <span>/</span>
+              <span className="text-gray-900">Новости</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Заголовок страницы */}
+        <section className="py-16 bg-white">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+                Новости и События
+              </h1>
+              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+                Следите за последними событиями, достижениями и обновлениями нашей компании
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Панель фильтров */}
+        <section className="py-8 bg-gray-50">
+          <div className="container mx-auto px-4">
+            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+              <div className="space-y-6">
+                {/* Поиск */}
+                <div className="relative">
+                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                  <input
+                    type="text"
+                    placeholder="Поиск по заголовку, описанию или содержимому..."
+                    value={searchQuery}
+                    onChange={(e) => handleSearchChange(e.target.value)}
+                    className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 placeholder-gray-500 transition-all duration-200"
+                  />
+                </div>
+
+                {/* Фильтры */}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                  {/* Категории */}
+                  <div>
+                    <label className="block text-gray-700 font-semibold mb-3 text-sm">
+                      Категория
+                    </label>
+                    <div className="flex flex-wrap gap-2">
+                      <button
+                        onClick={() => handleCategoryChange('all')}
+                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                          selectedCategory === 'all'
+                            ? 'bg-blue-600 text-white shadow-md'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                      >
+                        Все
+                      </button>
+                      {NEWS_CATEGORIES.map((category) => (
+                        <button
+                          key={category.id}
+                          onClick={() => handleCategoryChange(category.id)}
+                          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                            selectedCategory === category.id
+                              ? 'bg-blue-600 text-white shadow-md'
+                              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                          }`}
+                        >
+                          {category.name}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Сортировка */}
+                  <div>
+                    <label className="block text-gray-700 font-semibold mb-3 text-sm">
+                      Сортировка
+                    </label>
+                    <select
+                      value={sortBy}
+                      onChange={(e) => handleSortChange(e.target.value as SortOption)}
+                      className="w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
+                    >
+                      <option value="newest">Сначала новые</option>
+                      <option value="oldest">Сначала старые</option>
+                      <option value="alphabetical">По алфавиту</option>
+                      <option value="featured">Важные первыми</option>
+                    </select>
+                  </div>
+
+                  {/* Статистика */}
+                  <div className="flex items-center justify-center lg:justify-end">
+                    <div className="bg-gray-100 rounded-xl px-6 py-4 border border-gray-200">
+                      <div className="text-center">
+                        <div className="text-2xl font-bold text-gray-900">{totalNews}</div>
+                        <div className="text-gray-600 text-sm">найдено</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Главная новость */}
+        {currentPage === 1 && featuredNews && (
+          <section className="py-16 bg-white">
+            <div className="container mx-auto px-4">
+              <div className="text-center mb-12">
+                <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                  Главная новость
+                </h2>
+                <div className="w-24 h-1 bg-blue-600 mx-auto rounded-full"></div>
+              </div>
+              
+              <article className="bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-100 hover:shadow-3xl transition-shadow duration-500">
+                <div className="lg:flex">
+                  <div className="lg:w-1/2 relative h-64 lg:h-80">
+                    <Image
+                      src={featuredNews.imageUrl || '/images/office.jpg'}
+                      alt={featuredNews.title}
+                      fill
+                      className="object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
+                    <div className="absolute top-6 right-6 px-4 py-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-sm font-semibold rounded-full shadow-lg">
+                      Важное
+                    </div>
+                  </div>
+                  
+                  <div className="lg:w-1/2 p-8 lg:p-12">
+                    <div className="text-sm text-blue-600 font-semibold mb-4 uppercase tracking-wide">
+                      {formatDate(featuredNews.publishedAt)}
+                    </div>
+                    
+                    <h3 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6 leading-tight">
+                      {featuredNews.title}
+                    </h3>
+                    
+                    <p className="text-lg text-gray-600 mb-8 leading-relaxed">
+                      {featuredNews.summary}
+                    </p>
+                    
+                    <Link
+                      href={`/news/${featuredNews.slug}`}
+                      className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
+                    >
+                      Читать полностью
+                      <ArrowRight className="w-5 h-5 ml-3" />
+                    </Link>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </section>
+        )}
+
+        {/* Сетка новостей */}
+        <section className="py-16 bg-gray-50">
+          <div className="container mx-auto px-4">
+            {news.length > 0 ? (
+              <>
+                <div className="text-center mb-12">
+                  <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                    {currentPage === 1 && featuredNews ? 'Другие новости' : 'Все новости'}
+                  </h2>
+                  <div className="w-24 h-1 bg-blue-600 mx-auto rounded-full"></div>
+                </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mb-16">
+                  {(currentPage === 1 && featuredNews ? otherNews : news).map((newsItem, index) => {
+                    const categoryInfo = getCategoryInfo(newsItem.category);
+                    
+                    return (
+                      <article
+                        key={newsItem.id}
+                        className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100"
+                      >
+                        <div className="relative h-56 overflow-hidden">
+                          <Image
+                            src={newsItem.imageUrl || '/images/office.jpg'}
+                            alt={newsItem.title}
+                            fill
+                            className="object-cover group-hover:scale-110 transition-transform duration-700"
+                          />
+                          <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
+                          
+                          {/* Категория */}
+                          {categoryInfo && (
+                            <div className="absolute top-4 left-4">
+                              <span className={`px-3 py-1 rounded-full text-xs font-semibold text-white ${categoryInfo.color} shadow-lg`}>
+                                {categoryInfo.name}
+                              </span>
+                            </div>
+                          )}
+                          
+                          {/* Дата */}
+                          <div className="absolute bottom-4 right-4">
+                            <span className="px-3 py-1 bg-black/50 text-white text-xs rounded-full">
+                              {formatDate(newsItem.publishedAt)}
+                            </span>
+                          </div>
+                        </div>
+                        
+                        <div className="p-6">
+                          <h3 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-blue-600 transition-colors duration-300">
+                            {newsItem.title}
+                          </h3>
+                          
+                          <p className="text-gray-600 mb-6 line-clamp-3 leading-relaxed">
+                            {newsItem.summary}
+                          </p>
+                          
+                          <Link
+                            href={`/news/${newsItem.slug}`}
+                            className="inline-flex items-center text-blue-600 hover:text-blue-800 font-semibold transition-colors duration-300"
+                          >
+                            Читать далее
+                            <ArrowRight className="w-4 h-4 ml-2" />
+                          </Link>
+                        </div>
+                      </article>
+                    );
+                  })}
+                </div>
+              </>
+            ) : (
+              <div className="text-center py-20">
+                <div className="bg-white rounded-3xl shadow-xl p-12 max-w-md mx-auto border border-gray-100">
+                  <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <Search className="w-10 h-10 text-gray-400" />
+                  </div>
+                  <h3 className="text-2xl font-bold text-gray-900 mb-4">
+                    Новостей не найдено
+                  </h3>
+                  <p className="text-gray-600 text-lg mb-8">
+                    Попробуйте изменить фильтры или поисковый запрос
+                  </p>
+                  <button
+                    onClick={() => {
+                      setSelectedCategory('all');
+                      setSearchQuery('');
+                      setSortBy('newest');
+                      setCurrentPage(1);
+                    }}
+                    className="px-8 py-4 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-colors duration-300"
+                  >
+                    Сбросить фильтры
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Пагинация */}
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center space-x-2 mt-16">
+                <button
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage === 1}
+                  className="px-6 py-3 bg-white text-gray-700 rounded-xl border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+                >
+                  Назад
+                </button>
+                
+                <div className="flex space-x-2">
+                  {[...Array(totalPages)].map((_, index) => {
+                    const pageNum = index + 1;
+                    return (
+                      <button
+                        key={pageNum}
+                        onClick={() => handlePageChange(pageNum)}
+                        className={`w-12 h-12 rounded-xl font-semibold transition-all duration-200 ${
+                          currentPage === pageNum
+                            ? 'bg-blue-600 text-white shadow-lg'
+                            : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50'
+                        }`}
+                      >
+                        {pageNum}
+                      </button>
+                    );
+                  })}
+                </div>
+                
+                <button
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={currentPage === totalPages}
+                  className="px-6 py-3 bg-white text-gray-700 rounded-xl border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+                >
+                  Вперед
+                </button>
+              </div>
+            )}
+
+            {/* Информация о странице */}
+            <div className="text-center mt-12">
+              <div className="inline-flex items-center px-6 py-3 bg-white rounded-full shadow-lg border border-gray-100">
+                <Eye className="w-5 h-5 text-blue-600 mr-2" />
+                <span className="text-gray-700 font-medium">
+                  Страница {currentPage} из {totalPages} • Всего новостей: {totalNews}
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <Footer selectedCity={selectedCity} />
+    </div>
+  );
+}