Берём простой лендинг из урока 2 и превращаем в профессиональный сайт
Тот же лендинг, но с premium-обработкой. Потяни ползунок!
Комплексные решения для роста вашего бизнеса. От идеи до результата за рекордные сроки.
“Превзошли все ожидания. Результат за 2 дня!”
“Лучшая инвестиция в бизнес за этот год.”
Решение которое изменит ваш бизнес
Потяни ползунок влево-вправо
Навбар всегда виден при скролле. Логотип слева, ссылки справа.
Добавь фиксированный навбар в верх страницы: - Слева: логотип (квадрат с буквой + название) - Справа: ссылки «О нас», «Услуги», «Цены», «Контакты» - Фон: полупрозрачный тёмный с blur-эффектом - Навбар не скроллится, всегда наверху - На мобилке: иконка-гамбургер вместо ссылок
backdrop-filter: blur() — CSS-свойство которое размывает фон за элементом. Выглядит как стекло!
Заменим квадрат с буквой на настоящий логотип:
Замени квадрат с буквой в навбаре на настоящий логотип: 1. Создай папку images/ в проекте 2. Добавь файл logo.svg (или logo.png) 3. Замени <div> с буквой на <img src="images/logo.svg"> 4. Размер: height 32px, width auto 5. Если нет логотипа — сгенерируй SVG: стилизованная буква N с градиентом
Где взять логотип? Попроси AI: "Сгенерируй простой SVG-логотип для IT-компании NexaFlow, минималистичный, фиолетовый акцент". Или используй brandmark.io / looka.com
Превращаем простой заголовок + кнопку в вау-секцию с gradient orbs, бейджем и glow-эффектами.
Улучши Hero-секцию: 1. Добавь фоновые gradient orbs (полупрозрачные цветные круги с blur) 2. Над заголовком — бейдж «Автоматизация нового поколения» 3. Заголовок крупнее, вторая строка — градиентный текст 4. Подзаголовок — серый, мельче 5. Две кнопки: «Оставить заявку» (яркая с glow-тенью) и «Подробнее →» (прозрачная с border) 6. Цвета: фиолетовый #a855f7, голубой #06b6d4
Добавим фоновое фото для глубины:
Добавь фоновое изображение в Hero-секцию: 1. Найди фото на unsplash.com (технологии, абстракция, город ночью) 2. Сохрани в images/hero-bg.jpg 3. Добавь как background с тёмным overlay: background: linear-gradient(rgba(15,15,26,0.85), rgba(15,15,26,0.95)), url('images/hero-bg.jpg') background-size: cover; background-position: center 4. Фото еле видно сквозь overlay — добавляет глубину, не мешает тексту
Unsplash.com — бесплатные фото. Ищи "technology dark" или "abstract gradient". Сжимай через tinypng.com — hero-фото должно быть до 200KB!
Комплексные решения для роста вашего бизнеса
Блок с цифрами между Hero и фичами. Социальное доказательство — люди верят цифрам.
Добавь секцию с цифрами между Hero и преимуществами: - 500+ клиентов - 98% довольны - 24/7 поддержка - 3 дня средний срок Стиль: горизонтальная полоска, числа крупно белым, подписи мелко серым. Разделители — тонкие линии сверху и снизу.
Совет: цифры не обязательно должны быть точными. "500+" и "~100" работают отлично. Главное — вызвать доверие.
Вместо простых иконок — красивые карточки с цветными фонами, описаниями и hover-эффектами.
Улучши секцию преимуществ: 1. Заголовок секции: мелкий текст «ПРЕИМУЩЕСТВА» + крупный «Почему выбирают нас» 2. Карточки: иконка в цветном круге, название жирным, описание серым 3. Hover: карточка приподнимается, border светлеет 4. Цвета иконок: ⚡ жёлтый, 🎯 зелёный, 💎 фиолетовый
Отзывы — мощнейший инструмент продаж. Люди верят людям, а не рекламе.
Добавь секцию отзывов после преимуществ: - Заголовок: «Нам доверяют» - 2-3 карточки отзывов в ряд - Каждая карточка: звёзды ★★★★★, цитата курсивом, имя жирным, должность серым - Стиль: тёмные карточки, тонкая рамка, звёзды жёлтые
Совет: можно попросить AI "Придумай 3 реалистичных отзыва для IT-компании" — он сгенерирует тексты!
“Превзошли все ожидания!”
“Лучшая инвестиция в бизнес.”
3 колонки: базовый, про (популярный), бизнес. Средний тариф выделен — это классический приём.
Добавь секцию тарифов: - 3 колонки: Базовый (15 000 руб), Про (35 000 руб), Бизнес (75 000 руб) - Средний «Про» выделен: бейдж «Популярный», фиолетовая рамка, градиентный фон - Каждый тариф: название, цена крупно, список фич с галочками, кнопка «Выбрать» - Кнопка у Про — заливка градиентом, у остальных — прозрачная с border
Элементы плавно появляются при скролле, кнопки реагируют на наведение. Сайт оживает.
Добавь анимации на страницу: 1. Все секции плавно появляются при скролле (fade in + slide up) 2. Кнопки: при наведении — увеличение scale(1.05) 3. Карточки: при наведении — приподнимаются translateY(-4px) 4. Hero-заголовок: появляется с задержкой, по буквам 5. Цифры: анимация счётчика от 0 до нужного числа Используй CSS transitions и @keyframes, без внешних библиотек.
/* Элементы появляются при скролле */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Кнопка с hover-эффектом */
.btn-primary {
transition: transform 0.2s,
box-shadow 0.2s;
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(168,85,247,0.4);
}
/* Карточки приподнимаются */
.card {
transition: transform 0.2s,
border-color 0.2s;
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(168,85,247,0.3);
}<"text-[#a78bfa]">class="text-[#f472b6]">script>
// Наблюдатель за скроллом
const observer =
new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target
.classList.add('visible');
}
});
}
);
// Подключаем ко всем элементам
document
.querySelectorAll('.fade-in')
.forEach(el => observer.observe(el));
</"text-[#a78bfa]">class="text-[#f472b6]">script>Заменяем эмоджи на иконки, добавляем favicon и og:image для профессионального вида.
Замени эмоджи в карточках преимуществ на SVG-иконки: 1. Скачай иконки с flaticon.com или undraw.co 2. Сохрани в images/icon-speed.svg, icon-target.svg, icon-quality.svg 3. Замени эмоджи на <img src="images/icon-speed.svg"> 4. Размер: 48x48 в цветном круге 5. Или попроси AI: «Сгенерируй 3 SVG-иконки: скорость, точность, качество. Стиль: линейные, цвет #a855f7»
Добавь favicon — иконку во вкладке браузера: 1. Сделай favicon 32x32 из логотипа (realfavicongenerator.net) Или попроси AI: «Создай favicon.ico из моего логотипа» 2. Положи в корневую папку проекта 3. В <head> добавь: <link rel="icon" href="favicon.ico"> <link rel="icon" type="image/svg+xml" href="images/favicon.svg">
Добавь og:image для красивого превью при шаринге ссылки: 1. Создай картинку 1200x630px — превью для соцсетей Или: «Сгенерируй og:image 1200x630 для NexaFlow, тёмный фон, логотип, слоган» 2. Сохрани как images/og-image.jpg 3. В <head> добавь: <meta property="og:image" content="images/og-image.jpg"> <meta property="og:title" content="NexaFlow — Автоматизация"> <meta property="og:description" content="Комплексные решения для бизнеса">
Все картинки можно сгенерировать через AI! В Cursor напиши: "Создай SVG-логотип, 3 SVG-иконки для фич и og:image-заглушку для NexaFlow"
Favicon во вкладке браузера:
Превью ссылки в мессенджере:
70% трафика — с телефонов. Лендинг обязан выглядеть идеально на мобилке.
Сделай весь лендинг адаптивным для мобильных устройств: - Навбар: ссылки заменить на иконку-гамбургер - Hero: заголовок меньше, кнопки в колонку - Карточки: в 1 колонку вместо 3 - Тарифы: в 1 колонку, «Про» сверху - Отступы: меньше на мобилке - Используй @media (max-width: 768px)
@media — CSS-правило которое применяет стили только при определённой ширине экрана. Магия адаптивности!
Комплексные решения для роста
Полный premium-лендинг, собранный промптами в Cursor
Комплексные решения для роста вашего бизнеса. От идеи до результата за рекордные сроки.
“Превзошли все ожидания. Результат за 2 дня!”
“Лучшая инвестиция в бизнес за этот год.”