site-institucional / index.html
gallabs's picture
Add 3 files
03d6a3a verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General Lab Solutions | Importadora de Materiais para Laboratórios</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.sidebar {
transition: all 0.3s;
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
font-size: 10px;
background-color: #ef4444;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
}
.partner-logo {
filter: grayscale(100%);
transition: filter 0.3s;
height: 60px;
object-fit: contain;
}
.partner-logo:hover {
filter: grayscale(0%);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navbar -->
<nav class="bg-white shadow-md fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<button id="sidebarToggle" class="text-gray-500 hover:text-gray-700 mr-2">
<i class="fas fa-bars text-xl"></i>
</button>
<div class="flex-shrink-0 flex items-center">
<span class="text-blue-600 font-bold text-xl">General Lab Solutions</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Quem Somos</a>
<a href="#services" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Serviços</a>
<a href="#partners" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Parceiros</a>
<a href="#faq" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">FAQ</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contato</a>
<div class="relative dropdown">
<button class="text-gray-700 hover:text-blue-600 relative">
<i class="fas fa-bell text-xl"></i>
<span class="notification-badge">6</span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-20">
<div class="px-4 py-2 border-b border-gray-200">
<p class="text-sm font-medium text-gray-700">Notificações (6)</p>
</div>
<div class="max-h-60 overflow-y-auto">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100">Novo pedido #1234 recebido</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100">Seu pedido #1228 foi enviado</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100">Promoção especial em reagentes</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100">Atualização de estoque disponível</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100">Novo catálogo de produtos</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Webinar sobre novas técnicas laboratoriais</a>
</div>
<div class="px-4 py-2 text-center">
<a href="#" class="text-sm text-blue-600 hover:underline">Ver todas</a>
</div>
</div>
</div>
<div class="relative dropdown">
<button class="flex items-center space-x-2 focus:outline-none">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
<span class="text-gray-700 text-sm">John Doe</span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Perfil</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Login</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Sidebar -->
<div class="sidebar fixed inset-y-0 left-0 w-64 bg-blue-800 text-white z-20">
<div class="flex items-center justify-between p-4 border-b border-blue-700">
<span class="text-xl font-bold">Menu</span>
<button id="sidebarClose" class="text-white hover:text-blue-200">
<i class="fas fa-times"></i>
</button>
</div>
<nav class="p-4">
<ul class="space-y-2">
<li>
<a href="#about" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-info-circle mr-3"></i>
<span>Quem Somos</span>
</a>
</li>
<li>
<a href="#services" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-flask mr-3"></i>
<span>Serviços</span>
</a>
</li>
<li>
<a href="#products" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-boxes mr-3"></i>
<span>Produtos</span>
</a>
</li>
<li>
<a href="#partners" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-handshake mr-3"></i>
<span>Parceiros</span>
</a>
</li>
<li>
<a href="#faq" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-question-circle mr-3"></i>
<span>FAQ</span>
</a>
</li>
<li>
<a href="#contact" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-envelope mr-3"></i>
<span>Contato</span>
</a>
</li>
<li class="pt-4 mt-4 border-t border-blue-700">
<a href="#" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-user-circle mr-3"></i>
<span>Minha Conta</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-cog mr-3"></i>
<span>Configurações</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Overlay -->
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden"></div>
<!-- Hero Section -->
<section class="hero-section pt-16 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div class="max-w-2xl">
<h1 class="text-4xl font-bold mb-4">Soluções em Materiais para Laboratório</h1>
<p class="text-xl mb-8">Importação e distribuição de equipamentos, reagentes e insumos de alta qualidade para laboratórios de pesquisa e análise.</p>
<div class="flex space-x-4">
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium">Fale Conosco</a>
<a href="#services" class="bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-md font-medium">Nossos Serviços</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Quem Somos</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
<img src="https://images.unsplash.com/photo-1581093450023-8af1ebcd6529?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Laboratory" class="rounded-lg shadow-lg w-full">
</div>
<div class="md:w-1/2">
<h3 class="text-2xl font-semibold text-gray-800 mb-4">General Lab Solutions - Excelência em Materiais Laboratoriais</h3>
<p class="text-gray-600 mb-4">A General Lab Solutions é uma empresa especializada na importação e distribuição de materiais e insumos para laboratórios de pesquisa, análise clínica e controle de qualidade. Com sede em São Paulo, atuamos em todo o território nacional.</p>
<p class="text-gray-600 mb-4">Nossa missão é fornecer produtos de alta qualidade, com certificação internacional, atendendo aos mais rigorosos padrões de controle e garantindo a excelência nos resultados de nossos clientes.</p>
<p class="text-gray-600 mb-6">Contamos com uma equipe altamente qualificada e parcerias estratégicas com os principais fabricantes mundiais, garantindo a entrega de soluções completas para laboratórios de todos os portes.</p>
<div class="flex flex-wrap gap-4">
<div class="bg-blue-50 p-4 rounded-lg flex-1 min-w-[200px]">
<i class="fas fa-certificate text-blue-600 text-2xl mb-2"></i>
<h4 class="font-semibold text-gray-800">Certificação</h4>
<p class="text-sm text-gray-600">Produtos com certificação ISO e ANVISA</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg flex-1 min-w-[200px]">
<i class="fas fa-globe text-blue-600 text-2xl mb-2"></i>
<h4 class="font-semibold text-gray-800">Atendimento</h4>
<p class="text-sm text-gray-600">Nacional e Internacional</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg flex-1 min-w-[200px]">
<i class="fas fa-truck text-blue-600 text-2xl mb-2"></i>
<h4 class="font-semibold text-gray-800">Entrega</h4>
<p class="text-sm text-gray-600">Rápida e eficiente em todo Brasil</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Nossos Serviços</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="text-blue-600 mb-4">
<i class="fas fa-box-open text-4xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Importação de Equipamentos</h3>
<p class="text-gray-600">Importamos diretamente dos principais fabricantes mundiais, garantindo equipamentos de última geração com certificação internacional.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="text-blue-600 mb-4">
<i class="fas fa-vial text-4xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Distribuição de Reagentes</h3>
<p class="text-gray-600">Ampla variedade de reagentes químicos e biológicos para todas as aplicações laboratoriais, com garantia de qualidade e procedência.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="text-blue-600 mb-4">
<i class="fas fa-tools text-4xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Manutenção e Suporte</h3>
<p class="text-gray-600">Equipe técnica especializada para instalação, calibração e manutenção preventiva e corretiva de equipamentos laboratoriais.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="text-blue-600 mb-4">
<i class="fas fa-book text-4xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Treinamentos</h3>
<p class="text-gray-600">Programas de capacitação para equipes técnicas, garantindo o uso adequado de equipamentos e insumos laboratoriais.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="text-blue-600 mb-4">
<i class="fas fa-clipboard-check text-4xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Consultoria Técnica</h3>
<p class="text-gray-600">Assessoria especializada para montagem e adequação de laboratórios, seleção de equipamentos e otimização de processos.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="text-blue-600 mb-4">
<i class="fas fa-shipping-fast text-4xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Logística Especializada</h3>
<p class="text-gray-600">Transporte e armazenamento adequado de materiais sensíveis, garantindo a integridade dos produtos até o destino final.</p>
</div>
</div>
</div>
</section>
<!-- Partners Section -->
<section id="partners" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Nossos Parceiros</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Trabalhamos com os principais fabricantes e distribuidores mundiais de materiais para laboratório</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Thermo_Fisher_Scientific_logo.svg/2560px-Thermo_Fisher_Scientific_logo.svg.png" alt="ThermoFisher" class="partner-logo">
</div>
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Sigma-Aldrich_logo.svg/2560px-Sigma-Aldrich_logo.svg.png" alt="Sigma-Aldrich" class="partner-logo">
</div>
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Agilent_Technologies_logo.svg/1200px-Agilent_Technologies_logo.svg.png" alt="Agilent" class="partner-logo">
</div>
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Eppendorf_Logo.svg/2560px-Eppendorf_Logo.svg.png" alt="Eppendorf" class="partner-logo">
</div>
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Merck_Group_logo.svg/2560px-Merck_Group_logo.svg.png" alt="Merck" class="partner-logo">
</div>
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/PerkinElmer_logo.svg/1200px-PerkinElmer_logo.svg.png" alt="PerkinElmer" class="partner-logo">
</div>
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Bio-Rad_Logo.svg/1200px-Bio-Rad_Logo.svg.png" alt="Biorad" class="partner-logo">
</div>
<div class="flex justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Waters_Corporation_logo.svg/1200px-Waters_Corporation_logo.svg.png" alt="Waters" class="partner-logo">
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-16 bg-gray-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Perguntas Frequentes</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="space-y-4">
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="accordion-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 focus:outline-none">
<span class="text-left font-medium text-gray-800">Como faço para importar equipamentos através da General Lab Solutions?</span>
<i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
</button>
<div class="accordion-content bg-white">
<div class="p-4 pt-0 text-gray-600">
<p>Nosso processo de importação é simples e transparente. Basta entrar em contato com nossa equipe comercial que iremos orientá-lo sobre toda a documentação necessária, prazos e custos envolvidos. Fazemos todo o processo de importação, desde a negociação com o fabricante até a entrega no seu laboratório, garantindo que todos os requisitos legais e técnicos sejam atendidos.</p>
</div>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="accordion-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 focus:outline-none">
<span class="text-left font-medium text-gray-800">Quais são os prazos de entrega para produtos importados?</span>
<i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
</button>
<div class="accordion-content bg-white">
<div class="p-4 pt-0 text-gray-600">
<p>Os prazos variam conforme o fabricante e o tipo de equipamento. Em média, para produtos em estoque no exterior, o prazo é de 30 a 45 dias úteis após a confirmação do pedido. Para equipamentos sob encomenda, o prazo pode variar de 60 a 120 dias, dependendo da complexidade do equipamento. Nossa equipe sempre informa os prazos estimados antes da confirmação do pedido.</p>
</div>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="accordion-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 focus:outline-none">
<span class="text-left font-medium text-gray-800">Vocês oferecem garantia para os equipamentos importados?</span>
<i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
</button>
<div class="accordion-content bg-white">
<div class="p-4 pt-0 text-gray-600">
<p>Sim, todos os equipamentos que importamos possuem garantia do fabricante, que varia conforme o produto (geralmente de 1 a 3 anos). Além disso, oferecemos suporte técnico local durante todo o período de garantia. Em caso de necessidade de reparo, nossa equipe coordena todo o processo com o fabricante, incluindo o envio de peças e técnicos especializados quando necessário.</p>
</div>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="accordion-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 focus:outline-none">
<span class="text-left font-medium text-gray-800">Como posso ter certeza da qualidade dos reagentes que vocês distribuem?</span>
<i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
</button>
<div class="accordion-content bg-white">
<div class="p-4 pt-0 text-gray-600">
<p>Todos os reagentes que distribuímos possuem certificados de análise (CoA) e são adquiridos diretamente dos fabricantes ou de distribuidores autorizados. Mantemos rigoroso controle de qualidade e rastreabilidade de lotes. Além disso, podemos fornecer amostras para testes antes da compra em grande quantidade, garantindo que atendam aos seus requisitos específicos.</p>
</div>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="accordion-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 focus:outline-none">
<span class="text-left font-medium text-gray-800">Vocês realizam manutenção em equipamentos de outras marcas?</span>
<i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
</button>
<div class="accordion-content bg-white">
<div class="p-4 pt-0 text-gray-600">
<p>Sim, nossa equipe técnica é capacitada para realizar manutenção em uma ampla variedade de equipamentos laboratoriais, mesmo que não tenham sido adquiridos através de nossa empresa. Trabalhamos com peças originais e seguimos rigorosamente os protocolos dos fabricantes. Entre em contato conosco para avaliarmos a viabilidade técnica para o seu equipamento específico.</p>
</div>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="accordion-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 focus:outline-none">
<span class="text-left font-medium text-gray-800">Há possibilidade de parcelamento para compras de alto valor?</span>
<i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
</button>
<div class="accordion-content bg-white">
<div class="p-4 pt-0 text-gray-600">
<p>Sim, oferecemos diversas opções de financiamento através de parcerias com instituições financeiras, permitindo parcelamento em até 60 meses para equipamentos de alto valor. Também trabalhamos com leasing operacional e possibilidades de financiamento através de órgãos de fomento à pesquisa, quando aplicável. Nossa equipe comercial pode orientá-lo sobre a melhor opção para o seu caso.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-blue-700 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Entre em Contato</h2>
<div class="w-20 h-1 bg-white mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div>
<h3 class="text-xl font-semibold mb-6">Informações de Contato</h3>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Endereço</h4>
<p class="text-blue-100">Av. das Indústrias, 1234<br>Jardim Empresarial<br>São Paulo - SP<br>CEP: 04532-000</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-phone-alt mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Telefone</h4>
<p class="text-blue-100">(11) 1234-5678</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-envelope mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Email</h4>
<p class="text-blue-100">[email protected]</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-clock mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Horário de Atendimento</h4>
<p class="text-blue-100">Segunda a Sexta: 8h às 18h<br>Sábado: 8h às 12h</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-medium mb-4">Siga-nos</h4>
<div class="flex space-x-4">
<a href="#" class="bg-blue-600 hover:bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-blue-600 hover:bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="bg-blue-600 hover:bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-blue-600 hover:bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-6">Envie uma Mensagem</h3>
<form class="space-y-4">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label for="name" class="block mb-1">Nome</label>
<input type="text" id="name" class="w-full px-4 py-2 rounded bg-blue-600 border border-blue-500 focus:border-white focus:outline-none placeholder-blue-300">
</div>
<div>
<label for="email" class="block mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 rounded bg-blue-600 border border-blue-500 focus:border-white focus:outline-none placeholder-blue-300">
</div>
</div>
<div>
<label for="subject" class="block mb-1">Assunto</label>
<input type="text" id="subject" class="w-full px-4 py-2 rounded bg-blue-600 border border-blue-500 focus:border-white focus:outline-none placeholder-blue-300">
</div>
<div>
<label for="message" class="block mb-1">Mensagem</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-blue-600 border border-blue-500 focus:border-white focus:outline-none placeholder-blue-300"></textarea>
</div>
<button type="submit" class="bg-white text-blue-700 hover:bg-gray-100 px-6 py-3 rounded-md font-medium">Enviar Mensagem</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">General Lab Solutions</h3>
<p class="text-gray-400">Excelência em materiais e insumos para laboratórios de pesquisa e análise.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Links Rápidos</h4>
<ul class="space-y-2">
<li><a href="#about" class="text-gray-400 hover:text-white">Quem Somos</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white">Serviços</a></li>
<li><a href="#partners" class="text-gray-400 hover:text-white">Parceiros</a></li>
<li><a href="#faq" class="text-gray-400 hover:text-white">FAQ</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white">Contato</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Produtos</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Equipamentos</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Reagentes</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Vidrarias</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Consumíveis</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Acessórios</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">Assine nossa newsletter para receber novidades e promoções.</p>
<form class="flex">
<input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l text-gray-900 focus:outline-none w-full">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 General Lab Solutions. Todos os direitos reservados.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Termos de Uso</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Política de Privacidade</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a>
</div>
</div>
</div>
</footer>
<script>
// Sidebar toggle
const sidebarToggle = document.getElementById('sidebarToggle');
const sidebarClose = document.getElementById('sidebarClose');
const sidebar = document.querySelector('.sidebar');
const overlay = document.getElementById('overlay');
sidebarToggle.addEventListener('click', () => {
sidebar.classList.add('open');
overlay.classList.remove('hidden');
});
sidebarClose.addEventListener('click', () => {
sidebar.classList.remove('open');
overlay.classList.add('hidden');
});
overlay.addEventListener('click', () => {
sidebar.classList.remove('open');
overlay.classList.add('hidden');
});
// Accordion functionality
const accordionToggles = document.querySelectorAll('.accordion-toggle');
accordionToggles.forEach(toggle => {
toggle.addEventListener('click', () => {
const content = toggle.nextElementSibling;
const icon = toggle.querySelector('i');
if (content.style.maxHeight) {
content.style.maxHeight = null;
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
icon.style.transform = 'rotate(180deg)';
}
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close sidebar if open
sidebar.classList.remove('open');
overlay.classList.add('hidden');
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gallabs/site-institucional" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>