import React, { useState, useEffect, useRef } from 'react';

import { motion } from 'framer-motion';

import { useTranslation } from 'react-i18next';

// Initialize cyber-cozy warm coder studio hero

export const Hero = ({ id = 'hero', city = null }) => {

const { t } = useTranslation();

const containerRef = useRef(null);

const [isHovered, setIsHovered] = useState(false);

const handleMouseMove = (e) => {

const rect = containerRef.current.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

containerRef.current.style.setProperty('--mouse-x', `${x}px`);

containerRef.current.style.setProperty('--mouse-y', `${y}px`);

};

return (

<section

ref={containerRef}

onMouseMove={handleMouseMove}

onMouseEnter={() => setIsHovered(true)}

onMouseLeave={() => setIsHovered(false)}

className="relative overflow-hidden bg-grid-pattern"

{/* Ambient Background Orbs */}

{/* Interactive Code Reveal Background */}

<div className="code-reveal-layer" style={{

maskImage: 'radial-gradient(circle 180px, black, transparent)'

}}>

</div>

<h1>Спокойный, умный код для бизнеса</h1>

<p>Делаем сайты, которые решают бизнес-задачи</p>

</div>

</section>

);

};

import React, { useState, useEffect, useRef } from 'react';

import { motion } from 'framer-motion';

import { useTranslation } from 'react-i18next';

// Initialize cyber-cozy warm coder studio hero

export const Hero = ({ id = 'hero', city = null }) => {

const { t } = useTranslation();

const containerRef = useRef(null);

const [isHovered, setIsHovered] = useState(false);

const handleMouseMove = (e) => {

const rect = containerRef.current.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

containerRef.current.style.setProperty('--mouse-x', `${x}px`);

containerRef.current.style.setProperty('--mouse-y', `${y}px`);

};

return (

<section

ref={containerRef}

onMouseMove={handleMouseMove}

onMouseEnter={() => setIsHovered(true)}

onMouseLeave={() => setIsHovered(false)}

className="relative overflow-hidden bg-grid-pattern"

{/* Ambient Background Orbs */}

{/* Interactive Code Reveal Background */}

<div className="code-reveal-layer" style={{

maskImage: 'radial-gradient(circle 180px, black, transparent)'

}}>

</div>

<h1>Спокойный, умный код для бизнеса</h1>

<p>Делаем сайты, которые решают бизнес-задачи</p>

</div>

</section>

);

};

import React, { useState, useEffect, useRef } from 'react';

import { motion } from 'framer-motion';

import { useTranslation } from 'react-i18next';

// Initialize cyber-cozy warm coder studio hero

export const Hero = ({ id = 'hero', city = null }) => {

const { t } = useTranslation();

const containerRef = useRef(null);

const [isHovered, setIsHovered] = useState(false);

const handleMouseMove = (e) => {

const rect = containerRef.current.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

containerRef.current.style.setProperty('--mouse-x', `${x}px`);

containerRef.current.style.setProperty('--mouse-y', `${y}px`);

};

return (

<section

ref={containerRef}

onMouseMove={handleMouseMove}

onMouseEnter={() => setIsHovered(true)}

onMouseLeave={() => setIsHovered(false)}

className="relative overflow-hidden bg-grid-pattern"

{/* Ambient Background Orbs */}

{/* Interactive Code Reveal Background */}

<div className="code-reveal-layer" style={{

maskImage: 'radial-gradient(circle 180px, black, transparent)'

}}>

</div>

<h1>Спокойный, умный код для бизнеса</h1>

<p>Делаем сайты, которые решают бизнес-задачи</p>

</div>

</section>

);

};

import React, { useState, useEffect, useRef } from 'react';

import { motion } from 'framer-motion';

import { useTranslation } from 'react-i18next';

// Initialize cyber-cozy warm coder studio hero

export const Hero = ({ id = 'hero', city = null }) => {

const { t } = useTranslation();

const containerRef = useRef(null);

const [isHovered, setIsHovered] = useState(false);

const handleMouseMove = (e) => {

const rect = containerRef.current.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

containerRef.current.style.setProperty('--mouse-x', `${x}px`);

containerRef.current.style.setProperty('--mouse-y', `${y}px`);

};

return (

<section

ref={containerRef}

onMouseMove={handleMouseMove}

onMouseEnter={() => setIsHovered(true)}

onMouseLeave={() => setIsHovered(false)}

className="relative overflow-hidden bg-grid-pattern"

{/* Ambient Background Orbs */}

{/* Interactive Code Reveal Background */}

<div className="code-reveal-layer" style={{

maskImage: 'radial-gradient(circle 180px, black, transparent)'

}}>

</div>

<h1>Спокойный, умный код для бизнеса</h1>

<p>Делаем сайты, которые решают бизнес-задачи</p>

</div>

</section>

);

};

Свободны для проектов · RU/EN

Спокойный, умный код для вашего бизнеса.

Мы — эксперты в заказной веб-разработке! Создаем быстрые и современные сайты под SEO, мобильные и веб-приложения, CRM и AI-автоматизации.

20+ лет

в IT

3 дня

до первого релиза

~15 мин

средний ответ

кликни терминал!

mangust-shell · bash

Избранные работы

Несколько проектов, которые мы рады показать.

potolok_crm.go/dashboard.tsx

CRM · Go + Next.js2026 · Внутренний продукт

Potolok CRM

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

