fix: resolve #8 - сделай новую страницу

app/components/Navigation.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useAuth } from '../contexts/AuthContext'
+
+export default function Navigation() {
+  const { isAuthenticated, logout } = useAuth()
+  const pathname = usePathname()
+
+  if (pathname === '/login' || pathname === '/dashboard') {
+    return null
+  }
+
+  return (
+    <nav className="bg-white shadow-sm dark:bg-black">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center">
+            <Link href="/" className="text-xl font-bold text-black dark:text-zinc-50">
+              Agent Manager
+            </Link>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            {isAuthenticated ? (
+              <div className="flex items-center space-x-4">
+                <Link
+                  href="/dashboard"
+                  className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+                >
+                  Dashboard
+                </Link>
+                <button
+                  onClick={logout}
+                  className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
+                >
+                  Logout
+                </button>
+              </div>
+            ) : (
+              <Link
+                href="/login"
+                className="rounded-md bg-green-500 px-4 py-2 text-white transition-colors hover:bg-green-600"
+              >
+                Login
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}

app/contexts/AuthContext.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+
+interface User {
+  username: string
+}
+
+interface AuthContextType {
+  user: User | null
+  login: (username: string, password: string) => boolean
+  logout: () => void
+  isAuthenticated: boolean
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(() => {
+    if (typeof window !== 'undefined') {
+      const savedUser = localStorage.getItem('user')
+      return savedUser ? JSON.parse(savedUser) : null
+    }
+    return null
+  })
+
+  const login = (username: string, password: string): boolean => {
+    if (username === 'admin' && password === 'Mallory122907Fucku2u2') {
+      const userData = { username }
+      setUser(userData)
+      localStorage.setItem('user', JSON.stringify(userData))
+      return true
+    }
+    return false
+  }
+
+  const logout = () => {
+    setUser(null)
+    localStorage.removeItem('user')
+  }
+
+  const isAuthenticated = !!user
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, isAuthenticated }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}

app/dashboard/page.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { useState } from 'react'
+import { useAuth } from './contexts/AuthContext'
+
+interface Agent {
+  id: string
+  name: string
+  status: 'active' | 'inactive' | 'error'
+  lastRun: string
+  dataCollected: number
+}
+
+export default function DashboardPage() {
+  const { user, logout } = useAuth()
+  const [agents, setAgents] = useState<Agent[]>([
+    {
+      id: '1',
+      name: 'News Collector',
+      status: 'active',
+      lastRun: '2024-01-03 10:30:00',
+      dataCollected: 1250
+    },
+    {
+      id: '2',
+      name: 'Social Media Monitor',
+      status: 'inactive',
+      lastRun: '2024-01-02 15:45:00',
+      dataCollected: 890
+    },
+    {
+      id: '3',
+      name: 'Market Data Scraper',
+      status: 'error',
+      lastRun: '2024-01-01 09:00:00',
+      dataCollected: 567
+    }
+  ])
+
+  const toggleAgentStatus = (id: string) => {
+    setAgents(prev => prev.map(agent => {
+      if (agent.id === id) {
+        const newStatus = agent.status === 'active' ? 'inactive' : 'active'
+        return { ...agent, status: newStatus }
+      }
+      return agent
+    }))
+  }
+
+  const getStatusColor = (status: Agent['status']) => {
+    switch (status) {
+      case 'active': return 'text-green-500'
+      case 'inactive': return 'text-gray-500'
+      case 'error': return 'text-red-500'
+    }
+  }
+
+  const getStatusBg = (status: Agent['status']) => {
+    switch (status) {
+      case 'active': return 'bg-green-100 dark:bg-green-900'
+      case 'inactive': return 'bg-gray-100 dark:bg-gray-900'
+      case 'error': return 'bg-red-100 dark:bg-red-900'
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-50 font-sans dark:bg-black">
+      <header className="bg-white shadow-sm dark:bg-black">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-4">
+            <h1 className="text-2xl font-bold text-black dark:text-zinc-50">
+              Agent Dashboard
+            </h1>
+            <div className="flex items-center space-x-4">
+              <span className="text-black dark:text-zinc-50">
+                Welcome, {user?.username}
+              </span>
+              <button
+                onClick={logout}
+                className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold text-black dark:text-zinc-50 mb-4">
+            Information Collection Agents
+          </h2>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {agents.map((agent) => (
+              <div
+                key={agent.id}
+                className="rounded-lg bg-white p-6 shadow-md dark:bg-black"
+              >
+                <div className="flex justify-between items-start mb-4">
+                  <h3 className="text-lg font-medium text-black dark:text-zinc-50">
+                    {agent.name}
+                  </h3>
+                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusBg(agent.status)} ${getStatusColor(agent.status)}`}>
+                    {agent.status}
+                  </span>
+                </div>
+                
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">Last Run:</span>
+                    <span className="text-black dark:text-zinc-50">{agent.lastRun}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">Data Collected:</span>
+                    <span className="text-black dark:text-zinc-50">{agent.dataCollected}</span>
+                  </div>
+                </div>
+
+                <div className="mt-4 flex space-x-2">
+                  <button
+                    onClick={() => toggleAgentStatus(agent.id)}
+                    className={`flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                      agent.status === 'active'
+                        ? 'bg-red-500 text-white hover:bg-red-600'
+                        : 'bg-green-500 text-white hover:bg-green-600'
+                    }`}
+                  >
+                    {agent.status === 'active' ? 'Stop' : 'Start'}
+                  </button>
+                  <button className="flex-1 rounded-md bg-blue-500 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600">
+                    Configure
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <div className="rounded-lg bg-white p-6 shadow-md dark:bg-black">
+            <h3 className="text-lg font-medium text-black dark:text-zinc-50 mb-4">
+              Quick Actions
+            </h3>
+            <div className="space-y-3">
+              <button className="w-full rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600">
+                Add New Agent
+              </button>
+              <button className="w-full rounded-md bg-green-500 px-4 py-2 text-white transition-colors hover:bg-green-600">
+                Run All Agents
+              </button>
+              <button className="w-full rounded-md bg-gray-500 px-4 py-2 text-white transition-colors hover:bg-gray-600">
+                Export Data
+              </button>
+            </div>
+          </div>
+
+          <div className="rounded-lg bg-white p-6 shadow-md dark:bg-black">
+            <h3 className="text-lg font-medium text-black dark:text-zinc-50 mb-4">
+              System Overview
+            </h3>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Total Agents:</span>
+                <span className="text-black dark:text-zinc-50">{agents.length}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Active Agents:</span>
+                <span className="text-green-500">
+                  {agents.filter(a => a.status === 'active').length}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Total Data Points:</span>
+                <span className="text-black dark:text-zinc-50">
+                  {agents.reduce((sum, a) => sum + a.dataCollected, 0)}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

app/globals.css

@@ -1,8 +1,8 @@
 @import "tailwindcss";
 
 :root {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
 @theme inline {
@@ -12,17 +12,15 @@
   --font-mono: var(--font-geist-mono);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-}
-
-.animate-float {
-  animation: float 3s ease-in-out infinite;
+  font-family: Arial, Helvetica, sans-serif;
 }

app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { AuthProvider } from "./contexts/AuthContext";
+import Navigation from "./components/Navigation";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +15,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "AI News Hub - Превращаем новости в рабочие мануалы",
-  description: "Подписка на AI-новости и аналитику для разработчиков. Конвертируем любую новость в протестированный мануал для вас и вашего код-ассистента.",
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
 export default function RootLayout({
@@ -27,7 +29,10 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <AuthProvider>
+          <Navigation />
+          {children}
+        </AuthProvider>
       </body>
     </html>
   );

app/login/page.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useAuth } from './contexts/AuthContext'
+
+export default function LoginPage() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const { login } = useAuth()
+  const router = useRouter()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    if (login(username, password)) {
+      router.push('/dashboard')
+    } else {
+      setError('Invalid credentials')
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-lg dark:bg-black">
+        <h2 className="mb-6 text-center text-2xl font-bold text-black dark:text-zinc-50">
+          Login
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="mb-2 block text-sm font-medium text-black dark:text-zinc-50">
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-black focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-zinc-50"
+              required
+            />
+          </div>
+          <div>
+            <label className="mb-2 block text-sm font-medium text-black dark:text-zinc-50">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-black focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-zinc-50"
+              required
+            />
+          </div>
+          {error && (
+            <p className="text-center text-sm text-red-500">{error}</p>
+          )}
+          <button
+            type="submit"
+            className="w-full rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+          >
+            Login
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

app/page.tsx

@@ -1,98 +1,40 @@
+'use client'
+
+import { useAuth } from './contexts/AuthContext'
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+
 export default function Home() {
+  const { isAuthenticated } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/dashboard')
+    }
+  }, [isAuthenticated, router])
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
-      <nav className="border-b border-white/10 backdrop-blur-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center py-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg"></div>
-              <span className="text-white font-bold text-xl">AI News Hub</span>
-            </div>
-            <button className="bg-white text-slate-900 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition-colors">
-              Получить доступ
-            </button>
-          </div>
-        </div>
-      </nav>
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-        <div className="text-center mb-20">
-          <div className="inline-flex items-center px-4 py-2 bg-purple-500/20 rounded-full text-purple-300 text-sm font-medium mb-6">
-            🚀 Для разработчиков, которые хотят быть на шаг впереди
-          </div>
-          
-          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
-            Превращаем{' '}
-            <span className="bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
-              новости
-            </span>{' '}
-            в рабочие мануалы
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            Agent Management System
           </h1>
-          
-          <p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
-            Получайте AI-новости и аналитику, которые сразу можно протестировать. 
-            Не просто читайте — погружайтесь в код вместе с вашим AI-ассистентом!
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Manage your information collection agents with our powerful dashboard.
+            Please login to access the agent management features.
           </p>
-          
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <button className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:shadow-2xl hover:shadow-purple-500/25 transition-all">
-              🎯 Начать бесплатно
-            </button>
-            <button className="border border-white/20 text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-white/10 transition-colors">
-              📖 Узнать больше
-            </button>
-          </div>
         </div>
-
-        <div className="grid md:grid-cols-3 gap-8 mb-20">
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
-            <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
-              🔄
-            </div>
-            <h3 className="text-xl font-semibold text-white mb-3">Конвертация в реальном времени</h3>
-            <p className="text-gray-400">
-              Любая новость мгновенно превращается в рабочий мануал с готовым кодом
-            </p>
-          </div>
-          
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
-            <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
-              🤖
-            </div>
-            <h3 className="text-xl font-semibold text-white mb-3">Тестирование AI-ассистентом</h3>
-            <p className="text-gray-400">
-              Ваш код-помощник может сразу протестировать и применить полученные знания
-            </p>
-          </div>
-          
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
-            <div className="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4">
-              ⚡
-            </div>
-            <h3 className="text-xl font-semibold text-white mb-3">Утренний ритм</h3>
-            <p className="text-gray-400">
-              Зашли с утра — не просто почитали, а сразу пощупали новый код!
-            </p>
-          </div>
-        </div>
-
-        <div className="text-center bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-3xl p-12 border border-white/10">
-          <h2 className="text-3xl font-bold text-white mb-4">
-            Готовы изменить подход к новостям?
-          </h2>
-          <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
-            Присоединяйтесь к разработчикам, которые не просто следят за AI-трендами, 
-            а сразу их внедряют
-          </p>
-          <div className="flex items-center justify-center space-x-4">
-            <div className="text-3xl font-bold text-white">₽999</div>
-            <div className="text-gray-400">/месяц</div>
-          </div>
-          <button className="mt-6 bg-white text-slate-900 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
-            Получить 7 дней бесплатно
-          </button>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-blue-500 px-5 text-white transition-colors hover:bg-blue-600 md:w-[158px]"
+            href="/login"
+          >
+            Login to Dashboard
+          </a>
         </div>
       </main>
     </div>
-  );
+  )
 }