import React, { useMemo, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, CartesianGrid, ResponsiveContainer, FunnelChart, Funnel, LabelList, PieChart, Pie, Cell, } from "recharts"; export default function App() { const [tab, setTab] = useState("project"); const [scenario, setScenario] = useState<"conservative" | "target" | "optimistic">("target"); const scenarios = { conservative: { key: "conservative", name: "Консервативный", price: 12900, students: 12, revenue: 154800, marketing: 43200, teacher: 19200, assistant: 9600, method: 5000, regs: 96, shows: 48, purchases: 12, }, target: { key: "target", name: "Целевой", price: 14900, students: 16, revenue: 238400, marketing: 28700, teacher: 19200, assistant: 9600, method: 5000, regs: 82, shows: 49, purchases: 16, }, optimistic: { key: "optimistic", name: "Оптимистичный", price: 16900, students: 18, revenue: 304200, marketing: 19500, teacher: 19200, assistant: 9600, method: 5000, regs: 65, shows: 45, purchases: 18, }, } as const; const s = scenarios[scenario]; const cost = s.marketing + s.teacher + s.assistant + s.method; const profit = s.revenue - cost; const margin = Math.round((profit / s.revenue) * 100); const breakdownData = [ { name: "Выручка", value: s.revenue }, { name: "Маркетинг", value: s.marketing }, { name: "Преподаватель", value: s.teacher }, { name: "Ассистент", value: s.assistant }, { name: "Методика", value: s.method }, { name: "Прибыль", value: profit }, ]; const compareData = [ { scenario: scenarios.conservative.name, Прибыль: scenarios.conservative.revenue - (scenarios.conservative.marketing + scenarios.conservative.teacher + scenarios.conservative.assistant + scenarios.conservative.method), Выручка: scenarios.conservative.revenue, }, { scenario: scenarios.target.name, Прибыль: scenarios.target.revenue - (scenarios.target.marketing + scenarios.target.teacher + scenarios.target.assistant + scenarios.target.method), Выручка: scenarios.target.revenue, }, { scenario: scenarios.optimistic.name, Прибыль: scenarios.optimistic.revenue - (scenarios.optimistic.marketing + scenarios.optimistic.teacher + scenarios.optimistic.assistant + scenarios.optimistic.method), Выручка: scenarios.optimistic.revenue, }, ]; const funnelData = [ { name: "Регистрации", value: s.regs }, { name: "Явка на пробный", value: s.shows }, { name: "Оплаты", value: s.purchases }, ]; // Доп. метрики для сметы const pricePerLesson = s.price / 8; const pricePerHour = s.price / 16; const costPieData = [ { name: "Маркетинг", value: s.marketing }, { name: "Преподаватель", value: s.teacher }, { name: "Ассистент", value: s.assistant }, { name: "Методика", value: s.method }, ]; const pieColors = ["#f97316", "#60a5fa", "#22c55e", "#a78bfa"]; // ===== Simple runtime tests (self-check) ===== const tests = useMemo(() => runFinanceTests(scenarios), [scenarios]); const allPassed = tests.every((t) => t.passed); const colors = { bg: "#0b1020", card: "#0f172a", ink: "#e5e7eb", accent: "#60a5fa", accent2: "#f97316", good: "#22c55e", warn: "#eab308", mut: "#94a3b8", } as const; const logo = "https://static.tildacdn.com/tild3235-6364-4732-b561-626331663336/ARENA_by_chebatkov_1.svg"; return (
T‑Arena
Прикладной ИИ для подростков — презентация проекта
{(["project", "trends", "finance"] as const).map((key) => ( ))}
{tab === "project" && (
  • Мини‑сайт на GitHub Pages / Cloudflare Pages (без конструкторов).
  • Презентация и дашборд (Google Sheets → Looker Studio).
  • ИИ‑агент (Sheets → n8n → GPT/Gemini/Qwen → TG‑канал) и мини‑ИИ‑видео (Veo 3) для анонса.
Чему научатся (прикладные навыки)
  • Записывать короткий трек для видео в Suno (или аналоге) и использовать его в Reels/Shorts.
  • Создавать промо‑ролики 5–10 с в Veo 2/3, KLING, Sora (при доступе) или Runway/Luma; подготовка вертикального формата 9:16.
  • Смонтировать свой первый Reels/Shorts: титры, субтитры, обложка, публикация.
  • Работать с мощными ИИ‑агентами (GenSpark, Manus): «ИИ‑блогер» для TG‑канала и автоответы на вопросы.
  • Делать выдающиеся презентации (структура, сторителлинг, визуализация данных) в Google Slides (без Canva).
  • Собрать в n8n собственного «Школьного ассистента»: приём /hw в Telegram, напоминания из Google Sheets, быстрые подсказки по формулам и теориям.
  • Базовый Git & деплой: репозиторий, пулл‑реквест, публикация на Vercel/Workers.
  • Цифровая гигиена, авторское право и этика ИИ (что можно/нельзя публиковать).
  • Бонус: «T‑Arena Highlight» — ИИ‑сборка клипа из фрагментов геймплея для соцсетей.
  • Слоты: 10:00–13:00, будни.
  • Группы: до 16 человек, 1 преподаватель + ассистент.
  • Итог: ссылки на сайт, дашборд, видео и посты в канале.
  • Собираем лендинг‑черновик и публикуем.
  • Запускаем ИИ‑пост из общих Google Sheets (n8n) — сразу в TG‑канале.
  • Показываем мини‑ИИ‑видео. Бонус: 2–3 часа игр в T‑Arena.
)} {tab === "trends" && (

Почему это популярно

Коротко о трендах и спросе: цифры рынка, поведение подростков и политика в образовании. Внизу — источники.

`${v}B`} /> `${v} млрд $`} />

[1] Grand View Research (2030), [1] Precedence Research (2034).

  • UNESCO: первое глобальное руководство по GenAI в образовании — фокус на человеко‑центричности. [4]
  • OECD: обзор управления GenAI в 18 странах (рамки и гайдлайны для школ/вузов). [5]
  • Google AI Studio: бесплатное прототипирование, платный tier — по мере роста. [6]
  • Инвестиции: Google — $1 млрд на AI‑обучение в вузах США. [7]
)} {tab === "finance" && (

Финансовая панель

{Object.values(scenarios).map(({ key, name }) => ( ))}
(v >= 1000 ? `${Math.round(v / 1000)}k` : v)} /> `${Number(v).toLocaleString("ru-RU")} ₽`} /> v} />

