Hugging Face's logo

Spaces:
devmiro
/
ecoflow
Running

App Files Community
ecoflow / index.html
devmiro's picture
devmiro
Add 2 files
12a8431 verified
raw
history blame contribute delete
43.3 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>EcoFlow E980 - Bateria Portátil Premium</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: {
 ecoflow: {
 primary: '#00a651',
 secondary: '#00753a',
 accent: '#ffcc00',
 }
 }
 }
 }
 }
 </script>
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #00a651 0%, #00753a 100%);
 }
 .input-focus:focus {
 border-color: #00a651;
 box-shadow: 0 0 0 2px rgba(0, 166, 81, 0.2);
 }
 .checkbox:checked {
 background-color: #00a651;
 border-color: #00a651;
 }
 .progress-bar {
 transition: width 0.5s ease-in-out;
 }
 </style>
</head>
<body class="font-sans bg-gray-50">
 <!-- Header -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="container mx-auto px-4 py-6">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-bolt text-2xl text-ecoflow-accent"></i>
 <span class="text-2xl font-bold">EcoFlow</span>
 </div>
 <div class="hidden md:flex space-x-6">
 <a href="#features" class="hover:text-ecoflow-accent transition">Recursos</a>
 <a href="#testimonials" class="hover:text-ecoflow-accent transition">Depoimentos</a>
 <a href="#faq" class="hover:text-ecoflow-accent transition">FAQ</a>
 </div>
 <button class="md:hidden text-2xl">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section class="gradient-bg text-white py-16">
 <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-10 md:mb-0">
 <h1 class="text-4xl md:text-5xl font-bold mb-4">EcoFlow E980</h1>
 <h2 class="text-2xl md:text-3xl font-semibold mb-6">Energia limpa onde você precisar</h2>
 <p class="text-lg mb-8">A bateria portátil mais avançada do mercado, com capacidade de 980Wh e tecnologia de carregamento ultrarrápido.</p>
 <div class="flex items-center space-x-4 mb-8">
 <div class="flex items-center">
 <i class="fas fa-bolt text-ecoflow-accent mr-2"></i>
 <span>980Wh de potência</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-tachometer-alt text-ecoflow-accent mr-2"></i>
 <span>Carregamento em 1h</span>
 </div>
 </div>
 <button id="startFormBtn" class="bg-ecoflow-accent hover:bg-yellow-500 text-ecoflow-secondary font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
 Compre agora <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <img src="https://images.unsplash.com/photo-1626241236051-896e3ec2549a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="EcoFlow E980" class="rounded-lg shadow-2xl max-w-md w-full h-auto">
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section id="features" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center text-ecoflow-secondary mb-12">Por que escolher o EcoFlow E980?</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-xl transition">
 <div class="text-ecoflow-primary text-4xl mb-4">
 <i class="fas fa-bolt"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Potência Superior</h3>
 <p class="text-gray-600">980Wh de capacidade para alimentar seus dispositivos por mais tempo, mesmo em condições extremas.</p>
 </div>
 <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-xl transition">
 <div class="text-ecoflow-primary text-4xl mb-4">
 <i class="fas fa-charging-station"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Carregamento Rápido</h3>
 <p class="text-gray-600">Recarrega 80% da capacidade em apenas 50 minutos com nossa tecnologia X-Stream.</p>
 </div>
 <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-xl transition">
 <div class="text-ecoflow-primary text-4xl mb-4">
 <i class="fas fa-leaf"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Energia Limpa</h3>
 <p class="text-gray-600">Feito com materiais sustentáveis e zero emissões, perfeito para quem se preocupa com o meio ambiente.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Form Section (initially hidden) -->
 <section id="purchaseForm" class="hidden py-16 bg-gray-100">
 <div class="container mx-auto px-4 max-w-4xl">
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <!-- Progress Bar -->
 <div class="bg-gray-200 h-2">
 <div id="progressBar" class="progress-bar h-full bg-ecoflow-primary" style="width: 20%"></div>
 </div>
