<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ | VN Store</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght400;500;600;700&family=Poppins:wght600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<style>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
display: ['Poppins', 'ui-sans-serif', 'system-ui']
}
}
}
}
</style>
<script>
(function() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.documentElement.classList.add('dark');
}
})();
</script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-compat.js"></script>
</head>
<body class="bg-[#0a0a0f] text-white">
<!-- Loading Screen -->
<div id="loading-screen" class="fixed inset-0 z-[100] bg-[#0a0a0f] flex items-center justify-center">
<div class="text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-2xl border border-purple-500/30 bg-purple-500/10 mb-6 mx-auto">
<span class="font-display text-2xl font-extrabold text-purple-500">VN</span>
</div>
<div class="animate-spin rounded-full h-10 w-10 border-2 border-purple-500 border-t-transparent mx-auto"></div>
</div>
</div>
<header class="sticky top-0 z-40 border-b border-gray-800 bg-[#0a0a0f]/90 backdrop-blur-xl">
<div class="mx-auto flex h-16 max-w-7xl items-center gap-4 px-4">
<a href="index.html" class="flex items-center gap-2 shrink-0">
<div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-purple-500 bg-[#0a0a0f] font-display text-sm font-extrabold text-purple-500">VN</div>
<span class="hidden font-display text-lg font-extrabold tracking-tight text-purple-500 sm:inline">VN STORE</span>
</a>
<div class="relative mx-2 hidden max-w-2xl flex-1 md:block">
<svg class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<input id="header-search" type="search" placeholder="Buscar produtos, vendedores ou categorias" class="h-11 w-full rounded-full border border-gray-700 bg-gray-900/50 pl-11 pr-4 text-sm outline-none transition focus:border-purple-500 focus:bg-[#0a0a0f] focus:ring-2 focus:ring-purple-500/20 text-white">
<div id="header-search-results" class="search-results hidden"></div>
</div>
<nav class="ml-auto hidden items-center gap-5 text-sm font-medium md:flex">
<a href="index.html" class="text-gray-400 hover:text-purple-500">Loja</a>
<a href="categorias.html" class="text-gray-400 hover:text-purple-500">Categorias</a>
<a href="faq.html" class="text-purple-500">FAQ</a>
<a href="termos.html" class="text-gray-400 hover:text-purple-500">Termos</a>
<a href="privacidade.html" class="text-gray-400 hover:text-purple-500">Privacidade</a>
</nav>
<div class="ml-auto flex items-center gap-2 md:ml-2">
<button id="theme-toggle" class="theme-toggle" title="Alternar tema">
<svg id="sun-icon" class="hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
<svg id="moon-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>
</button>
<a href="auth.html" class="hidden sm:inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-gray-300 hover:bg-gray-800">Entrar</a>
<a href="auth.html" class="inline-flex items-center justify-center rounded-full bg-purple-500 px-5 py-2 text-sm font-medium text-white hover:bg-purple-600 transition">Anunciar</a>
<button id="mobile-menu-btn" class="theme-toggle md:hidden">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</header>
<div id="mobile-menu" class="mobile-menu hidden">
<div class="mobile-menu-header">
<a href="index.html" class="flex items-center gap-2">
<div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-purple-500 bg-[#0a0a0f] font-display text-sm font-extrabold text-purple-500">VN</div>
<span class="font-display text-lg font-extrabold text-purple-500">VN STORE</span>
</a>
<button id="close-mobile-menu" class="theme-toggle">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="relative mt-4">
<svg class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<input id="mobile-search" type="search" placeholder="Buscar produtos..." class="h-11 w-full rounded-full border border-gray-700 bg-gray-900/50 pl-11 pr-4 text-sm outline-none transition focus:border-purple-500 focus:bg-[#0a0a0f] focus:ring-2 focus:ring-purple-500/20 text-white">
<div id="mobile-search-results" class="search-results hidden"></div>
</div>
<nav class="mobile-menu-nav">
<a href="index.html" class="text-gray-400">Loja</a>
<a href="categorias.html" class="text-gray-400">Categorias</a>
<a href="faq.html" class="text-white">FAQ</a>
<a href="termos.html" class="text-gray-400">Termos de uso</a>
<a href="privacidade.html" class="text-gray-400">Privacidade</a>
<a href="auth.html" class="text-gray-400">Entrar</a>
<a href="auth.html" class="mt-4 inline-flex items-center justify-center rounded-full bg-purple-500 px-6 py-3 text-base font-medium text-white">Anunciar Produto</a>
</nav>
</div>
<main class="mx-auto w-full max-w-3xl flex-1 px-4 py-16 animate-slide-up">
<div class="mb-10 text-center">
<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-purple-500/15 text-purple-500">
<svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h1 class="font-display text-4xl font-bold">Perguntas frequentes</h1>
<p class="mt-2 text-gray-400">Tudo o que você precisa saber sobre a VN Store.</p>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-900/50 p-2">
<div class="border-b border-gray-700 px-4">
<button class="flex w-full items-center justify-between py-4 text-left font-semibold hover:text-purple-500" onclick="toggleFaq(this)">
Como funciona a compra?
<svg class="h-5 w-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="pb-4 text-gray-400 hidden faq-content">
Basta escolher o produto que deseja, clicar em "Comprar agora", finalizar o pagamento e o produto será entregue automaticamente ou diretamente pelo vendedor!
</div>
</div>
<div class="border-b border-gray-700 px-4">
<button class="flex w-full items-center justify-between py-4 text-left font-semibold hover:text-purple-500" onclick="toggleFaq(this)">
É seguro comprar aqui?
<svg class="h-5 w-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="pb-4 text-gray-400 hidden faq-content">
Sim! Todos os pagamentos são processados de forma segura, e os vendedores passam por uma verificação rigorosa antes de poderem anunciar.
</div>
</div>
<div class="border-b border-gray-700 px-4">
<button class="flex w-full items-center justify-between py-4 text-left font-semibold hover:text-purple-500" onclick="toggleFaq(this)">
Como me tornar um vendedor?
<svg class="h-5 w-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="pb-4 text-gray-400 hidden faq-content">
Clique em "Anunciar" no canto superior direito, crie sua conta e siga os passos para se verificar como vendedor!
</div>
</div>
<div class="px-4">
<button class="flex w-full items-center justify-between py-4 text-left font-semibold hover:text-purple-500" onclick="toggleFaq(this)">
O que fazer se houver um problema com o pedido?
<svg class="h-5 w-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="pb-4 text-gray-400 hidden faq-content">
Você pode abrir um chat diretamente com o vendedor, ou contatar o suporte da VN Store que irá ajudar a resolver o problema!
</div>
</div>
</div>
</main>
<footer class="mt-20 border-t border-gray-800 bg-gray-900/30">
<div class="mx-auto max-w-7xl px-4 py-12">
<div class="grid gap-8 md:grid-cols-4">
<div>
<div class="flex items-center gap-2">
<div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-purple-500 bg-[#0a0a0f] text-sm font-extrabold text-purple-500">VN</div>
<span class="font-display text-lg font-extrabold text-purple-500">VN STORE</span>
</div>
<p class="mt-3 text-sm text-gray-400">
O marketplace confiável para produtos e serviços de Discord.
</p>
</div>
<div>
<h4 class="mb-3 text-sm font-semibold">Institucional</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="faq.html" class="hover:text-purple-500">Como funciona</a></li>
<li><a href="termos.html" class="hover:text-purple-500">Termos de uso</a></li>
<li><a href="privacidade.html" class="hover:text-purple-500">Privacidade</a></li>
</ul>
</div>
<div>
<h4 class="mb-3 text-sm font-semibold">Para vendedores</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="auth.html" class="hover:text-purple-500">Seja um vendedor</a></li>
<li><a href="vendedor.html" class="hover:text-purple-500">Painel de vendas</a></li>
</ul>
</div>
<div>
<h4 class="mb-3 text-sm font-semibold">Segurança</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li class="flex items-center gap-2">
<svg class="h-4 w-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
Vendedores verificados
</li>
<li class="flex items-center gap-2">
<svg class="h-4 w-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
Entrega automática
</li>
<li class="flex items-center gap-2">
<svg class="h-4 w-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
</svg>
Suporte via chat
</li>
</ul>
</div>
</div>
<div class="mt-10 border-t border-gray-800 pt-6 text-center text-xs text-gray-400">
© 2026 VN Store. Todos os direitos reservados.
</div>
</div>
</footer>
<script>
const firebaseConfig = {
apiKey: "AIzaSyChV5bXRvZp-gPckMa3fcY3XLNr7HGwGXg",
authDomain: "vnstore-d2db2.firebaseapp.com",
databaseURL: "https://vnstore-d2db2-default-rtdb.firebaseio.com",
projectId: "vnstore-d2db2",
storageBucket: "vnstore-d2db2.firebasestorage.app",
messagingSenderId: "274662825667",
appId: "1:274662825667:web:f64ac1b8769f0b76a5cc76",
measurementId: "G-HZE3QGWTHZ"
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();
const products = [
{ id: 1, name: 'Conta Discord Nitro 1 Ano', price: 'R$ 149,90', priceCents: 14990, rating: 4.8, sales: 156, category: 'Nitro', image: 'images/nitro.jfif' },
{ id: 2, name: '14 Boosts (3 Níveis)', price: 'R$ 89,90', priceCents: 8990, rating: 5.0, sales: 89, category: 'Boosts', image: 'https://images.unsplash.com/photo-1593305841991-05c297ba4575?w=400&h=500&fit=crop' },
{ id: 3, name: 'Bot de Música Premium', price: 'R$ 29,90', priceCents: 2990, rating: 4.9, sales: 234, category: 'Bots', image: 'images/bot.jfif' },
{ id: 4, name: 'Serviço de Design de Server', price: 'R$ 49,90', priceCents: 4990, rating: 4.7, sales: 67, category: 'Serviços', image: 'images/servico.png' }
];
function searchProducts(query) {
if (!query.trim()) return [];
const lowerQuery = query.toLowerCase();
return products.filter(product =>
product.name.toLowerCase().includes(lowerQuery) || product.category.toLowerCase().includes(lowerQuery)
);
}
function renderSearchResults(container, results) {
if (results.length === 0) {
container.innerHTML = '<div class="search-result-empty">Nenhum produto encontrado</div>';
} else {
container.innerHTML = results.map(product => `
<div class="search-result-item" onclick="window.location.href='produto.html'">
<img src="${product.image}" alt="${product.name}">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">${product.name}</div>
<div class="text-sm text-gray-400">${product.category} · ${product.price}</div>
</div>
</div>
`).join('');
}
container.classList.remove('hidden');
}
function setupSearch(inputId, resultsId) {
const input = document.getElementById(inputId);
const results = document.getElementById(resultsId);
if (!input || !results) return;
input.addEventListener('input', function() {
const query = this.value;
const searchResults = searchProducts(query);
if (query.trim()) {
renderSearchResults(results, searchResults);
} else {
results.classList.add('hidden');
}
});
document.addEventListener('click', function(e) {
if (!input.contains(e.target) && !results.contains(e.target)) {
results.classList.add('hidden');
}
});
}
function setupThemeToggle() {
const toggle = document.getElementById('theme-toggle');
const sunIcon = document.getElementById('sun-icon');
const moonIcon = document.getElementById('moon-icon');
function updateIcons() {
const isDark = document.documentElement.classList.contains('dark');
if (isDark) { sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); }
else { sunIcon.classList.add('hidden'); moonIcon.classList.remove('hidden'); }
}
updateIcons();
toggle.addEventListener('click', function() {
document.documentElement.classList.toggle('dark');
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
updateIcons();
});
}
function setupMobileMenu() {
const menuBtn = document.getElementById('mobile-menu-btn');
const closeBtn = document.getElementById('close-mobile-menu');
const menu = document.getElementById('mobile-menu');
if (!menuBtn || !closeBtn || !menu) return;
menuBtn.addEventListener('click', () => { menu.classList.remove('hidden'); document.body.style.overflow = 'hidden'; });
closeBtn.addEventListener('click', () => { menu.classList.add('hidden'); document.body.style.overflow = ''; });
}
function toggleFaq(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('svg');
content.classList.toggle('hidden');
icon.classList.toggle('rotate-180');
}
document.addEventListener('DOMContentLoaded', function() {
// Hide loading screen after 1 second
setTimeout(() => {
const loadingScreen = document.getElementById('loading-screen');
if (loadingScreen) {
loadingScreen.classList.add('hidden');
}
}, 1000);
setupSearch('header-search', 'header-search-results');
setupSearch('mobile-search', 'mobile-search-results');
setupThemeToggle();
setupMobileMenu();
});
</script>
</body>
</html>