| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Portfólio | Analista de Sistemas</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> |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #6b46c1 0%, #3182ce 100%); |
| } |
| .project-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .skill-bar { |
| height: 8px; |
| border-radius: 4px; |
| } |
| .timeline-item:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| left: 24px; |
| top: 32px; |
| height: calc(100% - 32px); |
| width: 2px; |
| background: #e2e8f0; |
| } |
| #menu-toggle:checked ~ #mobile-menu { |
| display: block; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50 text-gray-800"> |
| |
| <header class="fixed w-full bg-white shadow-sm z-50"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold text-indigo-600">Analista<span class="text-gray-700">Sys</span></a> |
| |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="text-indigo-600 font-medium">Início</a> |
| <a href="#about" class="hover:text-indigo-600 transition">Sobre</a> |
| <a href="#skills" class="hover:text-indigo-600 transition">Habilidades</a> |
| <a href="#projects" class="hover:text-indigo-600 transition">Projetos</a> |
| <a href="#experience" class="hover:text-indigo-600 transition">Experiência</a> |
| <a href="#contact" class="hover:text-indigo-600 transition">Contato</a> |
| </nav> |
| |
| |
| <div class="md:hidden"> |
| <input type="checkbox" id="menu-toggle" class="hidden"> |
| <label for="menu-toggle" class="block cursor-pointer"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| </svg> |
| </label> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden mt-4"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#home" class="block py-2 px-4 bg-indigo-50 text-indigo-600 rounded">Início</a> |
| <a href="#about" class="block py-2 px-4 hover:bg-gray-100 rounded">Sobre</a> |
| <a href="#skills" class="block py-2 px-4 hover:bg-gray-100 rounded">Habilidades</a> |
| <a href="#projects" class="block py-2 px-4 hover:bg-gray-100 rounded">Projetos</a> |
| <a href="#experience" class="block py-2 px-4 hover:bg-gray-100 rounded">Experiência</a> |
| <a href="#contact" class="block py-2 px-4 hover:bg-gray-100 rounded">Contato</a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="gradient-bg text-white pt-32 pb-20"> |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Olá, eu sou <span class="text-yellow-300">Carlos Silva</span></h1> |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6">Analista de Sistemas</h2> |
| <p class="text-lg mb-8 opacity-90">Especializado em análise de requisitos, modelagem de sistemas e gestão de projetos de TI com mais de 8 anos de experiência.</p> |
| <div class="flex space-x-4"> |
| <a href="#contact" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Contate-me</a> |
| <a href="#projects" class="border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">Ver Projetos</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> |
| <div class="absolute inset-0 bg-indigo-400 rounded-full opacity-20"></div> |
| <div class="absolute inset-4 bg-indigo-500 rounded-full opacity-30"></div> |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
| alt="Analista de Sistemas" |
| class="absolute inset-0 w-full h-full object-cover rounded-full border-4 border-white shadow-xl"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Sobre <span class="text-indigo-600">Mim</span></h2> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
| alt="Carlos Silva" |
| class="w-64 h-64 rounded-full object-cover border-4 border-indigo-100 shadow-lg"> |
| </div> |
| |
| <div class="md:w-2/3 md:pl-12"> |
| <h3 class="text-2xl font-semibold mb-4">Analista de Sistemas Profissional</h3> |
| <p class="text-gray-600 mb-6"> |
| Sou um analista de sistemas apaixonado por transformar necessidades de negócios em soluções tecnológicas eficientes. |
| Com formação em Ciência da Computação e pós-graduação em Engenharia de Software, atuo na interseção entre negócios e tecnologia. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| <div> |
| <p class="mb-2"><span class="font-medium">Nome:</span> Carlos Silva</p> |
| <p class="mb-2"><span class="font-medium">Email:</span> carlos@analistasys.com</p> |
| <p class="mb-2"><span class="font-medium">Telefone:</span> (11) 98765-4321</p> |
| </div> |
| <div> |
| <p class="mb-2"><span class="font-medium">Experiência:</span> 8+ anos</p> |
| <p class="mb-2"><span class="font-medium">Especialidade:</span> Análise de Sistemas</p> |
| <p class="mb-2"><span class="font-medium">Localização:</span> São Paulo, Brasil</p> |
| </div> |
| </div> |
| |
| <div class="flex flex-wrap gap-4"> |
| <a href="#" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition"> |
| <i class="fas fa-download mr-2"></i> Baixar CV |
| </a> |
| <a href="#contact" class="border border-indigo-600 text-indigo-600 px-6 py-2 rounded-lg hover:bg-indigo-50 transition"> |
| <i class="fas fa-envelope mr-2"></i> Enviar Mensagem |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="skills" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Minhas <span class="text-indigo-600">Habilidades</span></h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| |
| <div> |
| <h3 class="text-xl font-semibold mb-6 flex items-center"> |
| <i class="fas fa-laptop-code text-indigo-600 mr-3"></i> Habilidades Técnicas |
| </h3> |
| |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>Análise de Requisitos</span> |
| <span>95%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>Modelagem UML</span> |
| <span>90%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>SQL e Bancos de Dados</span> |
| <span>85%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>Gestão de Projetos</span> |
| <span>88%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 88%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-xl font-semibold mb-6 flex items-center"> |
| <i class="fas fa-user-tie text-indigo-600 mr-3"></i> Habilidades Profissionais |
| </h3> |
| |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>Comunicação</span> |
| <span>92%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 92%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>Trabalho em Equipe</span> |
| <span>94%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 94%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>Resolução de Problemas</span> |
| <span>90%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span>Gestão de Tempo</span> |
| <span>87%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="skill-bar bg-indigo-600 rounded-full" style="width: 87%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-16"> |
| <h3 class="text-xl font-semibold mb-8 text-center">Ferramentas & Tecnologias</h3> |
| |
| <div class="flex flex-wrap justify-center gap-8"> |
| <div class="flex flex-col items-center"> |
| <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2"> |
| <i class="fab fa-microsoft text-3xl text-blue-600"></i> |
| </div> |
| <span>Azure</span> |
| </div> |
| |
| <div class="flex flex-col items-center"> |
| <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2"> |
| <i class="fas fa-database text-3xl text-blue-500"></i> |
| </div> |
| <span>SQL Server</span> |
| </div> |
| |
| <div class="flex flex-col items-center"> |
| <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2"> |
| <i class="fab fa-jira text-3xl text-blue-400"></i> |
| </div> |
| <span>Jira</span> |
| </div> |
| |
| <div class="flex flex-col items-center"> |
| <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2"> |
| <i class="fab fa-figma text-3xl text-purple-500"></i> |
| </div> |
| <span>Figma</span> |
| </div> |
| |
| <div class="flex flex-col items-center"> |
| <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2"> |
| <i class="fab fa-git-alt text-3xl text-orange-600"></i> |
| </div> |
| <span>Git</span> |
| </div> |
| |
| <div class="flex flex-col items-center"> |
| <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2"> |
| <i class="fas fa-project-diagram text-3xl text-green-600"></i> |
| </div> |
| <span>Visio</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Meus <span class="text-indigo-600">Projetos</span></h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> |
| <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="Sistema de Gestão" |
| class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Sistema de Gestão Empresarial</h3> |
| <p class="text-gray-600 mb-4">Sistema integrado para gestão de processos empresariais com módulos de RH, Financeiro e Vendas.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Análise de Requisitos</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">UML</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">SQL</span> |
| </div> |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition"> |
| Ver Detalhes <i class="fas fa-arrow-right ml-1"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> |
| <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="Aplicativo Mobile" |
| class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Aplicativo de Serviços Financeiros</h3> |
| <p class="text-gray-600 mb-4">Aplicativo mobile para gestão financeira pessoal com integração a bancos e análise de gastos.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Análise de Requisitos</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Prototipagem</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">API</span> |
| </div> |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition"> |
| Ver Detalhes <i class="fas fa-arrow-right ml-1"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> |
| <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="Portal E-commerce" |
| class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Portal E-commerce B2B</h3> |
| <p class="text-gray-600 mb-4">Plataforma de e-commerce para negócios com integração de ERP e sistema de pedidos personalizado.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">BPMN</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Fluxogramas</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Documentação</span> |
| </div> |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition"> |
| Ver Detalhes <i class="fas fa-arrow-right ml-1"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block bg-indigo-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-indigo-700 transition"> |
| <i class="fas fa-folder-open mr-2"></i> Ver Todos os Projetos |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="experience" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Minha <span class="text-indigo-600">Experiência</span></h2> |
| |
| <div class="max-w-3xl mx-auto"> |
| |
| <div class="mb-16"> |
| <h3 class="text-2xl font-semibold mb-8 flex items-center"> |
| <i class="fas fa-graduation-cap text-indigo-600 mr-3"></i> Educação |
| </h3> |
| |
| <div class="relative space-y-8 pl-12"> |
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-university text-indigo-600"></i> |
| </div> |
| <div class="ml-6"> |
| <h4 class="text-lg font-semibold">Pós-graduação em Engenharia de Software</h4> |
| <p class="text-gray-600 mb-2">Universidade de São Paulo (USP) • 2018 - 2020</p> |
| <p class="text-gray-700">Especialização em metodologias ágeis, arquitetura de software e gestão de projetos de TI.</p> |
| </div> |
| </div> |
| |
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-graduation-cap text-indigo-600"></i> |
| </div> |
| <div class="ml-6"> |
| <h4 class="text-lg font-semibold">Bacharelado em Ciência da Computação</h4> |
| <p class="text-gray-600 mb-2">Universidade Estadual de Campinas (UNICAMP) • 2012 - 2016</p> |
| <p class="text-gray-700">Formação em programação, algoritmos, estrutura de dados e fundamentos de engenharia de software.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-2xl font-semibold mb-8 flex items-center"> |
| <i class="fas fa-briefcase text-indigo-600 mr-3"></i> Experiência Profissional |
| </h3> |
| |
| <div class="relative space-y-8 pl-12"> |
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-building text-indigo-600"></i> |
| </div> |
| <div class="ml-6"> |
| <h4 class="text-lg font-semibold">Analista de Sistemas Sênior</h4> |
| <p class="text-gray-600 mb-2">TechSolutions Inc. • 2020 - Presente</p> |
| <p class="text-gray-700 mb-2">Principais responsabilidades:</p> |
| <ul class="list-disc pl-5 text-gray-700 space-y-1"> |
| <li>Liderança na análise de requisitos para sistemas corporativos</li> |
| <li>Elaboração de documentação técnica e funcional</li> |
| <li>Mediação entre stakeholders e equipe de desenvolvimento</li> |
| <li>Gestão de projetos utilizando metodologias ágeis</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-building text-indigo-600"></i> |
| </div> |
| <div class="ml-6"> |
| <h4 class="text-lg font-semibold">Analista de Sistemas Pleno</h4> |
| <p class="text-gray-600 mb-2">GlobalTech • 2017 - 2020</p> |
| <p class="text-gray-700 mb-2">Principais responsabilidades:</p> |
| <ul class="list-disc pl-5 text-gray-700 space-y-1"> |
| <li>Análise e modelagem de sistemas de informação</li> |
| <li>Especificação de casos de uso e regras de negócio</li> |
| <li>Testes de aceitação e validação de requisitos</li> |
| <li>Suporte à equipe de desenvolvimento</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-building text-indigo-600"></i> |
| </div> |
| <div class="ml-6"> |
| <h4 class="text-lg font-semibold">Analista de Sistemas Júnior</h4> |
| <p class="text-gray-600 mb-2">Inova Sistemas • 2015 - 2017</p> |
| <p class="text-gray-700 mb-2">Principais responsabilidades:</p> |
| <ul class="list-disc pl-5 text-gray-700 space-y-1"> |
| <li>Levantamento de requisitos com clientes</li> |
| <li>Elaboração de diagramas UML</li> |
| <li>Documentação de sistemas</li> |
| <li>Suporte aos usuários</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Entre em <span class="text-indigo-600">Contato</span></h2> |
| |
| <div class="flex flex-col md:flex-row gap-12"> |
| |
| <div class="md:w-1/3"> |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
| <h3 class="text-xl font-semibold mb-6">Informações de Contato</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Localização</h4> |
| <p class="text-gray-600">São Paulo, Brasil</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Email</h4> |
| <p class="text-gray-600">carlos@analistasys.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Telefone</h4> |
| <p class="text-gray-600">(11) 98765-4321</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Horário Comercial</h4> |
| <p class="text-gray-600">Seg - Sex, 9:00 - 18:00</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-medium mb-4">Redes Sociais</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="md:w-2/3"> |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
| <h3 class="text-xl font-semibold mb-6">Envie uma Mensagem</h3> |
| |
| <form id="contactForm" class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="name" class="block mb-2 font-medium">Nome Completo</label> |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" required> |
| </div> |
| <div> |
| <label for="email" class="block mb-2 font-medium">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="subject" class="block mb-2 font-medium">Assunto</label> |
| <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" required> |
| </div> |
| |
| <div> |
| <label for="message" class="block mb-2 font-medium">Mensagem</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" required></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition"> |
| <i class="fas fa-paper-plane mr-2"></i> Enviar Mensagem |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <a href="#" class="text-2xl font-bold text-indigo-400">Analista<span class="text-white">Sys</span></a> |
| <p class="mt-2 text-gray-400">Transformando necessidades em soluções tecnológicas.</p> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-linkedin-in text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 AnalistaSys. Todos os direitos reservados.</p> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| const backToTopButton = document.getElementById('backToTop'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', () => { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| const menuToggle = document.getElementById('menu-toggle'); |
| if (menuToggle.checked) { |
| menuToggle.checked = false; |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| |
| |
| const contactForm = document.getElementById('contactForm'); |
| |
| contactForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| const name = document.getElementById('name').value; |
| const email = document.getElementById('email').value; |
| const subject = document.getElementById('subject').value; |
| const message = document.getElementById('message').value; |
| |
| |
| |
| alert(`Obrigado, ${name}! Sua mensagem sobre "${subject}" foi enviada com sucesso. Entrarei em contato em breve.`); |
| |
| |
| contactForm.reset(); |
| }); |
| </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=tidotto/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