<!-- Form Steps -->
 <form id="ecoflowForm" class="p-8">
 <!-- Step 1: Personal Info -->
 <div id="step1" class="form-step active">
 <h2 class="text-2xl font-bold text-ecoflow-secondary mb-6">Informações Pessoais</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
 <div>
 <label for="name" class="block text-gray-700 mb-2">Nome Completo*</label>
 <input type="text" id="name" name="name" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 <div>
 <label for="email" class="block text-gray-700 mb-2">E-mail*</label>
 <input type="email" id="email" name="email" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 <div>
 <label for="phone" class="block text-gray-700 mb-2">Telefone*</label>
 <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 <div>
 <label for="cpf" class="block text-gray-700 mb-2">CPF*</label>
 <input type="text" id="cpf" name="cpf" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 </div>
 <div class="flex justify-end">
 <button type="button" onclick="nextStep(1, 2)" class="bg-ecoflow-primary hover:bg-ecoflow-secondary text-white font-bold py-3 px-6 rounded-lg transition">
 Próximo <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
<!-- Step 2: Usage Needs -->
 <div id="step2" class="form-step hidden">
 <h2 class="text-2xl font-bold text-ecoflow-secondary mb-6">Como você pretende usar seu EcoFlow E980?</h2>
 <div class="space-y-6 mb-8">
 <div>
 <p class="text-gray-700 mb-3">Selecione os principais usos que você dará à bateria:</p>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="checkbox" name="usage[]" value="camping" class="checkbox rounded border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Camping e atividades ao ar livre</span>
 </label>
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="checkbox" name="usage[]" value="emergency" class="checkbox rounded border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Emergência (falta de energia)</span>
 </label>
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="checkbox" name="usage[]" value="work" class="checkbox rounded border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Trabalho remoto/equipamentos</span>
 </label>
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="checkbox" name="usage[]" value="events" class="checkbox rounded border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Eventos e festas</span>
 </label>
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="checkbox" name="usage[]" value="other" class="checkbox rounded border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Outro</span>
 </label>
 </div>
 </div>
<div>
 <label for="powerNeeds" class="block text-gray-700 mb-3">Quais equipamentos você pretende alimentar?</label>
 <textarea id="powerNeeds" name="powerNeeds" rows="3" class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none" placeholder="Ex: Geladeira portátil, laptop, luzes, etc."></textarea>
 </div>
<div>
 <label class="block text-gray-700 mb-3">Com que frequência você precisará usar a bateria?</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="radio" name="frequency" value="daily" required class="radio rounded-full border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Diariamente</span>
 </label>
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="radio" name="frequency" value="weekly" class="radio rounded-full border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Semanalmente</span>
 </label>
 <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="radio" name="frequency" value="occasionally" class="radio rounded-full border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <span>Ocasionalmente</span>
 </label>
 </div>
 </div>
 </div>
 <div class="flex justify-between">
 <button type="button" onclick="prevStep(2, 1)" class="text-ecoflow-primary hover:text-ecoflow-secondary font-bold py-3 px-6 rounded-lg transition">
 <i class="fas fa-arrow-left mr-2"></i> Voltar
 </button>
 <button type="button" onclick="nextStep(2, 3)" class="bg-ecoflow-primary hover:bg-ecoflow-secondary text-white font-bold py-3 px-6 rounded-lg transition">
 Próximo <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
