UTC.Архитекторы Бизнеса. Битрикс24

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
<meta name="theme-color" content="#0E1A26">
<title>UTC — Внедрение Битрикс24</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--indigo-dark:#0E1A26;--sand:#C2A27F;--terracotta:#9E5B3E;--white:#FFFFFF;--font-primary:'Inter',sans-serif;--font-display:'Space Grotesk',sans-serif}
body{background:var(--indigo-dark);color:var(--white);font-family:var(--font-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.hero{
position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;
justify-content:flex-start;overflow:hidden;padding:60px 10px 20px;
background:radial-gradient(circle at 50% 30%,rgba(158,91,62,0.06) 0%,transparent 50%)
}
.hero::before{
content:"";position:absolute;top:0;left:0;width:100%;height:100%;
background-image:repeating-linear-gradient(0deg,rgba(194,162,127,0.015) 0px,rgba(194,162,127,0.015) 1px,transparent 1px,transparent 3px),
repeating-linear-gradient(90deg,rgba(158,91,62,0.015) 0px,rgba(158,91,62,0.015) 1px,transparent 1px,transparent 3px);
background-size:60px 60px;z-index:1
}
.bpmn-container{position:absolute;top:30px;left:0;width:100%;height:calc(100% - 30px);z-index:3;opacity:0.85}
.bpmn-container svg{width:100%;height:100%}
.bpmn-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(14,26,38,0.25);z-index:5;pointer-events:none}

.hero-top{
position:relative;z-index:20;text-align:center;width:100%;max-width:600px;
padding:8px 12px;background:rgba(14,26,38,0.85);backdrop-filter:blur(8px);
border-radius:10px;border:1px solid rgba(194,162,127,0.15);margin-bottom:4px
}
.hero-label{color:var(--terracotta);text-transform:uppercase;letter-spacing:0.2rem;font-size:0.65rem;font-weight:600;margin-bottom:0.2rem;font-family:var(--font-display)}
.hero h1{font-family:var(--font-display);font-size:clamp(1.2rem,3.5vw,1.8rem);font-weight:700;line-height:1.1;margin-bottom:0.2rem;color:#FFFFFF!important;text-shadow:0 0 15px rgba(79,195,247,0.5),0 2px 10px rgba(0,0,0,0.9)!important}
.hero h1 .cursor{display:inline-block;width:2px;height:0.6em;background:#4FC3F7;margin-left:2px;animation:blink 0.8s infinite;vertical-align:text-bottom}
.hero-subtitle{font-size:0.65rem;max-width:380px;margin:0 auto;line-height:1.2;color:#E2E8F0!important;font-weight:500}
.hero-subtitle .cursor{display:inline-block;width:2px;height:0.8em;background:#4FC3F7;margin-left:2px;animation:blink 0.8s infinite;vertical-align:text-bottom}

.bitrix-module{cursor:pointer;transition:all 0.3s ease}
.bitrix-module rect{transition:fill 0.3s ease,stroke 0.3s ease,filter 0.3s ease}
.bitrix-module text{transition:fill 0.3s ease,font-weight 0.3s ease;font-size:7px}
.bitrix-module:hover rect{fill:rgba(79,195,247,0.2)!important;stroke:#4FC3F7!important;stroke-width:1.5!important;filter:drop-shadow(0 0 4px rgba(79,195,247,0.5))}
.bitrix-module:hover text{fill:#FFFFFF!important;font-weight:700!important}

.info{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.4);font-size:8px;background:rgba(14,26,38,0.5);padding:3px 8px;border-left:2px solid var(--terracotta);z-index:30;border-radius:3px;white-space:nowrap}

@media(max-width:768px){
.hero{padding:50px 4px 15px}
.hero-top{padding:6px 8px}
.hero h1{font-size:1rem}
.hero-subtitle{font-size:0.55rem}
.bpmn-container{opacity:0.5;top:20px;height:calc(100% - 20px)}
.bitrix-module text{font-size:5px}
}
</style>
</head>
<body>
<div class="hero">
<div class="bpmn-container">
<svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">
<defs>
<filter id="activeGlow"><feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<filter id="softGlow"><feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<filter id="greenGlow"><feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<radialGradient id="dotGlowBlue"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="20%" stop-color="#4FC3F7" stop-opacity="0.95"/><stop offset="60%" stop-color="#4FC3F7" stop-opacity="0.3"/><stop offset="100%" stop-color="#4FC3F7" stop-opacity="0"/></radialGradient>
<radialGradient id="dotGlowRed"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="20%" stop-color="#F4A89A" stop-opacity="0.95"/><stop offset="60%" stop-color="#E8927D" stop-opacity="0.3"/><stop offset="100%" stop-color="#9E5B3E" stop-opacity="0"/></radialGradient>
<linearGradient id="trailBlue"><stop offset="0%" stop-color="#4FC3F7" stop-opacity="0"/><stop offset="40%" stop-color="#4FC3F7" stop-opacity="0.5"/><stop offset="100%" stop-color="#4FC3F7" stop-opacity="0"/></linearGradient>
<linearGradient id="trailRed"><stop offset="0%" stop-color="#E8927D" stop-opacity="0"/><stop offset="40%" stop-color="#E8927D" stop-opacity="0.5"/><stop offset="100%" stop-color="#E8927D" stop-opacity="0"/></linearGradient>
</defs>



<g stroke="#4FC3F7" stroke-width="2" fill="none" opacity="0.5">
<line x1="120" y1="70" x2="348" y2="240"/> 
<line x1="120" y1="150" x2="348" y2="280"/> 
<line x1="120" y1="230" x2="348" y2="320"/> 
<line x1="120" y1="310" x2="348" y2="360"/> 
<line x1="120" y1="390" x2="348" y2="400"/> 
<line x1="120" y1="470" x2="348" y2="440"/> 
</g>

<g stroke="#E8927D" stroke-width="2" fill="none" opacity="0.6">

<line x1="748" y1="300" x2="838" y2="250"/>

<line x1="840" y1="280" x2="752" y2="350"/>

<line x1="550" y1="568" x2="550" y2="618"/>

<line x1="950" y1="398" x2="720" y2="618"/>
</g>


<g filter="url(#softGlow)">
<rect x="20" y="45" width="100" height="40" rx="6" fill="rgba(26,46,64,0.95)" stroke="#9E5B3E" stroke-width="1.2"/><text x="70" y="69" text-anchor="middle" fill="white" font-size="9">🌐 Сайт</text>
<rect x="20" y="125" width="100" height="40" rx="6" fill="rgba(26,46,64,0.95)" stroke="#9E5B3E" stroke-width="1.2"/><text x="70" y="149" text-anchor="middle" fill="white" font-size="9">📞 Звонки</text>
<rect x="20" y="205" width="100" height="45" rx="6" fill="rgba(26,46,64,0.95)" stroke="#4FC3F7" stroke-width="1.2"/><text x="70" y="225" text-anchor="middle" fill="white" font-size="8">WhatsApp</text><text x="70" y="240" text-anchor="middle" fill="white" font-size="8">Telegram</text>
<rect x="20" y="285" width="100" height="45" rx="6" fill="rgba(26,46,64,0.95)" stroke="#9E5B3E" stroke-width="1.2"/><text x="70" y="305" text-anchor="middle" fill="white" font-size="8">ВКонтакте</text><text x="70" y="320" text-anchor="middle" fill="white" font-size="8">Авито</text>
<rect x="20" y="365" width="100" height="40" rx="6" fill="rgba(26,46,64,0.95)" stroke="#9E5B3E" stroke-width="1.2"/><text x="70" y="389" text-anchor="middle" fill="white" font-size="9">📧 Почта</text>
<rect x="20" y="445" width="100" height="40" rx="6" fill="rgba(26,46,64,0.95)" stroke="#9E5B3E" stroke-width="1.2"/><text x="70" y="469" text-anchor="middle" fill="white" font-size="9">📌 Прочее</text>
</g>


<rect x="350" y="150" width="400" height="420" rx="20" fill="rgba(26,46,64,0.97)" stroke="#C2A27F" stroke-width="3" filter="url(#softGlow)" id="bitrix"/>
<text x="550" y="192" text-anchor="middle" fill="#C2A27F" font-family="Space Grotesk,sans-serif" font-size="18" font-weight="700">БИТРИКС24</text>
<text x="550" y="218" text-anchor="middle" fill="white" font-size="11">Единое цифровое пространство</text>
<line x1="380" y1="236" x2="720" y2="236" stroke="rgba(194,162,127,0.3)" stroke-width="1.2"/>


<g class="bitrix-module" oncl ick="alert('CRM и продажи')"><rect x="370" y="250" width="170" height="24" rx="4" fill="rgba(79,195,247,0.1)" stroke="#4FC3F7" stroke-width="0.7"/><text x="455" y="265" text-anchor="middle" fill="white">📊 CRM · Воронка · Сделки · Склад</text></g>
<g class="bitrix-module" oncl ick="alert('Задачи и проекты')"><rect x="555" y="250" width="180" height="24" rx="4" fill="rgba(158,91,62,0.15)" stroke="#9E5B3E" stroke-width="0.7"/><text x="645" y="265" text-anchor="middle" fill="white">📋 Задачи · Проекты · Канбан · Гант</text></g>
<g class="bitrix-module" oncl ick="alert('Коммуникации')"><rect x="370" y="280" width="170" height="24" rx="4" fill="rgba(158,91,62,0.15)" stroke="#9E5B3E" stroke-width="0.7"/><text x="455" y="295" text-anchor="middle" fill="white">💬 Чат · Видеозвонки · Откр. линии</text></g>
<g class="bitrix-module" oncl ick="alert('Диск и документы')"><rect x="555" y="280" width="180" height="24" rx="4" fill="rgba(79,195,247,0.1)" stroke="#4FC3F7" stroke-width="0.7"/><text x="645" y="295" text-anchor="middle" fill="white">📁 Диск · Документы · Права</text></g>
<g class="bitrix-module" oncl ick="alert('Телефония')"><rect x="370" y="310" width="170" height="24" rx="4" fill="rgba(79,195,247,0.1)" stroke="#4FC3F7" stroke-width="0.7"/><text x="455" y="325" text-anchor="middle" fill="white">📞 Телефония · Мессенджеры</text></g>
<g class="bitrix-module" oncl ick="alert('BI и аналитика')"><rect x="555" y="310" width="180" height="24" rx="4" fill="rgba(158,91,62,0.15)" stroke="#9E5B3E" stroke-width="0.7"/><text x="645" y="325" text-anchor="middle" fill="white">📈 BI · Сквозная аналитика</text></g>
<g class="bitrix-module" oncl ick="alert('Автоматизация')"><rect x="370" y="340" width="170" height="24" rx="4" fill="rgba(158,91,62,0.15)" stroke="#9E5B3E" stroke-width="0.7"/><text x="455" y="355" text-anchor="middle" fill="white">🤖 Автоматизация · RPA</text></g>
<g class="bitrix-module" oncl ick="alert('AI · CoPilot')"><rect x="555" y="340" width="180" height="24" rx="4" fill="rgba(79,195,247,0.15)" stroke="#4FC3F7" stroke-width="1"/><text x="645" y="355" text-anchor="middle" fill="#4FC3F7" font-weight="600">🧠 AI · CoPilot (BitrixGPT)</text></g>
<g class="bitrix-module" oncl ick="alert('Интеграции')"><rect x="370" y="370" width="360" height="24" rx="4" fill="rgba(79,195,247,0.1)" stroke="#4FC3F7" stroke-width="0.7"/><text x="550" y="385" text-anchor="middle" fill="white">🔄 Интеграции · 1С · API · Вебхуки</text></g>
<g class="bitrix-module" oncl ick="alert('HR и КЭДО')"><rect x="370" y="400" width="170" height="24" rx="4" fill="rgba(158,91,62,0.15)" stroke="#9E5B3E" stroke-width="0.7"/><text x="455" y="415" text-anchor="middle" fill="white">👥 HR · КЭДО · Структура</text></g>
<g class="bitrix-module" oncl ick="alert('Маркетинг')"><rect x="555" y="400" width="180" height="24" rx="4" fill="rgba(79,195,247,0.1)" stroke="#4FC3F7" stroke-width="0.7"/><text x="645" y="415" text-anchor="middle" fill="white">📣 Маркетинг · Рассылки</text></g>
<g class="bitrix-module" oncl ick="alert('Сайты и магазины')"><rect x="370" y="430" width="360" height="24" rx="4" fill="rgba(158,91,62,0.15)" stroke="#9E5B3E" stroke-width="0.7"/><text x="550" y="445" text-anchor="middle" fill="white">🏢 Сайты · Магазины · Лендинги</text></g>


<rect x="840" y="180" width="280" height="220" rx="14" fill="rgba(34,197,94,0.08)" stroke="#22C55E" stroke-width="2.5" filter="url(#greenGlow)" id="bi"/>
<text x="980" y="218" text-anchor="middle" fill="#22C55E" font-family="Space Grotesk,sans-serif" font-size="15" font-weight="700">BI-АНАЛИТИКА</text>
<line x1="860" y1="232" x2="1100" y2="232" stroke="rgba(34,197,94,0.3)" stroke-width="1"/>
<text x="980" y="258" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">📊 Воронка продаж</text>
<text x="980" y="278" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">📈 Конверсия менеджеров</text>
<text x="980" y="298" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">⏱️ Скорость сделки</text>
<text x="980" y="318" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">💵 ROI по каналам</text>
<text x="980" y="338" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">📋 План/факт</text>
<text x="980" y="358" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">👥 Эффективность отделов</text>


<rect x="380" y="600" width="340" height="130" rx="14" fill="rgba(26,46,64,0.95)" stroke="#C2A27F" stroke-width="2.5" filter="url(#softGlow)" id="integrations"/>
<text x="550" y="638" text-anchor="middle" fill="#C2A27F" font-family="Space Grotesk,sans-serif" font-size="14" font-weight="700">ИНТЕГРАЦИИ</text>
<line x1="400" y1="650" x2="700" y2="650" stroke="rgba(194,162,127,0.3)" stroke-width="1"/>
<text x="550" y="670" text-anchor="middle" fill="rgba(255,255,255,0.8)" font-size="8">🔄 1С: Бухгалтерия · ЗУП · УТ · ERP</text>
<text x="550" y="688" text-anchor="middle" fill="rgba(255,255,255,0.8)" font-size="8">📝 КЭДО · Электронные подписи · HR</text>
<text x="550" y="706" text-anchor="middle" fill="rgba(255,255,255,0.8)" font-size="8">📞 Mango · SIPUNI · Wazzup24 · Roistat</text>


<circle cx="550" cy="400" r="6" fill="url(#dotGlowRed)" id="movingDot" opacity="0"/>
<path d="" stroke="url(#trailRed)" stroke-width="3" fill="none" id="beamPath" stroke-linecap="round" opacity="0"/>


<g><circle cx="70" cy="70" r="5" fill="url(#dotGlowBlue)" filter="url(#activeGlow)" id="d0"><animate attributeName="cx" from="70" to="348" dur="1.6s" repeatCount="indefinite"/><animate attributeName="cy" from="70" to="240" dur="1.6s" repeatCount="indefinite"/></circle><path d="" stroke="url(#trailBlue)" stroke-width="3" fill="none" id="t0" opacity="0"/></g>
<g><circle cx="70" cy="150" r="5" fill="url(#dotGlowBlue)" filter="url(#activeGlow)" id="d1"><animate attributeName="cx" from="70" to="348" dur="1.9s" repeatCount="indefinite"/><animate attributeName="cy" from="150" to="280" dur="1.9s" repeatCount="indefinite"/></circle><path d="" stroke="url(#trailBlue)" stroke-width="3" fill="none" id="t1" opacity="0"/></g>
<g><circle cx="70" cy="230" r="5" fill="url(#dotGlowBlue)" filter="url(#activeGlow)" id="d2"><animate attributeName="cx" from="70" to="348" dur="1.4s" repeatCount="indefinite"/><animate attributeName="cy" from="230" to="320" dur="1.4s" repeatCount="indefinite"/></circle><path d="" stroke="url(#trailBlue)" stroke-width="3" fill="none" id="t2" opacity="0"/></g>
<g><circle cx="70" cy="310" r="5" fill="url(#dotGlowBlue)" filter="url(#activeGlow)" id="d3"><animate attributeName="cx" from="70" to="348" dur="2.1s" repeatCount="indefinite"/><animate attributeName="cy" from="310" to="360" dur="2.1s" repeatCount="indefinite"/></circle><path d="" stroke="url(#trailBlue)" stroke-width="3" fill="none" id="t3" opacity="0"/></g>
<g><circle cx="70" cy="390" r="5" fill="url(#dotGlowBlue)" filter="url(#activeGlow)" id="d4"><animate attributeName="cx" from="70" to="348" dur="1.7s" repeatCount="indefinite"/><animate attributeName="cy" from="390" to="400" dur="1.7s" repeatCount="indefinite"/></circle><path d="" stroke="url(#trailBlue)" stroke-width="3" fill="none" id="t4" opacity="0"/></g>
<g><circle cx="70" cy="470" r="5" fill="url(#dotGlowBlue)" filter="url(#activeGlow)" id="d5"><animate attributeName="cx" from="70" to="348" dur="2.3s" repeatCount="indefinite"/><animate attributeName="cy" from="470" to="440" dur="2.3s" repeatCount="indefinite"/></circle><path d="" stroke="url(#trailBlue)" stroke-width="3" fill="none" id="t5" opacity="0"/></g>
</svg>
</div>
<div class="bpmn-overlay"></div>

<div class="hero-top">
<div class="hero-label">United Technologies Systems</div>
<h1><span id="titleText">Архитекторы вашего бизнеса</span><span class="cursor" id="titleCursor"></span></h1>
<div class="hero-subtitle"><span id="subtitleText">Проектируем и внедряем цифровую среду на базе Битрикс24</span><span class="cursor" id="subtitleCursor"></span></div>
</div>
<div class="info">Кликни на модуль внутри Битрикс24</div>
</div>

<script>
// Анимация красной точки
(function(){
var dot=document.getElementById('movingDot'),beam=document.getElementById('beamPath');
if(!dot||!beam)return;
var pts=[{x:550,y:380},{x:980,y:300},{x:550,y:665}],cur=0,next=1;
function anim(){
var a=pts[cur],b=pts[next];
var t0=performance.now(),dur=1800;
dot.style.opacity='1';beam.style.opacity='0.8';
function step(now){
var p=Math.min((now-t0)/dur,1),e=1-Math.pow(1-p,2);
var cx=a.x+(b.x-a.x)*e,cy=a.y+(b.y-a.y)*e;
var ex=a.x+(b.x-a.x)*Math.max(0,e-0.25),ey=a.y+(b.y-a.y)*Math.max(0,e-0.25);
dot.setAttribute('cx',cx.toFixed(1));dot.setAttribute('cy',cy.toFixed(1));
beam.setAttribute('d','M '+ex.toFixed(1)+' '+ey.toFixed(1)+' L '+cx.toFixed(1)+' '+cy.toFixed(1));
if(p<1)requestAnimationFrame(step);
else{cur=next;next=(next+1)%pts.length;setTimeout(function(){requestAnimationFrame(anim)},150)}
}requestAnimationFrame(step)
}dot.setAttribute('cx',pts[0].x);dot.setAttribute('cy',pts[0].y);
setTimeout(function(){requestAnimationFrame(anim)},600);

// Хвосты для голубых точек
var trails=[[70,240],[150,280],[230,320],[310,360],[390,400],[470,440]];
for(var i=0;i<6;i++){
(function(i){
var d=document.getElementById('d'+i),t=document.getElementById('t'+i);
if(!d||!t)return;
setInterval(function(){
var cx=parseFloat(d.getAttribute('cx')),cy=parseFloat(d.getAttribute('cy'));
if(isNaN(cx))return;
var sx=70,sy=trails[i][0],ex=348,ey=trails[i][1];
var rt=(cx-sx)/(ex-sx),hx=70+(348-70)*Math.max(0,rt-0.2),hy=sy+(ey-sy)*Math.max(0,rt-0.2);
t.setAttribute('d','M '+hx.toFixed(1)+' '+hy.toFixed(1)+' L '+cx.toFixed(1)+' '+cy.toFixed(1));
t.style.opacity='0.6';
},40);
})(i);
}
})();
</script>
</body>
</html>

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

🏛 Архитектурный проект

С нами вы получаете работающий инструмент продаж

Рост конверсии

Экономия времени

Прозрачность

Спокойствие

Кому мы помогаем

Боли

Решение

Боли

Решение

Боли

Решение

Путь архитектора

Рассчитайте ваш проект за 2 минуты

Калькулятор внедрения

Калькулятор поддержки

Схема интеграций

Подбор версии

Мы отвечаем за результат

Фиксация сметы

Соблюдение сроков

CRM, которой пользуются

Реальные проекты с цифрами

Частые вопросы

❓ У меня 5 сотрудников. Работаете с такими?

❓ А если у нас уже есть CRM, но она не работает?

❓ Чем вы отличаетесь от других интеграторов?

❓ А если сотрудники не примут CRM после внедрения?

❓ Сколько это стоит и какие гарантии?

Готовы навести порядок?

Контакты

Готовые пакеты

🚀 Базовый

⚡ Оптимальный

📊 BI

Калькулятор стоимости внедрения

Калькулятор техподдержки

Подбор версии

Кейсы внедрения Битрикс24

Блог

О компании

Миссия

Видение

Соберите свою IT-архитектуру

📋 Смета

Добавьте свои сервисы

Тариф

Запланировать аудит