Ecobloco

Ecobloco

Software
Finalizado

Landing page institucional e comercial para fábrica de tijolos ecológicos e distribuidora de soluções sustentáveis para construção civil.

Next.jsNext.js
TailwindTailwind
FigmaFigma

Desafio

Desenvolver uma plataforma web que unisse o catálogo de produtos de construção sustentável da Ecobloco com um forte apelo educativo. O desafio foi traduzir conceitos técnicos de engenharia civil (como cura úmida, resistência de 9 MPa e modulação) em uma interface limpa, persuasiva e de fácil compreensão, além de estruturar uma vitrine de produtos eficiente para conversão via WhatsApp.

Processo

O desenvolvimento iniciou com o mapeamento de conteúdo estruturado em quatro seções principais: Home, Tijolo Ecológico, Vantagens e Fale Conosco. Criei o design no Figma priorizando uma identidade visual que remetesse à sustentabilidade, solidez e modernidade, utilizando cores da paleta ecológica.

Na implementação com Next.js e TypeScript, prezei pela modularização dos componentes para renderizar tabelas comparativas detalhadas, áreas de dados técnicos para engenheiros/arquitetos e uma seção dinâmica para a linha de produtos Maxcola. Integrei também uma galeria de imagens categorizada ('Acabamento aparente', 'Obras residenciais', 'Produção própria') e botões de conversão direta para o atendimento comercial.

Resultado

Uma plataforma de alta performance, totalmente responsiva e otimizada para SEO local em Urussanga - SC. O site atua como o principal canal de captação da empresa, exibindo com clareza os diferenciais ecológicos do solo-cimento, as especificações técnicas de rendimento por metro quadrado e o catálogo comercial dos produtos Maxcola (Manta Líquida, Argamassa e Basecoat Polimérica) com taxas de entrega flexíveis.

Aprendizados

Este projeto aprimorou minha habilidade de criar interfaces voltadas para conversão (Landing Pages de Negócios) e arquitetura de informação focada em B2B e B2C simultaneamente. Aprendi a estruturar tabelas de comparação complexas de forma amigável para o usuário comum e a lidar com a organização de galerias de inspiração visual mantendo uma excelente performance de carregamento de imagem no Next.js.

Tecnologias Utilizadas

Next.jsNext.js
TypeScriptTypeScript
TailwindTailwind
ReactReact
FigmaFigma