<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Ashekur Rahman">
    <meta name="description" content="">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title>Teclado Virtual | acessibilidade em cada toque</title>
    <!-- Place favicon.ico in the root directory -->
    <link rel="apple-touch-icon" href="assets/images/pavicon.png">
    <link rel="shortcut icon" type="image/ico" href="assets/images/pavicon.png" />
    <!-- Plugin-CSS -->
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="assets/css/bootstrap-min.css">
    <link rel="stylesheet" href="assets/css/owl-carousel-min.css">
    <link rel="stylesheet" href="assets/css/lity-min.css">
    <link rel="stylesheet" href="assets/css/font-awesome-min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- Main-Stylesheets -->
    <link rel="stylesheet" href="assets/css/helper.css">
    <link rel="stylesheet" href="assets/css/theme.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <script src="assets/js/vendor/modernizr-2-8-3-min.js"></script>

    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body data-spy="scroll" data-target=".mainmenu-area">
    <!-- Preloader-Content -->
    <div class="preloader">
        <svg viewBox="-2000 -1000 4000 2000">
            <path id="inf" d="M354-354A500 500 0 1 1 354 354L-354-354A500 500 0 1 0-354 354z"></path>
            <use xlink:href="#inf" stroke-dasharray="1570 5143" stroke-dashoffset="6713px"></use>
        </svg>
    </div>

    <!-- Mainmenu-area-Start -->
    <div class="mainmenu-area transparent"  data-spy="affix" data-offset-top="197">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 row-flex">
                    <div class="site-brand solid">
                        <a href="#home-area" class="logo">Teclado Virtual</a>
                    </div>
                    <button class="burger">
                        <span class="bar"></span>
                        <span class="bar"></span>
                        <span class="bar"></span>
                    </button>
                    <div class="mainmenu">
                        <ul class="nav">
                            <li><a href="#service-area">Visão Geral</a></li>
                            <li><a href="#about-area">Baixar</a></li>
                            <li><a href="features.html">Features</a></li>
                            <li><a href="#gallery-area">Feedback</a></li>
                            <li><a href="#testimonial-area">Empresa</a></li>
                            <li><a href="#contact-area">Apoiar</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mainmenu-Area-End -->


    <!-- Header-Area -->
    <header class="header-area v1 relative-box" id="home-area">
        <div class="image-side-box right-box hidden-xs hidden-sm">
            <img src="assets/images/tecado_virtual.png" class="layer" data-depth="0.35" alt="">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-7">
                    <div class="text-box">
                        <h2 class="title">Teclado Virtual  <br> Acessível e Inteligente </h2>
                        <p>Oferece recursos avançados para pessoas com mobilidade reduzida, deficiências motoras ou qualquer pessoa que busca uma experiência de digitação mais eficiente e confortável.</p>
                        <div class="space-30"></div>
                        <a href="https://y9oyavnsz7rncydu.public.blob.vercel-storage.com/TecladoVirtual_Setup_v1.0.0.exe" class="bttn-1">Baixe Agora</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Header-Area-End -->
    <!-- Feature-Area-Start -->
    <section class="feature-section" id="service-area">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 text-center">
                    <div class="section-header wow fadeIn" data-wow-delay="0.1s">
                        <span class="subtitle">Descubra as Vantagens</span>
                        <h2 class="title">Recursos Principais</h2>
                        <p class="desc">Ferramentas avançadas desenvolvidas para proporcionar a melhor e mais acessível experiência de digitação virtual.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- Card 1 -->
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feature-card wow fadeInUp" data-wow-delay="0.2s">
                        <div class="feature-icon-wrapper">
                            <i class="fa fa-hand-pointer-o"></i>
                        </div>
                        <h3 class="feature-title">Modo Dwell</h3>
                        <p class="feature-desc">Digite sem clicar. Basta posicionar o cursor sobre a tecla desejada e aguardar a ativação automática, com tempo de espera totalmente personalizável.</p>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feature-card wow fadeInUp" data-wow-delay="0.3s">
                        <div class="feature-icon-wrapper">
                            <i class="fa fa-lightbulb-o"></i>
                        </div>
                        <h3 class="feature-title">Sugestão Inteligente</h3>
                        <p class="feature-desc">Reduza até 70% dos toques! O sistema aprende com seu vocabulário e sugere palavras e frases completas conforme você digita.</p>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feature-card wow fadeInUp" data-wow-delay="0.4s">
                        <div class="feature-icon-wrapper">
                            <i class="fa fa-bolt"></i>
                        </div>
                        <h3 class="feature-title">Frases Personalizadas</h3>
                        <p class="feature-desc">Crie atalhos para suas frases mais usadas. Com um único toque, digite textos completos como saudações, emails ou dados frequentes.</p>
                    </div>
                </div>
                <!-- Card 4 -->
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feature-card wow fadeInUp" data-wow-delay="0.5s">
                        <div class="feature-icon-wrapper">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <h3 class="feature-title">Teclas Inteligentes</h3>
                        <p class="feature-desc">Teclas modificadoras (Ctrl, Alt, Shift, Win) otimizadas. Execute atalhos do sistema, copie, cole e navegue com máxima facilidade.</p>
                    </div>
                </div>
                <!-- Card 5 -->
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feature-card wow fadeInUp" data-wow-delay="0.6s">
                        <div class="feature-icon-wrapper">
                            <i class="fa fa-sliders"></i>
                        </div>
                        <h3 class="feature-title">Customização Total</h3>
                        <p class="feature-desc">Teclas e atalhos programáveis para ações específicas do seu dia a dia. Adapte o teclado virtual perfeitamente às suas necessidades.</p>
                    </div>
                </div>
                <!-- Card 6 -->
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feature-card wow fadeInUp" data-wow-delay="0.7s">
                        <div class="feature-icon-wrapper">
                            <i class="fa fa-eye"></i>
                        </div>
                        <h3 class="feature-title">Interface Adaptável</h3>
                        <p class="feature-desc">Núcleos de alto contraste para melhor visibilidade e clareza, além de feedback visual dinâmico em cada interação com as teclas.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Feature-Area-End -->

    <!-- Intro-Area-Start -->
    <section class="intro-area about-section v1 over-hidden" id="about-area"  style="background-image: url('assets/images/section-bg1.png'); background-size: 100% 100%;background-position: center">
        <div class="container">
            <div class="row row-flex">
                <div class="col-xs-12 ">
                    <div class="text-box text-white">    
                        <h4 class="top-title text-white">Downloads</h4>
                        <h2 class="title">você pode baixar e utilizar de forma totalmente gratuita.</h2>
                        <p>Temos o prazer de anunciar que nosso software está atualmente em fase Beta! Em fase de testes e aperfeiçoamento.</p>
                        <div class="space-40"></div>
                            
                                <a href="https://y9oyavnsz7rncydu.public.blob.vercel-storage.com/TecladoVirtual_Setup_v1.0.0.exe" class="bttn-1" >
                                Baixe Agora 
                                <span class="d-block text-white-50" style="font-size: 10px;">Versão: 0.2</span>
                                </a>
                           
                            
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 hidden-sm">
                    <div class="space-60 hidden-md hidden-lg"></div>
                    <div class="play-box">
                     
                    </div>
                </div>
               
            </div>
        </div>
    </section>
    <div class="space-100"></div>
    <div class="space-50-lg"></div>
    <!-- Intro-Area-End -->

    <!-- Product-Carousel-Area-Start -->
    <section class="product-area" style="background-color: #ffffff;" id="gallery-area">
        <div class="container">
            <div class="feedback-section text-center">
        <h2 class="mb-3">Sua opinião é importante!</h2>
        <p class="text-muted mb-4">Como foi sua experiência com a versão 0.2?</p>

        <form>
            <div class="d-flex justify-content-center gap-3 mb-4">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="satisfacao" id="mal" value="1">
                    <label class="form-check-label" for="mal">🙁</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="satisfacao" id="neutro" value="2">
                    <label class="form-check-label" for="neutro">😐</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="satisfacao" id="bem" value="3" checked>
                    <label class="form-check-label" for="bem">😊</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="satisfacao" id="excelente" value="4">
                    <label class="form-check-label" for="excelente">🤩</label>
                </div>
            </div>

            <div class="mb-4">
                <textarea class="form-control" rows="3" placeholder="Conte-nos o que podemos melhorar..."></textarea>
            </div>

            <button type="submit" class="bttn-feedback shadow-sm">
                Enviar Feedback
                <span class="d-block text-white-50" style="font-size: 10px;">Ajudar a melhorar</span>
            </button>
        </form>
    </div>
        </div>
    </section>
    <!-- Product-Carousel-Area-End -->
    <!-- Testimonial-Area-Start -->
    <section id="testimonial-area" class="testimonial-area v1 section-bg" style="background-image: url('assets/images/section-bg1.png'); background-size: 100% 100%;">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3  text-center">
                    <div class="page-title text-white">
                        <h2 class="title">Nossa História<br>
                            Teclado Virtual
                        </h2>
                        <div class="desc"> Nascida em <strong>10 de dezembro de 2005</strong>, no coração de 
                            <span class="text-itaquera">Itaquera, São Paulo</span>, a Teclado Virtual 
                            surgiu com um propósito claro: romper as barreiras da comunicação.
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>



        </div>
        <div id="testimonials" class="carousel slide testimonial-slider">
            <div class="container">
                <div class="row">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="testimonail-item col-xs-12 col-md-8 col-md-offset-2">
                                <div class="desc">Somos especialistas em <strong>tecnologia assistiva</strong>, desenvolvendo soluções 
                                    inovadoras que devolvem a autonomia a pessoas com deficiência. Acreditamos que a tecnologia 
                                    só é verdadeiramente avançada quando é inclusiva e acessível a todos.
                                    <br>
                                    
                                </div>
                                <div class="testimonail-footer">
                                    <h5 class="title">Eduardo</h5>
                                    <div class="position">CEO</div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonail-item col-xs-12 col-md-8 col-md-offset-2">
                                <div class="desc">Nossa missão é transformar linhas de código em ferramentas de liberdade, desenvolvendo tecnologia assistiva que respeita a diversidade humana e devolve autonomia a quem mais precisa.
