VantyxForge website code

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VantyxForge</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="icon" href="logo.png" /> <style>html{scroll-behavior:smooth}</style> </head> <body class="bg-black text-white font-sans">  <header class="sticky top-0 z-50 backdrop-blur bg-black/70 border-b border-gray-800"> <div class="max-w-7xl mx-auto flex justify-between items-center px-6 py-4"> <img src="logo.png" class="h-10" /> <nav class="hidden md:flex gap-8 text-sm"> <a href="#inicio" class="hover:text-yellow-500" id="navInicio"></a> <a href="#servicos" class="hover:text-yellow-500" id="navServicos"></a> <a href="#galeria" class="hover:text-yellow-500" id="navGaleria"></a> <a href="#contato" class="hover:text-yellow-500" id="navContato"></a> </nav> <div class="flex gap-2"> <button onclick="setLang('pt')" class="border px-3 py-1 rounded">PT</button> <button onclick="setLang('en')" class="border px-3 py-1 rounded">EN</button> </div> </div> </header>  <section id="inicio" class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center px-6 py-24"> <div> <h1 id="heroTitle" class="text-5xl font-bold mb-6"></h1> <p id="heroText" class="text-gray-400 mb-8"></p> <a href="#contato" id="heroBtn" class="bg-yellow-500 text-black px-8 py-4 rounded-xl font-semibold"></a> </div> <div class="flex justify-center"> <img src="logo.png" class="h-64" /> </div> </section>  <section id="servicos" class="max-w-7xl mx-auto px-6 py-24"> <h2 id="servTitle" class="text-4xl text-center text-yellow-500 mb-14 font-bold"></h2> <div class="grid md:grid-cols-4 gap-8"> <div class="bg-gray-900 p-6 rounded-2xl" id="s1"></div> <div class="bg-gray-900 p-6 rounded-2xl" id="s2"></div> <div class="bg-gray-900 p-6 rounded-2xl" id="s3"></div> <div class="bg-gray-900 p-6 rounded-2xl" id="s4"></div> </div> </section>  <section id="galeria" class="max-w-7xl mx-auto px-6 py-24"> <h2 id="galTitle" class="text-4xl text-center text-yellow-500 mb-14 font-bold"></h2> <div class="grid md:grid-cols-3 gap-6"> <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789" class="rounded-xl"> <img src="https://images.unsplash.com/photo-1581091215367-59ab6b6c0b1d" class="rounded-xl"> <img src="https://images.unsplash.com/photo-1581092334651-ddf26d9a09d0" class="rounded-xl"> </div> </section>  <section id="contato" class="max-w-3xl mx-auto text-center py-24 px-6"> <h2 id="contactTitle" class="text-4xl text-yellow-500 mb-6 font-bold"></h2> <form id="form" class="grid gap-4"> <input required id="nome" class="p-3 rounded bg-gray-900 border border-gray-700"> <input required type="email" id="email" class="p-3 rounded bg-gray-900 border border-gray-700"> <textarea required id="descricao" class="p-3 rounded bg-gray-900 border border-gray-700"></textarea> <button id="btn" class="bg-yellow-500 text-black py-3 rounded-xl font-semibold"></button> </form> <p class="mt-6 text-gray-400">vantyxforge@gmail.com</p> </section> <footer class="text-center p-8 border-t border-gray-800 text-gray-500">© 2026 VantyxForge</footer> <script> let lang = 'pt'; const t = { pt:{ navInicio:'Início', navServicos:'Serviços', navGaleria:'Projetos', navContato:'Contato', heroTitle:'Transformamos ideias em realidade', heroText:'Soluções profissionais em impressão 3D.', heroBtn:'Solicitar Orçamento', servTitle:'Serviços', s1:'Prototipagem', s2:'Peças Personalizadas', s3:'Brindes 3D', s4:'Design', galTitle:'Projetos', contactTitle:'Contato', nome:'Seu nome', email:'Seu email', descricao:'Descreva seu projeto', btn:'Enviar' }, en:{ navInicio:'Home', navServicos:'Services', navGaleria:'Projects', navContato:'Contact', heroTitle:'We turn ideas into reality', heroText:'Professional 3D printing solutions.', heroBtn:'Request Quote', servTitle:'Services', s1:'Prototyping', s2:'Custom Parts', s3:'3D Gifts', s4:'Design', galTitle:'Projects', contactTitle:'Contact', nome:'Your name', email:'Your email', descricao:'Describe your project', btn:'Send' } }; function setLang(l){ lang=l; document.getElementById('navInicio').innerText=t[l].navInicio; document.getElementById('navServicos').innerText=t[l].navServicos; document.getElementById('navGaleria').innerText=t[l].navGaleria; document.getElementById('navContato').innerText=t[l].navContato; document.getElementById('heroTitle').innerText=t[l].heroTitle; document.getElementById('heroText').innerText=t[l].heroText; document.getElementById('heroBtn').innerText=t[l].heroBtn; document.getElementById('servTitle').innerText=t[l].servTitle; document.getElementById('s1').innerText=t[l].s1; document.getElementById('s2').innerText=t[l].s2; document.getElementById('s3').innerText=t[l].s3; document.getElementById('s4').innerText=t[l].s4; document.getElementById('galTitle').innerText=t[l].galTitle; document.getElementById('contactTitle').innerText=t[l].contactTitle; document.getElementById('nome').placeholder=t[l].nome; document.getElementById('email').placeholder=t[l].email; document.getElementById('descricao').placeholder=t[l].descricao; document.getElementById('btn').innerText=t[l].btn; } setLang('pt'); </script> </body> </html>