tmt / index.html
Alaorney's picture
NO CAMPO DE INFORMEÇÕES DE CONTATO o simbolo do WhatsApp esta com uma carta, altere o simbolo para o do aplicativo - Initial Deployment
d11ca02 verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TMT Segurança e Medicina do Trabalho</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6b8e23 0%, #556b2f 100%);
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body class="font-sans bg-white">
<!-- WhatsApp Float Button -->
<a href="https://wa.me/5534993367770" class="whatsapp-float hover:bg-green-600 transition-colors duration-300" target="_blank">
<i data-feather="message-circle"></i>
</a>
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<i data-feather="shield" class="w-10 h-10 mr-3"></i>
<h1 class="text-2xl font-bold">TMT Segurança e Medicina do Trabalho</h1>
</div>
<nav class="hidden md:block">
<ul class="flex space-x-8">
<li><a href="#servicos" class="hover:text-green-200 transition-colors">Serviços</a></li>
<li><a href="#sobre" class="hover:text-green-200 transition-colors">Sobre Nós</a></li>
<li><a href="#contato" class="hover:text-green-200 transition-colors">Contato</a></li>
</ul>
</nav>
<button class="md:hidden focus:outline-none">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">Sua empresa em conformidade com as normas</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
Soluções completas em segurança e medicina do trabalho para proteger sua empresa e colaboradores.
</p>
<a href="https://wa.me/5534993367770"
class="bg-white text-green-800 font-bold py-3 px-8 rounded-full hover:bg-green-100 hover-scale transition-all duration-300 inline-flex items-center"
data-aos="fade-up"
data-aos-delay="200">
<i data-feather="message-circle" class="mr-2"></i> Fale conosco
</a>
</div>
</section>
<!-- Services Section -->
<section id="servicos" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-green-800 mb-16" data-aos="fade-up">Nossos Serviços</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- PGR -->
<div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 hover-scale" data-aos="fade-up" data-aos-delay="100">
<div class="text-green-700 mb-4">
<i data-feather="file-text" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-bold text-green-800 mb-3">PGR - Programa de Gerenciamento de Riscos</h3>
<p class="text-gray-600 mb-4">
Elaboração completa do PGR para identificar, avaliar e controlar os riscos ocupacionais em sua empresa.
</p>
<a href="https://wa.me/5534993367770" class="text-green-700 font-medium hover:text-green-900 inline-flex items-center">
Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- PCMSO -->
<div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 hover-scale" data-aos="fade-up" data-aos-delay="200">
<div class="text-green-700 mb-4">
<i data-feather="heart" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-bold text-green-800 mb-3">PCMSO - Programa de Controle Médico de Saúde Ocupacional</h3>
<p class="text-gray-600 mb-4">
Desenvolvimento do PCMSO para monitorar a saúde dos trabalhadores e prevenir doenças ocupacionais.
</p>
<a href="https://wa.me/5534993367770" class="text-green-700 font-medium hover:text-green-900 inline-flex items-center">
Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- LTCAT -->
<div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 hover-scale" data-aos="fade-up" data-aos-delay="300">
<div class="text-green-700 mb-4">
<i data-feather="clipboard" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-bold text-green-800 mb-3">LTCAT - Laudo Técnico das Condições Ambientais de Trabalho</h3>
<p class="text-gray-600 mb-4">
Elaboração do LTCAT para avaliação qualitativa e quantitativa dos agentes nocivos presentes no ambiente de trabalho.
</p>
<a href="https://wa.me/5534993367770" class="text-green-700 font-medium hover:text-green-900 inline-flex items-center">
Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="sobre" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right">
<img src="http://static.photos/construction/640x360/10" alt="Equipe de Segurança do Trabalho em obra civil usando EPIs" class="rounded-lg shadow-lg w-full">
</div>
<div class="md:w-1/2 md:pl-12" data-aos="fade-left">
<h2 class="text-3xl font-bold text-green-800 mb-6">Sobre a TMT</h2>
<p class="text-gray-600 mb-4">
A TMT Segurança e Medicina do Trabalho é especializada em oferecer soluções completas para empresas que buscam estar em conformidade com as normas regulamentadoras.
</p>
<p class="text-gray-600 mb-4">
Nossa equipe de profissionais qualificados está pronta para auxiliar sua empresa na elaboração e implementação dos programas obrigatórios, garantindo a segurança e saúde de seus colaboradores.
</p>
<p class="text-gray-600 mb-6">
Com anos de experiência no mercado, nos destacamos pela qualidade dos nossos serviços e compromisso com nossos clientes.
</p>
<a href="https://wa.me/5534993367770" class="gradient-bg text-white font-bold py-3 px-8 rounded-full hover:bg-green-700 hover-scale transition-all duration-300 inline-flex items-center">
<i data-feather="phone" class="mr-2"></i> Entre em contato
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contato" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-green-800 mb-16" data-aos="fade-up">Entre em Contato</h2>
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right">
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-green-800 mb-6">Informações de Contato</h3>
<div class="flex items-start mb-6">
<i data-feather="map-pin" class="text-green-700 mr-4 mt-1"></i>
<div>
<h4 class="font-bold text-gray-800">Endereço</h4>
<p class="text-gray-600">Rua Duque de Caxias, 626 - Centro, Uberlândia - MG</p>
</div>
</div>
<div class="flex items-start mb-6">
<i data-feather="phone" class="text-green-700 mr-4 mt-1"></i>
<div>
<h4 class="font-bold text-gray-800">Telefone</h4>
<p class="text-gray-600">(34) 3219-2144</p>
</div>
</div>
<div class="flex items-start">
<i data-feather="mail" class="text-green-700 mr-4 mt-1"></i>
<div>
<h4 class="font-bold text-gray-800">WhatsApp</h4>
<p class="text-gray-600">(34) 99336-7770</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 md:pl-10" data-aos="fade-left">
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-green-800 mb-6">Envie uma Mensagem</h3>
<p class="text-gray-600 mb-6">Preencha o formulário abaixo e entraremos em contato o mais breve possível.</p>
<form action="https://formsubmit.co/seu-email@tmt.com" method="POST">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://seusite.com/obrigado.html">
<div class="mb-4">
<label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 font-medium mb-2">E-mail</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<div class="mb-4">
<label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label>
<input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
<textarea id="message" name="message" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
</div>
<button type="submit" class="gradient-bg text-white font-bold py-3 px-6 rounded-lg hover:bg-green-700 transition-colors duration-300 w-full flex items-center justify-center">
<i data-feather="send" class="mr-2"></i> Enviar Mensagem
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="w-full h-96 mb-8 md:mb-0 md:mr-8 rounded-lg overflow-hidden shadow-lg">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3773.674864644699!2d-48.2642519246874!3d-18.92302708222273!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94a4456c5a6b6f07%3A0x6c8e1a1e3c5e5b1f!2sR.%20Duque%20de%20Caxias%2C%20626%20-%20Centro%2C%20Uberl%C3%A2ndia%20-%20MG%2C%2038400-128!5e0!3m2!1spt-BR!2sbr!4v1681234567890!5m2!1spt-BR!2sbr"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<div class="text-center md:text-left">
<h3 class="text-2xl font-bold text-green-800 mb-4">Nosso Endereço</h3>
<p class="text-gray-600 mb-6">Rua Duque de Caxias, 626 - Centro<br>Uberlândia - MG</p>
<a href="https://www.google.com/maps/dir//R.+Duque+de+Caxias,+626+-+Centro,+Uberlândia+-+MG,+38400-128"
target="_blank"
class="gradient-bg text-white font-bold py-3 px-6 rounded-lg hover:bg-green-700 transition-colors duration-300 inline-flex items-center">
<i data-feather="navigation" class="mr-2"></i> Obter Direções
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="gradient-bg text-white py-10">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="flex items-center">
<i data-feather="shield" class="w-8 h-8 mr-3"></i>
<h3 class="text-xl font-bold">TMT Segurança e Medicina do Trabalho</h3>
</div>
<p class="mt-2 text-green-200">Soluções completas em segurança ocupacional</p>
</div>
<div class="flex space-x-6">
<a href="#servicos" class="hover:text-green-200 transition-colors">Serviços</a>
<a href="#sobre" class="hover:text-green-200 transition-colors">Sobre Nós</a>
<a href="#contato" class="hover:text-green-200 transition-colors">Contato</a>
</div>
</div>
<div class="border-t border-green-700 mt-8 pt-8 text-center text-green-200">
<p>&copy; 2023 TMT Segurança e Medicina do Trabalho. Todos os direitos reservados.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html>