GoNext.jsPostgreSQLKanbanАналитика

Читать кейс →

cadastral_map.tsx/index.css

Лендинг · React2026

Настасьино-парк

Сайт по продаже участков в Настасьино с интерактивной кадастровой картой.

ReactViteTailwindКарта

Настасьино-парк — лендинг с кадастровой картой

Читать кейс →

Все работы →

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

Инструменты, на которых мы строим.

— Frontend · Backend · Базы данных

React

Next.js

TypeScript

JavaScript

Tailwind

Vite

Node.js

Python

PostgreSQL

HTML5

CSS3

React

Next.js

TypeScript

JavaScript

Tailwind

Vite

Node.js

Python

PostgreSQL

HTML5

CSS3

Наши преимущества

Почему выбирают нас

// 01 — Скорость

Быстрый старт и запуск

Делаем первые релизы от 3 дней. Это дает вам быстрый выход к клиентам для тестирования гипотез и первых продаж, не растягивая проект на месяцы.

// 02 — Технологии

Стек, который летает

Разрабатываем на React и Next.js. Никаких медленных конструкторов — вы получаете легкие и быстрые сайты, которые отлично продвигаются в SEO.

// 03 — Качество

Стандарты лидеров, честная цена

Пишем код по стандартам ведущих IT-компаний. Вы получаете надежную архитектуру и прозрачные процессы по адекватному ценнику без скрытых переплат.

Цены

Стоимость услуг

Сайты

Лендингот 15 000 рублей
Визиткаот 30 000 рублей
Интернет-магазинот 60 000 рублей

Приложения

Ботот 15 000 рублей
Приложениеот 30 000 рублей
CRMот 80 000 рублей

Продвижение

SEOот 10 000 рублей*
AEOот 30 000 рублей*
GEOот 30 000 рублей*

* рекламный бюджет не входит в цену

IT-инфраструктура

Серверы, сети и рабочие места — в одном плане поддержки.

Помогаем с администрированием и настройкой сетей, собираем серверные и прокладываем ЛВС. Удалённые задачи решаем дистанционно, монтаж выполняем в Перми.

Администрирование и IT-аутсорс

Серверы Linux и Windows, рабочие места, резервные копии и сопровождение сервисов компании.

Состав работ и условия

Сети Cisco, MikroTik и VPN

Маршрутизация, VLAN, Wi-Fi, связь офисов и удалённый доступ сотрудников к ресурсам компании.

Состав работ и условия

Монтаж ЛВС, СКС и серверных

Монтаж в Перми: кабельные трассы, серверные стойки, коммутационные шкафы, маркировка и проверка линий.

Состав работ и условия

Стоимость каждого направления — по согласованной смете.

Кейсы по ЛВС, СКС и VPN

Подход

Сначала смысл, потом код.

Мы не делаем «просто красивый сайт». Мы делаем продукт, который ведёт пользователя к действию — и делаем это аккуратно, без перегруза и без хайпа.

Human-led · AI-accelerated

С AI работаем как с партнёром, не как с автопилотом. Архитектура, прототипы и контроль качества остаются за людьми — AI ускоряет код, перебор вариантов и черновики. Используем лучшее, что есть на рынке, и держим руку на пульсе. Это даёт скорость: MVP за дни, а не за недели.

За 20+ лет в IT мы поняли главное: архитектура должна выдерживать нагрузку, тексты — продавать, а интеграции — работать как часы.

commit 01

Бриф и цели

Human

Погружаемся в продукт и аудиторию. Фиксируем KPI.

commit 02

Архитектура и прототип

Human

Структура экранов и сценарии. Решения принимает архитектор.

commit 03

Дизайн и тексты

Both

AI генерит варианты, человек выбирает и шлифует.

commit 04

Разработка

AI-accelerated

Код пишем с AI-ассистентами. Каждое решение — на ревью.

commit 05

Запуск

Human

Тестирование, оптимизация скорости, релиз на домен.

commit 06

Поддержка

Both

Правки, рост, следующий релиз.

Human — решение и контрольAI — ускорениеBoth — гибрид

/* Отзывы клиентов */

«Сделали именно то, что нужно бизнесу: чёткая структура, понятные блоки, аккуратный дизайн. После запуска стало проще закрывать клиентов в сделку.»

НиколайВладелец бизнеса · 2025

Журнал

Что мы пишем между релизами.

Все посты →

[2026-09-10]post.md

Что входит в IT-аутсорсинг компании: компьютеры, серверы, сеть и 1С

Как согласовать обслуживание IT-инфраструктуры: состав работ, границы ответственности, порядок обращений и данные для расчёта сметы. Для компаний в Перми и удалённой поддержки.

Читать →

[2026-09-10]post.md

Сколько стоит монтаж ЛВС и СКС в Перми: из чего складывается смета

Кабельные трассы, розетки, патч-панели, шкафы и проверки: какие сведения нужны для оценки монтажа. Три выполненных проекта с известным составом работ и стоимостью.

Читать →

[2026-09-10]post.md

VPN между офисами: как подготовиться к настройке Cisco и MikroTik

Чек-лист для руководителя и системного администратора: сервисы, адресация, интернет-каналы, оборудование, доступы и приёмка межофисного VPN.

Читать →

Контакт

Расскажите о проекте — ответим в течение дня.

Server status: live

$ curl -s t.me/mangust59@mangust59→$ mail officeoffice@mangust.dev→