Spaces:
Running
Running
<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> |