house-up / index.html
Matheus1898v's picture
Add 2 files
d00fd74 verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HouseUp - Projeto Low Ticket</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>
.slide {
display: none;
min-height: 100vh;
padding: 2rem;
}
.active-slide {
display: block;
}
.progress-bar {
height: 5px;
background: #e5e7eb;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.progress {
height: 100%;
background: #3b82f6;
width: 0%;
transition: width 0.3s ease;
}
.floating-nav {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
}
.floating-nav button {
background: #3b82f6;
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.floating-nav button:hover {
transform: scale(1.1);
background: #2563eb;
}
.highlight {
background: linear-gradient(180deg, rgba(255,255,255,0) 50%, #fef08a 50%);
}
.icp-card {
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.icp-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
border-left: 4px solid #3b82f6;
}
.funnel-stage {
position: relative;
padding-left: 2.5rem;
}
.funnel-stage:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #e5e7eb;
}
.funnel-stage:after {
content: "";
position: absolute;
left: 0;
top: 1.25rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #3b82f6;
transform: translateX(-50%);
}
.model-card {
transition: all 0.3s ease;
}
.model-card:hover {
transform: scale(1.03);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Progress Bar -->
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<!-- Floating Navigation -->
<div class="floating-nav">
<button onclick="prevSlide()"><i class="fas fa-arrow-up"></i></button>
<button onclick="nextSlide()"><i class="fas fa-arrow-down"></i></button>
</div>
<!-- Slides -->
<div class="slides-container">
<!-- Slide 1: Cover -->
<div class="slide active-slide bg-gradient-to-br from-blue-600 to-blue-800 text-white">
<div class="container mx-auto h-full flex flex-col justify-center items-center text-center">
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 max-w-3xl border border-white/20">
<h1 class="text-5xl font-bold mb-6">HouseUp</h1>
<h2 class="text-3xl font-semibold mb-8">Projeto Low Ticket - Imóveis de Leilão</h2>
<div class="flex justify-center space-x-4">
<span class="px-4 py-2 bg-white/20 rounded-full">Consultoria Especializada</span>
<span class="px-4 py-2 bg-white/20 rounded-full">Baixo Investimento</span>
<span class="px-4 py-2 bg-white/20 rounded-full">Alto Retorno</span>
</div>
</div>
<div class="mt-12 animate-bounce">
<i class="fas fa-chevron-down text-2xl"></i>
</div>
</div>
</div>
<!-- Slide 2: Introduction -->
<div class="slide bg-white">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-blue-800 mb-6">O Mercado de Imóveis de Leilão</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-blue-50 p-6 rounded-xl">
<div class="text-blue-600 text-4xl mb-3">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="font-bold text-lg mb-2">Crescimento</h3>
<p class="text-gray-700">Mercado em expansão com aumento de 30% nos leilões nos últimos 2 anos</p>
</div>
<div class="bg-blue-50 p-6 rounded-xl">
<div class="text-blue-600 text-4xl mb-3">
<i class="fas fa-percentage"></i>
</div>
<h3 class="font-bold text-lg mb-2">Desconto</h3>
<p class="text-gray-700">Imóveis podem ser adquiridos com até 60% de desconto em relação ao mercado</p>
</div>
<div class="bg-blue-50 p-6 rounded-xl">
<div class="text-blue-600 text-4xl mb-3">
<i class="fas fa-lock"></i>
</div>
<h3 class="font-bold text-lg mb-2">Segurança</h3>
<p class="text-gray-700">Processo 100% legalizado quando realizado com orientação especializada</p>
</div>
</div>
<div class="mt-8 bg-yellow-50 p-6 rounded-xl border-l-4 border-yellow-400">
<h3 class="font-bold text-lg mb-2 text-yellow-800">Oportunidade</h3>
<p class="text-gray-700">Apesar do potencial, <span class="font-semibold">menos de 5% dos investidores</span> aproveitam essa oportunidade por falta de conhecimento e medo dos riscos.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: ICPs Overview -->
<div class="slide bg-gray-100">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-blue-800 mb-8">🎯 Top 3 ICPs para HouseUp</h2>
<p class="text-lg text-gray-700 mb-8">Identificamos os 3 perfis de clientes ideais que mais se beneficiam com nossa solução:</p>
<div class="grid md:grid-cols-3 gap-6">
<div class="icp-card bg-white p-6 rounded-xl shadow">
<div class="text-blue-600 text-3xl mb-3">
<i class="fas fa-user-graduate"></i>
</div>
<h3 class="font-bold text-xl mb-3">ICP 1</h3>
<p class="text-gray-700 font-semibold mb-2">Investidor Iniciante com Renda Alta</p>
<ul class="text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Servidores públicos, médicos, engenheiros</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Renda: R$ 8.000 a R$ 20.000/mês</span>
</li>
</ul>
</div>
<div class="icp-card bg-white p-6 rounded-xl shadow">
<div class="text-blue-600 text-3xl mb-3">
<i class="fas fa-user-tie"></i>
</div>
<h3 class="font-bold text-xl mb-3">ICP 2</h3>
<p class="text-gray-700 font-semibold mb-2">Investidor Profissional Local</p>
<ul class="text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Corretores autônomos, imobiliárias</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>1-10 colaboradores</span>
</li>
</ul>
</div>
<div class="icp-card bg-white p-6 rounded-xl shadow">
<div class="text-blue-600 text-3xl mb-3">
<i class="fas fa-laptop-code"></i>
</div>
<h3 class="font-bold text-xl mb-3">ICP 3</h3>
<p class="text-gray-700 font-semibold mb-2">Investidor Iniciante Digital</p>
<ul class="text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Jovens profissionais digitais</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Busca diversificação de renda</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 4: ICP 1 Details -->
<div class="slide bg-white">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto">
<div class="flex items-center mb-6">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-user-graduate text-blue-600 text-2xl"></i>
</div>
<h2 class="text-3xl font-bold text-blue-800">ICP 1 – Investidor Iniciante com Renda Alta</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="font-bold text-xl mb-3 text-gray-800">Perfil</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-briefcase text-blue-500 mt-1 mr-3"></i>
<span><strong>Posição:</strong> Servidores públicos, médicos, engenheiros, analistas, professores universitários</span>
</li>
<li class="flex items-start">
<i class="fas fa-industry text-blue-500 mt-1 mr-3"></i>
<span><strong>Indústria:</strong> Setor público, autônomos, profissionais liberais</span>
</li>
<li class="flex items-start">
<i class="fas fa-money-bill-wave text-blue-500 mt-1 mr-3"></i>
<span><strong>Renda Média:</strong> R$ 8.000 a R$ 20.000/mês</span>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-xl mb-3 text-gray-800">Principais Dores</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Não sabem como começar a investir com segurança</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Medo de perder dinheiro com imóveis de leilão</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Falta de tempo para acompanhar reforma, desocupação e venda</span>
</li>
</ul>
</div>
</div>
<div class="mt-8 bg-blue-50 p-6 rounded-xl">
<h3 class="font-bold text-xl mb-3 text-blue-800">Solução HouseUp</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg">
<i class="fas fa-hands-helping text-blue-500 text-2xl mb-2"></i>
<p class="font-semibold">Assessoria Completa</p>
</div>
<div class="bg-white p-4 rounded-lg">
<i class="fas fa-handshake text-blue-500 text-2xl mb-2"></i>
<p class="font-semibold">Revenda Garantida</p>
</div>
<div class="bg-white p-4 rounded-lg">
<i class="fas fa-tools text-blue-500 text-2xl mb-2"></i>
<p class="font-semibold">Gestão de Reformas</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 5: ICP 2 Details -->
<div class="slide bg-gray-100">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto">
<div class="flex items-center mb-6">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-user-tie text-blue-600 text-2xl"></i>
</div>
<h2 class="text-3xl font-bold text-blue-800">ICP 2 – Investidor Profissional Local</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="font-bold text-xl mb-3 text-gray-800">Perfil</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-user-tag text-blue-500 mt-1 mr-3"></i>
<span><strong>Posição:</strong> Corretor autônomo, dono de pequena imobiliária</span>
</li>
<li class="flex items-start">
<i class="fas fa-store text-blue-500 mt-1 mr-3"></i>
<span><strong>Indústria:</strong> Imobiliário local (B2B)</span>
</li>
<li class="flex items-start">
<i class="fas fa-users text-blue-500 mt-1 mr-3"></i>
<span><strong>Tamanho:</strong> 1–10 colaboradores</span>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-xl mb-3 text-gray-800">Principais Dores</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Baixa rotatividade de estoque</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Dificuldade em atrair imóveis com boa margem</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Falta de know-how em leilões</span>
</li>
</ul>
</div>
</div>
<div class="mt-8 bg-blue-50 p-6 rounded-xl">
<h3 class="font-bold text-xl mb-3 text-blue-800">Solução HouseUp</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold mb-2">White Label</h4>
<p class="text-gray-700">Use nossa plataforma como se fosse sua, com sua marca e identidade visual</p>
</div>
<div>
<h4 class="font-semibold mb-2">Parceria Estratégica</h4>
<p class="text-gray-700">Revenda nossa consultoria junto com seus serviços, aumentando seu ticket médio</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 6: ICP 3 Details -->
<div class="slide bg-white">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto">
<div class="flex items-center mb-6">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-laptop-code text-blue-600 text-2xl"></i>
</div>
<h2 class="text-3xl font-bold text-blue-800">ICP 3 – Investidor Iniciante Digital</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="font-bold text-xl mb-3 text-gray-800">Perfil</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-user-clock text-blue-500 mt-1 mr-3"></i>
<span><strong>Posição:</strong> Jovens profissionais buscando diversificação de renda</span>
</li>
<li class="flex items-start">
<i class="fas fa-laptop text-blue-500 mt-1 mr-3"></i>
<span><strong>Indústria:</strong> Tecnologia, marketing, jurídico, contabilidade (B2C)</span>
</li>
<li class="flex items-start">
<i class="fas fa-search-dollar text-blue-500 mt-1 mr-3"></i>
<span><strong>Objetivo:</strong> Renda passiva e independência financeira</span>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-xl mb-3 text-gray-800">Principais Dores</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Medo de arriscar em leilões</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Não sabe como encontrar imóveis</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>Receio de cair em ciladas jurídicas</span>
</li>
</ul>
</div>
</div>
<div class="mt-8 bg-blue-50 p-6 rounded-xl">
<h3 class="font-bold text-xl mb-3 text-blue-800">Solução HouseUp</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg">
<i class="fas fa-graduation-cap text-blue-500 text-2xl mb-2"></i>
<p class="font-semibold">Curso Completo</p>
</div>
<div class="bg-white p-4 rounded-lg">
<i class="fas fa-headset text-blue-500 text-2xl mb-2"></i>
<p class="font-semibold">Suporte Personalizado</p>
</div>
<div class="bg-white p-4 rounded-lg">
<i class="fas fa-file-signature text-blue-500 text-2xl mb-2"></i>
<p class="font-semibold">Modelos Prontos</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 7: Funnel Overview -->
<div class="slide bg-gradient-to-br from-blue-800 to-blue-900 text-white">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8">🔻 Estrutura do Funil de Vendas</h2>
<div class="space-y-8">
<div class="funnel-stage">
<h3 class="text-xl font-semibold mb-2">1. Tráfego (Topo do Funil)</h3>
<p class="text-blue-100 mb-3">Instagram Ads, YouTube Shorts, Google Ads, LinkedIn Ads</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Objetivo: Levar para página do produto</span>
</div>
</div>
<div class="funnel-stage">
<h3 class="text-xl font-semibold mb-2">2. Produto Principal – Low Ticket (R$ 27)</h3>
<p class="text-blue-100 mb-3">Ebook + Webinário: "Primeiro Leilão Lucrativo"</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Ebook passo a passo</span>
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Planilha de simulação</span>
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Videoaula bônus</span>
</div>
</div>
<div class="funnel-stage">
<h3 class="text-xl font-semibold mb-2">3. Order Bump 1 – R$ 19,90</h3>
<p class="text-blue-100 mb-3">Kit de Riscos e Cálculo Avançado</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Checklist de armadilhas</span>
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Simulações com margem</span>
</div>
</div>
<div class="funnel-stage">
<h3 class="text-xl font-semibold mb-2">4. Order Bump 2 – R$ 39,90</h3>
<p class="text-blue-100 mb-3">GPT LeilãoBot (IA personalizada)</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Resume editais</span>
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Extrai dados principais</span>
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Planilha automatizada</span>
</div>
</div>
<div class="funnel-stage">
<h3 class="text-xl font-semibold mb-2">5. OTO (One-Time Offer) – R$ 297</h3>
<p class="text-blue-100 mb-3">"Compra Guiada do Imóvel Leiloado"</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Passo a passo completo</span>
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Vídeos + modelos</span>
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">Suporte básico</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 8: Business Models -->
<div class="slide bg-gray-100">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-blue-800 mb-8">💼 Modelos de Negócio</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="model-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-blue-500">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-calculator text-blue-600"></i>
</div>
<h3 class="text-2xl font-bold">Modelo 1</h3>
</div>
<p class="text-gray-700 mb-6"><strong>Setup + Comissão de 10%</strong></p>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">Setup Inicial:</p>
<p class="text-gray-600">R$ 9.000 (pago em etapas)</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">Comissão:</p>
<p class="text-gray-600">10% sobre faturamento total</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">Duração:</p>
<p class="text-gray-600">12 meses após lançamento</p>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-blue-50 rounded-lg">
<p class="text-blue-800 font-semibold">Vantagem: HouseUp paga menos comissão recorrente</p>
</div>
</div>
<div class="model-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-green-500">
<div class="flex items-center mb-4">
<div class="bg-green-100 p-2 rounded-full mr-3">
<i class="fas fa-chart-pie text-green-600"></i>
</div>
<h3 class="text-2xl font-bold">Modelo 2</h3>
</div>
<p class="text-gray-700 mb-6"><strong>Comissão Total de 40% (sem setup)</strong></p>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">Setup Inicial:</p>
<p class="text-gray-600">Zero custo para HouseUp</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">Comissão:</p>
<p class="text-gray-600">40% sobre faturamento bruto</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">Duração:</p>
<p class="text-gray-600">Até 12 meses</p>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-green-50 rounded-lg">
<p class="text-green-800 font-semibold">Vantagem: Risco zero para HouseUp (baseado em performance)</p>
</div>
</div>
</div>
<div class="mt-8 bg-yellow-50 p-6 rounded-xl border-l-4 border-yellow-400">
<h3 class="font-bold text-lg mb-2 text-yellow-800">Observação Importante</h3>
<p class="text-gray-700">Na consultoria premium (R$ 2.000 a R$ 10.000), a comissão cai para 10% em ambos os modelos.</p>
</div>
</div>
</div>
</div>
<!-- Slide 9: Next Steps -->
<div class="slide bg-white">
<div class="container mx-auto h-full flex flex-col justify-center">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold text-blue-800 mb-8">Próximos Passos</h2>
<div class="grid md:grid-cols-3 gap-6 mb-10">
<div class="bg-blue-50 p-6 rounded-xl">
<div class="text-blue-600 text-4xl mb-4">
<i class="fas fa-handshake"></i>
</div>
<h3 class="font-bold text-lg mb-2">1. Definição do Modelo</h3>
<p class="text-gray-700">Escolha entre os dois modelos de negócio apresentados</p>
</div>
<div class="bg-blue-50 p-6 rounded-xl">
<div class="text-blue-600 text-4xl mb-4">
<i class="fas fa-tasks"></i>
</div>
<h3 class="font-bold text-lg mb-2">2. Cronograma</h3>
<p class="text-gray-700">Definir prazos para desenvolvimento e lançamento</p>
</div>
<div class="bg-blue-50 p-6 rounded-xl">
<div class="text-blue-600 text-4xl mb-4">
<i class="fas fa-rocket"></i>
</div>
<h3 class="font-bold text-lg mb-2">3. Lançamento</h3>
<p class="text-gray-700">Iniciar campanhas e otimizar conversões</p>
</div>
</div>
<div class="bg-blue-100 p-8 rounded-xl inline-block">
<h3 class="text-2xl font-bold text-blue-800 mb-4">Vamos conversar?</h3>
<p class="text-gray-700 mb-6">Agende uma reunião para discutir os detalhes e tirar dúvidas</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
Agendar Reunião <i class="fas fa-calendar-check ml-2"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Slide 10: Thank You -->
<div class="slide bg-gradient-to-br from-blue-600 to-blue-800 text-white">
<div class="container mx-auto h-full flex flex-col justify-center items-center text-center">
<div class="max-w-2xl">
<h1 class="text-4xl font-bold mb-6">Obrigado!</h1>
<p class="text-xl mb-8">Estamos à disposição para transformar essa oportunidade em resultados concretos para o HouseUp.</p>
<div class="flex justify-center space-x-4">
<div class="bg-white/20 p-4 rounded-full">
<i class="fas fa-envelope text-2xl"></i>
</div>
<div class="bg-white/20 p-4 rounded-full">
<i class="fas fa-phone-alt text-2xl"></i>
</div>
<div class="bg-white/20 p-4 rounded-full">
<i class="fab fa-whatsapp text-2xl"></i>
</div>
</div>
<div class="mt-8">
<p class="text-blue-200">HouseUp - Projeto Low Ticket</p>
<p class="text-blue-300">Consultoria em Imóveis de Leilão</p>
</div>
</div>
</div>
</div>
</div>
<script>
// Slide management
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let currentSlide = 0;
// Initialize first slide
showSlide(currentSlide);
// Update progress bar
function updateProgress() {
const progress = ((currentSlide + 1) / totalSlides) * 100;
document.getElementById('progress').style.width = `${progress}%`;
}
// Show specific slide
function showSlide(n) {
slides.forEach(slide => slide.classList.remove('active-slide'));
slides[n].classList.add('active-slide');
currentSlide = n;
updateProgress();
// Scroll to top when changing slides
window.scrollTo(0, 0);
}
// Next slide
function nextSlide() {
if (currentSlide < totalSlides - 1) {
showSlide(currentSlide + 1);
}
}
// Previous slide
function prevSlide() {
if (currentSlide > 0) {
showSlide(currentSlide - 1);
}
}
// Keyboard navigation
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
nextSlide();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
prevSlide();
}
});
// Touch/swipe support for mobile
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('touchstart', function(e) {
touchStartX = e.changedTouches[0].screenX;
}, false);
document.addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, false);
function handleSwipe() {
if (touchEndX < touchStartX - 50) {
nextSlide();
} else if (touchEndX > touchStartX + 50) {
prevSlide();
}
}
</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=Matheus1898v/house-up" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>