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> |