Spaces:
Running
Running
ficou muito simples quero algo na pegada top mesmo parrecido com o site oficial do nodejs, algo bem bonito, e limpo]
af0b858
verified
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCraft Nexus | Inovação em Desenvolvimento</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0080ff', | |
| secondary: '#7F00FF', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-white text-gray-800 font-sans"> | |
| <custom-navbar></custom-navbar> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1 class="fade-in">Construa o futuro com código</h1> | |
| <p class="fade-in" style="animation-delay: 0.2s">Plataforma completa para desenvolver aplicações modernas e escaláveis</p> | |
| <div class="hero-btns"> | |
| <a href="#features" class="btn btn-primary fade-in" style="animation-delay: 0.4s">Comece Agora</a> | |
| <a href="#about" class="btn btn-outline fade-in" style="animation-delay: 0.5s">Saiba Mais</a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform skew-y-1 origin-top-left"></div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">Recursos <span>Poderosos</span></h2> | |
| <div class="features"> | |
| <div class="card feature-card fade-in"> | |
| <div class="icon"> | |
| <i data-feather="zap"></i> | |
| </div> | |
| <h3>Desempenho</h3> | |
| <p>Aplicativos otimizados com as melhores práticas de performance para uma experiência rápida e fluida.</p> | |
| </div> | |
| <div class="card feature-card fade-in" style="animation-delay: 0.1s"> | |
| <div class="icon"> | |
| <i data-feather="layers"></i> | |
| </div> | |
| <h3>Escalabilidade</h3> | |
| <p>Arquitetura preparada para crescer junto com seu negócio, sem preocupações com limites.</p> | |
| </div> | |
| <div class="card feature-card fade-in" style="animation-delay: 0.2s"> | |
| <div class="icon"> | |
| <i data-feather="lock"></i> | |
| </div> | |
| <h3>Segurança</h3> | |
| <p>Proteção de dados e privacidade com os mais altos padrões de segurança da indústria.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <img src="http://static.photos/technology/640x360/42" alt="Tecnologia" class="rounded-xl shadow-lg"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h2 class="text-3xl font-bold mb-6">Sobre a <span class="text-primary">JSaplication</span></h2> | |
| <p class="text-gray-600 mb-6">Somos uma equipe apaixonada por tecnologia e inovação, dedicada a criar soluções que realmente fazem a diferença para nossos clientes.</p> | |
| <p class="text-gray-600 mb-8">Com anos de experiência no mercado, combinamos conhecimento técnico com criatividade para entregar produtos de alta qualidade.</p> | |
| <a href="#contato" class="bg-primary text-white px-8 py-3 rounded-full font-semibold hover:bg-primary/90 transition">Saiba Mais</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contato" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-16">Entre em <span class="text-primary">Contato</span></h2> | |
| <div class="max-w-4xl mx-auto bg-white p-8 rounded-xl shadow-lg"> | |
| <form class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="nome" class="block text-gray-700 mb-2">Nome</label> | |
| <input type="text" id="nome" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">E-mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="mensagem" class="block text-gray-700 mb-2">Mensagem</label> | |
| <textarea id="mensagem" rows="5" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea> | |
| </div> | |
| <div class="md:col-span-2 text-center"> | |
| <button type="submit" class="bg-primary text-white px-8 py-3 rounded-full font-semibold hover:bg-primary/90 transition">Enviar Mensagem</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <cta-banner></cta-banner> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/cta-banner.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |