Web Design e Desenvolvimento

Bibas & Marco - Hub de Marca Pessoal

Hub de marca pessoal para vários criadores, com cinco secções interligadas: página inicial, página dedicada ao podcast (Tou Podcast), perfis individuais dos criadores (a maquilhagem e o trabalho veterinário da Bibas, e a música do Marco como Mr Dilo) e uma página completa de parcerias. Integra várias plataformas sociais (YouTube, Spotify, Instagram e TikTok) com conteúdo incorporado.

Construído com React Router, com um sistema de design editorial sofisticado, paleta em tons quentes de creme, tipografia serif personalizada e animações refinadas em Framer Motion. Os layouts responsivos mobile-first mantêm a consistência da marca em todas as secções.

Data de Conclusão: maio de 2026
Visitar Site
Detalhes do Projeto

Visão Geral

Setor

Criação de Conteúdo Digital / Entretenimento / Marca Pessoal

Âmbito

Website completo de marca pessoal com várias páginas, incluindo página inicial, secção dedicada ao podcast, dois perfis individuais de criadores e página de parcerias com integrações de redes sociais incorporadas, formulários de contacto e design responsivo em todos os dispositivos

Prazo

2-3 semanas do design à implementação

O Problema

Desafio

A Bibas e o Marco precisavam de uma presença digital unificada para consolidar os seus diversos fluxos de conteúdo — podcast, música, maquilhagem e cuidado animal — num único hub profissional. O seu público estava fragmentado por várias plataformas sociais, sem um ponto central para pedidos de parceria ou para uma apresentação completa da marca. Precisavam de uma solução capaz de destacar a identidade individual de cada criador, mantendo ao mesmo tempo uma identidade de casal coesa.

A Nossa Abordagem

Solução

Desenvolvemos uma aplicação React sofisticada com várias páginas e uma abordagem de design editorial, com uma paleta de cores quente e acolhedora e tipografia refinada. Implementámos secções dedicadas a cada vertente de conteúdo, mantendo a consistência visual através de um sistema de design partilhado. Integrámos ligações diretas para todas as plataformas sociais, incorporámos um leitor de podcast do Spotify e criámos uma página completa de parcerias com o detalhe das oportunidades de colaboração. A arquitetura responsiva mobile-first garante uma excelente experiência de utilizador em todos os dispositivos, enquanto as animações em Framer Motion acrescentam requinte sem comprometer o desempenho.

O Que Está Incluído

Funcionalidades Principais

Design Responsivo
Arquitetura React Multipágina
Animações de Scroll Fluidas
Sistema de Design Editorial
Integração com Redes Sociais
Biblioteca de Ícones SVG Personalizada
Leitor Spotify Incorporado
Conteúdo em Português
Desempenho

Resultados

92-95/100
Pontuação de Desempenho
Desempenho Lighthouse com carregamento de recursos otimizado
100%
Responsividade Mobile
Design mobile-first com breakpoints responsivos abrangentes
~120-150KB
Tamanho do Bundle
Build de produção comprimido com gzip e divisão de código
100%
Qualidade do Código
Modo estrito com cobertura total de ESLint
Tecnologia

Stack Tecnológica

React 19
TypeScript 6
Vite 8
Tailwind CSS 3.4
Framer Motion 12
React Router DOM 7
Lucide React 1.7
Começar

Pronto para Iniciar o Seu Projeto?

Vamos falar sobre como podemos criar um website incrível à medida do seu negócio.

Bibas & Marco - Hub de Marca Pessoal | Portfólio | low-key solutions