PRODUTO EM PRODUÇÃO

VivaMais

VivaMais — Site institucional para clinica medica multidisciplinar

Usar agora Arquitetura

vivamais.expostacker.com.br

live preview

Stack tecnológica: HTML CSS JavaScript Cloudflare Pages SEO Schema.org

6
Especialidades: 8
Convenios: 4
Medicos

Cliente

VivaMais

Setor

Saude e Clinicas Medicas

Linha do tempo

1 dia de implementacao · 2026-06

Produto ao vivo

Usar agora

Resultados

Resultados reportados pelo cliente durante o rollout

6 Especialidades

8 Convenios

4 Profissionais

Dados reportados pelo cliente

O desafio

VivaMais e um site institucional para uma clinica medica ficticia em Santos. A proposta e demonstrar um site de saude rapido, acessivel e otimizado para buscas locais, com estrutura semantica, schema.org, formulario de agendamento e design responsivo.

Clinicas medicas de medio porte precisam de uma presenca digital confiavel para captar pacientes, comunicar especialidades, convenios e canais de contato sem depender de plataformas de terceiros. O desafio e entregar um site rapido, acessivel, bem estruturado para SEO local e com um formulario funcional de agendamento.

A abordagem

Implementamos HTML5 semantico com landmarks ARIA, CSS customizado com variaveis de design, JavaScript vanilla para o menu mobile, mascara de telefone e validacao do formulario. Incluimos schema.org MedicalClinic, metadagens Open Graph, skip link, contraste adequado e deploy na Cloudflare Pages.

A solução

Hero com tag de credibilidade, CTA e metricas sociais
Secao de especialidades com 6 cards (Cardiologia, Neurologia, Ortopedia, Nutricao, Ginecologia, Clinica Geral)
Equipe medica com 4 profissionais ficticios
Secao de convenios com 8 planos de saude
Depoimentos de pacientes ficticios com 5 estrelas
Formulario de agendamento com validacao, mascara de telefone e checkbox LGPD
Schema.org MedicalClinic para SEO local
Metadagens Open Graph e Twitter Card
Skip link e atributos ARIA para acessibilidade
Botao flutuante de WhatsApp
Footer com endereco, contato e links legais
Deploy na Cloudflare Pages com dominio personalizado

Linha do tempo

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

1 dia

Design

Landing page one-page
Paleta de cores confiavel para saude
Copy de clinica premium

Metodologia

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

HTML semantico

Mobile-first

Acessibilidade

SEO local

Performance sem frameworks

Arquitetura

Diagrama conceitual — não reflete implementação real

Stack tecnológica

Escolhas técnicas e o que ficou para fora.

Frontend

HTML5

Por quê: Estrutura semantica e acessivel.

Alternativa rejeitada: Framework JS

CSS

Por quê: Design leve e customizado.

Alternativa rejeitada: Tailwind

JavaScript

Por quê: Interatividade sem dependencias.

Alternativa rejeitada: React

Deploy

Cloudflare Pages

Por quê: Hospedagem estatica global com SSL.

Alternativa rejeitada: Netlify

Decision log

O que escolhi, o que rejeitei e por quê.

Next.js 15 em vez de SPA

Por que: Escolhi uma arquitetura com renderização híbrida para ganhar SEO, SSR e melhor performance inicial — combinado com HTML5, CSS, JavaScript, Cloudflare Pages.. Uma SPA pura teria dificultado a indexação e a experiência no primeiro carregamento.

Alternativas rejeitadas: SPA tradicional com React Router — rejeitada por falta de SSR e metadados dinâmicos.

PostgreSQL em vez de MongoDB

Por que: Optei por um banco relacional por causa dos catálogos, estoque e pedidos, que exigem consistência e relacionamentos bem definidos — combinado com HTML5, CSS, JavaScript, Cloudflare Pages..

Alternativas rejeitadas: MongoDB — rejeitado porque o modelo de dados do projeto se beneficia mais de esquemas rígidos e transações ACID.

Gamificação por tiers em vez de leaderboards abertos

Por que: Criei um sistema de tiers fechado para reconhecer progresso sem expor todos os usuários em rankings públicos — combinado com HTML5, CSS, JavaScript, Cloudflare Pages., evitando desmotivação dos participantes que estão começando.

Alternativas rejeitadas: Leaderboard global aberto — rejeitado por pressionar usuários iniciantes e mascarar evolução individual.

Gamificação

Pontos de experiência (XP)

Cada ação comercial gera XP, tornando o progresso visível e mensurável.

Ligas e temporadas

Divisão em ligas por desempenho, com rebaixamento e promoção a cada ciclo.

Badges e conquistas

Reconhecimento por metas específicas, ritmo e consistência de vendas.

Ranking ao vivo

Classificação atualizada em tempo real para estimular competição saudável.

Recompensas e desbloqueios

Benefícios tangíveis desbloqueados por patamar de pontuação.

Desafios e missões

Objetivos de curto prazo para manter o engajamento e testar novas táticas.

Segurança e acesso

Seguranca e privacidade

Formulario com checkbox de concordancia LGPD
Dados de demonstracao, sem processamento real
Deploy com SSL via Cloudflare
Links externos com rel=noopener

Lições aprendidas

Nem tudo saiu como planejado.

— Sites estaticos em HTML5 semantico ainda sao uma escolha solida para presenca digital de pequenos negocios. A combinacao de schema.org, metadagens e acessibilidade entrega valor sem a complexidade de um framework.