<!-- Step 3: Shipping & Payment -->
 <div id="step3" class="form-step hidden">
 <h2 class="text-2xl font-bold text-ecoflow-secondary mb-6">Entrega e Pagamento</h2>
 <div class="space-y-6 mb-8">
 <div>
 <label for="cep" class="block text-gray-700 mb-2">CEP*</label>
 <input type="text" id="cep" name="cep" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="md:col-span-2">
 <label for="address" class="block text-gray-700 mb-2">Endereço*</label>
 <input type="text" id="address" name="address" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 <div>
 <label for="number" class="block text-gray-700 mb-2">Número*</label>
 <input type="text" id="number" name="number" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <label for="complement" class="block text-gray-700 mb-2">Complemento</label>
 <input type="text" id="complement" name="complement" class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 <div>
 <label for="neighborhood" class="block text-gray-700 mb-2">Bairro*</label>
 <input type="text" id="neighborhood" name="neighborhood" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <label for="city" class="block text-gray-700 mb-2">Cidade*</label>
 <input type="text" id="city" name="city" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 </div>
 <div>
 <label for="state" class="block text-gray-700 mb-2">Estado*</label>
 <select id="state" name="state" required class="w-full px-4 py-3 border rounded-lg input-focus focus:outline-none">
 <option value="">Selecione...</option>
 <option value="AC">Acre</option>
 <option value="AL">Alagoas</option>
 <option value="AP">Amapá</option>
 <option value="AM">Amazonas</option>
 <option value="BA">Bahia</option>
 <option value="CE">Ceará</option>
 <option value="DF">Distrito Federal</option>
 <option value="ES">Espírito Santo</option>
 <option value="GO">Goiás</option>
 <option value="MA">Maranhão</option>
 <option value="MT">Mato Grosso</option>
 <option value="MS">Mato Grosso do Sul</option>
 <option value="MG">Minas Gerais</option>
 <option value="PA">Pará</option>
 <option value="PB">Paraíba</option>
 <option value="PR">Paraná</option>
 <option value="PE">Pernambuco</option>
 <option value="PI">Piauí</option>
 <option value="RJ">Rio de Janeiro</option>
 <option value="RN">Rio Grande do Norte</option>
 <option value="RS">Rio Grande do Sul</option>
 <option value="RO">Rondônia</option>
 <option value="RR">Roraima</option>
 <option value="SC">Santa Catarina</option>
 <option value="SP">São Paulo</option>
 <option value="SE">Sergipe</option>
 <option value="TO">Tocantins</option>
 </select>
 </div>
 </div>
<div>
 <label class="block text-gray-700 mb-3">Método de Pagamento*</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <label class="flex flex-col items-center bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="radio" name="payment" value="credit" required class="radio rounded-full border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <i class="fas fa-credit-card text-3xl my-2 text-ecoflow-primary"></i>
 <span>Cartão de Crédito</span>
 </label>
 <label class="flex flex-col items-center bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="radio" name="payment" value="pix" class="radio rounded-full border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <i class="fas fa-qrcode text-3xl my-2 text-ecoflow-primary"></i>
 <span>PIX</span>
 </label>
 <label class="flex flex-col items-center bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
 <input type="radio" name="payment" value="boleto" class="radio rounded-full border-gray-300 text-ecoflow-primary focus:ring-ecoflow-primary">
 <i class="fas fa-barcode text-3xl my-2 text-ecoflow-primary"></i>
 <span>Boleto</span>
 </label>
 </div>
 </div>
 </div>
 <div class="flex justify-between">
 <button type="button" onclick="prevStep(3, 2)" class="text-ecoflow-primary hover:text-ecoflow-secondary font-bold py-3 px-6 rounded-lg transition">
 <i class="fas fa-arrow-left mr-2"></i> Voltar
 </button>
 <button type="button" onclick="validateForm()" class="bg-ecoflow-primary hover:bg-ecoflow-secondary text-white font-bold py-3 px-6 rounded-lg transition">
 Finalizar Compra <i class="fas fa-check ml-2"></i>
 </button>
 </div>
 </div>
 </form>
 </div>
 </div>
 </section>
