Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TechSolutions - Soluções Digitais</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-gradient { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion-item.active .accordion-content { | |
| max-height: 300px; | |
| } | |
| .accordion-item.active .accordion-header i { | |
| transform: rotate(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navbar --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-code text-purple-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">TechSolutions</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Recursos</a> | |
| <a href="#pricing" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Preços</a> | |
| <a href="#faq" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">FAQ</a> | |
| <a href="#testimonials" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Depoimentos</a> | |
| <a href="#contact" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contato</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="#contact" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all"> | |
| Começar agora | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Transforme seu negócio com nossas soluções digitais</h1> | |
| <p class="text-xl mb-8">Desenvolvemos aplicações web modernas e escaláveis usando as melhores tecnologias do mercado.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold text-center transition-all"> | |
| Solicitar orçamento | |
| </a> | |
| <a href="#features" class="border-2 border-white text-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-md text-lg font-semibold text-center transition-all"> | |
| Conhecer mais | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://cdn.dribbble.com/users/1787323/screenshots/11310802/media/1a58a9a8d83d7b5a1d4d5d8b8e4b5b5f.png" alt="Aplicação web" class="rounded-lg shadow-2xl w-full max-w-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Nossos Recursos</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Tecnologias modernas e metodologias ágeis para entregar o melhor produto</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md feature-card transition-all"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-bolt text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Desempenho Excepcional</h3> | |
| <p class="text-gray-600">Aplicações otimizadas para carregamento rápido e experiência fluida em qualquer dispositivo.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md feature-card transition-all"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Segurança Robustecida</h3> | |
| <p class="text-gray-600">Protegemos seus dados com as melhores práticas de segurança e criptografia avançada.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md feature-card transition-all"> | |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-sync-alt text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Atualizações Constantes</h3> | |
| <p class="text-gray-600">Mantenha-se sempre atualizado com novas funcionalidades e melhorias contínuas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tech Stack Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Tecnologias que Utilizamos</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Stack moderna para desenvolvimento de aplicações web de alto desempenho</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="flex flex-col items-center"> | |
| <i class="fab fa-microsoft text-6xl text-blue-600 mb-4"></i> | |
| <span class="font-semibold">ASP.NET Core</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <i class="fab fa-js text-6xl text-yellow-500 mb-4"></i> | |
| <span class="font-semibold">JavaScript</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <i class="fab fa-react text-6xl text-blue-400 mb-4"></i> | |
| <span class="font-semibold">React</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <i class="fab fa-aws text-6xl text-orange-500 mb-4"></i> | |
| <span class="font-semibold">AWS</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Planos e Preços</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Escolha o plano que melhor atende às necessidades do seu negócio</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Basic Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-xl"> | |
| <div class="p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Básico</h3> | |
| <p class="text-gray-600 mb-6">Ideal para pequenos negócios e startups</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 1.499</span> | |
| <span class="text-gray-600">/mês</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Site institucional</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>5 páginas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Formulário de contato</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-red-400 mr-2"></i> | |
| <span>Integração com APIs</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-4 rounded-md transition-all"> | |
| Selecionar Plano | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-purple-500 transform scale-105 transition-all hover:shadow-xl"> | |
| <div class="bg-purple-500 text-white text-center py-2"> | |
| <span class="font-semibold">Mais Popular</span> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Profissional</h3> | |
| <p class="text-gray-600 mb-6">Para empresas em crescimento</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 2.999</span> | |
| <span class="text-gray-600">/mês</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Aplicão web completa</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Painel administrativo</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Integração com APIs</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Suporte prioritário</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-4 rounded-md transition-all"> | |
| Selecionar Plano | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-xl"> | |
| <div class="p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Empresarial</h3> | |
| <p class="text-gray-600 mb-6">Soluções personalizadas para grandes empresas</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 4.999</span> | |
| <span class="text-gray-600">/mês</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Sistema personalizado</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Equipe dedicada</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Hospedagem premium</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Consultoria estratégica</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-4 rounded-md transition-all"> | |
| Selecionar Plano | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Perguntas Frequentes</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Tire suas dúvidas sobre nossos serviços e processos</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- FAQ Item 1 --> | |
| <div class="accordion-item mb-4 border-b border-gray-200 pb-4"> | |
| <div class="accordion-header cursor-pointer flex justify-between items-center" onclick="toggleAccordion(this)"> | |
| <h3 class="text-lg font-semibold text-gray-800">Quais tecnologias vocês utilizam no desenvolvimento?</h3> | |
| <i class="fas fa-chevron-down text-purple-600 transition-all"></i> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Trabalhamos principalmente com ASP.NET Core para o backend, combinado com React ou Vue.js para o frontend. | |
| Para bancos de dados utilizamos SQL Server, PostgreSQL ou MongoDB, dependendo das necessidades do projeto. | |
| Também implementamos soluções em cloud como AWS e Azure. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="accordion-item mb-4 border-b border-gray-200 pb-4"> | |
| <div class="accordion-header cursor-pointer flex justify-between items-center" onclick="toggleAccordion(this)"> | |
| <h3 class="text-lg font-semibold text-gray-800">Qual o tempo médio para desenvolvimento de um projeto?</h3> | |
| <i class="fas fa-chevron-down text-purple-600 transition-all"></i> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| O tempo varia conforme a complexidade do projeto. Um site institucional simples pode levar de 2 a 4 semanas, | |
| enquanto sistemas mais complexos podem levar de 3 a 6 meses. Após análise detalhada dos requisitos, | |
| fornecemos um cronograma realista com etapas bem definidas. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="accordion-item mb-4 border-b border-gray-200 pb-4"> | |
| <div class="accordion-header cursor-pointer flex justify-between items-center" onclick="toggleAccordion(this)"> | |
| <h3 class="text-lg font-semibold text-gray-800">Vocês oferecem suporte após o lançamento?</h3> | |
| <i class="fas fa-chevron-down text-purple-600 transition-all"></i> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Sim, oferecemos diferentes pacotes de suporte pós-implantação. Todos os nossos projetos incluem 30 dias de suporte gratuito | |
| para correção de bugs. Após este período, você pode contratar nossos planos de suporte mensal ou por demanda, | |
| conforme sua necessidade. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="accordion-item mb-4 border-b border-gray-200 pb-4"> | |
| <div class="accordion-header cursor-pointer flex justify-between items-center" onclick="toggleAccordion(this)"> | |
| <h3 class="text-lg font-semibold text-gray-800">Como funciona o processo de contratação?</h3> | |
| <i class="fas fa-chevron-down text-purple-600 transition-all"></i> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Nosso processo é simples: (1) Você entra em contato através do formulário ou por telefone; (2) Agendamos uma reunião | |
| para entender suas necessidades; (3) Elaboramos uma proposta detalhada com escopo, cronograma e investimento; | |
| (4) Após sua aprovação, iniciamos o desenvolvimento com entregas parciais para validação. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="accordion-item mb-4 border-b border-gray-200 pb-4"> | |
| <div class="accordion-header cursor-pointer flex justify-between items-center" onclick="toggleAccordion(this)"> | |
| <h3 class="text-lg font-semibold text-gray-800">Posso solicitar mudanças durante o desenvolvimento?</h3> | |
| <i class="fas fa-chevron-down text-purple-600 transition-all"></i> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Sim, trabalhamos com metodologias ágeis que permitem ajustes durante o desenvolvimento. Mudanças pequenas podem ser | |
| incorporadas sem custo adicional, desde que não impactem no escopo acordado. Para alterações mais significativas, | |
| avaliamos o impacto e fornecemos um novo orçamento se necessário. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">O que nossos clientes dizem</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Depoimentos de empresas que confiaram em nosso trabalho</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Cliente" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Ana Carolina</h4> | |
| <p class="text-gray-600">CEO, Empresa X</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"A TechSolutions revolucionou nossa presença online. O sistema que desenvolveram aumentou nossa eficiência operacional em 40% e nos deu uma vantagem competitiva no mercado."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Ricardo Silva</h4> | |
| <p class="text-gray-600">Diretor, Startup Y</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"Trabalhar com a TechSolutions foi uma experiência incrível. Eles entenderam perfeitamente nossas necessidades e entregaram uma solução que superou todas as nossas expectativas. O suporte pós-implantação também é excepcional."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Pronto para transformar seu negócio?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Entre em contato conosco hoje mesmo e descubra como podemos ajudar sua empresa a alcançar novos patamares.</p> | |
| <a href="#contact" class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-md text-lg font-semibold inline-block transition-all"> | |
| Fale com nossos especialistas | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Entre em Contato</h2> | |
| <p class="text-gray-600 mb-8">Tem dúvidas ou quer saber mais sobre nossos serviços? Preencha o formulário ao lado e nossa equipe entrará em contato em breve.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-purple-600 mr-4 text-xl"></i> | |
| <span class="text-gray-700">Av. Paulista, 1000 - São Paulo/SP</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt text-purple-600 mr-4 text-xl"></i> | |
| <span class="text-gray-700">(11) 9999-9999</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-purple-600 mr-4 text-xl"></i> | |
| <span class="text-gray-700">[email protected]</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nome Completo</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">E-mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-4 rounded-md transition-all"> | |
| Enviar Mensagem | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-code text-purple-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">TechSolutions</span> | |
| </div> | |
| <p class="text-gray-400">Transformando ideias em soluções digitais inovadoras desde 2010.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Links Rápidos</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="text-gray-400 hover:text-white transition-all">Recursos</a></li> | |
| <li><a href="#pricing" class="text-gray-400 hover:text-white transition-all">Preços</a></li> | |
| <li><a href="#faq" class="text-gray-400 hover:text-white transition-all">FAQ</a></li> | |
| <li><a href="#testimonials" class="text-gray-400 hover:text-white transition-all">Depoimentos</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition-all">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-all">Desenvolvimento Web</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Aplicativos Móveis</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Consultoria em TI</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Hospedagem Cloud</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Redes Sociais</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 TechSolutions. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Form submission handling | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Here you would typically send the form data to your ASP.NET Core backend | |
| // For this example, we'll just show an alert | |
| alert('Obrigado por sua mensagem! Entraremos em contato em breve.'); | |
| this.reset(); | |
| }); | |
| } | |
| // Accordion functionality | |
| function toggleAccordion(header) { | |
| const item = header.parentElement; | |
| const content = item.querySelector('.accordion-content'); | |
| const icon = header.querySelector('i'); | |
| // Close all other accordion items | |
| document.querySelectorAll('.accordion-item').forEach(accordion => { | |
| if (accordion !== item) { | |
| accordion.classList.remove('active'); | |
| accordion.querySelector('.accordion-content').style.maxHeight = '0'; | |
| accordion.querySelector('i').style.transform = 'rotate(0deg)'; | |
| } | |
| }); | |
| // Toggle current item | |
| item.classList.toggle('active'); | |
| if (item.classList.contains('active')) { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.style.transform = 'rotate(180deg)'; | |
| } else { | |
| content.style.maxHeight = '0'; | |
| icon.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/landing-lucas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |