Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aplicativo Fitness 2025 - Transforme Seu Corpo</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #000000 0%, #0066FF 100%); | |
| } | |
| .neon-border { | |
| position: relative; | |
| border: 2px solid transparent; | |
| border-radius: 12px; | |
| } | |
| .neon-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| border-radius: 12px; | |
| background: linear-gradient(45deg, #0066FF, #FFD700, #0066FF); | |
| background-size: 200% 200%; | |
| z-index: -1; | |
| animation: gradient 3s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .cta-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 102, 255, 0.2); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #0066FF; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 8px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 14px; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| .how-it-works-card { | |
| background-color: #FEF9C3; /* Amarelo claro */ | |
| } | |
| .feature-card { | |
| background-color: #EFF6FF; /* Azul claro */ | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-black text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-dumbbell text-2xl text-yellow-500 mr-2"></i> | |
| <span class="text-xl font-bold">Aplicativo <span class="text-blue-500">Fitness</span></span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#features" class="hover:text-yellow-400 transition">Recursos</a> | |
| <a href="#how-it-works" class="hover:text-yellow-400 transition">Como Funciona</a> | |
| <a href="#pricing" class="hover:text-yellow-400 transition">Planos</a> | |
| <a href="#testimonials" class="hover:text-yellow-400 transition">Depoimentos</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mobile-menu-button" class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu bg-black md:hidden"> | |
| <div class="px-4 py-3 space-y-4"> | |
| <a href="#features" class="block hover:text-yellow-400 transition">Recursos</a> | |
| <a href="#how-it-works" class="block hover:text-yellow-400 transition">Como Funciona</a> | |
| <a href="#pricing" class="block hover:text-yellow-400 transition">Planos</a> | |
| <a href="#testimonials" class="block hover:text-yellow-400 transition">Depoimentos</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <div class="bg-blue-600 text-xs inline-block px-3 py-1 rounded-full mb-4">NOVO LANÇAMENTO</div> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Transforme Seu Corpo em Apenas 20 Minutos/Dia</h1> | |
| <p class="text-lg md:text-xl text-gray-200 mb-8">Planos de treino 100% personalizados para seus objetivos e nível de condicionamento. A revolução fitness chegou!</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#pricing" class="cta-pulse bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-4 px-8 rounded-lg text-lg flex items-center justify-center transition duration-300"> | |
| COMEÇAR AGORA <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="mt-8 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <span class="ml-2 font-bold">4.9/5</span> | |
| </div> | |
| <p class="text-sm">+10.000 usuários satisfeitos</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Pessoa treinando com celular" class="rounded-xl shadow-2xl w-full max-w-lg mx-auto"> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg hidden md:block"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-fire text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold">+500 exercícios</p> | |
| <p class="text-sm text-gray-500">Em vídeo HD</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-lg hidden md:block"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-bolt text-yellow-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold">20 min/dia</p> | |
| <p class="text-sm text-gray-500">Resultados garantidos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trust Badges --> | |
| <div class="bg-gray-100 py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" class="h-8 opacity-70"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1200px-Apple_logo_black.svg.png" class="h-8 opacity-70"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png" class="h-8 opacity-70"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Android_logo_2019.svg/1200px-Android_logo_2019.svg.png" class="h-8 opacity-70"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Forbes_logo.svg/1200px-Forbes_logo.svg.png" class="h-8 opacity-70"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Como Funciona</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Nosso algoritmo de IA cria o plano perfeito para você em apenas 6 passos simples</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> | |
| <!-- Step 1 --> | |
| <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-blue-600 text-2xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Cadastro Rápido</h3> | |
| <p class="text-gray-600">Informe nome, idade, objetivos e nível de condicionamento atual.</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-blue-600 text-2xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Análise de Perfil</h3> | |
| <p class="text-gray-600">Nossa IA avalia seu biotipo, limitações e potencial genético.</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-blue-600 text-2xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Plano Personalizado</h3> | |
| <p class="text-gray-600">Receba treinos e nutrição sob medida para seu perfil.</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Step 4 --> | |
| <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-blue-600 text-2xl font-bold">4</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Acompanhamento AI</h3> | |
| <p class="text-gray-600">Ajustes automáticos de dificuldade conforme seu progresso.</p> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-blue-600 text-2xl font-bold">5</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Resultados Visíveis</h3> | |
| <p class="text-gray-600">Comparativo antes/depois com métricas precisas.</p> | |
| </div> | |
| <!-- Step 6 --> | |
| <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-blue-600 text-2xl font-bold">6</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Comunidade VIP</h3> | |
| <p class="text-gray-600">Acesso a grupo exclusivo com especialistas e outros usuários.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section id="features" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Recursos Exclusivos</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Tudo que você precisa para transformar seu corpo com eficiência máxima</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-video text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">500+ Exercícios em Vídeo HD</h3> | |
| <p class="text-gray-600">Demonstrações profissionais em alta definição com ângulos múltiplos.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Dashboard de Evolução</h3> | |
| <p class="text-gray-600">Acompanhe todas suas métricas em gráficos interativos e relatórios semanais.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-utensils text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Planos Alimentares Inteligentes</h3> | |
| <p class="text-gray-600">Receitas personalizadas baseadas em suas preferências e restrições.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-stopwatch text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Treinos Express (20 min)</h3> | |
| <p class="text-gray-600">Sessões científicas de alta intensidade para resultados rápidos.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Coach de IA 24/7</h3> | |
| <p class="text-gray-600">Nosso assistente virtual responde dúvidas e ajusta seu plano em tempo real.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-dumbbell text-pink-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Adaptável a Qualquer Nível</h3> | |
| <p class="text-gray-600">De iniciantes to atletas, todos encontram desafios ideais.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Planos Acessíveis</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Escolha o plano perfeito para sua jornada fitness</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 hover:shadow-lg transition duration-300"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-1">BÁSICO</h3> | |
| <p class="text-gray-500 text-sm">Ideal para quem quer começar</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 text-xs font-bold px-3 py-1 rounded-full">MAIS ECONÔMICO</div> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$9,90</span> | |
| <span class="text-gray-500">/semestre</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Acesso a treinos básicos</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>3 planos alimentares</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-2"></i> | |
| <span>Acompanhamento de evolução</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-2"></i> | |
| <span>Suporte prioritário</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg text-center transition duration-300"> | |
| QUERO ESTE PLANO | |
| </a> | |
| </div> | |
| <!-- Popular Plan --> | |
| <div class="bg-blue-600 text-white p-8 rounded-xl border-2 border-yellow-400 transition duration-300"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-1">POPULAR</h3> | |
| <p class="text-blue-200 text-sm">O mais escolhido pelos usuários</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$19,90</span> | |
| <span class="text-blue-200">/ano</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span>Todos os recursos premium</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span>9 planos alimentares</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span>Acompanhamento de evolução</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span>Suporte prioritário</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 px-4 rounded-lg text-center transition duration-300"> | |
| QUERO ESTE PLANO | |
| </a> | |
| </div> | |
| <!-- Lifetime Plan --> | |
| <div class="neon-border bg-gray-50 p-8 rounded-xl hover:shadow-lg transform scale-105 z-10 shadow-xl transition duration-300"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-1">VITALÍCIO</h3> | |
| <p class="text-gray-500 text-sm">Investimento único</p> | |
| </div> | |
| <div class="bg-purple-100 text-purple-800 text-xs font-bold px-3 py-1 rounded-full">OFERTA LIMITADA</div> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$29,90</span> | |
| <span class="text-gray-500">(única vez)</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> | |
| <span>Todos os benefícios</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> | |
| <span>Atualizações gratuitas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> | |
| <span>Grupo VIP exclusivo</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> | |
| <span>Consultoria mensal</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg text-center transition duration-300"> | |
| QUERO ESTE PLANO | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| TESTAR POR 7 DIAS GRÁTIS | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">O Que Nossos Usuários Dizem</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Resultados reais de pessoas como você</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Ana Carolina</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Perdi 8kg em apenas 6 semanas seguindo os treinos de 20 minutos e a dieta sugerida pela IA. Nunca imaginei que seria tão fácil!"</p> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Antes:</span> | |
| <span>78kg</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Depois:</span> | |
| <span>70kg</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Tempo:</span> | |
| <span>6 semanas</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Ricardo Almeida</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Como atleta, precisei melhorar meu desempenho. A IA criou um plano específico para meu esporte e em 3 meses melhorei 22% meu tempo."</p> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Antes:</span> | |
| <span>10km em 48min</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Depois:</span> | |
| <span>10km em 37min</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Tempo:</span> | |
| <span>3 meses</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Fernanda Gomes</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Depois do bebê, estava com dificuldades para voltar à forma. Em 8 semanas recuperei minha silhueta com treinos curtos durante as sonecas dele."</p> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Antes:</span> | |
| <span>28% gordura</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Depois:</span> | |
| <span>19% gordura</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-bold">Tempo:</span> | |
| <span>8 semanas</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4 max-w-3xl"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Perguntas Frequentes</h2> | |
| <p class="text-lg text-gray-600">Tire suas dúvidas sobre o Aplicativo Fitness</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- FAQ 1 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="text-lg font-bold text-left">Como são criados os treinos personalizados?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden p-6 border-t border-gray-200"> | |
| <p class="text-gray-600">Nosso algoritmo analisa mais de 50 parâmetros incluindo sua idade, peso, histórico médico, objetivos, equipamentos disponíveis, tempo livre e até mesmo seu <span class="tooltip">biotipo<span class="tooltip-text">Classificação corporal baseada em características genéticas</span></span> para criar um plano 100% adaptado às suas necessidades.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 2 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="text-lg font-bold text-left">Preciso de equipamentos caros?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden p-6 border-t border-gray-200"> | |
| <p class="text-gray-600">Não! Nossos treinos são adaptáveis a qualquer ambiente. Você pode usar desde halteres profissionais até garrafas de água ou o próprio peso do corpo. A IA sempre sugere alternativas baseadas no que você tem disponível.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 3 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="text-lg font-bold text-left">E se eu não gostar do plano sugerido?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden p-6 border-t border-gray-200"> | |
| <p class="text-gray-600">Você pode solicitar ajustes ilimitados até ficar 100% satisfeito. Além disso, conforme você usa o app, a IA aprende suas preferências e vai refinando cada vez mais as sugestões.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 4 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="text-lg font-bold text-left">Como funciona o teste grátis?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden p-6 border-t border-gray-200"> | |
| <p class="text-gray-600">Você tem 7 dias completos para testar TODOS os recursos premium sem compromisso. Se não quiser continuar, basta cancelar antes do período acabar e não será cobrado nada.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-20 bg-gradient-to-r from-blue-900 to-blue-700 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Sua Melhor Versão Começa Aqui!</h2> | |
| <p class="text-xl mb-10 max-w-2xl mx-auto">Junte-se a mais de 50.000 pessoas transformando seus corpos com inteligência artificial</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-4 px-8 rounded-lg text-lg flex items-center justify-center transition duration-300"> | |
| <i class="fas fa-mobile-alt mr-3"></i> BAIXAR AGORA | |
| </a> | |
| <a href="#" class="bg-transparent hover:bg-white hover:text-black border-2 border-white text-white font-bold py-4 px-8 rounded-lg text-lg flex items-center justify-center transition duration-300"> | |
| <i class="fas fa-calendar-check mr-3"></i> TESTAR GRÁTIS POR 7 DIAS | |
| </a> | |
| </div> | |
| <div class="mt-10 flex flex-wrap justify-center items-center gap-6"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-lock text-gray-300 mr-2"></i> | |
| <span class="text-sm">Pagamento seguro</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-gray-300 mr-2"></i> | |
| <span class="text-sm">Dados protegidos</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-headset text-gray-300 mr-2"></i> | |
| <span class="text-sm">Suporte Online</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Aplicativo Fitness</h4> | |
| <p class="text-gray-400 mb-4">"O Seu maior patrimônio é a sua saúde!"</p> | |
| <p class="text-gray-400">É um prazer recebe-lo em nosso site!</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links Úteis</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Trabalhe Conosco</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Suporte</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contato</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Status do Serviço</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Baixe o App</h4> | |
| <div class="space-y-3"> | |
| <a href="#" class="block bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg flex items-center"> | |
| <i class="fab fa-apple mr-2"></i> | |
| <div> | |
| <div class="text-xs">Disponível na</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </a> | |
| <a href="#" class="block bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg flex items-center"> | |
| <i class="fab fa-google-play mr-2"></i> | |
| <div> | |
| <div class="text-xs">Disponível no</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-500"> | |
| <p>© 2023 FIT AI. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| }); | |
| // FAQ toggle functionality | |
| document.querySelectorAll('.faq-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (mobileMenu.classList.contains('open')) { | |
| mobileMenu.classList.remove('open'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Animation on scroll | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.feature-card, .testimonial-card, .neon-border').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| </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=wallysonweb/appfitt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |