Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Will Company - Marketing que Transforma</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#000000', | |
| secondary: '#FF6B00', | |
| dark: '#111111', | |
| light: '#F8F8F8', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(255,107,0,0.2) 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(255,107,0,0.2), 0 10px 10px -5px rgba(255,107,0,0.1); | |
| } | |
| .nav-link:hover { | |
| color: #FF6B00; | |
| } | |
| .btn-primary:hover { | |
| background-color: #000000; | |
| color: #FF6B00; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #FF6B00; | |
| opacity: 0.9; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-light text-gray-800"> | |
| <!-- Header/Navbar --> | |
| <header class="bg-primary text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="mr-2 text-secondary"> | |
| <i class="fas fa-fire text-3xl"></i> | |
| </div> | |
| <a href="#" class="text-2xl font-bold"> | |
| <span class="text-white">WILL</span> | |
| <span class="text-secondary">COMPANY</span> | |
| </a> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-white hover:text-secondary transition duration-300">Home</a> | |
| <a href="#" class="nav-link text-white hover:text-secondary transition duration-300">Serviços</a> | |
| <a href="#" class="nav-link text-white hover:text-secondary transition duration-300">Portfólio</a> | |
| <a href="#" class="nav-link text-white hover:text-secondary transition duration-300">Sobre</a> | |
| <a href="#" class="nav-link text-white hover:text-secondary transition duration-300">Contato</a> | |
| </nav> | |
| <div class="md:hidden"> | |
| <button class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient min-h-screen flex items-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-black opacity-50"></div> | |
| <div class="container mx-auto px-6 z-10"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight"> | |
| Transformamos <span class="text-secondary">ideias</span> em resultados | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-10"> | |
| A Will Company é a parceira estratégica que sua marca precisa para se destacar no mercado digital. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="btn-primary bg-secondary text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 hover:bg-black hover:text-secondary"> | |
| Comece seu projeto | |
| </a> | |
| <a href="#" class="btn-secondary border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 hover:bg-secondary"> | |
| Conheça nossos cases | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <a href="#services" class="text-white text-2xl"> | |
| <i class="fas fa-chevron-down"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl font-bold text-primary mb-4">Nossos <span class="text-secondary">Serviços</span></h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Oferecemos soluções completas para impulsionar sua presença digital e alcançar resultados excepcionais. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg transition duration-500 hover:shadow-xl"> | |
| <div class="text-secondary mb-6"> | |
| <i class="fas fa-bullseye text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-primary mb-4">Marketing Digital</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Estratégias personalizadas para aumentar sua visibilidade, engajamento e conversões no ambiente digital. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg transition duration-500 hover:shadow-xl"> | |
| <div class="text-secondary mb-6"> | |
| <i class="fas fa-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-primary mb-4">Desenvolvimento Web</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Sites e aplicações web de alto desempenho, com design responsivo e experiência do usuário excepcional. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg transition duration-500 hover:shadow-xl"> | |
| <div class="text-secondary mb-6"> | |
| <i class="fas fa-chart-line text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-primary mb-4">Branding</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Desenvolvimento de identidade visual e estratégia de marca para posicionamento competitivo no mercado. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-primary text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <h2 class="text-4xl font-bold mb-6">Quem <span class="text-secondary">somos</span></h2> | |
| <p class="text-lg mb-6"> | |
| A Will Company nasceu da paixão por transformar ideias em realidade. Somos uma equipe de especialistas em marketing, design e tecnologia comprometidos em entregar resultados excepcionais para nossos clientes. | |
| </p> | |
| <p class="text-lg mb-8"> | |
| Com mais de 10 anos de experiência no mercado, ajudamos empresas de todos os portes a alcançarem seus objetivos e se destacarem em seus segmentos. | |
| </p> | |
| <a href="#" class="inline-block bg-secondary text-white px-8 py-3 rounded-full font-bold text-lg transition duration-300 hover:bg-white hover:text-primary"> | |
| Conheça nossa história | |
| </a> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="bg-secondary h-80 w-full rounded-lg"></div> | |
| <div class="absolute -bottom-10 -left-10 bg-white h-64 w-64 rounded-lg shadow-xl hidden lg:block"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl font-bold text-primary mb-4">Nosso <span class="text-secondary">Portfólio</span></h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Cases de sucesso que demonstram nossa capacidade de entregar resultados transformadores. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Projeto 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <h3 class="text-white text-2xl font-bold mb-2">E-commerce Fashion</h3> | |
| <p class="text-gray-300 mb-4">Aumento de 250% nas vendas em 6 meses</p> | |
| <a href="#" class="text-secondary font-semibold">Ver case completo</a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Projeto 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <h3 class="text-white text-2xl font-bold mb-2">App de Finanças</h3> | |
| <p class="text-gray-300 mb-4">50.000 downloads no primeiro mês</p> | |
| <a href="#" class="text-secondary font-semibold">Ver case completo</a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Projeto 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <h3 class="text-white text-2xl font-bold mb-2">Blog Corporativo</h3> | |
| <p class="text-gray-300 mb-4">Aumento de 300% no tráfego orgânico</p> | |
| <a href="#" class="text-secondary font-semibold">Ver case completo</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block border-2 border-secondary text-secondary px-8 py-3 rounded-full font-bold text-lg transition duration-300 hover:bg-secondary hover:text-white"> | |
| Ver todos os projetos | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl font-bold text-primary mb-4">O que dizem <span class="text-secondary">nossos clientes</span></h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| A satisfação dos nossos clientes é nossa maior recompensa. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-secondary text-2xl mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-6"> | |
| "A Will Company revolucionou nosso negócio digital. Em 6 meses, nossas vendas online triplicaram graças à estratégia personalizada que desenvolveram." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="h-12 w-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="h-full w-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Ana Souza</h4> | |
| <p class="text-gray-500 text-sm">CEO, Moda Elegante</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-secondary text-2xl mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-6"> | |
| "O trabalho de branding realizado pela Will Company foi fundamental para reposicionarmos nossa marca no mercado. Resultados impressionantes!" | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="h-12 w-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="h-full w-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Carlos Mendes</h4> | |
| <p class="text-gray-500 text-sm">Diretor, TechSolutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-secondary text-2xl mr-2"> | |
| <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-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| "O aplicativo desenvolvido pela Will Company superou todas nossas expectativas. A experiência do usuário é simplesmente incrível." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="h-12 w-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="h-full w-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Juliana Oliveira</h4> | |
| <p class="text-gray-500 text-sm">Gerente de Produto, FinApp</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-secondary text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold mb-6">Pronto para transformar seu negócio?</h2> | |
| <p class="text-xl mb-10 max-w-2xl mx-auto"> | |
| Entre em contato conosco e descubra como podemos ajudar sua empresa a alcançar novos patamares. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-white text-primary px-8 py-4 rounded-full font-bold text-lg transition duration-300 hover:bg-primary hover:text-white"> | |
| Fale com um especialista | |
| </a> | |
| <a href="#" class="border-2 border-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 hover:bg-white hover:text-secondary"> | |
| (11) 99999-9999 | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-2 text-secondary"> | |
| <i class="fas fa-fire text-2xl"></i> | |
| </div> | |
| <a href="#" class="text-xl font-bold"> | |
| <span class="text-white">WILL</span> | |
| <span class="text-secondary">COMPANY</span> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Transformando ideias em resultados desde 2010. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition duration-300"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Serviços</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Marketing Digital</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Desenvolvimento Web</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Branding</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">SEO</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Mídia Paga</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Empresa</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Sobre nós</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Equipe</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Carreiras</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contato</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-secondary"></i> | |
| Av. Paulista, 1000 - São Paulo/SP | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-secondary"></i> | |
| (11) 99999-9999 | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-secondary"></i> | |
| contato@willcompany.com | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 Will Company. Todos os direitos reservados. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Termos de Serviço</a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Política de Privacidade</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for scroll to services | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=Marcelinohf/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |