Voltar ao portfólio

Landing Page com Agendamento e Admin

Landing Page

Landing Page com Agendamento e Admin

Lígia Wellness

Lígia Wellness é um site institucional e de agendamento para uma massagista profissional: o visitante conhece os serviços (massagem relaxante, terapêutica, drenagem etc.), vê depoimentos e galeria, e agenda sessões pela própria página em um fluxo guiado (escolha do serviço, data/horário, dados e confirmação).

O que foi construído

Site público: hero com chamada para agendamento, barra de diferenciais (ambiente acolhedor, óleos naturais, massagista certificada), seção “Sobre mim”, grid de sessões (cards em 3 colunas com nome, duração, preço e botão Agendar), depoimentos em carrossel, galeria de fotos do espaço e seção de CTA. Layout responsivo com navbar fixa e botão de voltar ao topo.

Agendamento (Booking Wizard): fluxo em 4 passos: (1) escolha da sessão, (2) data e horário (slots baseados em disponibilidade e bloqueios), (3) dados do cliente (nome, telefone, e-mail, CPF com validação; reutilização de paciente existente quando aplicável), (4) confirmação. Criação de paciente e agendamento no Supabase; opção de contato por WhatsApp.

Painel administrativo: login com Supabase Auth e checagem de role admin em user_roles; sidebar com Dashboard, Agenda, Pacientes, Serviços, Disponibilidade, Finanças e Notificações. Dashboard com métricas (agendamentos do dia, pendentes, total de pacientes, receita do mês) e lista de agendamentos recentes; Agenda para visualizar/gerir agendamentos; CRUD de pacientes (incluindo ficha por ID); CRUD de serviços (nome, descrição, duração, preço, ativo); configuração de disponibilidade por dia da semana e bloqueio de datas/períodos; Finanças com visão de receita; Notificações com contagem de agendamentos pendentes.

Dados e regras: modelos de pacientes, serviços, agendamentos (com status: pending, confirmed, cancelled, completed), disponibilidade semanal, datas bloqueadas e períodos bloqueados. Agendamentos vinculados a paciente e serviço; listagens e filtros no admin consumindo essas tabelas.

Stack técnica

Next.js 16 (App Router), React 19, TypeScript, Supabase (Auth + PostgreSQL), Tailwind CSS 4. Estilos globais em CSS (variáveis, componentes da landing e do admin). Sem biblioteca de UI ou estado global; dados via Supabase client no front.

Papel no projeto

Desenvolvimento full-stack: definição da estrutura de rotas (página única + /admin/*), modelos e tipos no Supabase, integração com Auth e tabelas (services, patients, appointments, availability, blocked_dates/periods), componente reutilizável de agendamento (BookingWizard) com validação de CPF e slots, painel admin com proteção por role e telas de gestão (dashboard, agenda, pacientes, serviços, disponibilidade, finanças, notificações), e ajustes de conteúdo e layout para o posicionamento em massagem e bem-estar.

Galeria