Compare commits
2 Commits
ai/issue-8
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| b6337b33ba | |||
|
3ddd5ded1e |
@@ -1,54 +0,0 @@
|
|||||||
'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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
'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
|
|
||||||
}
|
|
||||||
@@ -1,185 +0,0 @@
|
|||||||
'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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: #ffffff;
|
--background: #0a0a0a;
|
||||||
--foreground: #171717;
|
--foreground: #ededed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
@@ -12,15 +12,17 @@
|
|||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--background: #0a0a0a;
|
|
||||||
--foreground: #ededed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { AuthProvider } from "./contexts/AuthContext";
|
|
||||||
import Navigation from "./components/Navigation";
|
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
@@ -15,8 +13,8 @@ const geistMono = Geist_Mono({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "AI News Hub - Превращаем новости в рабочие мануалы",
|
||||||
description: "Generated by create next app",
|
description: "Подписка на AI-новости и аналитику для разработчиков. Конвертируем любую новость в протестированный мануал для вас и вашего код-ассистента.",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
@@ -29,10 +27,7 @@ export default function RootLayout({
|
|||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
>
|
>
|
||||||
<AuthProvider>
|
|
||||||
<Navigation />
|
|
||||||
{children}
|
{children}
|
||||||
</AuthProvider>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,69 +0,0 @@
|
|||||||
'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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
120
app/page.tsx
120
app/page.tsx
@@ -1,40 +1,98 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { useAuth } from './contexts/AuthContext'
|
|
||||||
import { useRouter } from 'next/navigation'
|
|
||||||
import { useEffect } from 'react'
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const { isAuthenticated } = useAuth()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isAuthenticated) {
|
|
||||||
router.push('/dashboard')
|
|
||||||
}
|
|
||||||
}, [isAuthenticated, router])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
||||||
<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">
|
<nav className="border-b border-white/10 backdrop-blur-sm">
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
<div className="flex justify-between items-center py-4">
|
||||||
Agent Management System
|
<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>{' '}
|
||||||
|
в рабочие мануалы
|
||||||
</h1>
|
</h1>
|
||||||
<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.
|
<p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||||
Please login to access the agent management features.
|
Получайте AI-новости и аналитику, которые сразу можно протестировать.
|
||||||
|
Не просто читайте — погружайтесь в код вместе с вашим AI-ассистентом!
|
||||||
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
|
||||||
<a
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
|
||||||
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]"
|
<div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||||
href="/login"
|
🤖
|
||||||
>
|
</div>
|
||||||
Login to Dashboard
|
<h3 className="text-xl font-semibold text-white mb-3">Тестирование AI-ассистентом</h3>
|
||||||
</a>
|
<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>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user