CPL и проценты соответствуют выбранному сценарию.

(v >= 1000 ? `${Math.round(v / 1000)}k` : v)} /> `${Number(v).toLocaleString("ru-RU")} ₽`} /> `${Number(v).toLocaleString("ru-RU")} ₽`} />

Диапазон LTV: ~28–63 тыс. ₽ на поток, в зависимости от апсейла.

Скидки для оффера: ранняя оплата −10%, второй ребёнок −10%, 2+ курса −15%. Расходы на ИИ‑сервисы — в пределах free‑tier; при желании апгрейд 0,5–2 тыс. ₽.
{costPieData.map((_, idx) => ( ))} `${Number(v).toLocaleString("ru-RU")} ₽`} />
{/* Test results panel */}
    {tests.map((t, i) => (
  • {t.name}: {t.passed ? "ok" : `ожидали ${t.expected}, получили ${t.actual}`}
    • ))}
)}
© T‑Arena · Демопрезентация. Нажмите «Скачать PDF», чтобы распечатать как презентацию.
); } function Hero() { return (

T‑Arena: Прикладной ИИ и цифровые проекты

За 4 недели подросток делает сайт, дашборд, мини‑ИИ‑агента и короткое ИИ‑видео, а затем деплоит всё на публичные площадки. Утренние часы клуба превращаем в «нейро‑лабораторию».

{[ "GPT / Google AI Studio / Qwen", "GitHub / Vercel / Workers", "Looker Studio", "n8n / Telegram Bot", "Veo 3", ].map((tag) => ( {tag} ))}
); } function Card({ title, subtitle, icon, children, }: { title: string; subtitle?: string; icon?: string; children: any; }) { return (
{icon}
{title}
{subtitle &&
{subtitle}
}
{children}
); } function KPICard({ kpi, label, footnote, }: { kpi: string; label: string; footnote?: string; }) { return (
{label}
{kpi}
{footnote &&
Источник {footnote}
}
); } function Metric({ label, value, highlight, }: { label: string; value: any; highlight?: boolean; }) { return (
{label}
{value}
); } function Checklist({ title, items }: { title: string; items: string[] }) { return (
{title}
    {items.map((t, i) => (
  • {t}
    • ))}
); } function Sources() { return (
Источники (сокращённый список для презентации)
  1. [1] Оценки рынка: Grand View Research; Precedence Research.
  2. [2] Harvard GSE / Common Sense Media: «Teen and Young Adult Perspectives on Generative AI».
  3. [3] K12Dive пересказ результатов: 69% говорят, что ИИ помог выучить новое.
  4. [4] UNESCO: Guidance for generative AI in education and research.
  5. [5] OECD Digital Education Outlook 2023: Emerging governance of GenAI in education.
  6. [6] Google AI Studio / Gemini API — free tier и тарификация.
  7. [7] Новости: Google инвестирует $1 млрд в AI‑обучение в вузах США.
Полные ссылки — в описании к презентации (в чате).
); } // ===== Helpers: tests ===== function calcProfit(s: { revenue: number; marketing: number; teacher: number; assistant: number; method: number }) { return s.revenue - (s.marketing + s.teacher + s.assistant + s.method); } function runFinanceTests(scenarios: any) { const pricePerLesson = (p: number) => Math.round(p / 8); const pricePerHour = (p: number) => Math.round(p / 16); const cases = [ { name: "Консервативный: прибыль", expected: 77800, actual: calcProfit(scenarios.conservative), }, { name: "Целевой: прибыль", expected: 175900, actual: calcProfit(scenarios.target) }, { name: "Оптимистичный: прибыль", expected: 250900, actual: calcProfit(scenarios.optimistic) }, { name: "Сортировка воронки (убывание)", expected: true, actual: scenarios.target.regs >= scenarios.target.shows && scenarios.target.shows >= scenarios.target.purchases, }, { name: "Цена урока target (≈руб)", expected: 1863, actual: pricePerLesson(scenarios.target.price) }, { name: "Цена урока conservative (≈руб)", expected: 1613, actual: pricePerLesson(scenarios.conservative.price) }, { name: "Цена часа optimistic (≈руб)", expected: 1056, actual: pricePerHour(scenarios.optimistic.price) }, ]; return cases.map((c) => ({ ...c, passed: c.expected === c.actual })); }, { name: "Целевой: прибыль", expected: 175900, actual: calcProfit(scenarios.target) }, { name: "Оптимистичный: прибыль", expected: 250900, actual: calcProfit(scenarios.optimistic) }, { name: "Сортировка воронки (убывание)", expected: true, actual: scenarios.target.regs >= scenarios.target.shows && scenarios.target.shows >= scenarios.target.purchases, }, ]; return cases.map((c) => ({ ...c, passed: c.expected === c.actual })); }
Made on
Tilda