| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FitFlow Pro - PRD Corporativo</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| * { font-family: 'Inter', sans-serif; } |
| .corporate-gradient { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); } |
| .primary-color { color: #1e3a8a; } |
| .secondary-color { color: #10b981; } |
| .accent-color { color: #f59e0b; } |
| .page-break { page-break-after: always; } |
| .hover-lift { transition: transform 0.2s ease-in-out; } |
| .hover-lift:hover { transform: translateY(-2px); } |
| .diagram-container { background: #f8fafc; border-left: 4px solid #3b82f6; } |
| .user-flow-step { border-left: 3px solid #10b981; background: #f0fdf4; } |
| .feature-card { border-top: 3px solid #f59e0b; } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <section id="capa" class="min-h-screen corporate-gradient text-white flex flex-col justify-center items-center p-8 page-break"> |
| <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-12 max-w-4xl text-center border border-white/20"> |
| <div class="w-32 h-32 mx-auto mb-8 bg-white/20 rounded-2xl flex items-center justify-center"> |
| <i data-feather="activity" class="w-16 h-16"></i> |
| </div> |
| <h1 class="text-5xl font-bold mb-4">FitFlow Pro</h1> |
| <h2 class="text-2xl font-light mb-8">Product Requirements Document</h2> |
| <div class="bg-white/10 rounded-lg p-6 inline-block"> |
| <p class="text-lg">PWA de Gestão de Treinos Inteligente</p> |
| <p class="text-sm opacity-80 mt-2">Versão 1.0 | Documento Corporativo</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="indice" class="min-h-screen bg-white p-8 page-break"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold primary-color mb-8">Índice do Documento</h2> |
| <div class="grid md:grid-cols-2 gap-6"> |
| <a href="#visao" class="hover-lift block p-6 bg-gray-50 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="target" class="secondary-color mr-3"></i> |
| <h3 class="text-xl font-semibold">1. Visão Geral do Produto</h3> |
| </div> |
| <p class="text-gray-600">Objetivos estratégicos e proposta de valor</p> |
| </a> |
| |
| <a href="#publico" class="hover-lift block p-6 bg-gray-50 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="users" class="accent-color mr-3"></i> |
| <h3 class="text-xl font-semibold">2. Público-Alvo e Objetivos</h3> |
| </div> |
| <p class="text-gray-600">Personas e metas de negócio</p> |
| </a> |
|
|
| <a href="#funcionalidades" class="hover-lift block p-6 bg-gray-50 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="grid" class="primary-color mr-3"></i> |
| <h3 class="text-xl font-semibold">3. Funcionalidades Detalhadas</h3> |
| </div> |
| <p class="text-gray-600">Especificações técnicas por perfil</p> |
| </a> |
|
|
| <a href="#dados" class="hover-lift block p-6 bg-gray-50 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="database" class="secondary-color mr-3"></i> |
| <h3 class="text-xl font-semibold">4. Estrutura de Dados</h3> |
| </div> |
| <p class="text-gray-600">Modelagem conceitual e relações</p> |
| </a> |
|
|
| <a href="#fluxos" class="hover-lift block p-6 bg-gray-50 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="repeat" class="accent-color mr-3"></i> |
| <h3 class="text-xl font-semibold">5. Fluxos de Usuário</h3> |
| </div> |
| <p class="text-gray-600">Journeys completos e interações</p> |
| </a> |
|
|
| <a href="#wireframes" class="hover-lift block p-6 bg-gray-50 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="layout" class="primary-color mr-3"></i> |
| <h3 class="text-xl font-semibold">6. Wireframes Textuais</h3> |
| </div> |
| <p class="text-gray-600">Descrições detalhadas de interface</p> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="visao" class="min-h-screen bg-white p-8 page-break"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold primary-color mb-8">1. Visão Geral do Produto</h2> |
| |
| <div class="diagram-container p-6 rounded-lg mb-8"> |
| <h3 class="text-xl font-semibold mb-4">Proposta de Valor</h3> |
| <p class="text-lg leading-relaxed"> |
| FitFlow Pro é uma PWA (Progressive Web App) de gestão de treinos que conecta personal trainers |
| e alunos através de uma plataforma inteligente, modular e gamificada. A solução oferece |
| <span class="secondary-color font-semibold">paridade total mobile/desktop</span> para trainers e |
| <span class="accent-color font-semibold">experiência mobile-first</span> para alunos, com |
| sincronização offline e dashboard reorganizável. |
| </p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-6 mb-8"> |
| <div class="feature-card p-6 bg-white rounded-lg shadow-sm"> |
| <i data-feather="smartphone" class="w-8 h-8 primary-color mb-4"></i> |
| <h4 class="font-semibold text-lg mb-2">Mobile-First</h4> |
| <p class="text-gray-600">Experiência otimizada para dispositivos móveis com PWA</p> |
| </div> |
| <div class="feature-card p-6 bg-white rounded-lg shadow-sm"> |
| <i data-feather="refresh-cw" class="w-8 h-8 secondary-color mb-4"></i> |
| <h4 class="font-semibold text-lg mb-2">Sincronização Offline</h4> |
| <p class="text-gray-600">Funcionalidade completa sem conexão à internet</p> |
| </div> |
| <div class="feature-card p-6 bg-white rounded-lg shadow-sm"> |
| <i data-feather="award" class="w-8 h-8 accent-color mb-4"></i> |
| <h4 class="font-semibold text-lg mb-2">Gamificação</h4> |
| <p class="text-gray-600">Sistema de recompensas e conquistas para engajamento</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="publico" class="min-h-screen bg-white p-8 page-break"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold primary-color mb-8">2. Público-Alvo e Objetivos</h2> |
| |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> |
| |
| <div class="bg-gradient-to-br from-blue-50 to-green-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> |
| <i data-feather="user" class="primary-color"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Perfil: Aluno</h3> |
| </div> |
| <ul class="space-y-2 text-gray-700"> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Foco exclusivo mobile</li> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Idade: 18-45 anos</li> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Busca por praticidade</li> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Valoriza gamificação</li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-br from-green-50 to-amber-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4"> |
| <i data-feather="users" class="secondary-color"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Perfil: Personal Trainer</h3> |
| </div> |
| <ul class="space-y-2 text-gray-700"> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Paridade mobile/desktop</li> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Gestão de múltiplos alunos</li> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Dashboard modular</li> |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Análise de performance</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <div class="fixed bottom-8 right-8"> |
| <button onclick="generatePDF()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full shadow-lg flex items-center hover-lift"> |
| <i data-feather="download" class="w-5 h-5 mr-2"></i> |
| Exportar PDF |
| </button> |
| </div> |
|
|
| |
| <nav class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-b border-gray-200 z-50"> |
| <div class="max-w-6xl mx-auto px-8 py-4"> |
| <div class="flex justify-between items-center"> |
| <a href="index.html" class="text-xl font-bold primary-color flex items-center"> |
| <i data-feather="activity" class="w-6 h-6 mr-2"></i> |
| FitFlow Pro |
| </a> |
| <div class="flex gap-6"> |
| <a href="index.html" class="text-gray-600 hover:text-blue-600 font-medium">PRD</a> |
| <a href="funcionalidades.html" class="text-blue-600 font-medium border-b-2 border-blue-600">Funcionalidades</a> |
| <a href="wireframes.html" class="text-gray-600 hover:text-blue-600 font-medium">Wireframes</a> |
| <a href="metricas.html" class="text-gray-600 hover:text-blue-600 font-medium">Métricas</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
| <script> |
| feather.replace(); |
| |
| function generatePDF() { |
| const { jsPDF } = window.jspdf; |
| const doc = new jsPDF('p', 'mm', 'a4'); |
| |
| |
| doc.setFontSize(22); |
| doc.setTextColor(30, 58, 138); |
| doc.text('FitFlow Pro - PRD Corporativo', 20, 30); |
| |
| doc.setFontSize(12); |
| doc.setTextColor(100, 100, 100); |
| doc.text('Documento gerado automaticamente pelo sistema', 20, 45); |
| |
| |
| const sections = ['capa', 'indice', 'visao', 'publico']; |
| sections.forEach((section, index) => { |
| if(index > 0) doc.addPage(); |
| doc.setFontSize(16); |
| doc.text(`Seção ${index + 1}`, 20, 60); |
| }); |
| |
| doc.save('FitFlow_Pro_PRD.pdf'); |
| } |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth' }); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
