Spaces:

LevinAleksey
/

AI_site_c

Running

App Files Files Community

Levin-Aleksey commited on Jan 27

Commit

be0c20e

1 Parent(s): c52bdb0

fix

Browse files

Files changed (21) hide show

index.html +77 -0
metadata.json +7 -0
package.json +15 -32
src/App.css +0 -38
src/App.js +0 -25
src/App.test.js +0 -8
src/App.tsx +62 -0
src/components/AIMentor.tsx +141 -0
src/components/Courses.tsx +84 -0
src/components/Features.tsx +76 -0
src/components/Footer.tsx +63 -0
src/components/Header.tsx +39 -0
src/components/Hero.tsx +83 -0
src/index.css +0 -13
src/{index.js → index.tsx} +6 -8
src/logo.svg +0 -1
src/reportWebVitals.js +0 -13
src/setupTests.js +0 -5
src/types.ts +21 -0
tsconfig.json +29 -0
vite.config.ts +23 -0

index.html ADDED Viewed

	@@ -0,0 +1,77 @@

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Academy | AI School</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        primary: '#2563eb',
+                        surface: '#f8fafc',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            scroll-behavior: smooth;
+            -webkit-font-smoothing: antialiased;
+        }
+        .tech-border {
+            border: 1px solid rgba(0, 0, 0, 0.08);
+        }
+        .glass-panel {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.6);
+            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
+        }
+        .grid-bg {
+            background-size: 40px 40px;
+            background-image:
+                linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+    </style>
+<script type="importmap">
+{
+  "imports": {
+    "@google/genai": "https://esm.sh/@google/genai@^1.38.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
+    "react": "https://esm.sh/react@^19.2.4",
+    "react/": "https://esm.sh/react@^19.2.4/"
+  }
+}
+</script>
+</head>
+<body class="bg-white text-slate-900 selection:bg-blue-100 selection:text-blue-900">
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>

metadata.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "name": "Neural Academy - AI Excellence",
+  "description": "A modern, high-tech landing page for an online artificial intelligence school featuring an interactive AI mentor powered by Gemini.",
+  "requestFramePermissions": [
+    "microphone"
+  ]
+}

package.json CHANGED Viewed

@@ -1,39 +1,22 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

 {
+  "name": "neural-academy---ai-excellence",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
+  "dependencies": {
+    "@google/genai": "^1.38.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
   }
 }

src/App.css DELETED Viewed

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-.App-link {
-  color: #61dafb;
-}
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js DELETED Viewed

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-export default App;

src/App.test.js DELETED Viewed

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx ADDED Viewed

	@@ -0,0 +1,62 @@