<br>
Criamos soluções que apoiam, acompanham e se adaptam às diferentes formas de interação com o mundo.
Aqui, acessibilidade não é exceção — é ponto de partida.</div>
                                <div class="testimonail-footer">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonail-item col-xs-12 col-md-8 col-md-offset-2">
                                <div class="desc">
                                     <div class="icon-box text-white">♿</div>
                                <h5>Foco Total em Acessibilidade</h5>
                                <p class="small opacity-75">Sistemas projetados especificamente para atender diversas necessidades motoras e cognitivas.</p>
                                </div>
                                <div class="testimonail-footer">
                                   
                                </div>
                            </div>
                        </div>
                       
                    </div> <!-- Indicators -->
                </div>
            </div>
            <ol class="carousel-indicators">
                <li data-target="#testimonials" data-slide-to="0" class="active"><img src="assets/images/testimonial-1.png" alt=""></li>
                <li data-target="#testimonials" data-slide-to="1"><img src="assets/images/testimonial-2.png" alt=""></li>
                <li data-target="#testimonials" data-slide-to="2"><img src="assets/images/testimonial-3.png" alt=""></li>
                <li data-target="#testimonials" data-slide-to="3"><img src="assets/images/testimonial-4.png" alt=""></li>
                <li data-target="#testimonials" data-slide-to="4"><img src="assets/images/testimonial-5.png" alt=""></li>
                <li data-target="#testimonials" data-slide-to="5"><img src="assets/images/testimonial-6.png" alt=""></li>
                <li data-target="#testimonials" data-slide-to="6"><img src="assets/images/testimonial-7.png" alt=""></li>
                <li data-target="#testimonials" data-slide-to="7"><img src="assets/images/testimonial-1.png" alt=""></li>
            </ol>
            <!-- Left and right controls -->
            <div class="nav-control text-center">
                <a class="left control" href="#testimonials" data-slide="prev"></a>
                <a class="right control" href="#testimonials" data-slide="next"></a>
            </div>
        </div>
    </section>
    <!-- Testimonial-Area-End -->

    <!-- Sponsor-Arae-Start -->
<!--     <div class="sponsor-area">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h4>We are feauted on</h4>
                </div>
            </div>
            <div class="space-20"></div>
            <div class="row">
                <div class="col-xs-12 text-center">
                    <div class="sponsors">
                        <div class="item">
                            <img src="assets/images/client-1.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-2.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-3.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-4.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-5.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-2.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-3.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-4.png" alt="">
                        </div>
                        <div class="item">
                            <img src="assets/images/client-5.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <!-- Sponsor-Arae-End -->
    <!-- Footer-Area-Start -->
    <footer class="footer-area section-bg" id="contact-area" style="background-image: url('assets/images/footer-bg.png')">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <!-- Subscribe-Area-Start -->
                    <div class="subscribe-area">
                        <div class="row">
                            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 text-center">
                                <div class="page-title">
                                    
                                    <h2 class="title">Como você <br> pode apoiar a causa?</h2>
                                    <span class="text-primary text-uppercase fw-bold mb-2">Junte-se a nós</span>
                                </div>
                            </div>

                        </div>


                        <div class="container text-center">
                            <div class="row g-4 justify-content-center">
                                <div class="col-md-4">
                                    <div class="card card-apoio shadow-sm p-4">
                                        <div class="icon-circle mx-auto">💰</div>
                                        <h4>Contribuição Direta</h4>
                                        <p class="text-muted small">Ajude a financiar a pesquisa de novas tecnologias assistivas em Itaquera.</p>
                                        <a href="www.tecladovirtual.com.br/doacao" class="bttn-apoio mt-auto">
                                            Fazer Doação
                                            <span class="bttn-subtext">Via PIX ou Cartão</span>
                                        </a>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="card card-apoio shadow-sm p-4">
                                        <div class="icon-circle mx-auto">📢</div>
                                        <h4>Espalhe a Ideia</h4>
                                        <p class="text-muted small">Compartilhe nossas ferramentas com quem precisa de mais autonomia e acessibilidade.</p>
                                        <a href="javascript:void(0)" id="btnCompartilhar" class="bttn-apoio mt-auto bg-secondary">
                                            Compartilhar
                                            <span class="bttn-subtext">Redes Sociais</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <form id="mc-form">
                                    <div class="subscribe-form">
                                        <div class="info"> Cada pequeno gesto ajuda o <strong>Eduardo Silva Rocha</strong> e sua equipe a transformar vidas..</div>
                                    </div>
                                    <label class="mt10" for="mc-email"></label>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- Subscribe-Area-End -->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <!-- Footer-Widget-Start -->
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <div class="widget">
                            <h4 class="widget-title">Sobre Nos</h4>
                            <p>Sistemas projetados especificamente para atender diversas necessidades motoras e cognitivas.</p>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <div class="widget">
                            <h4 class="widget-title">Link rápido</h4>
                            <ul>
                                <li><a href="index.html">Página Inicial</a></li>
                                <li><a href="features.html">Features</a></li>
                                <li><a href="index.html#service-area">Visão Geral</a></li>
                                <li><a href="www.tecladovirtual.com.br/contato">Contato</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <div class="widget">
                            <h4 class="widget-title">Suporte</h4>
                            <ul>
                                <li><a href="#">Documentação</a></li>
                                <li><a href="#">Termos de Uso</a></li>
                                <li><a href="#">FAQ</a></li>
                                <li><a href="#">Suporte</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <div class="widget">
                            <h4 class="widget-title">Social</h4>
                            <p>Conecte-se conosco através de nossos perfis nas redes sociais.</p>
                            <div class="space-30"></div>
                            <div class="social-menu">
                                <a href="#"><i class="fa fa-facebook"></i></a>
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-google-plus"></i></a>
                                <a href="#"><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Footer-Widget-End -->
            </div>
        </div>
        <div class="copyright-area">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <span class="copyright">&copy; 2026 Teclado Virtual. Todos Direitos Reservado</span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer-Area-End -->
    <!--Vendor-JS-->
    <script src="assets/js/vendor/jquery-1-12-4-min.js"></script>
    <!--Plugin-JS-->
    <script src="assets/js/vendor/bootstrap-min.js"></script>
    <script src="assets/js/owl-carousel-min.js"></script>
    <script src="assets/js/ajaxchimp.js"></script>
    <script src="assets/js/lity-min.js"></script>
    <script src="assets/js/click-effect.js"></script>
    <script src="assets/js/mouse-effect.js"></script>
    <script src="assets/js/scrollUp-min.js"></script>
    <script src="assets/js/wow-min.js"></script>
    <!--Main-active-JS-->
    <script src="assets/js/main.js"></script>
    <script>
    $(document).ready(function() {
        // Usamos jQuery para garantir que o elemento existe antes de aplicar o evento
        $('#btnCompartilhar').on('click', async function(e) {
            e.preventDefault(); // Evita que o link tente navegar

            const shareData = {
                title: 'Teclado Virtual Acessível',
                text: 'Confira este Teclado Virtual focado em autonomia e acessibilidade!',
                url: 'https://www.tecladovirtual.com.br'
            };

            try {
                if (navigator.share) {
                    await navigator.share(shareData);
                } else {
                    // Fallback para navegadores que não suportam compartilhamento nativo
                    await navigator.clipboard.writeText(shareData.url);
                    alert('O link foi copiado! Agora você pode colá-lo onde desejar.');
                }
            } catch (err) {
                // Caso o usuário cancele o compartilhamento, não exibimos erro
                if (err.name !== 'AbortError') {
                    console.error('Erro ao compartilhar:', err);
                }
            }
        });
    });
    </script>
</body>

</html>