D

Landing page Cemast

ReactJsreact routerGraphQLCMS
2023-09-20
imagem do projeto

📘 Introdução

Esse projeto é uma landing page desenvolvida para um centro educacional da minha região, que desejava aumentar sua presença online. A proposta era criar uma página moderna, clara e funcional que ajudasse a instituição a se atualizar digitalmente e se comunicar melhor com o público.

🎯 Objetivo

  • Criar uma página institucional moderna e responsiva.
  • Aplicar conceitos aprendidos em React, Tailwind e GraphCMS.
  • Atender a um cliente real com uma necessidade específica de presença digital.

🧱 Tecnologias utilizadas

  • React.js: estrutura SPA com roteamento interno (React Router).
  • Tailwind CSS: estilização rápida, responsiva e moderna.
  • GraphCMS: CMS headless para tornar o conteúdo editável e dinâmico.
  • React Router: navegação entre páginas sem recarregar.

🎨 Design e Interface

O layout foi inspirado em uma referência que vi na comunidade do Figma. Adaptei esse design para o contexto do cliente, criando novas seções conforme a necessidade e reorganizando o conteúdo para melhor comunicação visual.

As decisões visuais priorizaram:

  • Paleta clara com tons educacionais.
  • Ícones ilustrativos para facilitar a leitura.
  • Tipografia simples e acessível.

🧠 Aprendizados

  • Implementação de CMS com GraphQL.
  • Criação de rotas dinâmicas com React Router.
  • Organização de componentes reutilizáveis com Tailwind.
  • Adaptação de design de referência para uma solução real.

📈 Desafios

O maior desafio foi conectar o CMS à estrutura de componentes, garantindo que a experiência fosse fluida mesmo para quem não tem familiaridade técnica. Foi também um dos primeiros projetos em que tive que equilibrar visual, funcionalidade e expectativa do cliente.