Spaces:
Running
Running
<html lang="pt-BR"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>CooperChip - Soluções em Tecnologia</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> | |
.hero-bg { | |
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
background-size: cover; | |
background-position: center; | |
} | |
.tab-content { | |
display: none; | |
} | |
.tab-content.active { | |
display: block; | |
animation: fadeIn 0.5s; | |
} | |
@keyframes fadeIn { | |
from { opacity: 0; } | |
to { opacity: 1; } | |
} | |
.chatbot { | |
position: fixed; | |
bottom: 20px; | |
right: 20px; | |
z-index: 1000; | |
transition: all 0.3s; | |
} | |
.chatbot-container { | |
display: none; | |
width: 300px; | |
height: 400px; | |
background: white; | |
border-radius: 10px; | |
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
overflow: hidden; | |
} | |
.chatbot-toggle { | |
background: #3b82f6; | |
color: white; | |
width: 60px; | |
height: 60px; | |
border-radius: 50%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
cursor: pointer; | |
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); | |
} | |
.notification-badge { | |
position: absolute; | |
top: -5px; | |
right: -5px; | |
background: #ef4444; | |
color: white; | |
border-radius: 50%; | |
width: 20px; | |
height: 20px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 12px; | |
} | |
.dropdown { | |
display: none; | |
position: absolute; | |
right: 0; | |
background: white; | |
min-width: 200px; | |
box-shadow: 0 8px 16px rgba(0,0,0,0.1); | |
border-radius: 8px; | |
z-index: 100; | |
padding: 10px 0; | |
} | |
.dropdown.active { | |
display: block; | |
animation: fadeIn 0.3s; | |
} | |
.dropdown-item { | |
padding: 10px 20px; | |
cursor: pointer; | |
transition: background 0.2s; | |
} | |
.dropdown-item:hover { | |
background: #f3f4f6; | |
} | |
.dropdown-divider { | |
border-top: 1px solid #e5e7eb; | |
margin: 5px 0; | |
} | |
.carousel { | |
position: relative; | |
overflow: hidden; | |
} | |
.carousel-inner { | |
display: flex; | |
transition: transform 0.5s ease; | |
} | |
.carousel-item { | |
min-width: 100%; | |
box-sizing: border-box; | |
} | |
.carousel-control { | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
background: rgba(0,0,0,0.5); | |
color: white; | |
border: none; | |
padding: 10px; | |
cursor: pointer; | |
border-radius: 50%; | |
z-index: 10; | |
} | |
.carousel-control.prev { | |
left: 10px; | |
} | |
.carousel-control.next { | |
right: 10px; | |
} | |
.carousel-indicators { | |
display: flex; | |
justify-content: center; | |
margin-top: 15px; | |
} | |
.carousel-indicator { | |
width: 10px; | |
height: 10px; | |
border-radius: 50%; | |
background: #cbd5e1; | |
margin: 0 5px; | |
cursor: pointer; | |
} | |
.carousel-indicator.active { | |
background: #3b82f6; | |
} | |
.accordion-item { | |
border-bottom: 1px solid #e5e7eb; | |
} | |
.accordion-header { | |
padding: 15px 0; | |
cursor: pointer; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.accordion-content { | |
max-height: 0; | |
overflow: hidden; | |
transition: max-height 0.3s ease; | |
} | |
.accordion-content.active { | |
max-height: 300px; | |
padding-bottom: 15px; | |
} | |
</style> | |
</head> | |
<body class="font-sans"> | |
<!-- Navbar --> | |
<nav class="bg-white shadow-md sticky top-0 z-50"> | |
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
<div class="flex items-center"> | |
<img src="https://cooperchip.com.br/wp-content/uploads/2023/02/logo-cooperchip.png" alt="CooperChip Logo" class="h-10"> | |
</div> | |
<div class="hidden md:flex space-x-8"> | |
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Início</a> | |
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Serviços</a> | |
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Sobre Nós</a> | |
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Portfólio</a> | |
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Contato</a> | |
</div> | |
<div class="flex items-center space-x-4"> | |
<div class="relative"> | |
<button id="notificationBtn" class="text-gray-600 hover:text-blue-600 relative"> | |
<i class="fas fa-bell text-xl"></i> | |
<span class="notification-badge">5</span> | |
</button> | |
<div id="notificationDropdown" class="dropdown"> | |
<div class="p-3 border-b border-gray-200"> | |
<h4 class="font-semibold">Notificações (5)</h4> | |
</div> | |
<div class="max-h-60 overflow-y-auto"> | |
<a href="#" class="dropdown-item flex items-start"> | |
<div class="bg-blue-100 p-2 rounded-full mr-3"> | |
<i class="fas fa-envelope text-blue-600"></i> | |
</div> | |
<div> | |
<p class="font-medium">Nova mensagem recebida</p> | |
<p class="text-sm text-gray-500">Há 5 minutos</p> | |
</div> | |
</a> | |
<a href="#" class="dropdown-item flex items-start"> | |
<div class="bg-green-100 p-2 rounded-full mr-3"> | |
<i class="fas fa-check-circle text-green-600"></i> | |
</div> | |
<div> | |
<p class="font-medium">Seu projeto foi aprovado</p> | |
<p class="text-sm text-gray-500">Há 1 hora</p> | |
</div> | |
</a> | |
<a href="#" class="dropdown-item flex items-start"> | |
<div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
<i class="fas fa-exclamation-triangle text-yellow-600"></i> | |
</div> | |
<div> | |
<p class="font-medium">Atualização necessária</p> | |
<p class="text-sm text-gray-500">Ontem</p> | |
</div> | |
</a> | |
<a href="#" class="dropdown-item flex items-start"> | |
<div class="bg-purple-100 p-2 rounded-full mr-3"> | |
<i class="fas fa-calendar-check text-purple-600"></i> | |
</div> | |
<div> | |
<p class="font-medium">Reunião agendada</p> | |
<p class="text-sm text-gray-500">Ontem</p> | |
</div> | |
</a> | |
<a href="#" class="dropdown-item flex items-start"> | |
<div class="bg-red-100 p-2 rounded-full mr-3"> | |
<i class="fas fa-bug text-red-600"></i> | |
</div> | |
<div> | |
<p class="font-medium">Bug reportado</p> | |
<p class="text-sm text-gray-500">2 dias atrás</p> | |
</div> | |
</a> | |
</div> | |
<div class="p-3 border-t border-gray-200 text-center"> | |
<a href="#" class="text-blue-600 font-medium">Ver todas</a> | |
</div> | |
</div> | |
</div> | |
<div class="relative"> | |
<button id="profileBtn" class="flex items-center space-x-2 focus:outline-none"> | |
<div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden"> | |
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-full h-full object-cover"> | |
</div> | |
</button> | |
<div id="profileDropdown" class="dropdown"> | |
<div class="px-4 py-3 border-b border-gray-200"> | |
<p class="font-semibold">John Doe</p> | |
<p class="text-sm text-gray-500">[email protected]</p> | |
</div> | |
<a href="#" class="dropdown-item"> | |
<i class="fas fa-user mr-2 text-gray-500"></i> Perfil | |
</a> | |
<a href="#" class="dropdown-item"> | |
<i class="fas fa-cog mr-2 text-gray-500"></i> Configurações | |
</a> | |
<div class="dropdown-divider"></div> | |
<a href="#" class="dropdown-item"> | |
<i class="fas fa-sign-in-alt mr-2 text-gray-500"></i> Login | |
</a> | |
<a href="#" class="dropdown-item"> | |
<i class="fas fa-user-plus mr-2 text-gray-500"></i> Registrar | |
</a> | |
<div class="dropdown-divider"></div> | |
<a href="#" class="dropdown-item text-red-500"> | |
<i class="fas fa-sign-out-alt mr-2"></i> Sair | |
</a> | |
</div> | |
</div> | |
<button class="md:hidden focus:outline-none"> | |
<i class="fas fa-bars text-xl text-gray-700"></i> | |
</button> | |
</div> | |
</div> | |
</nav> | |
<!-- Hero Section --> | |
<section class="hero-bg text-white py-20"> | |
<div class="container mx-auto px-4 text-center"> | |
<h1 class="text-4xl md:text-5xl font-bold mb-6">Soluções Tecnológicas para o seu Negócio</h1> | |
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Transformamos ideias em realidade digital com expertise e inovação.</p> | |
<div class="flex flex-col sm:flex-row justify-center gap-4"> | |
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> | |
Conheça nossos serviços | |
</button> | |
<button class="bg-transparent hover:bg-white hover:text-black text-white font-bold py-3 px-6 border-2 border-white rounded-lg transition duration-300"> | |
Fale conosco | |
</button> | |
</div> | |
</div> | |
</section> | |
<!-- Services Section --> | |
<section class="py-16 bg-gray-50"> | |
<div class="container mx-auto px-4"> | |
<h2 class="text-3xl font-bold text-center mb-12">Nossos Serviços</h2> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
<div class="text-blue-600 mb-4"> | |
<i class="fas fa-laptop-code text-4xl"></i> | |
</div> | |
<h3 class="text-xl font-semibold mb-3">Desenvolvimento Web</h3> | |
<p class="text-gray-600">Criamos sites e aplicações web personalizadas, responsivas e de alto desempenho para atender às necessidades do seu negócio.</p> | |
</div> | |
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
<div class="text-blue-600 mb-4"> | |
<i class="fas fa-mobile-alt text-4xl"></i> | |
</div> | |
<h3 class="text-xl font-semibold mb-3">Aplicativos Móveis</h3> | |
<p class="text-gray-600">Desenvolvemos aplicativos nativos e híbridos para iOS e Android, garantindo a melhor experiência do usuário.</p> | |
</div> | |
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
<div class="text-blue-600 mb-4"> | |
<i class="fas fa-chart-line text-4xl"></i> | |
</div> | |
<h3 class="text-xl font-semibold mb-3">Marketing Digital</h3> | |
<p class="text-gray-600">Estratégias de marketing digital personalizadas para aumentar sua presença online e converter visitantes em clientes.</p> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Video Carousel Section --> | |
<section class="py-16 bg-white"> | |
<div class="container mx-auto px-4"> | |
<h2 class="text-3xl font-bold text-center mb-12">Nossos Projetos</h2> | |
<div class="carousel relative"> | |
<div class="carousel-inner"> | |
<div class="carousel-item"> | |
<div class="flex flex-col md:flex-row items-center gap-8"> | |
<div class="w-full md:w-1/2"> | |
<div class="aspect-w-16 aspect-h-9"> | |
<iframe class="w-full h-64 md:h-96 rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
</div> | |
</div> | |
<div class="w-full md:w-1/2"> | |
<h3 class="text-2xl font-bold mb-4">Projeto Inovador 2023</h3> | |
<p class="text-gray-600 mb-4">Este projeto revolucionário combinou tecnologias de ponta para criar uma solução única no mercado. Veja como transformamos o desafio do cliente em uma oportunidade de negócios.</p> | |
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300"> | |
Saiba mais | |
</button> | |
</div> | |
</div> | |
</div> | |
<div class="carousel-item"> | |
<div class="flex flex-col md:flex-row items-center gap-8"> | |
<div class="w-full md:w-1/2"> | |
<div class="aspect-w-16 aspect-h-9"> | |
<iframe class="w-full h-64 md:h-96 rounded-lg" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
</div> | |
</div> | |
<div class="w-full md:w-1/2"> | |
<h3 class="text-2xl font-bold mb-4">Sistema de Gestão Empresarial</h3> | |
<p class="text-gray-600 mb-4">Desenvolvemos um sistema completo de gestão que integra todas as áreas da empresa, proporcionando eficiência e redução de custos operacionais.</p> | |
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300"> | |
Saiba mais | |
</button> | |
</div> | |
</div> | |
</div> | |
<div class="carousel-item"> | |
<div class="flex flex-col md:flex-row items-center gap-8"> | |
<div class="w-full md:w-1/2"> | |
<div class="aspect-w-16 aspect-h-9"> | |
<iframe class="w-full h-64 md:h-96 rounded-lg" src="https://www.youtube.com/embed/J---aiyznGQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
</div> | |
</div> | |
<div class="w-full md:w-1/2"> | |
<h3 class="text-2xl font-bold mb-4">Aplicativo de Saúde</h3> | |
<p class="text-gray-600 mb-4">Um aplicativo inovador que conecta pacientes e profissionais de saúde, facilitando o agendamento de consultas e o acompanhamento médico.</p> | |
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300"> | |
Saiba mais | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<button class="carousel-control prev"> | |
<i class="fas fa-chevron-left"></i> | |
</button> | |
<button class="carousel-control next"> | |
<i class="fas fa-chevron-right"></i> | |
</button> | |
<div class="carousel-indicators"> | |
<button class="carousel-indicator active" data-slide="0"></button> | |
<button class="carousel-indicator" data-slide="1"></button> | |
<button class="carousel-indicator" data-slide="2"></button> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Tabs Section --> | |
<section class="py-16 bg-gray-50"> | |
<div class="container mx-auto px-4"> | |
<h2 class="text-3xl font-bold text-center mb-12">Nossa Abordagem</h2> | |
<div class="max-w-4xl mx-auto"> | |
<div class="flex border-b border-gray-200 mb-8"> | |
<button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-600 transition duration-300 active" data-tab="tab1"> | |
Planejamento | |
</button> | |
<button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-600 transition duration-300" data-tab="tab2"> | |
Desenvolvimento | |
</button> | |
<button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-600 transition duration-300" data-tab="tab3"> | |
Entrega | |
</button> | |
</div> | |
<div id="tab1" class="tab-content active"> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
<div> | |
<h3 class="text-xl font-semibold mb-4">Planejamento Estratégico</h3> | |
<p class="text-gray-600 mb-4">Antes de começar qualquer projeto, realizamos uma análise detalhada das necessidades do cliente e do mercado. Isso nos permite criar uma estratégia personalizada que garante o melhor resultado.</p> | |
<ul class="space-y-2"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Análise de requisitos</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Definição de escopo</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Planejamento de recursos</span> | |
</li> | |
</ul> | |
</div> | |
<div> | |
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Planejamento" class="w-full h-auto rounded-lg shadow-md"> | |
</div> | |
</div> | |
</div> | |
<div id="tab2" class="tab-content"> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
<div> | |
<h3 class="text-xl font-semibold mb-4">Desenvolvimento Ágil</h3> | |
<p class="text-gray-600 mb-4">Utilizamos metodologias ágeis para garantir flexibilidade e qualidade durante todo o processo de desenvolvimento. Nossas equipes são multidisciplinares e altamente capacitadas.</p> | |
<ul class="space-y-2"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Sprints semanais</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Testes contínuos</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Feedback constante</span> | |
</li> | |
</ul> | |
</div> | |
<div> | |
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Desenvolvimento" class="w-full h-auto rounded-lg shadow-md"> | |
</div> | |
</div> | |
</div> | |
<div id="tab3" class="tab-content"> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
<div> | |
<h3 class="text-xl font-semibold mb-4">Entrega e Suporte</h3> | |
<p class="text-gray-600 mb-4">Nossa relação com o cliente não termina na entrega do projeto. Oferecemos suporte contínuo e atualizações para garantir que a solução continue atendendo às necessidades do negócio.</p> | |
<ul class="space-y-2"> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Treinamento da equipe</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Manutenção preventiva</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
<span>Atualizações periódicas</span> | |
</li> | |
</ul> | |
</div> | |
<div> | |
<img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Entrega" class="w-full h-auto rounded-lg shadow-md"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- FAQ Section --> | |
<section class="py-16 bg-white"> | |
<div class="container mx-auto px-4"> | |
<h2 class="text-3xl font-bold text-center mb-12">Perguntas Frequentes</h2> | |
<div class="max-w-3xl mx-auto"> | |
<div class="accordion-item"> | |
<div class="accordion-header"> | |
<h3 class="text-lg font-semibold">Quanto tempo leva para desenvolver um projeto?</h3> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</div> | |
<div class="accordion-content"> | |
<p class="text-gray-600">O tempo de desenvolvimento varia de acordo com a complexidade do projeto. Projetos simples podem levar de 2 a 4 semanas, enquanto sistemas mais complexos podem levar de 3 a 6 meses. Durante nossa fase de planejamento, forneceremos uma estimativa mais precisa com base nos requisitos específicos do seu projeto.</p> | |
</div> | |
</div> | |
<div class="accordion-item"> | |
<div class="accordion-header"> | |
<h3 class="text-lg font-semibold">Quais tecnologias vocês utilizam?</h3> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</div> | |
<div class="accordion-content"> | |
<p class="text-gray-600">Utilizamos as tecnologias mais modernas e adequadas para cada tipo de projeto. Para desenvolvimento web: React, Vue.js, Node.js, Laravel e WordPress. Para aplicativos móveis: React Native e Flutter. Bancos de dados: MySQL, PostgreSQL e MongoDB. Também trabalhamos com AWS, Google Cloud e Azure para hospedagem e infraestrutura.</p> | |
</div> | |
</div> | |
<div class="accordion-item"> | |
<div class="accordion-header"> | |
<h3 class="text-lg font-semibold">Vocês oferecem suporte após a entrega?</h3> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</div> | |
<div class="accordion-content"> | |
<p class="text-gray-600">Sim, oferecemos diferentes pacotes de suporte pós-entrega, que podem incluir correção de bugs, atualizações de segurança, melhorias e até mesmo treinamento para sua equipe. Durante o planejamento do projeto, discutiremos suas necessidades de suporte para criar um pacote personalizado.</p> | |
</div> | |
</div> | |
<div class="accordion-item"> | |
<div class="accordion-header"> | |
<h3 class="text-lg font-semibold">Como é o processo de contratação?</h3> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</div> | |
<div class="accordion-content"> | |
<p class="text-gray-600">Nosso processo começa com uma reunião inicial para entender suas necessidades. Em seguida, elaboramos uma proposta detalhada com escopo, cronograma e orçamento. Após sua aprovação, assinamos um contrato e iniciamos o projeto. Mantemos comunicação constante durante todo o desenvolvimento, com entregas parciais para seu feedback.</p> | |
</div> | |
</div> | |
<div class="accordion-item"> | |
<div class="accordion-header"> | |
<h3 class="text-lg font-semibold">Vocês trabalham com projetos internacionais?</h3> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</div> | |
<div class="accordion-content"> | |
<p class="text-gray-600">Sim, atendemos clientes em todo o mundo. Trabalhamos com diferentes fusos horários e nos adaptamos aos requisitos específicos de cada região. Nossa equipe é fluente em português, inglês e espanhol, garantindo comunicação eficiente em projetos internacionais.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- CTA Section --> | |
<section class="py-16 bg-blue-600 text-white"> | |
<div class="container mx-auto px-4 text-center"> | |
<h2 class="text-3xl font-bold mb-6">Pronto para transformar sua ideia em realidade?</h2> | |
<p class="text-xl mb-8 max-w-2xl mx-auto">Entre em contato conosco hoje mesmo e descubra como podemos ajudar o seu negócio a crescer com tecnologia.</p> | |
<button class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-lg transition duration-300 shadow-lg"> | |
Solicitar Orçamento | |
</button> | |
</div> | |
</section> | |
<!-- Footer --> | |
<footer class="bg-black text-white py-12"> | |
<div class="container mx-auto px-4"> | |
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
<div> | |
<img src="https://cooperchip.com.br/wp-content/uploads/2023/02/logo-cooperchip.png" alt="CooperChip Logo" class="h-10 mb-4"> | |
<p class="text-gray-400">Transformando ideias em soluções digitais inovadoras desde 2010.</p> | |
<div class="flex space-x-4 mt-4"> | |
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
<i class="fab fa-facebook-f"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
<i class="fab fa-twitter"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
<i class="fab fa-instagram"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
<i class="fab fa-linkedin-in"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
<i class="fab fa-youtube"></i> | |
</a> | |
</div> | |
</div> | |
<div> | |
<h3 class="text-lg font-semibold mb-4">Links Rápidos</h3> | |
<ul class="space-y-2"> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Início</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Sobre Nós</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Serviços</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Portfólio</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contato</a></li> | |
</ul> | |
</div> | |
<div> | |
<h3 class="text-lg font-semibold mb-4">Serviços</h3> | |
<ul class="space-y-2"> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Desenvolvimento Web</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Aplicativos Móveis</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">UI/UX Design</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Marketing Digital</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Consultoria em TI</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Hospedagem</a></li> | |
</ul> | |
</div> | |
<div> | |
<h3 class="text-lg font-semibold mb-4">Contato</h3> | |
<ul class="space-y-3"> | |
<li class="flex items-start"> | |
<i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i> | |
<span class="text-gray-400">Av. Paulista, 1000 - São Paulo, SP</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-phone-alt mt-1 mr-3 text-gray-400"></i> | |
<span class="text-gray-400">(11) 1234-5678</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-envelope mt-1 mr-3 text-gray-400"></i> | |
<span class="text-gray-400">[email protected]</span> | |
</li> | |
<li class="flex items-start"> | |
<i class="fas fa-clock mt-1 mr-3 text-gray-400"></i> | |
<span class="text-gray-400">Seg-Sex: 9h-18h</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
<p>© 2023 CooperChip. Todos os direitos reservados.</p> | |
</div> | |
</div> | |
</footer> | |
<!-- Chatbot --> | |
<div class="chatbot"> | |
<div id="chatbotContainer" class="chatbot-container"> | |
<div class="bg-blue-600 text-white p-4"> | |
<div class="flex justify-between items-center"> | |
<h3 class="font-bold">Assistente Virtual</h3> | |
<button id="closeChatbot" class="text-white hover:text-gray-200"> | |
<i class="fas fa-times"></i> | |
</button> | |
</div> | |
<p class="text-sm opacity-80">Estamos aqui para ajudar!</p> | |
</div> | |
<div class="p-4 h-64 overflow-y-auto bg-gray-50"> | |
<div class="mb-4"> | |
<div class="bg-blue-100 text-blue-900 rounded-lg p-3 max-w-xs"> | |
<p>Olá! Como posso te ajudar hoje?</p> | |
</div> | |
</div> | |
<div class="flex justify-end mb-4"> | |
<div class="bg-blue-600 text-white rounded-lg p-3 max-w-xs"> | |
<p>Quero saber mais sobre os serviços.</p> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<div class="bg-blue-100 text-blue-900 rounded-lg p-3 max-w-xs"> | |
<p>Claro! Oferecemos desenvolvimento web, aplicativos móveis e muito mais. Qual serviço te interessa?</p> | |
</div> | |
</div> | |
</div> | |
<div class="p-4 border-t border-gray-200"> | |
<div class="flex"> | |
<input type="text" placeholder="Digite sua mensagem..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition duration-300"> | |
<i class="fas fa-paper-plane"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
<button id="chatbotToggle" class="chatbot-toggle"> | |
<i class="fas fa-comment-dots text-2xl"></i> | |
</button> | |
</div> | |
<script> | |
// Profile dropdown | |
const profileBtn = document.getElementById('profileBtn'); | |
const profileDropdown = document.getElementById('profileDropdown'); | |
profileBtn.addEventListener('click', () => { | |
profileDropdown.classList.toggle('active'); | |
notificationDropdown.classList.remove('active'); | |
}); | |
// Notification dropdown | |
const notificationBtn = document.getElementById('notificationBtn'); | |
const notificationDropdown = document.getElementById('notificationDropdown'); | |
notificationBtn.addEventListener('click', () => { | |
notificationDropdown.classList.toggle('active'); | |
profileDropdown.classList.remove('active'); | |
}); | |
// Close dropdowns when clicking outside | |
document.addEventListener('click', (e) => { | |
if (!profileBtn.contains(e.target) && !profileDropdown.contains(e.target)) { | |
profileDropdown.classList.remove('active'); | |
} | |
if (!notificationBtn.contains(e.target) && !notificationDropdown.contains(e.target)) { | |
notificationDropdown.classList.remove('active'); | |
} | |
}); | |
// Chatbot toggle | |
const chatbotToggle = document.getElementById('chatbotToggle'); | |
const chatbotContainer = document.getElementById('chatbotContainer'); | |
const closeChatbot = document.getElementById('closeChatbot'); | |
chatbotToggle.addEventListener('click', () => { | |
chatbotContainer.style.display = chatbotContainer.style.display === 'block' ? 'none' : 'block'; | |
}); | |
closeChatbot.addEventListener('click', () => { | |
chatbotContainer.style.display = 'none'; | |
}); | |
// Carousel functionality | |
const carouselInner = document.querySelector('.carousel-inner'); | |
const carouselItems = document.querySelectorAll('.carousel-item'); | |
const prevBtn = document.querySelector('.carousel-control.prev'); | |
const nextBtn = document.querySelector('.carousel-control.next'); | |
const indicators = document.querySelectorAll('.carousel-indicator'); | |
let currentIndex = 0; | |
const itemCount = carouselItems.length; | |
function updateCarousel() { | |
carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`; | |
indicators.forEach((indicator, index) => { | |
if (index === currentIndex) { | |
indicator.classList.add('active'); | |
} else { | |
indicator.classList.remove('active'); | |
} | |
}); | |
} | |
prevBtn.addEventListener('click', () => { | |
currentIndex = (currentIndex - 1 + itemCount) % itemCount; | |
updateCarousel(); | |
}); | |
nextBtn.addEventListener('click', () => { | |
currentIndex = (currentIndex + 1) % itemCount; | |
updateCarousel(); | |
}); | |
indicators.forEach((indicator, index) => { | |
indicator.addEventListener('click', () => { | |
currentIndex = index; | |
updateCarousel(); | |
}); | |
}); | |
// Auto-rotate carousel | |
setInterval(() => { | |
currentIndex = (currentIndex + 1) % itemCount; | |
updateCarousel(); | |
}, 5000); | |
// Tab functionality | |
const tabBtns = document.querySelectorAll('.tab-btn'); | |
const tabContents = document.querySelectorAll('.tab-content'); | |
tabBtns.forEach(btn => { | |
btn.addEventListener('click', () => { | |
const tabId = btn.getAttribute('data-tab'); | |
// Remove active class from all buttons and contents | |
tabBtns.forEach(b => b.classList.remove('active')); | |
tabContents.forEach(c => c.classList.remove('active')); | |
// Add active class to clicked button and corresponding content | |
btn.classList.add('active'); | |
document.getElementById(tabId).classList.add('active'); | |
}); | |
}); | |
// Accordion functionality | |
const accordionHeaders = document.querySelectorAll('.accordion-header'); | |
accordionHeaders.forEach(header => { | |
header.addEventListener('click', () => { | |
const accordionItem = header.parentElement; | |
const accordionContent = header.nextElementSibling; | |
const icon = header.querySelector('i'); | |
// Toggle active class on content | |
accordionContent.classList.toggle('active'); | |
// Rotate icon | |
if (accordionContent.classList.contains('active')) { | |
icon.style.transform = 'rotate(180deg)'; | |
} else { | |
icon.style.transform = 'rotate(0deg)'; | |
} | |
// Close other accordion items | |
accordionHeaders.forEach(h => { | |
if (h !== header) { | |
const otherContent = h.nextElementSibling; | |
const otherIcon = h.querySelector('i'); | |
otherContent.classList.remove('active'); | |
otherIcon.style.transform = 'rotate(0deg)'; | |
} | |
}); | |
}); | |
}); | |
</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/new-cooperchip" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
</html> |