+import React, { useState, useEffect } from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+import Features from './components/Features';
+import Courses from './components/Courses';
+import AIMentor from './components/AIMentor';
+import Footer from './components/Footer';
+const App: React.FC = () => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+  return (
+    <div className="min-h-screen bg-white relative overflow-x-hidden">
+      <div className="fixed inset-0 grid-bg pointer-events-none z-0"></div>
+      {/* Subtle ambient gradients */}
+      <div className="fixed top-0 right-0 w-[50vw] h-[50vh] bg-blue-100/40 rounded-full blur-[120px] -z-10 translate-x-1/4 -translate-y-1/4"></div>
+      <div className="fixed bottom-0 left-0 w-[50vw] h-[50vh] bg-purple-100/40 rounded-full blur-[120px] -z-10 -translate-x-1/4 translate-y-1/4"></div>
+      <Header isScrolled={isScrolled} />
+      <main className="relative z-10">
+        <Hero />
+        <section id="features" className="py-24 px-6 border-y border-slate-100 bg-slate-50/50">
+          <Features />
+        </section>
+        <section id="courses" className="py-24 px-6">
+          <Courses />
+        </section>
+        <section id="mentor" className="py-24 px-6 max-w-6xl mx-auto">
+          <div className="text-center mb-16 space-y-4">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 text-blue-600 text-xs font-mono font-medium tracking-wide">
+              <span>●</span> LIVE DEMO
+            </div>
+            <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight">
+              AI Наставник <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">v3.0</span>
+            </h2>
+            <p className="text-lg text-slate-500 max-w-2xl mx-auto">
+              Протестируйте нашу модель обучения прямо сейчас. Задайте вопрос о карьере, технологиях или программе.
+            </p>
+          </div>
+          <AIMentor />
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+export default App;

src/components/AIMentor.tsx ADDED Viewed

	@@ -0,0 +1,141 @@

+import React, { useState, useRef, useEffect } from 'react';
+import { GoogleGenAI } from "@google/genai";
+import { ChatMessage } from '../types';
+const AIMentor: React.FC = () => {
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    { role: 'model', text: 'System initialized. Model Gemini-3.0-Flash ready.\nПривет! Я готов ответить на вопросы о курсах, технологиях и карьере в AI.' }
+  ]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isLoading]);
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return;
+    const userMessage = input.trim();
+    setInput('');
+    setMessages(prev => [...prev, { role: 'user', text: userMessage }]);
+    setIsLoading(true);
+    try {
+      // Using Gemini API as backend.
+      // Note for Hugging Face deployment: This code runs client-side.
+      // Just ensure process.env.API_KEY is available in your build environment or secrets.
+      const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+      const history = messages
+        .filter((m, i) => !(i === 0 && m.role === 'model'))
+        .map(m => ({
+          role: m.role,
+          parts: [{ text: m.text }]
+        }));
+      const response = await ai.models.generateContent({
+        model: 'gemini-3-flash-preview',
+        contents: [...history, { role: 'user', parts: [{ text: userMessage }] }],
+        config: {
+          systemInstruction: "Ты — высокотехнологичный AI-ассистент школы Neural Academy. Отвечай кратко, по делу, используй технические термины где уместно, но оставайся понятным. Твой стиль общения — профессиональный, дружелюбный, экспертный.",
+          temperature: 0.7,
+        },
+      });
+      const responseText = response.text || "Error: No response generated.";
+      setMessages(prev => [...prev, { role: 'model', text: responseText }]);
+    } catch (error) {
+      console.error("API Error:", error);
+      setMessages(prev => [...prev, { role: 'model', text: "Connection Error: Unable to reach neural core. Please try again." }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <div className="w-full bg-slate-900 rounded-xl overflow-hidden shadow-2xl border border-slate-700 font-mono text-sm">
+      {/* Terminal Header */}
+      <div className="bg-slate-800 p-3 flex items-center justify-between border-b border-slate-700">
+        <div className="flex items-center gap-2">
+          <div className="flex gap-1.5">
+            <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
+            <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
+            <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
+          </div>
+          <div className="ml-3 text-slate-400 text-xs flex items-center gap-2">
+            <span className="text-blue-400">~/neural-academy/mentor</span>
+            <span className="w-px h-3 bg-slate-600"></span>
+            <span className="text-slate-500">bash</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+           <div className="flex items-center gap-1.5 px-2 py-0.5 rounded bg-slate-700/50 border border-slate-600/50">
+             <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
+             <span className="text-[10px] text-green-400 font-semibold tracking-wider">CONNECTED</span>
+           </div>
+        </div>
+      </div>
+      {/* Terminal Body */}
+      <div
+        ref={scrollRef}
+        className="h-[450px] overflow-y-auto p-6 space-y-4 bg-slate-900/95 scroll-smooth"
+      >
+        {messages.map((msg, i) => (
+          <div key={i} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+            <div className={`flex items-center gap-2 mb-1 text-[10px] uppercase tracking-wider ${msg.role === 'user' ? 'text-blue-400 flex-row-reverse' : 'text-purple-400'}`}>
+              <span>{msg.role === 'user' ? 'User@Host' : 'AI@Core'}</span>
+              <span className="text-slate-600">[{new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}]</span>
+            </div>
+            <div className={`max-w-[85%] p-3 rounded-lg border ${
+              msg.role === 'user'
+                ? 'bg-blue-900/20 border-blue-500/30 text-blue-100'
+                : 'bg-slate-800/50 border-slate-700 text-slate-300'
+            }`}>
+              <p className="whitespace-pre-wrap leading-relaxed">{msg.text}</p>
+            </div>
+          </div>
+        ))}
+        {isLoading && (
+          <div className="flex items-start">
+            <div className="text-purple-400 text-[10px] uppercase tracking-wider mb-1 mr-2">AI@Core</div>
+            <div className="flex items-center gap-1 h-8">
+              <span className="w-1.5 h-4 bg-purple-500 animate-pulse"></span>
+              <span className="text-purple-500/50">processing...</span>
+            </div>
+          </div>
+        )}
+      </div>
+      {/* Input Area */}
+      <div className="p-3 bg-slate-800 border-t border-slate-700">
+        <div className="flex items-center gap-3">
+          <span className="text-green-500 font-bold">{'>'}</span>
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+            placeholder="Enter command or message..."
+            className="flex-grow bg-transparent border-none outline-none text-slate-200 placeholder:text-slate-600 font-mono"
+            autoFocus
+          />
+          <button
+            onClick={handleSend}
+            disabled={isLoading}
+            className="px-4 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-300 text-xs rounded border border-slate-600 transition-colors"
+          >
+            EXECUTE
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AIMentor;

src/components/Courses.tsx ADDED Viewed

	@@ -0,0 +1,84 @@

+import React from 'react';
+const courses = [
+  {
+    title: 'Prompt Engineering',
+    tag: 'Popular',
+    desc: 'Научитесь управлять языковыми моделями как профи. Магия правильных запросов.',
+    price: '9 900 ₽',
+    duration: '4 недели',
+    image: 'https://picsum.photos/seed/prompt/600/400'
+  },
+  {
+    title: 'LLM & Generative AI',
+    tag: 'Pro',
+    desc: 'Создание собственных чат-ботов на базе GPT-4 и Llama-3. Архитектура и дообучение.',
+    price: '24 900 ₽',
+    duration: '12 недель',
+    image: 'https://picsum.photos/seed/llm/600/400'
+  },
+  {
+    title: 'Computer Vision',
+    tag: 'Hardcore',
+    desc: 'Распознавание объектов, трекинг и сегментация. От теории до деплоя на Edge устройства.',
+    price: '21 500 ₽',
+    duration: '10 недель',
+    image: 'https://picsum.photos/seed/cv/600/400'
+  }
+];
+const Courses: React.FC = () => {
+  return (
+    <div className="max-w-7xl mx-auto">
+      <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-bold text-slate-900 tracking-tight">
+            Образовательные треки
+          </h2>
+          <p className="text-slate-500">
+            Актуальные навыки для рынка 2024-2025 года.
+          </p>
+        </div>
+        <button className="text-blue-600 text-sm font-bold flex items-center gap-2 hover:gap-3 transition-all">
+          Полный каталог
+          <span>→</span>
+        </button>
+      </div>
+      <div className="grid lg:grid-cols-3 gap-6">
+        {courses.map((course, idx) => (
+          <div key={idx} className="group bg-white rounded-2xl border border-slate-100 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+            <div className="relative h-48 overflow-hidden">
+              <img
+                src={course.image}
+                alt={course.title}
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+              />
+              <div className="absolute top-4 right-4">
+                <span className="bg-white/90 backdrop-blur px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider text-slate-900 shadow-sm border border-slate-100">
+                  {course.tag}
+                </span>
+              </div>
+            </div>
+            <div className="p-6 flex flex-col h-[calc(100%-12rem)]">
+              <h3 className="text-xl font-bold text-slate-900 mb-2 font-sans group-hover:text-blue-600 transition-colors">
+                {course.title}
+              </h3>
+              <p className="text-sm text-slate-500 leading-relaxed mb-6 flex-grow">
+                {course.desc}
+              </p>
+              <div className="flex items-center justify-between pt-4 border-t border-slate-50">
+                <div className="font-mono text-sm font-bold text-slate-900">{course.price}</div>
+                <div className="text-xs font-medium text-slate-400 bg-slate-50 px-2 py-1 rounded">{course.duration}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export default Courses;

src/components/Features.tsx ADDED Viewed

	@@ -0,0 +1,76 @@

+import React from 'react';
+const Features: React.FC = () => {
+  return (
+    <div className="max-w-7xl mx-auto">
+      <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
+        <div className="max-w-2xl">
+          <h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
+            Экосистема обучения
+          </h2>
+          <p className="text-lg text-slate-500">
+            Мы создали среду, где технологии встречают практику.
+          </p>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 grid-rows-2 gap-6 h-auto md:h-[600px]">
+        {/* Large Item 1 */}
+        <div className="md:col-span-2 row-span-1 glass-panel p-8 rounded-2xl relative overflow-hidden group">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:bg-blue-100 transition-colors"></div>
+          <div className="relative z-10">
+            <div className="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-6 text-white shadow-lg shadow-blue-200">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>
+            </div>
+            <h3 className="text-2xl font-bold mb-3">Практика на реальных GPU</h3>
+            <p className="text-slate-500 max-w-md">Доступ к облачным кластерам с H100 для тренировки ваших моделей. Мы оплачиваем вычислительные мощности.</p>
+          </div>
+        </div>
+        {/* Tall Item */}
+        <div className="md:col-span-1 md:row-span-2 bg-slate-900 text-white p-8 rounded-2xl relative overflow-hidden flex flex-col justify-between group">
+          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-slate-900/90 z-10"></div>
+          <img src="https://picsum.photos/seed/code/600/800" className="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:scale-105 transition-transform duration-700" alt="Code" />
+          <div className="relative z-20">
+            <div className="w-12 h-12 bg-white/10 backdrop-blur rounded-lg flex items-center justify-center mb-6 border border-white/20">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.2-2.973.599-4.23m0 0A9.956 9.956 0 0112 5c4.808 0 8.855 2.578 11.237 6.135" /></svg>
+            </div>
+            <h3 className="text-2xl font-bold mb-3">Карьерный Трек</h3>
+            <p className="text-slate-300">Сопровождение от резюме до оффера в Big Tech компаниях.</p>
+          </div>
+          <div className="relative z-20 mt-8 pt-8 border-t border-white/10">
+            <div className="flex -space-x-3">
+              {[1,2,3,4].map(i => (
+                <div key={i} className="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-700 overflow-hidden">
+                  <img src={`https://picsum.photos/seed/avatar${i}/100/100`} alt="Mentor" />
+                </div>
+              ))}
+              <div className="w-10 h-10 rounded-full border-2 border-slate-900 bg-blue-600 flex items-center justify-center text-xs font-bold">+40</div>
+            </div>
+            <p className="mt-3 text-sm text-slate-400 font-mono">Менторы из Google, Meta, Yandex</p>
+          </div>
+        </div>
+        {/* Small Item 1 */}
+        <div className="glass-panel p-8 rounded-2xl hover:border-blue-200 transition-colors">
+          <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mb-4 text-purple-600">
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
+          </div>
+          <h3 className="font-bold text-lg mb-2">Инновации</h3>
+          <p className="text-sm text-slate-500">Постоянно обновляемая программа. Только SOTA решения.</p>
+        </div>
+        {/* Small Item 2 */}
+        <div className="glass-panel p-8 rounded-2xl hover:border-blue-200 transition-colors">
+          <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-4 text-green-600">
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
+          </div>
+          <h3 className="font-bold text-lg mb-2">Комьюнити</h3>
+          <p className="text-sm text-slate-500">Закрытые хакатоны и встречи с инвесторами.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Features;

src/components/Footer.tsx ADDED Viewed

	@@ -0,0 +1,63 @@

+import React from 'react';
+const Footer: React.FC = () => {
+  return (
+    <footer className="bg-white border-t border-slate-100 pt-20 pb-10 px-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid md:grid-cols-4 gap-12 mb-16">
+          <div className="col-span-2 space-y-6">
+            <div className="flex items-center gap-2">
+                <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                </div>
+                <span className="text-2xl font-bold tracking-tight">Neural<span className="text-indigo-600">Academy</span></span>
+            </div>
+            <p className="text-slate-500 max-w-sm leading-relaxed">
+              Мы обучаем профессионалов будущего, способных внедрять технологии искусственного интеллекта в реальный бизнес и повседневную жизнь.
+            </p>
+            <div className="flex gap-4">
+              {['Twitter', 'Discord', 'YouTube', 'Telegram'].map((social) => (
+                <a key={social} href="#" className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all">
+                  <span className="sr-only">{social}</span>
+                  <div className="w-5 h-5 bg-current mask-icon"></div>
+                </a>
+              ))}
+            </div>
+          </div>
+          <div>
+            <h4 className="font-bold mb-6">Обучение</h4>
+            <ul className="space-y-4 text-slate-500 font-medium">
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Курсы по LLM</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Computer Vision</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Бесплатные уроки</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Карьера</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="font-bold mb-6">Компания</h4>
+            <ul className="space-y-4 text-slate-500 font-medium">
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">О нас</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Блог</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Контакты</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">FAQ</a></li>
+            </ul>
+          </div>
+        </div>
+        <div className="pt-8 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-slate-400 font-medium">
+          <p>© 2024 Neural Academy. Все права защищены.</p>
+          <div className="flex gap-8">
+            <a href="#" className="hover:text-slate-600">Политика конфиденциальности</a>
+            <a href="#" className="hover:text-slate-600">Условия использования</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default Footer;

src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,39 @@

+import React from 'react';
+interface HeaderProps {
+  isScrolled: boolean;
+}
+const Header: React.FC<HeaderProps> = ({ isScrolled }) => {
+  return (
+    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'py-3' : 'py-6'}`}>
+      <div className={`mx-auto max-w-7xl px-6 transition-all duration-300 ${isScrolled ? 'glass-panel rounded-full shadow-sm mx-4 md:mx-auto' : ''}`}>
+        <div className="flex items-center justify-between h-12">
+          <div className="flex items-center gap-2.5 group cursor-pointer">
+            <div className="w-8 h-8 bg-slate-900 rounded-lg flex items-center justify-center text-white transition-transform group-hover:scale-110">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <span className="text-lg font-bold tracking-tight text-slate-900 font-sans">Neural<span className="text-blue-600">Academy</span></span>
+          </div>
+          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-500">
+            <a href="#features" className="hover:text-blue-600 transition-colors">О школе</a>
+            <a href="#courses" className="hover:text-blue-600 transition-colors">Курсы</a>
+            <a href="#mentor" className="hover:text-blue-600 transition-colors">AI Наставник</a>
+          </nav>
+          <div className="flex items-center gap-3">
+            <button className="hidden sm:block text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">Войти</button>
+            <button className="bg-slate-900 text-white text-sm px-5 py-2 rounded-full font-medium hover:bg-blue-600 transition-all shadow-lg shadow-blue-900/20">
+              Start
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;

src/components/Hero.tsx ADDED Viewed

	@@ -0,0 +1,83 @@

+import React from 'react';
+const Hero: React.FC = () => {
+  return (
+    <section className="pt-32 pb-20 px-6 max-w-7xl mx-auto relative overflow-hidden">
+      <div className="grid lg:grid-cols-2 gap-16 items-center">
+        <div className="space-y-8 relative z-10">
+          <div className="flex items-center gap-2 text-slate-500 font-mono text-xs uppercase tracking-widest animate-in slide-in-from-left duration-700">
+            <span className="w-8 h-[1px] bg-blue-600"></span>
+            Next Gen Education
+          </div>
+          <h1 className="text-6xl lg:text-7xl font-extrabold tracking-tight text-slate-900 leading-[1.05] animate-in slide-in-from-left duration-700 delay-100">
+            Искусственный интеллект <br />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600">на практике</span>
+          </h1>
+          <p className="text-xl text-slate-600 max-w-lg leading-relaxed animate-in slide-in-from-left duration-700 delay-200">
+            Освойте LLM, Computer Vision и нейросети. Мы превращаем сложные теории в работающий код и реальные продукты.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 animate-in slide-in-from-left duration-700 delay-300">
+            <button className="bg-slate-900 text-white px-8 py-4 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-3 group">
+              Начать обучение
+              <span className="font-mono text-xs text-slate-400 group-hover:text-white/80 transition-colors">-></span>
+            </button>
+            <button className="px-8 py-4 rounded-lg font-medium border border-slate-200 hover:border-slate-400 hover:bg-slate-50 transition-all flex items-center justify-center gap-2 text-slate-700">
+              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+              Демо доступ
+            </button>
+          </div>
+          <div className="pt-8 border-t border-slate-100 grid grid-cols-3 gap-8 animate-in fade-in duration-1000 delay-500">
+            <div>
+              <div className="font-mono text-3xl font-bold text-slate-900">94%</div>
+              <div className="text-xs text-slate-500 mt-1">Трудоустройство</div>
+            </div>
+            <div>
+              <div className="font-mono text-3xl font-bold text-slate-900">24/7</div>
+              <div className="text-xs text-slate-500 mt-1">AI Менторство</div>
+            </div>
+            <div>
+              <div className="font-mono text-3xl font-bold text-slate-900">TOP 3</div>
+              <div className="text-xs text-slate-500 mt-1">В рейтинге EdTech</div>
+            </div>
+          </div>
+        </div>
+        <div className="relative animate-in zoom-in duration-1000 delay-200">
+          <div className="relative z-10 bg-white p-2 rounded-2xl shadow-2xl tech-border rotate-1 hover:rotate-0 transition-transform duration-500">
+            <div className="aspect-[4/3] overflow-hidden rounded-xl relative bg-slate-900">
+              <img
+                src="https://picsum.photos/seed/techlab/1000/800"
+                alt="AI Laboratory"
+                className="w-full h-full object-cover opacity-80 hover:scale-105 transition-transform duration-1000"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent"></div>
+              {/* Code Overlay */}
+              <div className="absolute bottom-0 left-0 right-0 p-6 font-mono text-xs leading-relaxed text-blue-200/80 backdrop-blur-sm bg-slate-900/50 border-t border-white/10">
+                <div className="flex gap-2 mb-2">
+                  <span className="w-3 h-3 rounded-full bg-red-500"></span>
+                  <span className="w-3 h-3 rounded-full bg-yellow-500"></span>
+                  <span className="w-3 h-3 rounded-full bg-green-500"></span>
+                </div>
+                <p><span className="text-purple-400">const</span> <span className="text-blue-300">future</span> = <span className="text-yellow-300">await</span> neural.train({'{'});</p>
+                <p className="pl-4">model: <span className="text-green-300">'Gemini-Pro'</span>,</p>
+                <p className="pl-4">skills: [<span className="text-green-300">'Vision'</span>, <span className="text-green-300">'NLP'</span>]</p>
+                <p>{'}'});</p>
+              </div>
+            </div>
+          </div>
+          {/* Decorative Elements */}
+          <div className="absolute top-10 -right-10 w-24 h-24 bg-blue-500 rounded-full blur-[60px] opacity-20"></div>
+          <div className="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-500 rounded-full blur-[60px] opacity-20"></div>
+        </div>
+      </div>
+    </section>
+  );
+};
+export default Hero;

src/index.css DELETED Viewed

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/{index.js → index.tsx} RENAMED Viewed

@@ -1,17 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
-const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );

src/logo.svg DELETED Viewed

src/reportWebVitals.js DELETED Viewed

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-export default reportWebVitals;

src/setupTests.js DELETED Viewed

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/types.ts ADDED Viewed

	@@ -0,0 +1,21 @@

+import React from 'react';
+export interface Course {
+  id: string;
+  title: string;
+  description: string;
+  level: 'Beginner' | 'Intermediate' | 'Advanced';
+  duration: string;
+  icon: string;
+}
+export interface Feature {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}
+export interface ChatMessage {
+  role: 'user' | 'model';
+  text: string;
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,29 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});