325 lines
15 KiB
HTML
325 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Telmi - Smartwatches That Speak For You!</title>
|
|
<meta name="description" content="Telmi smartwatches help people with speech differences communicate easily with the world. A solution for children and adults with communication challenges.">
|
|
<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">How It Works</a>
|
|
<a href="#who-is-it-for" class="nav-link">Who It's For</a>
|
|
<a href="#why-telmi" class="nav-link">Why Telmi</a>
|
|
<a href="#reviews" class="nav-link">Testimonials</a>
|
|
<a href="#order" class="nav-link">Where to Buy</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>Smartwatches That Speak For You!</h1>
|
|
<p>Telmi helps people with speech differences communicate easily with the world, express their needs, and get support.</p>
|
|
<div class="cta-buttons">
|
|
<a href="#order" class="btn btn-primary">Choose Telmi</a>
|
|
</div></div><br><br>
|
|
|
|
<h2 class="section-title">Who Is Telmi For?</h2>
|
|
<div class="user-types">
|
|
<div class="user-card">
|
|
<div class="user-emoji">👶</div>
|
|
<h3>Children with speech disorders</h3>
|
|
<p>Helps express basic needs and emotions</p>
|
|
</div>
|
|
<div class="user-card">
|
|
<div class="user-emoji">🧩</div>
|
|
<h3>People with autism</h3>
|
|
<p>Simplifies communication and reduces anxiety</p>
|
|
</div>
|
|
<div class="user-card">
|
|
<div class="user-emoji">👵</div>
|
|
<h3>Adults with disabilities</h3>
|
|
<p>Enables being heard in any situation</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- How It Works Section -->
|
|
<section class="section" id="how-it-works">
|
|
<div class="container">
|
|
<h2 class="section-title">How Telmi Works</h2>
|
|
<div class="features">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">👆</div>
|
|
<h3>Select an icon</h3>
|
|
<p>The watch instantly voices your request clearly</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">👂</div>
|
|
<h3>Get response</h3>
|
|
<p>Parents, teachers or caregivers immediately understand your needs</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎙️</div>
|
|
<h3>Use assistant</h3>
|
|
<p>Voice assistant executes commands and reminds of important things</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Video Block -->
|
|
<section class="section">
|
|
<h2 class="section-title">How to Use Telmi Smartwatches?</h2>
|
|
<div class="video-container">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/IQ6Eh4gBf7w?autoplay=1&mute=1&loop=1&playlist=IQ6Eh4gBf7w&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 Benefits for Specific Conditions</h2>
|
|
<div class="disease-grid">
|
|
<div class="disease-card">
|
|
<span class="disease-icon">🧩</span>
|
|
<h3>Autism (ASD)</h3>
|
|
<p class="help-text">Helps express needs, emotions, reduces stress levels</p>
|
|
<p class="features-text">Voiced icons, simple phrases, SOS button</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">🗣️</span>
|
|
<h3>Alalia (motor/sensory)</h3>
|
|
<p class="help-text">Replaces or supplements verbal speech</p>
|
|
<p class="features-text">Action and object icons</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">🧠</span>
|
|
<h3>Aphasia (post-stroke/TBI)</h3>
|
|
<p class="help-text">Restores basic communication</p>
|
|
<p class="features-text">Pre-set phrases, personalized buttons</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">♿</span>
|
|
<h3>Cerebral Palsy (with speech impairment)</h3>
|
|
<p class="help-text">Provides communication method while preserving intellect</p>
|
|
<p class="features-text">Simple menu, voice output, icons</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">🧠</span>
|
|
<h3>Intellectual disabilities</h3>
|
|
<p class="help-text">Facilitates understanding and interaction</p>
|
|
<p class="features-text">Minimalist interface, visual support</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">👶</span>
|
|
<h3>Down Syndrome</h3>
|
|
<p class="help-text">Develops communication skills, aids socialization</p>
|
|
<p class="features-text">Speech templates, simple phrase training</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">🫁</span>
|
|
<h3>ALS/Parkinson's Disease</h3>
|
|
<p class="help-text">Enables continued communication in late stages</p>
|
|
<p class="features-text">Large buttons, quick phrases, SOS signal</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">👂</span>
|
|
<h3>Deafness/Hard of Hearing</h3>
|
|
<p class="help-text">Universal communication without speech</p>
|
|
<p class="features-text">Visual/text elements, vibration feedback</p>
|
|
</div>
|
|
<div class="disease-card">
|
|
<span class="disease-icon">🏥</span>
|
|
<h3>Post-Surgical Recovery</h3>
|
|
<p class="help-text">Temporary speech replacement (e.g. post-larynx surgery)</p>
|
|
<p class="features-text">Pre-set phrases and simple commands</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Section -->
|
|
<section class="section why-section" id="why-telmi">
|
|
<div class="container">
|
|
<h2 class="section-title">Why Choose Telmi?</h2>
|
|
</div>
|
|
<div class="why-container">
|
|
<button class="scroll-btn left">←</button>
|
|
<div class="cards-wrapper">
|
|
<div class="benefit-card">
|
|
<h3>📢 Voice Announcement</h3>
|
|
<p>The watch speaks for you clearly in any situation</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<h3>🎨 Intuitive Icons</h3>
|
|
<p>Simple interface with clear images for instant selection</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<h3>🔔 Reminders</h3>
|
|
<p>Important events and schedules always managed</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<h3>❤️ Health Monitoring</h3>
|
|
<p>Tracks heart rate, temperature and activity</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<h3>📞 24/7 Support</h3>
|
|
<p>Help and consultations available anytime</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">User Testimonials</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>"Thanks to Telmi, my child can now express their wishes independently. It changed our lives!"</p>
|
|
<div class="testimonial-author">- Marina, mother of 8-year-old Artem</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>"As an educator, I see tremendous progress in children with autism using Telmi. They've become more open and calm."</p>
|
|
<div class="testimonial-author">- Olga Sergeevna, speech therapist</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>"My grandmother can communicate with us again after her stroke. Telmi has been a lifesaver."</p>
|
|
<div class="testimonial-author">- Dmitry, grandson</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>"Simple yet effective solution for non-verbal children. I recommend it to all parents!"</p>
|
|
<div class="testimonial-author">- Anna, mother of 6-year-old Sofia</div>
|
|
</div>
|
|
</div>
|
|
<button class="review-scroll-btn right">→</button>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section" id="order">
|
|
<h2>Where to Buy 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">Special: 10% off today!</div>
|
|
<div class="price">$210 <span style="text-decoration: line-through; opacity: 0.7; font-size: 1.5rem;">$230</span></div>
|
|
<div class="payment-container">
|
|
<script async
|
|
src="https://js.stripe.com/v3/buy-button.js">
|
|
</script>
|
|
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1REELEBQTq2kFhuKQfn3P8QC"
|
|
publishable-key="pk_live_51Nv50oBQTq2kFhuKvldnzLIqGINqHPmqTSEearHlpRe3EoAkHHCa9czjhM36mSJpkoAEDIxqsMBkZwxZ4sqObgU600YHQNhPK2"
|
|
>
|
|
</stripe-buy-button>
|
|
</div>
|
|
<p class="urgency">Only 15 units left at this price<br>
|
|
Contact us for order details
|
|
</p>
|
|
</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. All rights reserved.</p>
|
|
<p>support@mytelmi.com</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> |