SEO7.ES — цифровая студия под ключ.

seo7.es — не сайт-визитка, а наша собственная платформа полного цикла: трёхъязычный сайт, блог с ИИ-генерацией статей под SEO/AEO/GEO, портфолио кейсов, интерактивный калькулятор услуг с корзиной, ИИ-брифинг и админ-панель — всё на одном бэкенде.

Мы построили для себя то, что строим клиентам: сайт, который сам приводит заявки. Витрина наших возможностей — одновременно и рабочий инструмент студии.

Технологический стек

• Frontend: React 18 + Vite + TypeScript + Tailwind CSS v3
• Backend: Node.js (Express) + Prisma ORM + MySQL
• ИИ: каскадная генерация и перевод статей, языковой QA-гейт против смешения локалей
• SEO-инфраструктура: пререндеринг SPA (SSG) под поисковики и AI-краулеры, sitemap, robots, llms.txt, JSON-LD Schema.org
• Дизайн: золотое сечение, анимации framer-motion, самохостинг шрифтов (Manrope), без render-blocking
• Деплой: статичный фронт, бэкенд на VPS, CI с автодеплоем

Полный список реализованных функций

🌐 Сайт и страницы

• Главная с анимированным hero: золотое сечение, ротатор слова с бликом, бегущая лента реальных кейсов
• Прелоудер бренда «SEO7.ES» с переливающимся бликом до загрузки приложения
• Отдельные мобильный и десктопный hero-компоненты (не «сжатый десктоп»)
• Верхнее меню (CardNav) с локалями, поиском и логином, сворачивающийся логотип при скролле
• Страница «О студии», «Контакты», футер с белым логотипом
• Скролл-индикатор, плавные переходы между секциями
• Адаптив под 375 / 768 / 1024 / 1440, без горизонтального скролла

🧭 6 страниц направлений

• Создание сайтов, SEO, ИИ-SEO, реклама/трафик, ИИ-боты, автоматизация
• На каждой — H2/lead под локаль, пакеты, сетка микро-услуг, направленный CTA
• Tier-разметка функций (Start / Pro / Max) с легендой и цветовой шкалой
• Раскрытие пакета на 3–4 колонки с анимацией ~1 сек, тултипы на этапах
• Локальные козыри в topFeatures, измеримые KPI в гарантиях

🧮 Калькулятор услуг и корзина

• Интерактивный выбор микро-услуг по 6 направлениям, цена в реальном времени
• Глобальная корзина «Ваш набор» (PricingCartContext), боковая панель (Drawer)
• Подарки от агентства: дешёвые из выбранного + базовый пул бонусов
• Чекбоксы на строках этапов, deep-link на раскрытую карточку услуги
• Страница /precios с 6 направлениями и таблицей спецпредложений

📝 Блог с искусственным интеллектом

• Автогенерация статей в формате «эталон»: SEO + AEO + GEO в одной структуре
• Базовый язык ES → перевод на RU/EN с языковым QA-гейтом (детект кириллицы в es/en)
• Атомарные блоки 40–60 слов, Quick Answer, definition boxes, цитаты экспертов
• FAQ-блок с FAQPage Schema, связанные статьи, внутренняя перелинковка
• Статья = одна запись с тремя локалями (etalonData), draft/published
• Автоматизация публикации, генерация обложек, плановые джобы

💼 Портфолио и кейсы

• Витрина проектов: карточки с реальными скриншотами (ноутбук + телефон, DeviceDuo)
• Страница кейса: split-hero, фишки 2×2, блок устройств, список функций, FAQ
• Бегущая лента проектов на главной (десктоп — hover-подсказки, мобайл — свайп)
• Листинг /portfolio с JSON-LD ItemList / CollectionPage
• Sitemap кейсов подтягивается из реестра при сборке

🌍 Мультиязычность (RU / ES / EN)

• Три полноценные локали, автоопределение языка по маршруту
• hreflang между локалями, канонические URL, чистка трекинговых параметров
• Отдельный контент на каждой странице, без машинного «налёта»
• Защита от протекания одного языка в поля другого (на уровне генерации и валидации)

🔍 SEO

• Компонент <SEO>/PageSeo: title, description, OG/Twitter, canonical, robots
• sitemap.xml и robots.txt, генерация sitemap из данных при сборке
• Единый граф Schema.org (@graph): Organization, WebSite, BreadcrumbList
• Пререндеринг страниц в статический HTML для индексации поисковиками

🤖 GEO / AI-поиск

• llms.txt для управления доступом LLM к контенту
• Контент-структура под цитируемость в ChatGPT, Perplexity, AI Overviews
• JSON-LD рендерится в DOM (вне Helmet) — виден краулерам без JS
• Schema.org Article + FAQPage на статьях блога

♿ Доступность (WCAG 2.2 AA)

• Один h1 на экран (визуальные заголовки — div, SEO-h1 — sr-only)
• Видимые фокус-стейты, aria-метки на иконочных кнопках, alt у изображений
• Контраст по AA, закрытие тултипов по Escape, aria-hidden у декора
• Учёт prefers-reduced-motion во всех анимациях (ротатор, лента, блики)

⚡ Производительность

• Самохостинг шрифтов (Manrope) без render-blocking Google Fonts
• Ленивая загрузка изображений, width/height против скачков layout (CLS)
• Код-сплит по маршрутам, анимации только на transform/opacity
• Пререндер ключевых страниц → быстрый первый экран

🎨 Дизайн-система и анимации

• Дизайн-токены (--c-*), единый макет шириной 1400px, типографика Manrope
• Пропорции по золотому сечению (φ≈1.618): ритм, тайминги бликов, сплит-колонки
• Оркестрованные анимации: слово → блик слова → блики кнопок → смена
• Онлайн-страница /style-guide как источник правды по стилю

🗂 Бэкенд и API

• Express + Prisma ORM + MySQL, сервисный ключ для автоматизаций
• Эндпоинты блога, генерации статей, брифинга, заявок
• Усечение полей под лимиты БД, идемпотентная перегенерация по slug
• Логирование фронтенд-ошибок с троттлингом в админку

🛠 Админ-панель

• Отдельная панель управления контентом, блогом и заявками
• Локаль-табы при редактировании, статусы draft/published
• Frontend-логи ошибок, настройки и сервисные операции

📦 DevOps и деплой

• Статичный фронт + бэкенд на VPS, CI с автодеплоем по push
• Healthcheck после деплоя, бэкапы базы
• Раздельные окружения (dev / прод), переменные окружения без секретов в коде