// Модули — Variant A: Roadmap Timeline
function useIsMobile(breakpoint=720){
const [is, setIs] = React.useState(
typeof window!=='undefined' ? window.innerWidth <= breakpoint : false
);
React.useEffect(()=>{
const mq = window.matchMedia(`(max-width:${breakpoint}px)`);
const h = ()=> setIs(mq.matches);
h();
mq.addEventListener ? mq.addEventListener('change', h) : mq.addListener(h);
return ()=> mq.removeEventListener ? mq.removeEventListener('change', h) : mq.removeListener(h);
}, [breakpoint]);
return is;
}
// Каждый модуль: [num, title, lessons[]]
// Урок с пометкой 'practice:true' выделяется зелёным
const MODULES = [
['01', 'старт и первый код за сегодня', [
'база о вайбкодинге',
'сколько стоит и что выбрать: разбираем тарифы',
'устанавливаем рабочую зону и пишем первый запрос',
'создаём первый лендинг',
]],
['02', 'как правильно говорить с агентом', [
'как думает агент и как с ним говорить',
'скидываем файлы, картинки, документы',
'режимы работы агента',
'как не слить весь лимит за один вечер',
{ text: 'практика', practice: true },
]],
['03', 'документ, который спасает проект от хаоса', [
'почему без документации проект разваливается',
'пишем CLAUDE.md — главный файл проекта',
'как добавлять новые функции, не ломая работающее',
]],
['04', 'сохраняем работу и выкладываем в интернет', [
'github: подключение',
'сохраняем, выкладываем, откатываемся',
'безопасность — что нельзя выкладывать',
]],
['05', 'даём агенту суперсилы', [
'mcp — даём агенту руки: браузер, сервисы, файлы',
'где брать готовые инструменты и как выбрать',
'устанавливаем скиллы агенту и пробуем в деле',
'делаем свой инструмент под свою задачу',
]],
['06', 'автономная работа агента', [
'хуки: claude делает кое-что сам, без твоей команды',
'несколько агентов одновременно: у каждого своя копия',
'команда агентов: тимлид, подчинённые, свои сессии',
'управляем агентами с телефона',
'трёхуровневая память агента: метод карпатого',
{ text: 'практика', practice: true },
]],
['07', 'выкладываем продукт в интернет', [
'автообновления — сохранил код и сайт обновился сам',
'подключаем домен',
'запускаем бота без сервера — railway',
'арендуем свой сервер',
'безопасность',
]],
['08', 'база данных', [
'что такое база данных и зачем она нужна',
'создаём базу через supabase mcp',
'авторизация через google',
'настройка доступов и тарифов',
]],
['09', 'подключение оплат', [
'фундамент: как работают платёжки + правила',
'lemon squeezy: подключаем платёжку к проекту',
'webhook + уведомления в telegram о продажах',
'оплата криптой, ЮKassa + stripe: куда расти',
'подписка через telegram-канал / сервис',
]],
];
const MODULE_CLIENTS = ['10', 'клиенты', [
'фундамент перед поиском клиентов',
'твоя визитная карточка',
'создаём оффер, который продаёт',
'рассылки',
'тг-каналы и чаты предпринимателей',
'нетворкинг и реферальная система',
'МК по поиску клиентов: воронка продаж от алексея',
'как закрыть клиента на созвон',
'проведение продающего созвона',
'коммерческое предложение',
]];
function ModuleCard({ m, isClients }){
const [num, title, lessons] = m;
return (
{lessons.map((l, i)=>{
const isPractice = typeof l === 'object' && l.practice;
const text = typeof l === 'object' ? l.text : l;
return (
{String(i+1).padStart(2,'0')}{text}
);
})}
);
}
function Modules(){
return (
10 модулей · от первого кода до клиентов
}/>
{MODULES.map((m)=> (
))}
{/* PIVOT перед клиентами */}
⚡
точка перелома · m10
без правильного позиционирования себя как эксперта и выстроенных продаж технические знания не имеют смысла. дальше — самый важный модуль программы.
↓
{/* Bottom outcomes */}
{[
['Собирать агентов','которые работают 24/7 без тебя'],
['Закрывать клиентов','на чек от $500 уже после M10'],
['Ship прод','в интернет без разработчиков'],
].map(([t,s],i)=>(