| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Caminhões BR - CMS Headless</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> |
| .truck-card:hover .truck-image { |
| transform: scale(1.05); |
| } |
| .truck-image { |
| transition: transform 0.3s ease; |
| } |
| .hero-bg { |
| background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| .feature-icon { |
| width: 60px; |
| height: 60px; |
| } |
| .loading { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| border: 3px solid rgba(255,255,255,.3); |
| border-radius: 50%; |
| border-top-color: #fff; |
| animation: spin 1s ease-in-out infinite; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-100"> |
| |
| <header class="bg-white shadow-md sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-truck-moving text-red-600 text-3xl mr-2"></i> |
| <h1 class="text-2xl font-bold text-gray-800">Caminhões<span class="text-red-600">BR</span></h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#inicio" class="text-gray-800 hover:text-red-600 font-medium">Início</a> |
| <a href="#caminhoes" class="text-gray-800 hover:text-red-600 font-medium">Caminhões</a> |
| <a href="#sobre" class="text-gray-800 hover:text-red-600 font-medium">Sobre Nós</a> |
| <a href="#contato" class="text-gray-800 hover:text-red-600 font-medium">Contato</a> |
| </nav> |
| <button class="md:hidden text-gray-800" id="mobile-menu-button"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section id="inicio" class="hero-bg text-white py-20 md:py-32"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Encontre o Caminhão Perfeito</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">A maior seleção de caminhões novos e usados com as melhores condições do mercado</p> |
| <div class="flex flex-col md:flex-row justify-center gap-4"> |
| <button class="bg-red-600 hover:bg-red-700 px-8 py-3 rounded-lg font-bold text-lg transition">Ver Caminhões</button> |
| <button class="bg-white hover:bg-gray-200 text-gray-800 px-8 py-3 rounded-lg font-bold text-lg transition">Fale Conosco</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8" id="features-container"> |
| |
| <div class="text-center p-6 rounded-lg bg-gray-50"> |
| <div class="loading mx-auto mb-4"></div> |
| <p class="text-gray-600">Carregando recursos...</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="caminhoes" class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Nossos <span class="text-red-600">Caminhões</span></h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="trucks-container"> |
| |
| <div class="text-center p-6 rounded-lg bg-gray-50"> |
| <div class="loading mx-auto mb-4"></div> |
| <p class="text-gray-600">Carregando caminhões...</p> |
| </div> |
| </div> |
| |
| <div class="text-center mt-10"> |
| <button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-bold transition"> |
| Ver Todos os Caminhões |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="sobre" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" |
| alt="Sobre Nós" class="rounded-lg shadow-lg w-full"> |
| </div> |
| <div class="md:w-1/2" id="about-container"> |
| |
| <div class="loading mx-auto mb-4"></div> |
| <p class="text-gray-600">Carregando informações sobre a empresa...</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">O que dizem <span class="text-red-600">nossos clientes</span></h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8" id="testimonials-container"> |
| |
| <div class="text-center p-6 rounded-lg bg-gray-50"> |
| <div class="loading mx-auto mb-4"></div> |
| <p class="text-gray-600">Carregando depoimentos...</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contato" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8" id="contact-info-container"> |
| |
| <div class="loading mx-auto mb-4"></div> |
| <p class="text-gray-600">Carregando informações de contato...</p> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <form id="contact-form" class="bg-gray-50 p-6 rounded-lg shadow-md"> |
| <div class="mb-4"> |
| <label for="name" class="block text-gray-700 mb-2">Nome Completo</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" required> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="email" class="block text-gray-700 mb-2">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" required> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="phone" class="block text-gray-700 mb-2">Telefone</label> |
| <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" required> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="subject" class="block text-gray-700 mb-2">Assunto</label> |
| <select id="subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" required> |
| <option value="">Selecione...</option> |
| <option value="truck">Informações sobre caminhão</option> |
| <option value="financing">Financiamento</option> |
| <option value="parts">Peças e acessórios</option> |
| <option value="other">Outro</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="message" class="block text-gray-700 mb-2">Mensagem</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" required></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-bold transition flex items-center justify-center"> |
| <span id="submit-text">Enviar Mensagem</span> |
| <span id="submit-loading" class="loading ml-2 hidden"></span> |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-800 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-2xl font-bold mb-4">Receba nossas ofertas exclusivas</h2> |
| <p class="mb-6 max-w-2xl mx-auto">Cadastre-se e receba em primeira mão as melhores oportunidades de caminhões novos e usados.</p> |
| |
| <form id="newsletter-form" class="flex flex-col md:flex-row justify-center max-w-xl mx-auto"> |
| <input type="email" id="newsletter-email" placeholder="Seu melhor email" class="px-4 py-3 rounded-lg mb-2 md:mb-0 md:mr-2 text-gray-800 w-full" required> |
| <button type="submit" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-bold transition whitespace-nowrap flex items-center justify-center"> |
| <span id="newsletter-text">Cadastrar</span> |
| <span id="newsletter-loading" class="loading ml-2 hidden"></span> |
| </button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8" id="footer-container"> |
| |
| <div class="text-center p-6 rounded-lg"> |
| <div class="loading mx-auto mb-4"></div> |
| <p class="text-gray-600">Carregando informações do rodapé...</p> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
| <p>© <span id="current-year"></span> CaminhõesBR. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mockAPI = { |
| getFeatures: () => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| resolve([ |
| { |
| icon: 'fa-shield-alt', |
| color: 'red', |
| title: 'Garantia', |
| description: 'Todos nossos caminhões passam por rigorosa inspeção e possuem garantia.' |
| }, |
| { |
| icon: 'fa-hand-holding-usd', |
| color: 'blue', |
| title: 'Financiamento', |
| description: 'Condições especiais de financiamento com as melhores taxas do mercado.' |
| }, |
| { |
| icon: 'fa-tools', |
| color: 'green', |
| title: 'Assistência', |
| description: 'Rede de assistência técnica em todo o território nacional.' |
| } |
| ]); |
| }, 800); |
| }); |
| }, |
| |
| getTrucks: () => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| resolve([ |
| { |
| id: 1, |
| image: 'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80', |
| title: 'Volvo FH 540', |
| status: 'Novo', |
| statusColor: 'red', |
| description: 'Caminhão pesado para longas distâncias com máximo conforto.', |
| year: '2023', |
| power: '540 HP', |
| price: 'R$ 589.900' |
| }, |
| { |
| id: 2, |
| image: 'https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80', |
| title: 'Scania R500', |
| status: 'Semi-novo', |
| statusColor: 'blue', |
| description: 'Excelente custo-benefício com apenas 120.000 km rodados.', |
| year: '2020', |
| power: '500 HP', |
| price: 'R$ 389.900' |
| }, |
| { |
| id: 3, |
| image: 'https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80', |
| title: 'Mercedes Actros 2651', |
| status: 'Usado', |
| statusColor: 'green', |
| description: 'Caminhão robusto e confiável para qualquer tipo de estrada.', |
| year: '2018', |
| power: '510 HP', |
| price: 'R$ 319.900' |
| } |
| ]); |
| }, 1000); |
| }); |
| }, |
| |
| getAbout: () => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| resolve({ |
| title: 'Sobre a CaminhõesBR', |
| description1: 'Fundada em 2005, a CaminhõesBR se tornou referência nacional na comercialização de caminhões novos e usados. Nossa missão é oferecer veículos de qualidade com transparência e atendimento personalizado.', |
| description2: 'Com mais de 3.000 caminhões vendidos, possuímos uma equipe especializada que entende as necessidades específicas de cada cliente, desde caminhoneiros autônomos até grandes frotas.', |
| stats: [ |
| '+3.000 caminhões vendidos', |
| '15 anos de experiência', |
| 'Atendimento em todo Brasil', |
| 'Financiamento facilitado' |
| ], |
| buttonText: 'Nossa História' |
| }); |
| }, 600); |
| }); |
| }, |
| |
| getTestimonials: () => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| resolve([ |
| { |
| id: 1, |
| avatar: 'https://randomuser.me/api/portraits/men/32.jpg', |
| name: 'Carlos Silva', |
| rating: 5, |
| comment: '"Comprei meu Volvo FH 540 na CaminhõesBR e foi a melhor decisão. Atendimento excelente e o caminhão está perfeito mesmo depois de 2 anos de uso intenso."' |
| }, |
| { |
| id: 2, |
| avatar: 'https://randomuser.me/api/portraits/men/75.jpg', |
| name: 'José Oliveira', |
| rating: 5, |
| comment: '"A equipe da CaminhõesBR me ajudou a encontrar o caminhão ideal para minha operação de transporte de grãos. Condições de pagamento que cabiam no meu orçamento."' |
| }, |
| { |
| id: 3, |
| avatar: 'https://randomuser.me/api/portraits/women/65.jpg', |
| name: 'Ana Santos', |
| rating: 4.5, |
| comment: '"Como administradora de frota, aprecio a transparência e profissionalismo da CaminhõesBR. Já adquirimos 8 veículos com eles e todos em perfeito estado."' |
| } |
| ]); |
| }, 900); |
| }); |
| }, |
| |
| getContactInfo: () => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| resolve({ |
| title: 'Entre em Contato', |
| description: 'Tem dúvidas sobre nossos caminhões ou quer fazer uma proposta? Preencha o formulário ao lado ou entre em contato por um de nossos canais.', |
| items: [ |
| { |
| icon: 'fa-map-marker-alt', |
| color: 'red', |
| title: 'Endereço', |
| content: 'Av. das Nações, 1000 - Centro, São Paulo/SP' |
| }, |
| { |
| icon: 'fa-phone-alt', |
| color: 'blue', |
| title: 'Telefone', |
| content: '(11) 4004-4004<br>WhatsApp: (11) 94004-4004' |
| }, |
| { |
| icon: 'fa-envelope', |
| color: 'green', |
| title: 'Email', |
| content: 'contato@caminhoesbr.com.br' |
| } |
| ], |
| scheduleTitle: 'Horário de Funcionamento', |
| schedule: [ |
| { |
| day: 'Segunda a Sexta', |
| time: '08:00 - 18:00' |
| }, |
| { |
| day: 'Sábado', |
| time: '09:00 - 13:00' |
| } |
| ] |
| }); |
| }, 700); |
| }); |
| }, |
| |
| getFooterData: () => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| resolve([ |
| { |
| title: 'Sobre', |
| description: 'A melhor seleção de caminhões novos e usados com garantia e procedência.', |
| social: [ |
| { icon: 'fa-facebook-f', url: '#' }, |
| { icon: 'fa-instagram', url: '#' }, |
| { icon: 'fa-linkedin-in', url: '#' }, |
| { icon: 'fa-youtube', url: '#' } |
| ] |
| }, |
| { |
| title: 'Links Úteis', |
| links: [ |
| { text: 'Início', url: '#' }, |
| { text: 'Caminhões', url: '#' }, |
| { text: 'Sobre Nós', url: '#' }, |
| { text: 'Contato', url: '#' }, |
| { text: 'Blog', url: '#' } |
| ] |
| }, |
| { |
| title: 'Categorias', |
| links: [ |
| { text: 'Novos', url: '#' }, |
| { text: 'Semi-novos', url: '#' }, |
| { text: 'Usados', url: '#' }, |
| { text: 'Peças', url: '#' }, |
| { text: 'Acessórios', url: '#' } |
| ] |
| }, |
| { |
| title: 'Contato', |
| address: 'Av. das Nações, 1000<br>Centro - São Paulo/SP<br>CEP: 01000-000<br>Tel: (11) 4004-4004<br>Email: contato@caminhoesbr.com.br' |
| } |
| ]); |
| }, 500); |
| }); |
| }, |
| |
| submitContactForm: (data) => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| console.log('Dados do formulário enviados:', data); |
| resolve({ success: true, message: 'Mensagem enviada com sucesso!' }); |
| }, 1500); |
| }); |
| }, |
| |
| subscribeNewsletter: (email) => { |
| return new Promise(resolve => { |
| setTimeout(() => { |
| console.log('Email cadastrado:', email); |
| resolve({ success: true, message: 'Inscrição realizada com sucesso!' }); |
| }, 1200); |
| }); |
| } |
| }; |
| |
| |
| async function renderFeatures() { |
| const container = document.getElementById('features-container'); |
| const features = await mockAPI.getFeatures(); |
| |
| container.innerHTML = features.map(feature => ` |
| <div class="text-center p-6 rounded-lg bg-gray-50 hover:bg-white hover:shadow-lg transition"> |
| <div class="feature-icon bg-${feature.color}-100 text-${feature.color}-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas ${feature.icon} text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">${feature.title}</h3> |
| <p class="text-gray-600">${feature.description}</p> |
| </div> |
| `).join(''); |
| } |
| |
| async function renderTrucks() { |
| const container = document.getElementById('trucks-container'); |
| const trucks = await mockAPI.getTrucks(); |
| |
| container.innerHTML = trucks.map(truck => ` |
| <div class="truck-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition"> |
| <div class="overflow-hidden"> |
| <img src="${truck.image}" alt="${truck.title}" class="w-full h-48 object-cover truck-image"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-bold">${truck.title}</h3> |
| <span class="bg-${truck.statusColor}-100 text-${truck.statusColor}-600 px-3 py-1 rounded-full text-sm font-bold">${truck.status}</span> |
| </div> |
| <p class="text-gray-600 mb-4">${truck.description}</p> |
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="block text-gray-500 text-sm">Ano</span> |
| <span class="font-bold">${truck.year}</span> |
| </div> |
| <div> |
| <span class="block text-gray-500 text-sm">Potência</span> |
| <span class="font-bold">${truck.power}</span> |
| </div> |
| <div> |
| <span class="block text-gray-500 text-sm">Preço</span> |
| <span class="font-bold text-red-600">${truck.price}</span> |
| </div> |
| </div> |
| <button class="w-full mt-4 bg-gray-800 hover:bg-gray-900 text-white py-2 rounded-lg transition"> |
| Detalhes <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| async function renderAbout() { |
| const container = document.getElementById('about-container'); |
| const about = await mockAPI.getAbout(); |
| |
| container.innerHTML = ` |
| <h2 class="text-3xl font-bold mb-6">${about.title}</h2> |
| <p class="text-gray-600 mb-4"> |
| ${about.description1} |
| </p> |
| <p class="text-gray-600 mb-6"> |
| ${about.description2} |
| </p> |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| ${about.stats.map(stat => ` |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>${stat}</span> |
| </div> |
| `).join('')} |
| </div> |
| <button class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-2 rounded-lg transition"> |
| ${about.buttonText} |
| </button> |
| `; |
| } |
| |
| async function renderTestimonials() { |
| const container = document.getElementById('testimonials-container'); |
| const testimonials = await mockAPI.getTestimonials(); |
| |
| container.innerHTML = testimonials.map(testimonial => ` |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="${testimonial.avatar}" alt="${testimonial.name}" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">${testimonial.name}</h4> |
| <div class="flex text-yellow-400"> |
| ${Array(Math.floor(testimonial.rating)).fill('<i class="fas fa-star"></i>').join('')} |
| ${testimonial.rating % 1 !== 0 ? '<i class="fas fa-star-half-alt"></i>' : ''} |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">${testimonial.comment}</p> |
| </div> |
| `).join(''); |
| } |
| |
| async function renderContactInfo() { |
| const container = document.getElementById('contact-info-container'); |
| const contact = await mockAPI.getContactInfo(); |
| |
| container.innerHTML = ` |
| <h2 class="text-3xl font-bold mb-6">${contact.title}</h2> |
| <p class="text-gray-600 mb-6"> |
| ${contact.description} |
| </p> |
| |
| <div class="space-y-4"> |
| ${contact.items.map(item => ` |
| <div class="flex items-start"> |
| <div class="bg-${item.color}-100 text-${item.color}-600 p-3 rounded-full mr-4"> |
| <i class="fas ${item.icon}"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">${item.title}</h4> |
| <p class="text-gray-600">${item.content}</p> |
| </div> |
| </div> |
| `).join('')} |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-bold mb-4">${contact.scheduleTitle}</h4> |
| ${contact.schedule.map(sched => ` |
| <div class="flex justify-between border-b py-2"> |
| <span>${sched.day}</span> |
| <span class="font-bold">${sched.time}</span> |
| </div> |
| `).join('')} |
| </div> |
| `; |
| } |
| |
| async function renderFooter() { |
| const container = document.getElementById('footer-container'); |
| const footerData = await mockAPI.getFooterData(); |
| |
| container.innerHTML = footerData.map((section, index) => ` |
| <div> |
| <h4 class="text-lg font-bold mb-4">${section.title}</h4> |
| ${index === 0 ? ` |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-truck-moving text-red-600 text-3xl mr-2"></i> |
| <h3 class="text-2xl font-bold">Caminhões<span class="text-red-600">BR</span></h3> |
| </div> |
| <p class="text-gray-400 mb-4"> |
| ${section.description} |
| </p> |
| <div class="flex space-x-4"> |
| ${section.social.map(social => ` |
| <a href="${social.url}" class="text-gray-400 hover:text-white text-xl"><i class="fab ${social.icon}"></i></a> |
| `).join('')} |
| </div> |
| ` : ''} |
| |
| ${index === 1 || index === 2 ? ` |
| <ul class="space-y-2"> |
| ${section.links.map(link => ` |
| <li><a href="${link.url}" class="text-gray-400 hover:text-white">${link.text}</a></li> |
| `).join('')} |
| </ul> |
| ` : ''} |
| |
| ${index === 3 ? ` |
| <address class="text-gray-400 not-italic"> |
| ${section.address.replace(/<br>/g, '</p><p class="mb-2">')} |
| </address> |
| ` : ''} |
| </div> |
| `).join(''); |
| } |
| |
| |
| function setupContactForm() { |
| const form = document.getElementById('contact-form'); |
| const submitText = document.getElementById('submit-text'); |
| const submitLoading = document.getElementById('submit-loading'); |
| |
| form.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| const formData = { |
| name: form.querySelector('#name').value, |
| email: form.querySelector('#email').value, |
| phone: form.querySelector('#phone').value, |
| subject: form.querySelector('#subject').value, |
| message: form.querySelector('#message').value |
| }; |
| |
| |
| submitText.textContent = 'Enviando...'; |
| submitLoading.classList.remove('hidden'); |
| form.querySelector('button').disabled = true; |
| |
| try { |
| const response = await mockAPI.submitContactForm(formData); |
| |
| if (response.success) { |
| alert(response.message); |
| form.reset(); |
| } else { |
| alert('Ocorreu um erro ao enviar a mensagem. Por favor, tente novamente.'); |
| } |
| } catch (error) { |
| console.error('Erro ao enviar formulário:', error); |
| alert('Ocorreu um erro ao enviar a mensagem. Por favor, tente novamente.'); |
| } finally { |
| submitText.textContent = 'Enviar Mensagem'; |
| submitLoading.classList.add('hidden'); |
| form.querySelector('button').disabled = false; |
| } |
| }); |
| } |
| |
| function setupNewsletterForm() { |
| const form = document.getElementById('newsletter-form'); |
| const newsletterText = document.getElementById('newsletter-text'); |
| const newsletterLoading = document.getElementById('newsletter-loading'); |
| |
| form.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| const email = form.querySelector('#newsletter-email').value; |
| |
| |
| newsletterText.textContent = 'Cadastrando...'; |
| newsletterLoading.classList.remove('hidden'); |
| form.querySelector('button').disabled = true; |
| |
| try { |
| const response = await mockAPI.subscribeNewsletter(email); |
| |
| if (response.success) { |
| alert(response.message); |
| form.reset(); |
| } else { |
| alert('Ocorreu um erro ao cadastrar seu email. Por favor, tente novamente.'); |
| } |
| } catch (error) { |
| console.error('Erro ao cadastrar newsletter:', error); |
| alert('Ocorreu um erro ao cadastrar seu email. Por favor, tente novamente.'); |
| } finally { |
| newsletterText.textContent = 'Cadastrar'; |
| newsletterLoading.classList.add('hidden'); |
| form.querySelector('button').disabled = false; |
| } |
| }); |
| } |
| |
| |
| function setupMobileMenu() { |
| const button = document.getElementById('mobile-menu-button'); |
| const nav = document.querySelector('nav.hidden.md\\:flex'); |
| |
| button.addEventListener('click', () => { |
| if (nav.style.display === 'flex') { |
| nav.style.display = 'none'; |
| nav.classList.remove('flex-col', 'absolute', 'top-16', 'right-4', 'bg-white', 'p-4', 'shadow-lg', 'rounded-lg', 'space-y-4', 'space-x-0'); |
| } else { |
| nav.style.display = 'flex'; |
| nav.classList.add('flex-col', 'absolute', 'top-16', 'right-4', 'bg-white', 'p-4', 'shadow-lg', 'rounded-lg', 'space-y-4', 'space-x-0'); |
| } |
| }); |
| } |
| |
| function setupSmoothScrolling() { |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| } |
| |
| function setCurrentYear() { |
| document.getElementById('current-year').textContent = new Date().getFullYear(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| renderFeatures(); |
| renderTrucks(); |
| renderAbout(); |
| renderTestimonials(); |
| renderContactInfo(); |
| renderFooter(); |
| |
| |
| setupContactForm(); |
| setupNewsletterForm(); |
| |
| |
| setupMobileMenu(); |
| setupSmoothScrolling(); |
| setCurrentYear(); |
| }); |
| </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=Pachecov3/teste1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
