new-cooperchip / index.html
gallabs's picture
Add 3 files
92e9657 verified
<!DOCTYPE html>
<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>&copy; 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>