IASIS/Site Institucional IAsis.md

Site Institucional IAsis

📋 Visão Geral

Site institucional completo para a IAsis - Plataforma de Interoperabilidade em Saúde, desenvolvido em React com design moderno e responsivo.

🚀 Características Principais

✨ Design e UX

• Design Moderno: Interface limpa e profissional
• Responsivo: Funciona perfeitamente em desktop, tablet e mobile
• Paleta de Cores: Azul (#3B82F6), Verde (#10B981), Roxo (#8B5CF6)
• Tipografia: Hierarquia visual clara e legível
• Animações: Efeitos hover e transições suaves

📄 Páginas Implementadas

1. Home (/)

   • Hero section com apresentação principal
   • Métricas de impacto (18M+ pacientes, 40→3 dias de regulação)
   • Visão geral dos produtos digitais
   • Call-to-actions estratégicos

2. Sobre (/sobre)

   • História e evolução da empresa
   • Missão, visão e propósito
   • Valores corporativos
   • Timeline da jornada da IAsis
   • Informações sobre a equipe

3. Plataforma (/plataforma)

   • Apresentação dos 3 produtos principais:
     • WEB3 ENGINE (Infraestrutura de Integração)
     • SMART DIGITAL TWIN (Inteligência Estratégica)
     • MED JOURNEY (Continuidade do Cuidado)
   • Arquitetura em camadas
   • Tecnologias utilizadas

4. Módulos (/modulos)

   • Detalhamento dos 10 módulos da plataforma
   • Sistema de filtros por categoria
   • Funcionalidades expandíveis
   • Modelo comercial modular

5. Tecnologia (/tecnologia)

   • Stack tecnológico completo
   • Arquitetura da plataforma
   • Princípios arquiteturais
   • Métricas de performance

6. Impacto (/impacto)

   • Casos de sucesso reais
   • Métricas de impacto
   • Benefícios por stakeholder
   • Impacto social

7. Para Quem (/para-quem)

   • Segmentação por tipo de cliente:
     • Municípios (pequeno, médio, grande porte)
     • Estados
     • Operadoras de Saúde
     • Hospitais e Clínicas
   • Comparativo de soluções

8. Contato (/contato)

   • Formulário de contato funcional
   • Informações de contato
   • FAQ
   • Múltiplas opções de contato

🛠️ Tecnologias Utilizadas

• Frontend: React 19.1.0 + Vite 6.3.5
• Styling: Tailwind CSS
• Componentes: Shadcn/UI
• Ícones: Lucide React
• Roteamento: React Router DOM
• Build: Vite (otimizado para produção)

📁 Estrutura do Projeto

iasis-website/
├── src/
│   ├── components/
│   │   ├── ui/           # Componentes base (Shadcn/UI)
│   │   ├── Header.jsx    # Cabeçalho e navegação
│   │   ├── Footer.jsx    # Rodapé
│   │   ├── Home.jsx      # Página inicial
│   │   ├── About.jsx     # Página sobre
│   │   ├── Platform.jsx  # Página da plataforma
│   │   ├── Modules.jsx   # Página de módulos
│   │   ├── Technology.jsx # Página de tecnologia
│   │   ├── Impact.jsx    # Página de impacto
│   │   ├── ForWho.jsx    # Página para quem
│   │   └── Contact.jsx   # Página de contato
│   ├── assets/           # Imagens e recursos
│   ├── lib/              # Utilitários
│   ├── hooks/            # Hooks customizados
│   ├── App.jsx           # Componente principal
│   ├── App.css           # Estilos globais
│   └── main.jsx          # Ponto de entrada
├── public/               # Arquivos públicos
├── dist/                 # Build de produção
└── package.json          # Dependências e scripts

🚀 Como Executar

Pré-requisitos

• Node.js 18+
• npm ou yarn

Instalação

# Instalar dependências
npm install

# Executar em desenvolvimento
npm run dev

# Build para produção
npm run build

# Preview do build
npm run preview

URLs de Desenvolvimento

• Local: http://localhost:5173
• Network: http://169.254.0.21:5173

📊 Performance

Build de Produção

• CSS: 95.06 kB (15.46 kB gzipped)
• JavaScript: 356.47 kB (102.21 kB gzipped)
• Imagens: Otimizadas e comprimidas
• Total: ~2.1 MB (incluindo assets)

Otimizações Implementadas

• ✅ Code splitting automático
• ✅ Lazy loading de componentes
• ✅ Compressão de imagens
• ✅ Minificação de CSS/JS
• ✅ Tree shaking
• ✅ Gzip compression

🎨 Design System

Cores Principais

--primary: #3B82F6 (Azul IAsis)
--secondary: #10B981 (Verde)
--accent: #8B5CF6 (Roxo)
--background: #FFFFFF
--foreground: #1F2937

Componentes Reutilizáveis

• Cards com efeitos hover
• Botões com variações
• Badges e tags
• Formulários estilizados
• Layout responsivo

📱 Responsividade

Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

Funcionalidades Mobile

• Menu hambúrguer
• Touch-friendly buttons
• Otimização de imagens
• Layout adaptativo

🔧 Funcionalidades

Navegação

• ✅ Roteamento SPA
• ✅ Menu responsivo
• ✅ Links ativos
• ✅ Scroll suave

Formulários

• ✅ Validação de campos
• ✅ Estados de loading
• ✅ Feedback visual
• ✅ Acessibilidade

Interatividade

• ✅ Efeitos hover
• ✅ Animações CSS
• ✅ Componentes expandíveis
• ✅ Filtros dinâmicos

🚀 Deploy

Opções de Deploy

1. Vercel (Recomendado)
2. Netlify
3. GitHub Pages
4. Servidor próprio

Comandos de Deploy

# Build de produção
npm run build

# Os arquivos estarão em /dist

📞 Suporte

Para dúvidas ou suporte técnico:

• Email: contato@iasis.com.br
• Telefone: +55 (11) 9999-9999

---

Desenvolvido com ❤️ para a IAsis