🧠 ШАГ 1 — Создаём лендинг в Google AI Studio
Перейди:
Нажми в левом меню на Home
Выбери Модель: Try Gemini 3.1 Pro
Открой Playground → выбери
👉 Code, Reasoning, and Chat
⚙ Настрой справа:
Модель: Gemini 3.1 Pro Preview
Temperature: 0.7
Thinking level: High
Code execution: ✅ включить
Grounding with Google Search: ❌ выключить
URL context: ❌ выключить
💎 Вставь PRO-промпт:
Роль: Ты Senior Frontend Developer и Lead UI/UX Designer уровня топовых студий Кремниевой долины.
Задача: Создай премиальный, высококонверсионный одностраничный сайт (Landing Page) для IT-компании.
Тематика: Разработка сложных SaaS-решений, внедрение AI (LLM) и создание экосистем в Telegram (TMA).
Технические ограничения:
ВЕСЬ код должен быть строго в одном файле index.html (HTML, CSS и JS вместе).
ЗАПРЕЩЕНО использовать сторонние библиотеки (без React, Vue, jQuery, Tailwind, Bootstrap, Three.js). Только чистый Vanilla JS и современный CSS (Grid, Flexbox, CSS-переменные).
Код должен быть полностью адаптивным (Mobile, Tablet, Desktop).
Дизайн-система (Silicon Valley 2026):
Тема: Глубокая темная (Dark Mode). Фон #030305.
Акценты: Неоновый голубой (#00f0ff), глубокий фиолетовый (#7000ff) и розовый (#ff0055).
Типографика: Шрифт 'Outfit' для основного текста, 'Space Grotesk' для заголовков, цифр и технических лейблов (например, [SYS.READY]).
Стиль: Glassmorphism 2.0 (матовое стекло с размытием), тонкие светящиеся бордеры (rgba(255,255,255,0.1)), инженерная эстетика, кибер-минимализм.
Обязательные визуальные эффекты (WOW-фактор):
3D Canvas Фон: Напиши на чистом JS скрипт для <canvas>, который генерирует сеть частиц (ноды), соединенных линиями. Частицы должны плавно двигаться, иметь иллюзию 3D-глубины (разный размер и прозрачность) и отталкиваться от курсора мыши.
Шум (Noise): Добавь поверх всего сайта SVG-фильтр зернистости (film grain) с прозрачностью 3-4% для создания кинематографичной текстуры.
Градиентные сферы: Добавь на фон размытые через filter: blur(100px) анимированные цветовые пятна (orbs), которые медленно "дышат".
3D Tilt-эффект: Карточки услуг должны наклоняться вслед за курсором мыши в 3D-пространстве (используй JS, perspective, rotateX, rotateY).
Бегущая строка: CSS-анимация бесконечной ленты (Marquee) с текстом под углом.
Градиентный текст: Анимированные переливающиеся заголовки.
Скролл-анимации: Появление элементов снизу вверх при скролле (через нативный IntersectionObserver).
Структура сайта:
Header: Логотип со светящейся точкой (индикатор работы) и кнопка CTA. При скролле шапка становится стеклянной (backdrop-filter).
Hero-блок: Огромный заголовок, технические микро-лейблы, две кнопки (Primary со свечением, Secondary стеклянная).
Video Showreel: Контейнер для видео с кастомной кнопкой Play по центру и эффектом глубокой тени.
Logos (Партнеры): Сетка логотипов (текстом), которые обесцвечены, но получают цвет при наведении.
Услуги (Bento Grid): Асимметричная сетка из 4-х карточек с 3D-наклоном и минималистичными SVG-иконками.
Метрики: 4 блока с крупными цифрами (градиентом).
Процесс и Стек: Вертикальный таймлайн (шаги работы) + облако тегов с технологиями (кнопки).
Отзывы: 3 карточки с эффектом стекла и градиентными аватарами.
Форма заявки (CTA): Футуристичный блок с эффектом радара на фоне. Поля: Имя, Telegram/Телефон. Кнопка отправки. Добавь JS-имитацию успешной отправки.
Footer: Минималистичный подвал с копирайтом.
Копирайтинг:
Текст должен быть дерзким, уверенным и дорогим. Используй термины: архитектура, экосистема, предиктивная аналитика, инжиниринг, цифровое превосходство. Никаких шаблонных фраз вроде "мы молодая и динамичная команда".
Выдай только готовый, чистый и полностью рабочий HTML-код.
Нажимаешь Run → получаешь код.
💾 ШАГ 2 — Сохраняем сайт
Нажми Get code
Скопируй HTML
Создай файл:
index.html
Вставь код
Сохрани
Сайт уже работает локально.
Затем вы уже можете подключть телеграм бота, подключить свой домен и развернуть на хостинге.
🔥 ШАГ 3 — Подключаем Telegram-автозаявки
1️⃣ Создай бота
В Telegram открой @BotFather
Команда:
/newbot
Сохрани токен.
2️⃣ Узнай chat_id
Открой @userinfobot
Он покажет твой ID.
3️⃣ Вставь обработчик в сайт
Внутри <script> добавь:
const token = "ТВОЙ_ТОКЕН";
const chatId = "ТВОЙ_CHAT_ID";
document.querySelector("form").addEventListener("submit", async function(e){
e.preventDefault();
const name = document.querySelector("#name").value;
const phone = document.querySelector("#phone").value;
const tg = document.querySelector("#telegram").value;
const text = `Новая заявка:%0AИмя: ${name}%0AТелефон: ${phone}%0ATelegram: ${tg}`;
await fetch(`https://api.telegram.org/bot${token}/sendMessage?chat_id=${chatId}&text=${text}`);
alert("Заявка отправлена!");
});
Теперь каждая заявка приходит прямо в Telegram.
🌐 ШАГ 4 — Разворачиваем сайт бесплатно
🔹 Вариант 1 — GitHub Pages
Создай репозиторий
Загрузить index.html
Settings → Pages
Deploy from branch → main
Через минуту сайт онлайн.
🔹 Вариант 2 — Vercel (самый простой)
https://vercel.com
Войти через GitHub
Add New → Project
Deploy
Готово.
🔹 Вариант 3 — Свой домен
Купи домен
Подключи DNS
Загрузи файл в:
public_html
💰 Сколько стоит?
Создание: 0 ₽
Хостинг: 0 ₽
Telegram-заявки: 0 ₽
🎯 Что ты получаешь
✔ Премиальный лендинг
✔ Предпросмотр прямо в AI Studio
✔ Автоматические заявки в Telegram
✔ Рабочую ссылку
✔ Возможность запускать рекламу
Без программиста.
Бесплатно.
Скачайте файл index.html готовый лейдинг можно у нас на канале по этой ссылке: https://t.me/TechHacker_Official_Programs/158
#GoogleAIStudio #Gemini #нейросети #созданиесайта #лендинг #вебразработка #AIразработка #Telegramбот #автоматизация #ITбизнес #SaaS #frontend #искусственныйинтеллект