344 lines
19 KiB
HTML
344 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Telmi - умные часы, которые говорят за вас!</title>
|
||
<meta name="description" content="Умные часы Telmi помогают людям с особенностями речи легко общаться с миром. Решение для детей и взрослых с нарушениями коммуникации.">
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation Menu -->
|
||
<nav class="nav-menu">
|
||
<div class="nav-container">
|
||
<a href="#" class="nav-logo">
|
||
<img src="https://i0.wp.com/mytelmi.es/wp-content/uploads/2023/09/cropped-LogoTelmiSmart-W.png"
|
||
alt="Telmi Logo"
|
||
class="nav-logo">
|
||
</a>
|
||
<button class="mobile-menu-btn">☰</button>
|
||
<div class="nav-links">
|
||
<a href="#how-it-works" class="nav-link">Как работает Telmi?</a>
|
||
<a href="#who-is-it-for" class="nav-link">Кому подойдет Telmi?</a>
|
||
<a href="#why-telmi" class="nav-link">Почему Telmi?</a>
|
||
<a href="#reviews" class="nav-link">Отзывы пользователей</a>
|
||
<a href="#order" class="nav-link">Где купить Telmi?</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<!-- Header with Background Image -->
|
||
<header>
|
||
<div class="header-content">
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Who is it for -->
|
||
|
||
<section class="section who-section" id="who-is-it-for">
|
||
<div class="container">
|
||
<div class="header-content">
|
||
<h1>Умные часы, которые говорят за вас!</h1>
|
||
<p>Telmi помогает людям с особенностями речи легко общаться с миром, выражать свои желания и получать поддержку.</p>
|
||
<div class="cta-buttons">
|
||
<a href="#order" class="btn btn-primary">Выбрать Telmi</a>
|
||
</div></div><br><br>
|
||
|
||
<h2 class="section-title">Кому подойдет Telmi?</h2>
|
||
<div class="user-types">
|
||
<div class="user-card">
|
||
<div class="user-emoji">👶</div>
|
||
<h3>Детям с нарушениями речи</h3>
|
||
<p>Помогает выражать основные потребности и эмоции</p>
|
||
</div>
|
||
<div class="user-card">
|
||
<div class="user-emoji">🧩</div>
|
||
<h3>Людям с аутизмом</h3>
|
||
<p>Упрощает коммуникацию и снижает тревожность</p>
|
||
</div>
|
||
<div class="user-card">
|
||
<div class="user-emoji">👵</div>
|
||
<h3>Взрослым с ограниченными возможностями</h3>
|
||
<p>Дает возможность быть услышанным в любых ситуациях</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- How It Works Section -->
|
||
<section class="section" id="how-it-works">
|
||
<div class="container">
|
||
<h2 class="section-title">Как работает Telmi?</h2>
|
||
<div class="features">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">👆</div>
|
||
<h3>Выбираете иконку</h3>
|
||
<p>Часы мгновенно озвучивают ваш запрос понятным голосом</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">👂</div>
|
||
<h3>Получаете ответ</h3>
|
||
<p>Родители, учителя или близкие сразу понимают вашу потребность</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎙️</div>
|
||
<h3>Используете ассистента</h3>
|
||
<p>Голосовой помощник выполняет команды и напоминает о важном</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Video Block -->
|
||
<section class="section">
|
||
<h2 class="section-title">Как использовать смарт-часы Telmi?</h2>
|
||
<div class="video-container">
|
||
<iframe
|
||
src="https://www.youtube.com/embed/7Ell_V8V6es?autoplay=1&mute=1&loop=1&playlist=7Ell_V8V6es&controls=0"
|
||
frameborder="0"
|
||
allow="accelerometer; autoplay; encrypted-media; gyroscope"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Disease/Condition Help Table -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2 class="section-title">Польза Telmi при конкретных нарушениях</h2>
|
||
<div class="disease-grid">
|
||
<div class="disease-card">
|
||
<span class="disease-icon">🧩</span>
|
||
<h3>Аутизм (РАС)</h3>
|
||
<p class="help-text">Помогает выражать потребности, эмоции, снижает уровень стресса</p>
|
||
<p class="features-text">Иконки с озвучкой, простые фразы, SOS-кнопка</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">🗣️</span>
|
||
<h3>Алалия (моторная/сенсорная)</h3>
|
||
<p class="help-text">Заменяет или дополняет устную речь</p>
|
||
<p class="features-text">Иконки с действиями и предметами</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">🧠</span>
|
||
<h3>Афазия (после инсульта/ЧМТ)</h3>
|
||
<p class="help-text">Восстанавливает базовую коммуникацию</p>
|
||
<p class="features-text">Предустановленные фразы, персонализированные кнопки</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">♿</span>
|
||
<h3>ДЦП (с нарушением речи)</h3>
|
||
<p class="help-text">Обеспечивает способ общения при сохранённом интеллекте</p>
|
||
<p class="features-text">Простое меню, голосовой выход, иконки</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">🧠</span>
|
||
<h3>Интеллектуальные нарушения</h3>
|
||
<p class="help-text">Облегчает понимание и взаимодействие с окружающими</p>
|
||
<p class="features-text">Минималистичный интерфейс, визуальная поддержка</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">👶</span>
|
||
<h3>Синдром Дауна</h3>
|
||
<p class="help-text">Развивает коммуникационные навыки, помогает в социализации</p>
|
||
<p class="features-text">Речевые шаблоны, обучение простым фразам</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">🫁</span>
|
||
<h3>БАС / болезнь Паркинсона</h3>
|
||
<p class="help-text">Позволяет продолжать общение на поздних стадиях заболевания</p>
|
||
<p class="features-text">Большие кнопки, быстрые фразы, SOS-сигнал</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">👂</span>
|
||
<h3>Глухонемота / тугоухость</h3>
|
||
<p class="help-text">Служит универсальным способом общения без необходимости речи</p>
|
||
<p class="features-text">Визуальные и текстовые элементы, виброотклик</p>
|
||
</div>
|
||
<div class="disease-card">
|
||
<span class="disease-icon">🏥</span>
|
||
<h3>Послеоперационные состояния</h3>
|
||
<p class="help-text">Временная замена речи (например, после операций на гортани)</p>
|
||
<p class="features-text">Предустановленные фразы и простые команды</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Section -->
|
||
<section class="section why-section" id="why-telmi">
|
||
<div class="container">
|
||
<h2 class="section-title">Почему Telmi?</h2>
|
||
</div>
|
||
<div class="why-container">
|
||
<button class="scroll-btn left">←</button>
|
||
<div class="cards-wrapper">
|
||
<div class="benefit-card">
|
||
<h3>📢 Голосовое оповещение</h3>
|
||
<p>Часы говорят за вас четким и понятным голосом в любой ситуации</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<h3>🎨 Интуитивные иконки</h3>
|
||
<p>Простой интерфейс с понятными изображениями для мгновенного выбора</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<h3>🔔 Напоминания</h3>
|
||
<p>Важные события и расписание всегда под контролем</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<h3>❤️ Мониторинг здоровья</h3>
|
||
<p>Отслеживание пульса, температуры и активности</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<h3>📞 Служба поддержки</h3>
|
||
<p>Помощь и консультации 24/7 по любым вопросам</p>
|
||
</div>
|
||
</div>
|
||
<button class="scroll-btn right">→</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Section -->
|
||
<section class="section reviews-section" id="reviews">
|
||
<div class="container">
|
||
<h2 class="section-title">Отзывы пользователей</h2>
|
||
</div>
|
||
<div class="reviews-container">
|
||
<button class="review-scroll-btn left">←</button>
|
||
<div class="reviews-wrapper">
|
||
<div class="review-card">
|
||
<div class="user-avatar-container">
|
||
<img src="https://randomuser.me/api/portraits/women/43.jpg" class="user-avatar" alt="Марина">
|
||
</div>
|
||
<p>"Благодаря Telmi, мой ребенок теперь может сам выражать свои желания. Это изменило нашу жизнь!"</p>
|
||
<div class="testimonial-author">- Марина, мама 8-летнего Артема</div>
|
||
</div>
|
||
<div class="review-card">
|
||
<div class="user-avatar-container">
|
||
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="user-avatar" alt="Ольга">
|
||
</div>
|
||
<p>"Как педагог, я вижу огромный прогресс у детей с аутизмом, использующих Telmi. Они стали более открытыми и спокойными."</p>
|
||
<div class="testimonial-author">- Ольга Сергеевна, логопед</div>
|
||
</div>
|
||
<div class="review-card">
|
||
<div class="user-avatar-container">
|
||
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="user-avatar" alt="Дмитрий">
|
||
</div>
|
||
<p>"Моя бабушка после инсульта снова может общаться с нами. Telmi стал для нас настоящим спасением."</p>
|
||
<div class="testimonial-author">- Дмитрий, внук</div>
|
||
</div>
|
||
<div class="review-card">
|
||
<div class="user-avatar-container">
|
||
<img src="https://randomuser.me/api/portraits/women/22.jpg" class="user-avatar" alt="Анна">
|
||
</div>
|
||
<p>"Простое и эффективное решение для невербальных детей. Рекомендую всем родителям!"</p>
|
||
<div class="testimonial-author">- Анна, мама 6-летней Софии</div>
|
||
</div>
|
||
</div>
|
||
<button class="review-scroll-btn right">→</button>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta-section" id="order">
|
||
<h2>Где купить Telmi?</h2>
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
|
||
<div class="cta-image">
|
||
|
||
<div class="slider-container">
|
||
<img src="img/watch_slide_6.png" class="slide active" alt="Telmi Watch Slide 1">
|
||
<img src="img/watch_slide_7.png" class="slide" alt="Telmi Watch Slide 2">
|
||
<img src="img/watch_slide_8.png" class="slide" alt="Telmi Watch Slide 3">
|
||
<img src="img/watch_slide_9.png" class="slide" alt="Telmi Watch Slide 4">
|
||
<img src="img/watch_slide_10.png" class="slide" alt="Telmi Watch Slide 5">
|
||
<img src="img/watch_slide_11.png" class="slide" alt="Telmi Watch Slide 6">
|
||
<img src="img/watch_slide_12.png" class="slide" alt="Telmi Watch Slide 7">
|
||
<img src="img/watch_slide_13.png" class="slide" alt="Telmi Watch Slide 8">
|
||
<img src="img/watch_slide_14.png" class="slide" alt="Telmi Watch Slide 9">
|
||
<img src="img/watch_slide_15.png" class="slide" alt="Telmi Watch Slide 10">
|
||
</div>
|
||
</div>
|
||
<div class="cta-text">
|
||
|
||
<div class="discount-badge">Акция: скидка 10% сегодня!</div>
|
||
<div class="price">14 990 ₽ <span style="text-decoration: line-through; opacity: 0.7; font-size: 1.5rem;">16 990 ₽</span></div>
|
||
<div class="payment-container">
|
||
<iframe
|
||
src="https://yoomoney.ru/quickpay/fundraise/button?billNumber=19ACK72QFDN.250330&"
|
||
frameborder="0"
|
||
scrolling="no">
|
||
</iframe>
|
||
</div>
|
||
<p class="urgency">Осталось 15 штук по акции<br>
|
||
Напишите нам для уточнения делатей заказа
|
||
</p>
|
||
</div>
|
||
<div class="social-embeds">
|
||
<h2 class="section-title">Мы в соцсетях</h2>
|
||
<div class="embeds-container">
|
||
<div class="embed-wrapper">
|
||
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/DIZEZjJANOO/?utm_source=ig_web_copy_link&igsh=ZDNlZDc0MzIxNw%3D%3D" data-instgrm-version="14">
|
||
<div style="padding:16px;">
|
||
<div style="display: flex; justify-content: center;">
|
||
<div style="background-color: #F4F4F4; border-radius: 50%; height: 40px; width: 40px;"></div>
|
||
</div>
|
||
<div style="padding: 19% 0;"></div>
|
||
<div style="display:block; height:50px; margin:0 auto 12px; width:50px;"></div>
|
||
<div style="padding-top: 8px;">
|
||
<div style="color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div>
|
||
</div>
|
||
<div style="padding: 12.5% 0;"></div>
|
||
<div style="display: flex; justify-content: center;">
|
||
<div style="background-color: #F4F4F4; height: 12.5px; width: 12.5px; transform: rotate(45deg) translateX(3px) translateY(1px);"></div>
|
||
<div style="background-color: #F4F4F4; height: 12.5px; width: 12.5px; transform: rotate(-45deg) translateX(-3px) translateY(1px);"></div>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="social-links">
|
||
<a href="https://t.me/+34665091289" class="social-link" target="_blank">
|
||
<i class="fab fa-telegram fa-4x"></i>
|
||
</a>
|
||
<a href="https://wa.me/34665091289" class="social-link" target="_blank">
|
||
<i class="fab fa-whatsapp fa-4x"></i>
|
||
</a>
|
||
</div>
|
||
<p>© 2025 Telmi. Все права защищены.</p>
|
||
<p>support@mytelmi.ru</p>
|
||
</div>
|
||
</footer>
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script src="js/script.js"></script>
|
||
<script async src="//www.instagram.com/embed.js"></script>
|
||
<div class="modal-overlay">
|
||
<div class="modal-content">
|
||
<span class="close-modal">×</span>
|
||
<div class="modal-image-container">
|
||
<img class="modal-image" src="" alt="Enlarged view">
|
||
</div>
|
||
<button class="modal-nav prev"><</button>
|
||
<button class="modal-nav next">></button>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |