Design System v2.016 Componentes Canônicos

Biblioteca de Componentes & Design System

Padrões de design, tokens de estilo e componentes centrais reutilizados em todo o site da Chris Vilhena. Alterações feitas em qualquer componente nesta biblioteca propagam-se instantaneamente por todas as páginas.

💡

Diretriz Arquitetural: Zero Componentes Redundantes

Nunca crie botões, caixas de preço ou formulários ad-hoc em novas páginas. Reutilize sempre os componentes canônicos para garantir consistência visual, acessibilidade, estabilidade de layout e performance no talo.

Paleta de Cores & Tokens

Variáveis CSS universais declaradas em src/styles/tokens.css.

Azul Noite--color-brand#1a2b49Identidade, autoridade e profundidade clínica

Terracota Acolhedor--color-accent#c85a38Ação, calor humano e escuta ativa

Verde Oliva--color-olive#3e4b3cElementos botânicos e sobriedade

Verde Sálvia--color-success#3d7a5aSaúde mental, equilíbrio e respiração

Creme Linho--color-bg#FAF8F5Fundo quente anti-fadiga visual

Branco Superfície--color-surface#FFFFFFSuperfície de cards, modais e containers

Tipografia & Escala

Combinação harmoniosa de serifas clássicas, script caligráfico e sans-serif limpa.

Display Heading (var(--font-display))

Travessias de vida exigem escuta e coragem.

Atelier Script (var(--font-script))

Caderno de Reflexões • Atendimento com Alma

Body Text (var(--font-sans))

O processo de psicoterapia e reorientação profissional oferece um espaço seguro e sigiloso para reconstruir pontes consigo mesmo, resgatar valores essenciais e trilhar caminhos autênticos.

Botões & Ações (`Button.astro`)

Três variantes estilísticas, três tamanhos com quebra responsiva automática para evitar overflow em telas móveis.

Variantes do Componente

Escala de Tamanhos

Código de Uso:

<Button href="/reorientacao-profissional/" variant="primary" size="md">
  Agendar Conversa Inicial
</Button>

Elementos Editoriais & Éticos

Cabeçalhos de seção com script tag, selos de registro profissional e citações em destaque.

SectionHeading.astro

Acolhimento & Presença

Cabeçalho Centralizado com Respiro

Introdução acolhedora e balanceada para seções de destaque no site.

EthicalBadge.astro

Psicóloga Clínica • CRP 12/10.679

Ambiente 100% Seguro & Sigilo Profissional

Atendimento Online • Resolução CFP nº 11/2018

Breadcrumbs.astro

QuoteBox.astro

“Nenhum caminho de transformação pessoal começa sem antes acolher a verdade daquilo que sentimos.”

– Christiane VilhenaCRP 12/10.679 • Psicóloga Clínica

Acordeões Acessíveis

Componentes nativos com suporte total a teclado e semântica HTML5.

FaqAccordion.astro (Perguntas Frequentes)

Como funciona a primeira consulta de psicoterapia online?

A primeira consulta é um encontro inicial de acolhimento e escuta ativa, onde alinhamos expectativas, queixas principais e desenhamos a periodicidade das sessões em ambiente 100% sigiloso.

A mentoria de carreira é indicada para quem já tem estabilidade?

Sim. A mentoria atende profissionais que, mesmo com estabilidade, sentem falta de propósito, vazio profissional ou desejam planejar uma transição gradual e segura.

CurriculumAccordion.astro (Módulos de Cursos)

Cronograma & Jornada

O que você vai viver dentro da travessia

Um caminho passo a passo, estruturado na psicologia real e aplicável na sua rotina.

01O Reconhecimento da Ruptura

Compreendendo o impacto emocional do término, as fases do luto e a diferença entre apego e amor.

02Ressignificando a Solidão

A travessia da solidão dolorosa à solitude fértil, com exercícios práticos no diário guiado.

Negócio, Dores & Conversão

Módulos de alta conversão para cursos, mentorias e materiais gratuitos.

PainPointsGrid.astro (Mapeamento de Dores)

Identificação & Momento

Você se identifica com algum destes momentos?

Sensação de Paralisia

O tempo passa, mas a sensação de estagnação e falta de direção continua presente.

Medo da Incerteza

A segurança do trabalho atual contrasta com a insatisfação diária e a falta de propósito.

Sobrecarga Emocional

Cansaço acumulado ao final de cada dia sem sentir que algo com real significado foi realizado.

PricingBox.astro (Checkout & Oferta)

Condição Especial de Inscrição

Invista em você e na sua travessia

Menos do que o valor de um livro por mês para cultivar autonomia emocional, clareza e paz.

O que está incluso na sua inscrição:

Acesso a 5 módulos com videoaulas completas
Caderno de reflexões guiadas em PDF
Acesso de 1 ano na plataforma Hotmart
Garantia incondicional de 7 dias

De ~~R$ 497,00~~ por apenas:

12xR$ 29,64

ou R$ 297,00 à vista

Garantir Minha Vaga

🔒 Pagamento 100% Seguro via Kiwify•⚡ Acesso Imediato

Garantia Incondicional de 7 Dias

Explore as aulas. Se achar que não é para você, devolvemos 100% do seu investimento.

EbookDownloadBox.astro (Lead Magnet)

Acesso Digital Gratuito

Download ImediatoMaterial Autoral em Alta Definição

Caderno de Orientação Profissional

Um roteiro com perguntas práticas para avaliar seu momento atual de carreira e planejar o próximo ciclo com segurança.

O que você encontrará no material:

Roteiro de autoavaliação com 12 perguntas reflexivas
Mapeamento de competências e talentos transferíveis
Formato PDF para impressão ou preenchimento digital

Baixar Guia em PDF Gratuitamente

Download direto e seguro. Formato PDF de alta definição pronto para leitura.

CtaBanner.astro (Faixa de Conversão)

Blog, Artigos & Navegação

Cards com clusters temáticos, tempo de leitura e linkagem interna automática.

PostCard.astro (Card de Artigo)

Transição & Carreira•⏱️ 2 min•17 de dezembro de 2019

Adolescência e o cenário da escolha profissional

Numa certa ocasião um adolescente definiu essa etapa como a grande convocação da vida para desenhar o seu futuro.

Ler artigo completo

CourseCard.astro (Card de Curso)

Curso Online12 horas de conteúdo

Amar, Perder, Recomeçar

Foco: Luto Afetivo & Solitude

Jornada terapêutica em videoaulas para atravessar o luto de um término amoroso.

O que você vai vivenciar:

Compreensão das fases do luto
Ressignificação da solidão
Exercícios guiados em PDF

De ~~R$ 1.058,00~~ por

6x deR$ 12,57

ou R$ 67,00 à vista

🛡️ 7 dias de garantia • Acesso imediato

RelatedArticles.astro (Linkagem Interna no Fim de Artigos)

Índice Geral de Reuso

Onde cada componente está implantado e como reaproveitá-lo.

Componente	Caminho	Páginas Onde Está em Uso
Button	`src/components/ui/Button.astro`	Home, Cursos, Mentoria, Serviços, Header, Ebooks, Banners
SectionHeading	`src/components/ui/SectionHeading.astro`	Home, Cursos, Serviços, Ebooks, Design System
QuoteBox	`src/components/ui/QuoteBox.astro`	Home, Páginas de Cursos, Páginas de Serviços
EthicalBadge	`src/components/ui/EthicalBadge.astro`	Footer, Header, Sobre Mim, Serviços, Design System
PricingBox	`src/components/ui/PricingBox.astro`	Amar Perder Recomeçar, Saia do Piloto Automático, Método
CurriculumAccordion	`src/components/ui/CurriculumAccordion.astro`	Páginas de Cursos Online (Módulos & Ementa)
FaqAccordion	`src/components/ui/FaqAccordion.astro`	Páginas de Cursos, Mentoria, Serviços Clínicos
PainPointsGrid	`src/components/ui/PainPointsGrid.astro`	Páginas de Cursos e Mentoria (Identificação de Sintomas)
PostCard	`src/components/PostCard.astro`	Home (/), Listagem do Blog (/blog/), Design System
RelatedArticles	`src/components/ui/RelatedArticles.astro`	Todos os 46 Artigos de Blog (/post/[...slug]/)
CtaBanner	`src/components/CtaBanner.astro`	Home, Artigos de Blog, Serviços Clínicos
Breadcrumbs	`src/components/Breadcrumbs.astro`	Blog, Artigos, Cursos, Serviços, Institucionais