Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Z&S Calhas e Vedações - Soluções Profissionais em Telhados</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#F57C00', | |
| secondary: '#D9D9D9', | |
| dark: '#000000', | |
| light: '#FFFFFF', | |
| }, | |
| fontFamily: { | |
| heading: ['Montserrat', 'sans-serif'], | |
| body: ['Roboto', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .title-line { | |
| display: block; | |
| width: 30%; | |
| height: 4px; | |
| background-color: #F57C00; | |
| margin: 12px auto 0; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(245, 124, 0, 0.2); | |
| } | |
| .gallery-item:hover img { | |
| transform: scale(1.05); | |
| } | |
| .gallery-overlay { | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gallery-item:hover .gallery-overlay { | |
| opacity: 1; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-primary:hover { | |
| filter: brightness(110%); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-body bg-dark text-light"> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-dark/90 backdrop-blur-sm z-50 border-b border-primary"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mr-3"> | |
| <span class="text-2xl font-bold text-dark">Z&S</span> | |
| </div> | |
| <h1 class="text-xl font-heading font-bold">Z&S Calhas e Vedações</h1> | |
| </div> | |
| <nav class="hidden md:block"> | |
| <ul class="flex space-x-8"> | |
| <li><a href="#home" class="hover:text-primary transition-colors">Home</a></li> | |
| <li><a href="#servicos" class="hover:text-primary transition-colors">Serviços</a></li> | |
| <li><a href="#sobre" class="hover:text-primary transition-colors">Sobre Nós</a></li> | |
| <li><a href="#diferenciais" class="hover:text-primary transition-colors">Diferenciais</a></li> | |
| <li><a href="#depoimentos" class="hover:text-primary transition-colors">Depoimentos</a></li> | |
| <li><a href="#contato" class="hover:text-primary transition-colors">Contato</a></li> | |
| </ul> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative pt-24 pb-32 md:pt-32 md:pb-40 bg-black"> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-70"></div> | |
| <div class="container mx-auto px-4 relative z-10 text-center"> | |
| <h2 class="text-4xl md:text-6xl font-heading font-bold mb-6 animate-fadeIn">Soluções Profissionais em Calhas e Vedações</h2> | |
| <div class="title-line mx-auto"></div> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mt-8 mb-12">Proteção e qualidade para seu telhado com materiais premium e instalação especializada</p> | |
| <a href="#contato" class="btn-primary inline-block bg-primary text-dark font-bold px-8 py-4 rounded-lg text-lg hover:brightness-110 transition-all">Solicite um Orçamento</a> | |
| </div> | |
| </section> | |
| <!-- Serviços Section --> | |
| <section id="servicos" class="py-20 bg-light text-dark"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-heading font-bold text-center mb-4">Nossos Serviços</h2> | |
| <div class="title-line mx-auto"></div> | |
| <p class="text-center max-w-2xl mx-auto mb-16 mt-8">Oferecemos soluções completas para proteção e vedação de telhados</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-home text-2xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Instalação de Calhas</h3> | |
| <p class="text-secondary mb-4">Instalação profissional de calhas em alumínio, galvanizado ou PVC, garantindo perfeita drenagem de águas pluviais.</p> | |
| <a href="#" class="text-primary font-bold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-tools text-2xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Manutenção de Calhas</h3> | |
| <p class="text-secondary mb-4">Limpeza, reparos e substituição de calhas danificadas para manter seu sistema de drenagem sempre eficiente.</p> | |
| <a href="#" class="text-primary font-bold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-2xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Vedações de Telhados</h3> | |
| <p class="text-secondary mb-4">Soluções profissionais para vedação de telhados, eliminando infiltrações e garantindo proteção contra intempéries.</p> | |
| <a href="#" class="text-primary font-bold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-tint text-2xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Rufos e Pingadeiras</h3> | |
| <p class="text-secondary mb-4">Instalação de rufos e pingadeiras para direcionamento correto da água e proteção das paredes contra umidade.</p> | |
| <a href="#" class="text-primary font-bold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-snowflake text-2xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Proteção Contra Gelo</h3> | |
| <p class="text-secondary mb-4">Sistemas especiais para regiões frias, prevenindo formação de gelo nas calhas e danos estruturais.</p> | |
| <a href="#" class="text-primary font-bold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-lightbulb text-2xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Consultoria Técnica</h3> | |
| <p class="text-secondary mb-4">Análise técnica personalizada para identificar a melhor solução em calhas e vedação para sua propriedade.</p> | |
| <a href="#" class="text-primary font-bold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Diferenciais Section --> | |
| <section id="diferenciais" class="py-20 bg-dark text-light"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-heading font-bold text-center mb-4">Nossos Diferenciais</h2> | |
| <div class="title-line mx-auto"></div> | |
| <p class="text-center max-w-2xl mx-auto mb-16 mt-8">O que nos torna a melhor escolha para seus projetos de calhas e vedação</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Diferencial 1 --> | |
| <div class="bg-dark border border-primary rounded-xl p-8 text-center hover:bg-dark/80 transition-all"> | |
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-award text-3xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Materiais Premium</h3> | |
| <p class="text-secondary">Utilizamos apenas materiais de primeira linha, com garantia de durabilidade e resistência às intempéries.</p> | |
| </div> | |
| <!-- Diferencial 2 --> | |
| <div class="bg-dark border border-primary rounded-xl p-8 text-center hover:bg-dark/80 transition-all"> | |
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-user-tie text-3xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Equipe Especializada</h3> | |
| <p class="text-secondary">Profissionais com mais de 15 anos de experiência, treinados nas melhores técnicas de instalação e vedação.</p> | |
| </div> | |
| <!-- Diferencial 3 --> | |
| <div class="bg-dark border border-primary rounded-xl p-8 text-center hover:bg-dark/80 transition-all"> | |
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-shield-alt text-3xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-heading font-bold mb-4">Garantia Extendida</h3> | |
| <p class="text-secondary">Oferecemos garantia de 5 anos em todos os nossos serviços, comprovando nossa confiança no trabalho realizado.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sobre Nós Section --> | |
| <section id="sobre" class="py-20 bg-light text-dark"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">Sobre Nós</h2> | |
| <div class="title-line"></div> | |
| <p class="mt-8 mb-6">A Z&S Calhas e Vedações nasceu da paixão por soluções eficientes em construção civil, com foco especial em proteção de telhados e edificações.</p> | |
| <p class="mb-6">Desde 2008, temos orgulho de oferecer serviços de excelência em instalação e manutenção de calhas, vedação de telhados e sistemas de drenagem pluvial.</p> | |
| <p class="mb-8">Nossa missão é proteger seu patrimônio com soluções duráveis e eficientes, utilizando materiais de qualidade e técnicas comprovadas.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="bg-primary text-dark px-6 py-3 rounded-lg font-bold">+15 Anos de Experiência</div> | |
| <div class="bg-primary text-dark px-6 py-3 rounded-lg font-bold">+500 Projetos Concluídos</div> | |
| <div class="bg-primary text-dark px-6 py-3 rounded-lg font-bold">100% Satisfação</div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="relative rounded-xl overflow-hidden shadow-xl"> | |
| <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Equipe Z&S Calhas" class="w-full h-auto"> | |
| <div class="absolute inset-0 bg-primary/20"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Galeria Section --> | |
| <section class="py-20 bg-dark text-light"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-heading font-bold text-center mb-4">Nossos Trabalhos</h2> | |
| <div class="title-line mx-auto"></div> | |
| <p class="text-center max-w-2xl mx-auto mb-16 mt-8">Confira alguns dos nossos projetos recentes de instalação e manutenção de calhas</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="gallery-item relative rounded-xl overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8 | |
| </html> |