Problema atual:
Os cards estão a ocupar mais espaço do que o conteúdo real, criando áreas vazias internas sem informação. O problema não está no texto, mas sim na estrutura do card (altura, grid ou flex).
Correções necessárias:
Remover qualquer altura fixa (height, min-height) nos cards.
Garantir que o card tenha altura automática baseada apenas no conteúdo real.
Eliminar espaços vazios internos inferiores ou laterais que não contenham elementos.
Ajustar flex, grid ou space-between que estejam a forçar expansão do card.
Fazer o conteúdo “puxar” o card para cima sem esticar o espaço vazio.
Garantir que NOZAI TEC e NOZAI VIAGENS tenham comportamento idêntico ao conteúdo real, sem áreas sobrando.
Regras importantes:
Não alterar cores, tipografia ou design visual.
Não alterar textos nem estrutura do conteúdo.
Não adicionar ou remover serviços.
Ajustar apenas layout, altura e espaçamento interno do card.
Objetivo final:
Fazer com que os cards fiquem compactos, naturais e proporcionais ao conteúdo, eliminando completamente qualquer espaço vazio interno desnecessário, principalmente nas secções NOZAI TEC e NOZAI VIAGENS.
I can see the issue. The desktop cards have flex flex-col but the CTA has mt-auto which pushes it to the bottom, stretching the card. Also the grid likely has grid-rows or implicit height equalization. Let me check the grid container and also the CARD_BASE constant:
I see the issues:
grid-cols-2 lg:grid-cols-4 — CSS Grid equalizes row heights by default, so all 4 cards in a row stretch to match the tallest oneflex flex-col with CTA using mt-auto which pushes the CTA downflex flex-colThe fix:
items-start to the grid so cards don't stretch to equal heightmt-auto from the CTA (let it naturally stack)flex flex-col from cards — they don't need flexbox if content just flows naturallyNow fix the mobile cards:
The cards should now be compact and fit their content naturally. The key changes were:
items-start to the desktop grid container so cards align to the top instead of stretching to equal heightsflex flex-col from both desktop and mobile cards since the content flows naturally without needing flexboxmt-auto from the desktop CTA which was pushing it to the bottom and stretching the cardNow each card will only be as tall as its actual content, eliminating the empty space issue on cards like NOZAI TEC and NOZAI VIAGENS that have fewer services.
Garantir que todas as imagens carregadas e substituídas na área administrativa do sistema (incluindo carrossel, notícias e qualquer módulo do site) sejam exibidas sempre com alta qualidade e otimização visual profissional.
Requisitos obrigatórios:
Todas as imagens devem ser exibidas em alta resolução (HD/Retina) sem perda visível de qualidade.
Evitar imagens pixeladas, esticadas ou desfocadas em qualquer dispositivo.
Aplicar object-fit: cover ou equivalente para manter proporção correta sem distorção.
Garantir que o carrossel sempre apresente imagens nítidas e bem enquadradas.
Otimizar o carregamento sem comprometer a qualidade visual (compressão inteligente, não perda de nitidez).
Ajustar automaticamente imagens enviadas no admin para diferentes tamanhos de tela (mobile, tablet, desktop).
Garantir consistência visual entre todas as imagens do sistema.
Regras importantes:
Não distorcer imagens.
Não cortar elementos importantes do centro da imagem (evitar crop agressivo).
Manter proporção original sempre que possível.
Melhorar apenas a exibição e otimização, não o conteúdo da imagem.
Objetivo final:
Garantir que qualquer imagem carregada no sistema (via área admin) seja sempre exibida com aparência profissional, nítida, moderna e de alta qualidade em qualquer componente do site, especialmente no carrossel e notícias.
Now let me check the admin carousel page and other image components:
Now I have a full picture. Let me also check the testimonials and professional-testimonials components:
Now I have a complete picture. The main issues are:
<img> without proper quality/sizingquality={75} on mobile and quality={80} on desktop - could be higherquality={75} - could be higherquality={90} which is goodquality={95} which is excellentquality={95} which is excellentLet me make comprehensive improvements:
Now let me also improve the ImageUpload component to use higher quality and add better preview:
Now let me also check and improve any other image components that might need attention:
The strategic-partners component already has quality={90} which is good. The education-carousel uses native <img> tags. Let me add a comprehensive image wrapper/utility to standardize image rendering, and also update the education carousel to use better image rendering:
Now let me check the service pages to ensure they also have proper image handling:
This component doesn't have images. Let me also check the next.config to ensure proper image optimization settings:
The next.config.mjs already has excellent image optimization settings with AVIF and WebP formats, good device sizes, and a TTL of 3600 seconds. However, I notice that the config has unoptimized: false globally which is good, but for Firebase URLs we're using unoptimized={true} in individual components.
The issue is that when unoptimized={true} is used, Next.js doesn't optimize those images at all, which could result in lower quality. Let me update the next.config to properly handle Firebase images through the optimization pipeline:
Now let me remove the unoptimized prop from the Firebase images so they go through Next.js optimization pipeline (since they're already in remotePatterns):
Now let me clean up unused helper functions:
The function is no longer used in blog-insights.tsx after my changes. Let me remove it:
I've made comprehensive improvements to the image quality and optimization across the entire system:
Configuration (next.config.mjs):
Component Improvements:
hero-carousel.tsx: Added fetchPriority and imageRendering for external imagesblog-insights.tsx: Increased quality from 75/80% to 90%, removed unoptimized flag to enable Next.js optimizationprofessional-testimonials.tsx: Increased quality from 75% to 90%admin/noticias/page.tsx: Added proper sizes and quality={90}admin/depoimentos/page.tsx: Added proper sizes and quality={90}admin/ImageUpload.tsx: Increased quality from 90% to 95%, enabled optimization pipelineeducation-carousel.tsx: Added proper imageRendering styleAll images uploaded through the admin will now be displayed with professional HD quality, proper aspect ratios via object-cover, and optimal compression through Next.js's AVIF/WebP pipeline.
Ajustar o comportamento dos cards do sistema (carrossel e painéis) para melhorar a experiência visual e eliminar animações desnecessárias no conteúdo interno.
Regras de comportamento dos cards:
O conteúdo dentro dos cards NÃO deve ter animação (texto, listas, ícones e descrições devem aparecer fixos).
Apenas a entrada do card no carrossel pode ter animação (slide/fade suave).
O conteúdo interno deve estar sempre estático, já visível e legível imediatamente.
Remover qualquer animação de texto, lista ou elementos internos do card.
Comportamento do carrossel:
O carrossel deve funcionar de forma horizontal, fluida e profissional.
A transição entre cards deve ser suave (slide horizontal).
Não deve haver animações internas que distraiam o utilizador.
O foco deve ser navegação clara e rápida entre os cards.
Requisitos de UI/UX:
Cards devem ser fixos no conteúdo (sem efeitos de entrada por item interno).
Layout deve ser limpo, estável e profissional.
Melhorar leitura imediata em mobile e desktop.
Garantir sensação de sistema moderno (estilo SaaS premium).
Objetivo final:
Criar um carrossel profissional onde os cards se movem horizontalmente de forma suave, mas o conteúdo interno permanece fixo, estático e imediatamente legível, sem animações desnecessárias ou distrações visuais.