LIVE PRODUCT

VivaMais

VivaMais — Institutional website for multidisciplinary medical clinic

Use now Architecture

vivamais.expostacker.com.br

live preview

Tech stack: HTML CSS JavaScript Cloudflare Pages SEO Schema.org

6
Specialties: 8
Insurance plans: 4
Doctors

Client

VivaMais

Sector

Health and Medical Clinics

Timeline

1 dia de implementacao · 2026-06

Live product

Use now

Results

Client-reported results during rollout

6 Especialidades

8 Convenios

4 Profissionais

Client-reported data

The challenge

VivaMais is an institutional website for a fictional medical clinic in Santos. The proposal is to demonstrate a fast, accessible, locally SEO-optimized health website with semantic structure, schema.org, appointment form and responsive design.

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.

The approach

We implemented semantic HTML5 with ARIA landmarks, custom CSS with design variables, vanilla JavaScript for mobile menu, phone mask and form validation. We included schema.org MedicalClinic, Open Graph metadata, skip link, adequate contrast and deploy on Cloudflare Pages.

The solution

Hero with credibility tag, CTA and social metrics
Specialties section with 6 cards (Cardiology, Neurology, Orthopedics, Nutrition, Gynecology, General Practice)
Medical team with 4 fictional professionals
Health insurance section with 8 plans
Patient testimonials with 5 stars
Appointment form with validation, phone mask and LGPD checkbox
Schema.org MedicalClinic for local SEO
Open Graph and Twitter Card metadata
Skip link and ARIA attributes for accessibility
Floating WhatsApp button
Footer with address, contact and legal links
Deploy on Cloudflare Pages with custom domain

Timeline

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

1 dia

Design

One-page landing
Trust color palette for health
Premium clinic copy

Methodology

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

Semantic HTML

Mobile-first

Accessibility

Local SEO

Performance without frameworks

Architecture

Conceptual diagram — does not reflect real implementation

Tech stack

Technical choices and what was left out.

Frontend

HTML5

Why: Semantic and accessible structure.

Rejected alternative: JS framework

CSS

Why: Lightweight custom design.

Rejected alternative: Tailwind

JavaScript

Why: Interactivity without dependencies.

Rejected alternative: React

Deploy

Cloudflare Pages

Why: Global static hosting with SSL.

Rejected alternative: Netlify

Decision log

What I chose, what I rejected, and why.

Next.js 15 instead of a SPA

Why: I chose a hybrid rendering architecture for SEO, SSR and better initial performance — combinado com HTML5, CSS, JavaScript, Cloudflare Pages.. A pure SPA would have hurt indexing and first-load experience.

Rejected alternatives: Traditional SPA with React Router — rejected due to lack of SSR and dynamic metadata.

PostgreSQL instead of MongoDB

Why: I picked a relational database because the catalogs, inventory and orders require consistency and well-defined relationships — combinado com HTML5, CSS, JavaScript, Cloudflare Pages..

Rejected alternatives: MongoDB — rejected because the project data model benefits more from strict schemas and ACID transactions.

Tiered gamification instead of open leaderboards

Why: I built a closed tier system to recognize progress without exposing all users on public rankings — combinado com HTML5, CSS, JavaScript, Cloudflare Pages., preventing early users from feeling demotivated.

Rejected alternatives: Open global leaderboard — rejected because it pressures beginners and hides individual progress.

Gamification

Experience points (XP)

Every sales action earns XP, making progress visible and measurable.

Leagues and seasons

Performance-based leagues with promotion and relegation each cycle.

Badges and achievements

Recognition for specific goals, cadence, and sales consistency.

Live ranking

Real-time leaderboard to stimulate healthy competition.

Rewards and unlocks

Tangible benefits unlocked at each score threshold.

Challenges and missions

Short-term objectives to keep engagement and test new tactics.

Security and access

Security and privacy

Form with LGPD consent checkbox
Demonstration data, no real processing
SSL deploy via Cloudflare
External links with rel=noopener

Lessons learned

Not everything went as planned.

— Static websites in semantic HTML5 are still a solid choice for small business digital presence. The combination of schema.org, metadata and accessibility delivers value without framework complexity.