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>

);

};

Available for projects · RU/EN

Quiet, thoughtful code for your business.

We are experts in custom web development! We create fast, modern SEO-ready websites, mobile and web apps, CRMs, and AI automation.

20+ years

in IT

3 days

to first release

~15 min

average reply

click terminal!

mangust-shell · bash

Selected work

A few projects we're proud to share.

potolok_crm.go/dashboard.tsx

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

Potolok CRM

Internal product for a stretch-ceiling company: orders, fitters, inventory.

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

Read case →

cadastral_map.tsx/index.css

Лендинг · React2026

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

Property sales site for Nastasino with an interactive cadastral map.

ReactViteTailwindКарта

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

Read case →

All work →

Tech stack

The tools we build with.

— Frontend · Backend · Databases

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

Our Advantages

Why Choose Us

// 01 — Speed

Fast Start and Release

We deliver the first releases in 3 days. This gives you a fast time-to-market to test hypotheses and get sales, without stretching the project for months.

// 02 — Tech

Stack That Flies

We develop on React and Next.js. No slow website builders — you get lightweight and fast sites that rank and perform exceptionally in SEO.

// 03 — Quality

Industry Leaders' Standards

We write code following the best practices of tech giants. You get robust architecture and clear processes at a fair price with no hidden costs.

Pricing

Services Cost

Websites

Landing pagefrom $200
Business card sitefrom $400
Online storefrom $800

Applications

Botfrom $200
Appfrom $400
CRMfrom $1,000

Promotion

SEOfrom $150*
AEOfrom $400*
GEOfrom $400*

* advertising budget is not included in the price

IT infrastructure

Servers, networks and workstations with a coordinated support plan.

IT administration, network configuration, server racks and LAN cabling. Remote tasks are handled online; installation is available in Perm.

IT Administration & Outsourcing

Linux and Windows servers, workstations, backups and ongoing support for company services.

Scope and details

Cisco, MikroTik & VPN Networks

Routing, VLANs, Wi-Fi, office connectivity and employee remote access to company resources.

Scope and details

Server Racks & Structured Cabling

Installation in Perm: cabling, server racks, network cabinets, labelling and connection checks.

Scope and details

All services are priced by agreed estimate.

LAN, cabling and VPN projects

Approach

Meaning first, then code.

We don't make «just a pretty site». We make a product that leads users to action — and we do it carefully, without noise or hype.

Human-led · AI-accelerated

We work with AI as a partner, not as autopilot. Architecture, prototypes, and quality control stay with humans — AI accelerates code, drafts, and exploring options. We use the best tools on the market and keep our finger on the pulse. That gives speed: MVPs in days, not weeks.

Twenty-plus years in IT taught us the main thing: architecture must hold under load, copy must sell, and integrations must work like clockwork.

commit 01

Brief and goals

Human

We dive into the product and audience. We fix the KPIs.

commit 02

Architecture and prototype

Human

Screen structure and user scenarios. The architect makes the calls.

commit 03

Design and copy

Both

AI generates options, humans pick and polish.

commit 04

Development

AI-accelerated

We code with AI assistants. Every decision goes through review.

commit 05

Launch

Human

Testing, performance tuning, deployment.

commit 06

Support

Both

Tweaks, growth, the next release.

Human — decision and controlAI — accelerationBoth — hybrid

/* Client voices */

«They built exactly what the business needed: a clear structure, understandable blocks, an accurate design. After launch it became easier to close clients.»

NikolayBusiness owner · 2025

Journal

What we write between releases.

All posts →

[2026-09-10]post.md

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

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

Read →

[2026-09-10]post.md

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

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

Read →

[2026-09-10]post.md

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

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

Read →

Contact

Tell us about your project — we'll reply within a day.

Server status: live

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