226 lines
5.6 KiB
Markdown
226 lines
5.6 KiB
Markdown
# 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
|
|
```bash
|
|
# 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
|
|
```css
|
|
--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
|
|
```bash
|
|
# 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**
|
|
|