Установим Cursor, создадим лендинг и подключим отправку заявок в Telegram
Полноценный лендинг с формой, которая отправляет заявки в Telegram
Решение которое изменит ваш бизнес
Открой cursor.com и нажми Download for Windows
cursor.comНажми кнопку "Download for Windows"
Запусти скачанный .exe файл
→ Запусти Cursor-Setup.exe
→ Нажимай "Далее" / "Next"
→ Дождись окончания установки
Найди в меню Пуск или на рабочем столе
При первом запуске выбери тему (тёмную) и войди в аккаунт
4 зоны которые нужно знать
<!DOCTYPE html>
<html>
<head>
<title>Мой лендинг</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<h1>Привет!</h1>
</body>
</html>my-landing на рабочем столеТеперь открой AI-чат и напиши:
Создай файл index.html с базовой структурой HTML-страницы. Заголовок — «Мой лендинг»
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Мой лендинг</title>
</head>
<body>
</body>
</html>Пишем промпт — AI создаёт весь код
Сделай красивый одностраничный лендинг в index.html со встроенными стилями: 1. Hero-секция: заголовок «Ваш Продукт», подзаголовок, кнопка «Оставить заявку» 2. Секция преимуществ: 3 карточки с иконками (⚡ Быстро, 🎯 Точно, 💰 Выгодно) 3. Секция «О нас»: короткий текст про компанию 4. Секция контактов: форма с полями Имя, Телефон, Сообщение и кнопка Отправить Стиль: современный, тёмная тема, градиенты, скруглённые углы. Шрифт — системный.
Решение которое изменит ваш бизнес навсегда
AI сгенерировал полный лендинг из одного промпта!
Не нравится что-то? Просто скажи AI что поменять. Не нужно знать CSS!
Сделай кнопку больше и добавь ей анимацию при наведении
Поменяй градиент Hero на сине-зелёный
Добавь отступы между секциями побольше
Совет: описывай изменения простыми словами. "Сделай покрасивее" тоже работает!
.hero {
background: linear-gradient(
135deg,
#0ea5e9 0%,
#10b981 100%
);
padding: 80px 20px;
text-align: center;
}
.btn {
padding: 14px 36px;
border-radius: 12px;
font-size: 18px;
transition: transform 0.2s;
}
.btn:hover {
transform: scale(1.05);
}Форма уже есть в лендинге. Убедимся что у неё правильные поля.
Проверь что в форме контактов есть поля: - Имя (обязательное) - Телефон (обязательное) - Сообщение (необязательное) - Кнопка «Отправить» Добавь красивую валидацию: если поле пустое и обязательное — подсвети красным.
Что получим:
Чтобы заявки приходили в Telegram, нужен бот
Открой Telegram, найди @BotFather в поиске
Напиши /newbot и следуй инструкциям. Придумай имя.
BotFather выдаст токен вида 123456:ABC-DEF... Сохрани его!
Напиши боту /start, затем открой ссылку ниже
7012345678:AAF...# 1. Напиши своему боту /start в Telegram
# 2. Затем открой в браузере:
# https://api.telegram.org/bot<ТВОЙ_ТОКЕН>/getUpdates
# В ответе найди "chat":{"id": 123456789}
# Это и есть твой Chat IDПопросим AI написать JavaScript который отправляет данные формы в Telegram
Добавь JavaScript в index.html, который: 1. При отправке формы собирает данные (имя, телефон, сообщение) 2. Отправляет их в Telegram через Bot API: - Токен бота: СЮДА_ВСТАВЬ_ТОКЕН - Chat ID: СЮДА_ВСТАВЬ_ID 3. Показывает «Заявка отправлена!» при успехе 4. Показывает ошибку если что-то не так 5. Блокирует кнопку на время отправки
<"text-[#a78bfa]">class="text-[#f472b6]">script>
const TOKEN = 'ВАШ_ТОКЕН';
const CHAT_ID = 'ВАШ_CHAT_ID';
document.querySelector('form')
.addEventListener('submit', async (e) => {
e.preventDefault();
const name = e.target.name.value;
const phone = e.target.phone.value;
const msg = e.target.message.value;
const text = `Новая заявка!
Имя: ${name}
Телефон: ${phone}
Сообщение: ${msg}`;
const url = `https://api.telegram.org/
bot${TOKEN}/sendMessage`;
const res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type':
'application/json'
},
body: JSON.stringify({
chat_id: CHAT_ID,
text: text
})
});
if (res.ok) {
alert('Заявка отправлена!');
e.target.reset();
}
});
</"text-[#a78bfa]">class="text-[#f472b6]">script>AI сгенерирует этот код автоматически. Тебе нужно только вставить свой токен и Chat ID!
Заполняем форму → заявка приходит в Telegram
Следующий урок
Докрутим лендинг до premium: анимации, отзывы, тарифы и адаптив
Урок 3: Докручиваем до Premium →