516 lines
26 KiB
HTML
516 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>TeleConnect — интернет, ТВ и мобильная связь для дома и бизнеса</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Unbounded:wght@700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--ink:#0F1218;--green:#22C55E;--green-dark:#16A34A;--green-light:#DCFCE7;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.section{padding:80px 0}
|
||
.section h2{font:700 36px/1.15 'Unbounded',sans-serif;margin-bottom:24px;text-align:center}
|
||
.section p.lead{font-size:20px;color:var(--gray-500);text-align:center;max-width:700px;margin:0 auto 48px}
|
||
|
||
/* Header */
|
||
header{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid var(--gray-100)}
|
||
.header-wrap{max-width:1140px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}
|
||
.logo{font:800 24px/1 'Unbounded',sans-serif;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
|
||
.logo span{color:var(--green)}
|
||
nav{display:flex;gap:32px}
|
||
nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;transition:color 0.2s}
|
||
nav a:hover{color:var(--green)}
|
||
.mobile-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer}
|
||
@media(max-width:768px){nav{display:none}.mobile-toggle{display:block}}
|
||
|
||
/* Hero */
|
||
.hero{background:linear-gradient(135deg,var(--white) 0%,var(--green-light) 100%);color:var(--ink);padding:160px 24px 100px;text-align:center;position:relative;overflow:hidden}
|
||
.hero::before{content:"";position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,var(--green) 0%,transparent 70%);opacity:0.1;border-radius:50%;animation:pulse 4s ease-in-out infinite}
|
||
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
|
||
.hero h1{font:800 clamp(36px,6vw,56px)/1.05 'Unbounded',sans-serif;margin-bottom:24px;color:var(--green-dark);position:relative;z-index:1}
|
||
.hero p{font-size:20px;color:var(--gray-500);max-width:600px;margin:0 auto 40px;position:relative;z-index:1}
|
||
.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
|
||
.hero-image{max-width:800px;margin:60px auto 0;border-radius:16px;box-shadow:0 20px 60px rgba(34,197,94,0.2);position:relative;z-index:1}
|
||
.btn{display:inline-block;padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s}
|
||
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,197,94,0.3)}
|
||
.btn-primary{background:var(--green);color:var(--white)}
|
||
.btn-secondary{background:transparent;color:var(--green);border:2px solid var(--green)}
|
||
|
||
/* Tariffs */
|
||
.tariffs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:48px}
|
||
.tariff-card{background:#fff;border-radius:16px;padding:40px 32px;position:relative;transition:transform 0.3s,box-shadow 0.3s;border:1px solid var(--gray-100);overflow:hidden}
|
||
.tariff-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),var(--cyan));opacity:0;transition:opacity 0.3s}
|
||
.tariff-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(34,197,94,0.15)}
|
||
.tariff-card:hover::before{opacity:1}
|
||
.tariff-card.popular{border:2px solid var(--green);background:var(--green-light)}
|
||
.tariff-card.popular::before{content:"Популярный";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:var(--white);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700}
|
||
.tariff-name{font:700 24px/1.3 'Unbounded',sans-serif;margin-bottom:8px;display:flex;align-items:center;gap:12px}
|
||
.tariff-icon{font-size:32px}
|
||
.tariff-speed{font-size:48px;font-weight:800;color:var(--green);line-height:1;margin-bottom:8px;position:relative;display:inline-block}
|
||
.tariff-speed::after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),transparent);border-radius:2px}
|
||
.tariff-speed span{font-size:18px;color:var(--gray-500)}
|
||
.tariff-price{font-size:28px;font-weight:700;margin-bottom:24px;color:var(--ink)}
|
||
.tariff-features{list-style:none;margin-bottom:32px}
|
||
.tariff-features li{padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.08);display:flex;align-items:center;gap:12px}
|
||
.tariff-features li:last-child{border-bottom:none}
|
||
.tariff-features li::before{content:"✓";color:var(--green);font-weight:800;font-size:18px}
|
||
.tariff-btn{display:block;width:100%;text-align:center;background:var(--green);color:var(--white);padding:16px;border-radius:8px;font-weight:700;text-decoration:none;transition:background 0.2s}
|
||
.tariff-btn:hover{background:var(--green-dark)}
|
||
|
||
/* B2B Section */
|
||
.b2b-section{background:var(--ink);color:var(--white)}
|
||
.b2b-section h2{color:var(--white)}
|
||
.b2b-section p.lead{color:#9aa3b2}
|
||
.b2b-card{background:linear-gradient(135deg,#1a1f2e 0%,#0f1218 100%);border:1px solid rgba(255,255,255,0.1)}
|
||
.b2b-card .tariff-name{color:var(--white)}
|
||
.b2b-card .tariff-price{color:var(--green)}
|
||
.b2b-card .tariff-features li{border-bottom-color:rgba(255,255,255,0.1)}
|
||
.b2b-card .tariff-btn{background:var(--green);color:var(--white)}
|
||
.b2b-card .tariff-btn:hover{background:var(--green-dark)}
|
||
|
||
/* Features */
|
||
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
|
||
.feature-card{text-align:center;padding:32px 24px}
|
||
.feature-icon{font-size:48px;margin-bottom:16px}
|
||
.feature-card h3{font:700 22px/1.3 'Unbounded',sans-serif;margin-bottom:12px}
|
||
.feature-card p{color:var(--gray-500)}
|
||
|
||
/* Form */
|
||
.form-section{background:var(--green-light)}
|
||
.form-wrap{max-width:500px;margin:0 auto}
|
||
.form-group{margin-bottom:20px}
|
||
.form-group label{display:block;font-weight:600;margin-bottom:8px}
|
||
.form-group input,.form-group select{width:100%;padding:14px 16px;border:1px solid var(--gray-100);border-radius:8px;font-size:16px;font-family:inherit}
|
||
.form-group input:focus,.form-group select:focus{outline:2px solid var(--green);border-color:transparent}
|
||
.form-submit{width:100%;background:var(--green);color:var(--white);padding:16px;border:none;border-radius:8px;font-size:17px;font-weight:700;cursor:pointer;transition:background 0.2s}
|
||
.form-submit:hover{background:var(--green-dark)}
|
||
|
||
/* Contacts */
|
||
.contacts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}
|
||
.contact-item{text-align:center}
|
||
.contact-icon{font-size:36px;margin-bottom:12px}
|
||
.contact-item h3{font:700 18px/1.3 'Unbounded',sans-serif;margin-bottom:8px}
|
||
.contact-item p{color:var(--gray-500)}
|
||
|
||
/* Footer */
|
||
footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
|
||
.footer-text{font-size:14px}
|
||
|
||
/* Reveal animation */
|
||
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
|
||
@media(max-width:768px){
|
||
.container{padding:48px 20px}
|
||
.section h2{font-size:28px}
|
||
.hero{padding:120px 20px 60px}
|
||
.tariff-card{padding:32px 24px}
|
||
.tariff-speed{font-size:36px}
|
||
}
|
||
</style>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📡</text></svg>">
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="header-wrap">
|
||
<a href="#" class="logo">Tele<span>Connect</span></a>
|
||
<nav>
|
||
<a href="#home">Главная</a>
|
||
<a href="#tariffs-b2c">Для дома</a>
|
||
<a href="#tariffs-b2b">Для бизнеса</a>
|
||
<a href="#features">Преимущества</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</nav>
|
||
<button class="mobile-toggle" onclick="document.querySelector('nav').style.display=document.querySelector('nav').style.display==='flex'?'none':'flex'">☰</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="home" class="hero">
|
||
<h1>Скоростной интернет<br>для дома и бизнеса</h1>
|
||
<p>Подключим за 24 часа. Стабильная связь, цифровое ТВ и мобильная связь в одном пакете. Выгодные тарифы для физических и юридических лиц.</p>
|
||
<div class="hero-buttons">
|
||
<a href="#tariffs-b2c" class="btn btn-primary">Выбрать тариф</a>
|
||
<a href="#form" class="btn btn-secondary">Оставить заявку</a>
|
||
</div>
|
||
<img src="https://picsum.photos/seed/telecom/800/450" alt="Telecom technology" class="hero-image reveal">
|
||
</section>
|
||
|
||
<section id="tariffs-b2c" class="section">
|
||
<div class="container">
|
||
<h2 class="reveal">Тарифы для дома</h2>
|
||
<p class="lead reveal">Интернет + ТВ + мобильная связь в одном пакете. Выгода до 35% при подключении тройного пакета.</p>
|
||
|
||
<div class="tariffs-grid">
|
||
<div class="tariff-card reveal">
|
||
<h3 class="tariff-name"><span class="tariff-icon">🏠</span>Стартовый</h3>
|
||
<div class="tariff-speed">300 <span>Мбит/с</span></div>
|
||
<div class="tariff-price">450 ₸/мес</div>
|
||
<ul class="tariff-features">
|
||
<li>Интернет до 300 Мбит/с</li>
|
||
<li>120 цифровых каналов</li>
|
||
<li>Мобильная связь: 10 ГБ + 300 мин</li>
|
||
<li>Wi-Fi роутер в аренду</li>
|
||
<li>Техподдержка 24/7</li>
|
||
</ul>
|
||
<a href="#form" class="tariff-btn" onclick="selectTariff('Стартовый 300')">Подключить</a>
|
||
</div>
|
||
|
||
<div class="tariff-card popular reveal">
|
||
<h3 class="tariff-name"><span class="tariff-icon">⭐</span>Оптимальный</h3>
|
||
<div class="tariff-speed">500 <span>Мбит/с</span></div>
|
||
<div class="tariff-price">650 ₸/мес</div>
|
||
<ul class="tariff-features">
|
||
<li>Интернет до 500 Мбит/с</li>
|
||
<li>200+ цифровых каналов + 3 месяца подписки</li>
|
||
<li>Мобильная связь: 30 ГБ + 500 мин + SMS</li>
|
||
<li>Двухдиапазонный Wi-Fi роутер</li>
|
||
<li>Приоритет в техподдержке</li>
|
||
<li>Антивирус в подарок</li>
|
||
</ul>
|
||
<a href="#form" class="tariff-btn" onclick="selectTariff('Оптимальный 500')">Подключить</a>
|
||
</div>
|
||
|
||
<div class="tariff-card reveal">
|
||
<h3 class="tariff-name"><span class="tariff-icon">🚀</span>Максимальный</h3>
|
||
<div class="tariff-speed">1000 <span>Мбит/с</span></div>
|
||
<div class="tariff-price">950 ₸/мес</div>
|
||
<ul class="tariff-features">
|
||
<li>Интернет до 1 Гбит/с</li>
|
||
<li>300+ каналов в 4K</li>
|
||
<li>Мобильная связь: безлимит + 1000 мин</li>
|
||
<li>Mesh-система для большой квартиры</li>
|
||
<li>Персональный менеджер</li>
|
||
<li>Игровой приоритет трафика</li>
|
||
<li>Облачное хранилище 1 ТБ</li>
|
||
</ul>
|
||
<a href="#form" class="tariff-btn" onclick="selectTariff('Максимальный 1000')">Подключить</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tariffs-b2b" class="section b2b-section">
|
||
<div class="container">
|
||
<h2 class="reveal">Тарифы для бизнеса</h2>
|
||
<p class="lead reveal">Выделенные каналы, статические IP-адреса и приоритетная поддержка для вашей компании.</p>
|
||
|
||
<div class="tariffs-grid">
|
||
<div class="tariff-card b2b-card reveal">
|
||
<h3 class="tariff-name"><span class="tariff-icon">🏢</span>Офис</h3>
|
||
<div class="tariff-speed">100 <span>Мбит/с</span></div>
|
||
<div class="tariff-price">15 000 ₸/мес</div>
|
||
<ul class="tariff-features">
|
||
<li>Выделенный канал до 100 Мбит/с</li>
|
||
<li>5 статических IP-адресов</li>
|
||
<li>Приоритизация трафика</li>
|
||
<li>Техподдержка 24/7</li>
|
||
<li>SLA 99.5%</li>
|
||
<li>Бесплатная настройка оборудования</li>
|
||
</ul>
|
||
<a href="#form" class="tariff-btn" onclick="selectTariff('Бизнес Офис 100')">Подключить</a>
|
||
</div>
|
||
|
||
<div class="tariff-card b2b-card popular reveal">
|
||
<h3 class="tariff-name"><span class="tariff-icon">💼</span>Корпоративный</h3>
|
||
<div class="tariff-speed">500 <span>Мбит/с</span></div>
|
||
<div class="tariff-price">45 000 ₸/мес</div>
|
||
<ul class="tariff-features">
|
||
<li>Выделенный канал до 500 Мбит/с</li>
|
||
<li>16 статических IP-адресов</li>
|
||
<li>Резервный канал связи</li>
|
||
<li>Персональный менеджер</li>
|
||
<li>SLA 99.9%</li>
|
||
<li>Мониторинг сети 24/7</li>
|
||
<li>Бесплатная миграция</li>
|
||
</ul>
|
||
<a href="#form" class="tariff-btn" onclick="selectTariff('Бизнес Корпоративный 500')">Подключить</a>
|
||
</div>
|
||
|
||
<div class="tariff-card b2b-card reveal">
|
||
<h3 class="tariff-name"><span class="tariff-icon">👑</span>Премиум</h3>
|
||
<div class="tariff-speed">1000 <span>Мбит/с</span></div>
|
||
<div class="tariff-price">85 000 ₸/мес</div>
|
||
<ul class="tariff-features">
|
||
<li>Выделенный канал до 1 Гбит/с</li>
|
||
<li>32 статических IP-адресов</li>
|
||
<li>Два резервных канала</li>
|
||
<li>Выделенная линия поддержки</li>
|
||
<li>SLA 99.95%</li>
|
||
<li>Индивидуальные условия</li>
|
||
<li>Аудит ИТ-инфраструктуры</li>
|
||
<li>Приоритет при авариях</li>
|
||
</ul>
|
||
<a href="#form" class="tariff-btn" onclick="selectTariff('Бизнес Премиум 1000')">Подключить</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features" class="section">
|
||
<div class="container">
|
||
<h2 class="reveal">Почему выбирают нас</h2>
|
||
<p class="lead reveal">Более 10 лет на рынке телеком-услуг. Нам доверяют более 50 000 абонентов.</p>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card reveal">
|
||
<img src="https://picsum.photos/seed/speed/120/120" alt="Скорость" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
|
||
<div class="feature-icon">🚀</div>
|
||
<h3>Высокая скорость</h3>
|
||
<p>Современное оборудование и оптоволокно до квартиры. Реальная скорость соответствует заявленной.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<img src="https://picsum.photos/seed/security/120/120" alt="Надёжность" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
|
||
<div class="feature-icon">🛡</div>
|
||
<h3>Надёжность</h3>
|
||
<p>Резервные каналы связи и гарантия доступности сети до 99.95% по договору SLA.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<img src="https://picsum.photos/seed/support/120/120" alt="Поддержка" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
|
||
<div class="feature-icon">💬</div>
|
||
<h3>Поддержка 24/7</h3>
|
||
<p>Операторы на связи круглосуточно. Среднее время решения проблемы — 15 минут.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<img src="https://picsum.photos/seed/savings/120/120" alt="Выгода" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
|
||
<div class="feature-icon">💰</div>
|
||
<h3>Выгодные цены</h3>
|
||
<p>Пакетные предложения экономят до 35%. Скидки пенсионерам и многодетным семьям.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<img src="https://picsum.photos/seed/installation/120/120" alt="Подключение" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3>Быстрое подключение</h3>
|
||
<p>Заявка обрабатывается за 1 час. Мастер подключит в удобное время, даже в выходные.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<img src="https://picsum.photos/seed/app/120/120" alt="Приложение" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
|
||
<div class="feature-icon">📱</div>
|
||
<h3>Удобный кабинет</h3>
|
||
<p>Управляйте услугами онлайн: баланс, тариф, детализация, приостановка связи.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:linear-gradient(135deg,var(--green-light) 0%,#fff 100%)">
|
||
<div class="container">
|
||
<h2 class="reveal">Наши клиенты довольны</h2>
|
||
<p class="lead reveal">Более 50 000 абонентов уже пользуются нашими услугами. Вот что они говорят о нас.</p>
|
||
|
||
<div class="tariffs-grid">
|
||
<div class="tariff-card reveal" style="text-align:center">
|
||
<img src="https://picsum.photos/seed/family1/400/300" alt="Семья Ивановых" style="width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:20px">
|
||
<h3 style="margin-bottom:8px">Семья Ивановых</h3>
|
||
<p style="color:var(--gray-500);margin-bottom:16px">г. Алматы, тариф "Оптимальный"</p>
|
||
<p style="font-style:italic">"Подключили интернет 6 месяцев назад — ни разу не подвёл! Дети смотрят мультики, я работаю из дома, муж играет онлайн — всё летает!"</p>
|
||
<div style="margin-top:16px;font-size:24px">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
|
||
<div class="tariff-card reveal" style="text-align:center">
|
||
<img src="https://picsum.photos/seed/business1/400/300" alt="Директор компании" style="width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:20px">
|
||
<h3 style="margin-bottom:8px">Алексей Петров</h3>
|
||
<p style="color:var(--gray-500);margin-bottom:16px">Директор ТОО "TechStart"</p>
|
||
<p style="font-style:italic">"Перевёл весь офис на тариф 'Корпоративный'. Стабильная связь, резервный канал спасал уже дважды. Рекомендую!"</p>
|
||
<div style="margin-top:16px;font-size:24px">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
|
||
<div class="tariff-card reveal" style="text-align:center">
|
||
<img src="https://picsum.photos/seed/student1/400/300" alt="Студентка" style="width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:20px">
|
||
<h3 style="margin-bottom:8px">Алия Керимова</h3>
|
||
<p style="color:var(--gray-500);margin-bottom:16px">Студентка, тариф "Стартовый"</p>
|
||
<p style="font-style:italic">"Для учёбы и сериалов идеально! Цена доступная, скорость отличная. Подругам уже посоветовала."</p>
|
||
<div style="margin-top:16px;font-size:24px">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:var(--ink);color:var(--white);text-align:center">
|
||
<div class="container">
|
||
<h2 class="reveal" style="color:var(--white)">TeleConnect в цифрах</h2>
|
||
<p class="lead reveal" style="color:#9aa3b2">Наши достижения за 10 лет работы</p>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;margin-top:48px">
|
||
<div class="reveal">
|
||
<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">50K+</div>
|
||
<div style="color:#9aa3b2;font-size:18px">Довольных клиентов</div>
|
||
</div>
|
||
<div class="reveal">
|
||
<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">99.9%</div>
|
||
<div style="color:#9aa3b2;font-size:18px">Доступность сети</div>
|
||
</div>
|
||
<div class="reveal">
|
||
<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">24/7</div>
|
||
<div style="color:#9aa3b2;font-size:18px">Поддержка</div>
|
||
</div>
|
||
<div class="reveal">
|
||
<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">15 мин</div>
|
||
<div style="color:#9aa3b2;font-size:18px">Среднее время решения</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="form" class="section form-section">
|
||
<div class="container">
|
||
<h2 class="reveal">Оставить заявку на подключение</h2>
|
||
<p class="lead reveal">Заполните форму — перезвоним в течение 15 минут, ответим на вопросы и подберём тариф.</p>
|
||
|
||
<div class="form-wrap reveal">
|
||
<form id="connection-form" onsubmit="submitForm(event)">
|
||
<div class="form-group">
|
||
<label for="name">Ваше имя</label>
|
||
<input type="text" id="name" name="name" placeholder="Иван Петров" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Телефон</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="+7 (___) ___-__-__" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="client-type">Тип подключения</label>
|
||
<select id="client-type" name="client-type" onchange="toggleTariffs()" required>
|
||
<option value="b2c">Для дома (физическим лицам)</option>
|
||
<option value="b2b">Для бизнеса (юридическим лицам)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tariff">Интересующий тариф</label>
|
||
<select id="tariff" name="tariff" required>
|
||
<optgroup label="Для дома" id="tariffs-b2c-select">
|
||
<option>Стартовый 300 — 450 ₸/мес</option>
|
||
<option>Оптимальный 500 — 650 ₸/мес</option>
|
||
<option>Максимальный 1000 — 950 ₸/мес</option>
|
||
</optgroup>
|
||
<optgroup label="Для бизнеса" id="tariffs-b2b-select" style="display:none">
|
||
<option>Бизнес Офис 100 — 15 000 ₸/мес</option>
|
||
<option>Бизнес Корпоративный 500 — 45 000 ₸/мес</option>
|
||
<option>Бизнес Премиум 1000 — 85 000 ₸/мес</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="address">Адрес подключения</label>
|
||
<input type="text" id="address" name="address" placeholder="Город, улица, дом, квартира" required>
|
||
</div>
|
||
<button type="submit" class="form-submit">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="section">
|
||
<div class="container">
|
||
<h2 class="reveal">Контакты</h2>
|
||
<p class="lead reveal">Свяжитесь с нами любым удобным способом.</p>
|
||
|
||
<div class="contacts-grid">
|
||
<div class="contact-item reveal">
|
||
<div class="contact-icon">📞</div>
|
||
<h3>Телефон</h3>
|
||
<p>700 123 45 67</p>
|
||
<p>Бесплатно по Казахстану</p>
|
||
</div>
|
||
<div class="contact-item reveal">
|
||
<div class="contact-icon">💬</div>
|
||
<h3>Мессенджеры</h3>
|
||
<p>WhatsApp / Telegram</p>
|
||
<p>+7 777 123 45 67</p>
|
||
</div>
|
||
<div class="contact-item reveal">
|
||
<div class="contact-icon">✉️</div>
|
||
<h3>Email</h3>
|
||
<p>info@teleconnect.kz</p>
|
||
<p>support@teleconnect.kz</p>
|
||
</div>
|
||
<div class="contact-item reveal">
|
||
<div class="contact-icon">📍</div>
|
||
<h3>Адрес</h3>
|
||
<p>г. Алматы, пр. Абая 10</p>
|
||
<p>Пн-Пт: 9:00 - 18:00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="footer-text">
|
||
© 2026 TeleConnect. Все права защищены.<br>
|
||
Лицензия №12345 от 15.01.2015
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(anchor){
|
||
anchor.addEventListener('click',function(e){
|
||
e.preventDefault();
|
||
var target=document.querySelector(this.getAttribute('href'));
|
||
if(target){target.scrollIntoView({behavior:'smooth'});}
|
||
});
|
||
});
|
||
|
||
// Reveal on scroll
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){
|
||
if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}
|
||
});
|
||
},{threshold:0.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
|
||
|
||
// Toggle tariffs based on client type
|
||
function toggleTariffs(){
|
||
var type=document.getElementById('client-type').value;
|
||
var b2c=document.getElementById('tariffs-b2c-select');
|
||
var b2b=document.getElementById('tariffs-b2b-select');
|
||
var tariffSelect=document.getElementById('tariff');
|
||
if(type==='b2b'){
|
||
b2c.style.display='none';
|
||
b2b.style.display='block';
|
||
tariffSelect.selectedIndex=0;
|
||
}else{
|
||
b2c.style.display='block';
|
||
b2b.style.display='none';
|
||
tariffSelect.selectedIndex=0;
|
||
}
|
||
}
|
||
|
||
// Select tariff from card
|
||
function selectTariff(tariffName){
|
||
var type=tariffName.includes('Бизнес')?'b2b':'b2c';
|
||
document.getElementById('client-type').value=type;
|
||
toggleTariffs();
|
||
var select=document.getElementById('tariff');
|
||
for(var i=0;i<select.options.length;i++){
|
||
if(select.options[i].text.includes(tariffName)){
|
||
select.selectedIndex=i;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Form submit (mock)
|
||
function submitForm(e){
|
||
e.preventDefault();
|
||
var name=document.getElementById('name').value;
|
||
var phone=document.getElementById('phone').value;
|
||
var tariff=document.getElementById('tariff').value;
|
||
var address=document.getElementById('address').value;
|
||
alert('Спасибо, '+name+'! Ваша заявка принята.\nТариф: '+tariff+'\nАдрес: '+address+'\nПерезвоним на '+phone+' в течение 15 минут.');
|
||
e.target.reset();
|
||
}
|
||
|
||
// Phone mask
|
||
document.getElementById('phone').addEventListener('input',function(e){
|
||
var x=e.target.value.replace(/\D/g,'').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
|
||
if(!x[1]){e.target.value='';return;}
|
||
e.target.value='+7 ('+(x[2]||'')+(x[3]?' ) ':'')+(x[3]||'')+(x[4]?'-'+x[4]:'')+(x[5]?'-'+x[5]:'');
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|