<!-- Testimonials Section -->
 <section id="testimonials" class="py-16 bg-gray-50">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center text-ecoflow-secondary mb-12">O que nossos clientes dizem</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <div class="text-ecoflow-accent 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-4">"O EcoFlow E980 mudou completamente minhas viagens de camping. Agora posso levar todos meus equipamentos sem preocupação com energia."</p>
 <div class="flex items-center">
 <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Cliente" class="w-full h-full object-cover">
 </div>
 <div>
 <h4 class="font-semibold">Ana Carolina</h4>
 <p class="text-sm text-gray-500">Aventureira</p>
 </div>
 </div>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <div class="text-ecoflow-accent 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-4">"Como fotógrafo, preciso de energia confiável em locais remotos. O EcoFlow nunca me deixou na mão, mesmo nos lugares mais inóspitos."</p>
 <div class="flex items-center">
 <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Cliente" class="w-full h-full object-cover">
 </div>
 <div>
 <h4 class="font-semibold">Ricardo Almeida</h4>
 <p class="text-sm text-gray-500">Fotógrafo Profissional</p>
 </div>
 </div>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <div class="text-ecoflow-accent 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-4">"Depois de vários apagões na minha região, comprei o EcoFlow E980 e agora tenho paz de espírito sabendo que meus equipamentos médicos não vão desligar."</p>
 <div class="flex items-center">
 <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Cliente" class="w-full h-full object-cover">
 </div>
 <div>
 <h4 class="font-semibold">Dra. Mariana Santos</h4>
 <p class="text-sm text-gray-500">Médica</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- FAQ Section -->
 <section id="faq" class="py-16 bg-white">
 <div class="container mx-auto px-4 max-w-3xl">
 <h2 class="text-3xl font-bold text-center text-ecoflow-secondary mb-12">Perguntas Frequentes</h2>
 <div class="space-y-4">
 <div class="border-b border-gray-200 pb-4">
 <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 hover:text-ecoflow-primary transition">
 <span>Quanto tempo leva para carregar completamente o EcoFlow E980?</span>
 <i class="fas fa-chevron-down transition-transform duration-300"></i>
 </button>
 <div class="faq-answer mt-2 text-gray-600 hidden">
 <p>Com a tecnologia X-Stream, o EcoFlow E980 pode ser carregado de 0 a 80% em apenas 50 minutos, e completamente em cerca de 1 hora e 20 minutos usando uma tomada padrão de 110V/220V.</p>
 </div>
 </div>
 <div class="border-b border-gray-200 pb-4">
 <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 hover:text-ecoflow-primary transition">
 <span>Quais aparelhos posso alimentar com o EcoFlow E980?</span>
 <i class="fas fa-chevron-down transition-transform duration-300"></i>
 </button>
 <div class="faq-answer mt-2 text-gray-600 hidden">
 <p>O EcoFlow E980 tem capacidade para alimentar desde pequenos dispositivos como smartphones e laptops até equipamentos mais potentes como geladeiras portáteis, TVs de até 55 polegadas, máquinas de CPAP e até algumas ferramentas elétricas. A capacidade de 980Wh permite múltiplos usos simultâneos.</p>
 </div>
 </div>
 <div class="border-b border-gray-200 pb-4">
 <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 hover:text-ecoflow-primary transition">
 <span>O EcoFlow E980 pode ser usado enquanto está carregando?</span>
 <i class="fas fa-chevron-down transition-transform duration-300"></i>
 </button>
 <div class="faq-answer mt-2 text-gray-600 hidden">
 <p>Sim, o EcoFlow E980 suporta carga e descarga simultâneas (pass-through charging). Isso significa que você pode continuar usando a energia da bateria enquanto ela está sendo recarregada, sem interrupções no fornecimento de energia aos seus dispositivos.</p>
 </div>
 </div>
 <div class="border-b border-gray-200 pb-4">
 <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 hover:text-ecoflow-primary transition">
 <span>Qual é a vida útil da bateria?</span>
 <i class="fas fa-chevron-down transition-transform duration-300"></i>
 </button>
 <div class="faq-answer mt-2 text-gray-600 hidden">
 <p>O EcoFlow E980 utiliza baterias de íon de lítio de alta qualidade com mais de 800 ciclos de carga até atingir 80% da capacidade original. Com uso moderado, isso pode representar vários anos de vida útil. A bateria também possui um sistema avançado de gerenciamento que prolonga sua vida útil.</p>
 </div>
 </div>
 <div class="border-b border-gray-200 pb-4">
 <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 hover:text-ecoflow-primary transition">
 <span>Qual é a política de garantia?</span>
 <i class="fas fa-chevron-down transition-transform duration-300"></i>
 </button>
 <div class="faq-answer mt-2 text-gray-600 hidden">
 <p>O EcoFlow E980 vem com garantia de 24 meses contra defeitos de fabricação. Cobrimos a substituição ou reparo de qualquer componente que apresente falhas sob condições normais de uso. A garantia não cobre danos causados por uso inadequado, acidentes ou modificações não autorizadas.</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="gradient-bg text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <div class="flex items-center space-x-2 mb-4">
 <i class="fas fa-bolt text-2xl text-ecoflow-accent"></i>
 <span class="text-2xl font-bold">EcoFlow</span>
 </div>
 <p class="text-gray-200">Energia limpa e confiável para sua vida moderna.</p>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Produtos</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-200 hover:text-ecoflow-accent transition">EcoFlow E980</a></li>
 <li><a href="#" class="text-gray-200 hover:text-ecoflow-accent transition">Acessórios</a></li>
 <li><a href="#" class="text-gray-200 hover:text-ecoflow-accent transition">Painéis Solares</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Suporte</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-200 hover:text-ecoflow-accent transition">Central de Ajuda</a></li>
 <li><a href="#" class="text-gray-200 hover:text-ecoflow-accent transition">Garantia</a></li>
 <li><a href="#" class="text-gray-200 hover:text-ecoflow-accent transition">Contato</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Contato</h3>
 <ul class="space-y-2">
 <li class="flex items-center">
 <i class="fas fa-phone-alt mr-2 text-ecoflow-accent"></i>
 <span>(11) 4004-4004</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-envelope mr-2 text-ecoflow-accent"></i>
 <span>contato@ecoflow.com.br</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-map-marker-alt mr-2 text-ecoflow-accent"></i>
 <span>São Paulo - SP</span>
 </li>
 </ul>
 </div>
 </div>
 <div class="border-t border-gray-600 mt-8 pt-8 text-center text-gray-300">
 <p>&copy; 2023 EcoFlow. Todos os direitos reservados.</p>
 </div>
 </div>
 </footer>
