tmt-celular-net / index.html
Alaorney's picture
nossa cor é verde musgo, verde mais claro e branco, corrigir por favor - Initial Deployment
34ba9d4 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 - SST por Assinatura</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://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #8ba888 0%, #5a8f5a 100%);
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="gradient-bg text-white">
<div class="container mx-auto px-6 py-16 md:py-24">
<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">
<div class="bg-green-600 text-white inline-block px-3 py-1 rounded-full text-sm font-semibold mb-4">
🚨 NOVO MODELO TMT
</div>
<h1 class="text-4xl md:text-5xl font-bold mb-6">SST por Assinatura</h1>
<p class="text-xl mb-8">Para empresas com até 5 colaboradores no Grau de Risco 1 ou 2</p>
<div class="flex items-center mb-8">
<div class="text-4xl font-bold">R$ 99,90</div>
<div class="ml-2 text-gray-200">/mês</div>
</div>
<a href="#cta" class="bg-white text-green-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 inline-block">
QUERO REGULARIZAR MINHA EMPRESA
</a>
</div>
<div class="md:w-1/2" data-aos="fade-left">
<img src="http://static.photos/office/640x360/1" alt="Escritório" class="rounded-xl shadow-2xl">
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Tudo que sua empresa precisa em SST</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Module 1 -->
<div class="bg-gray-50 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="100">
<div class="bg-green-100 text-green-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="file-text"></i>
</div>
<h3 class="font-bold text-xl mb-3">Módulo 1 – Programas e Laudos</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>PGR – Programa de Gerenciamento de Riscos</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>PCMSO – Controle Médico de Saúde Ocupacional</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>LTCAT – Laudo Técnico das Condições Ambientais</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>Laudo de Insalubridade</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>Laudo de Periculosidade</span>
</li>
</ul>
</div>
<!-- Module 2 -->
<div class="bg-gray-50 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="200">
<div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="edit"></i>
</div>
<h3 class="font-bold text-xl mb-3">Módulo 2 – Modelos Personalizados</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>Ficha de EPI conforme a função</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>Ordem de Serviço conforme a função</span>
</li>
</ul>
</div>
<!-- Module 3 -->
<div class="bg-gray-50 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="300">
<div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="tool"></i>
</div>
<h3 class="font-bold text-xl mb-3">Módulo 3 – Medições Técnicas e ART</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>01 Medição de Ruído</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>01 Medição de Calor (Stress Térmico)</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>01 ART – Anotação de Responsabilidade Técnica</span>
</li>
</ul>
</div>
<!-- Module 4 -->
<div class="bg-gray-50 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="400">
<div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="book-open"></i>
</div>
<h3 class="font-bold text-xl mb-3">Módulo 4 – Treinamentos EAD</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>NR 01 – Disposições Gerais</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>NR 06 – EPI</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>NR 17 – Ergonomia</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
<span>Primeiros Socorros</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Benefits Section -->
<div class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold mb-6">Vantagens do Nosso Plano</h2>
<p class="text-lg text-gray-600">Tudo com responsabilidade técnica e conforme a legislação</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="100">
<div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="dollar-sign"></i>
</div>
<h3 class="font-bold text-xl mb-3">Sem taxas extras</h3>
<p class="text-gray-600">Tudo incluso no valor mensal de R$ 99,90</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="200">
<div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="clock"></i>
</div>
<h3 class="font-bold text-xl mb-3">Sem fidelidade</h3>
<p class="text-gray-600">Cancele quando quiser sem multas ou burocracia</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="300">
<div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="headphones"></i>
</div>
<h3 class="font-bold text-xl mb-3">Suporte técnico incluso</h3>
<p class="text-gray-600">Tire suas dúvidas com nossos especialistas</p>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div id="cta" class="py-16 gradient-bg text-white">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto text-center" data-aos="zoom-in">
<h2 class="text-3xl font-bold mb-6">Regularize sua empresa hoje mesmo!</h2>
<p class="text-xl mb-8">Por apenas R$ 99,90/mês você garante todos os documentos necessários em SST</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="https://wa.me/5511999999999?text=QUERO%20REGULARIZAR%20MINHA%20EMPRESA" class="bg-white text-green-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 inline-block text-center">
<i data-feather="message-circle" class="inline mr-2"></i> FALE NO WHATSAPP
</a>
<a href="tel:+5511999999999" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-green-600 transition duration-300 inline-block text-center">
<i data-feather="phone" class="inline mr-2"></i> LIGUE AGORA
</a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<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="text-2xl font-bold mb-2">TMT</div>
<p class="text-gray-400">Soluções em Segurança do Trabalho</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin"></i>
</a>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 TMT. Todos os direitos reservados.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
once: true
});
feather.replace();
</script>
</body>
</html>