<!-- Success Modal -->
 <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4">
 <div class="text-center">
 <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-check text-4xl text-ecoflow-primary"></i>
 </div>
 <h3 class="text-2xl font-bold text-gray-800 mb-4">Compra realizada com sucesso!</h3>
 <p class="text-gray-600 mb-6">Obrigado por adquirir seu EcoFlow E980. Enviamos os detalhes da compra para seu e-mail. Em breve nosso time entrará em contato para confirmar os detalhes da entrega.</p>
 <button onclick="closeModal()" class="bg-ecoflow-primary hover:bg-ecoflow-secondary text-white font-bold py-3 px-6 rounded-lg transition w-full">
 Fechar
 </button>
 </div>
 </div>
 </div>
<script>
 // Show/hide form section
 document.getElementById('startFormBtn').addEventListener('click', function() {
 document.getElementById('purchaseForm').classList.remove('hidden');
 window.scrollTo({
 top: document.getElementById('purchaseForm').offsetTop - 20,
 behavior: 'smooth'
 });
 });
 // Form navigation
 function nextStep(current, next) {
 // Validate current step before proceeding
 if(current === 1 && !validateStep1()) return;
 if(current === 2 && !validateStep2()) return;
document.getElementById(`step${current}`).classList.add('hidden');
 document.getElementById(`step${current}`).classList.remove('active');
 document.getElementById(`step${next}`).classList.remove('hidden');
 document.getElementById(`step${next}`).classList.add('active');
// Update progress bar
 const progress = next === 2 ? 50 : 80;
 document.getElementById('progressBar').style.width = `${progress}%`;
 }
 function prevStep(current, prev) {
 document.getElementById(`step${current}`).classList.add('hidden');
 document.getElementById(`step${current}`).classList.remove('active');
 document.getElementById(`step${prev}`).classList.remove('hidden');
 document.getElementById(`step${prev}`).classList.add('active');
// Update progress bar
 const progress = prev === 1 ? 20 : 50;
 document.getElementById('progressBar').style.width = `${progress}%`;
 }
 // Step validations
 function validateStep1() {
 const name = document.getElementById('name').value;
 const email = document.getElementById('email').value;
 const phone = document.getElementById('phone').value;
 const cpf = document.getElementById('cpf').value;
if(!name || !email || !phone || !cpf) {
 alert('Por favor, preencha todos os campos obrigatórios.');
 return false;
 }
// Simple email validation
 if(!email.includes('@') || !email.includes('.')) {
 alert('Por favor, insira um e-mail válido.');
 return false;
 }
return true;
 }
 function validateStep2() {
 const usageCheckboxes = document.querySelectorAll('input[name="usage[]"]:checked');
 const frequency = document.querySelector('input[name="frequency"]:checked');
if(usageCheckboxes.length === 0) {
 alert('Por favor, selecione pelo menos um uso principal para o EcoFlow E980.');
 return false;
 }
if(!frequency) {
 alert('Por favor, selecione com que frequência você usará a bateria.');
 return false;
 }
return true;
 }
 function validateForm() {
 // Validate step 3
 const cep = document.getElementById('cep').value;
 const address = document.getElementById('address').value;
 const number = document.getElementById('number').value;
 const neighborhood = document.getElementById('neighborhood').value;
 const city = document.getElementById('city').value;
 const state = document.getElementById('state').value;
 const payment = document.querySelector('input[name="payment"]:checked');
if(!cep || !address || !number || !neighborhood || !city || !state || !payment) {
 alert('Por favor, preencha todos os campos obrigatórios.');
 return false;
 }
// If all validations pass, submit the form
 submitForm();
 }
 // FAQ functionality
 document.querySelectorAll('.faq-question').forEach(question => {
 question.addEventListener('click', function() {
 const answer = this.nextElementSibling;
 const icon = this.querySelector('i');
answer.classList.toggle('hidden');
 icon.classList.toggle('rotate-180');
 });
 });
 // Form submission
 function submitForm() {
 // Collect all form data
 const formData = {
 personal: {
 name: document.getElementById('name').value,
 email: document.getElementById('email').value,
 phone: document.getElementById('phone').value,
 cpf: document.getElementById('cpf').value
 },
 usage: {
 purposes: Array.from(document.querySelectorAll('input[name="usage[]"]:checked')).map(el => el.value),
 powerNeeds: document.getElementById('powerNeeds').value,
 frequency: document.querySelector('input[name="frequency"]:checked').value
 },
 shipping: {
 cep: document.getElementById('cep').value,
 address: document.getElementById('address').value,
 number: document.getElementById('number').value,
 complement: document.getElementById('complement').value,
 neighborhood: document.getElementById('neighborhood').value,
 city: document.getElementById('city').value,
 state: document.getElementById('state').value
 },
 payment: document.querySelector('input[name="payment"]:checked').value,
 product: 'EcoFlow E980',
 timestamp: new Date().toISOString()
 };
// Here you would normally send this data to your webhook
 // For demonstration, we'll simulate the webhook call
 simulateWebhook(formData);
// Show success modal
 document.getElementById('successModal').classList.remove('hidden');
 }
 function closeModal() {
 document.getElementById('successModal').classList.add('hidden');
 }
 // Simulate webhook call (in a real scenario, you would use fetch or axios)
 function simulateWebhook(data) {
 console.log('Webhook data being sent:', data);
// This is where you would actually send the data to your webhook
 // Example using fetch:
 /*
 fetch('https://your-webhook-url.com/api/ecoflow-order', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 },
 body: JSON.stringify(data)
 })
 .then(response => response.json())
 .then(data => {
 console.log('Webhook response:', data);
 })
 .catch((error) => {
 console.error('Webhook error:', error);
 });
 */
// For this demo, we'll just log to console
 setTimeout(() => {
 console.log('Webhook successfully sent!');
 }, 1000);
 }
 </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=devmiro/ecoflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>