Crie/ajuste a Landing Page da locadora de motos em Campinas para ficar 100% responsiva (mobile-first) e com seções estruturadas conforme a página já definida: Hero com split screen e placeholder explícito para a imagem da Yamaha Factor 150cc (Modelo 2024), seções seguintes com galerias minimalistas e retangulares com placeholders prontos para fotos reais da frota, header fixo com placeholder do logótipo, e os blocos I a VI com todo o copy, valores e regras exatamente como especificado na versão anterior.
Além disso, resolva o problema de carregamento de imagens: garanta que os componentes de mídia/galerias aceitem upload via URL e/ou asset local no projeto (por exemplo: <Image> com src vindo de um campo/props), e que os placeholders sejam renderizados corretamente mesmo quando as imagens ainda não estiverem disponíveis. Se a imagem não puder ser carregada, mostre um fallback visual consistente (placeholder do card/área) sem quebrar o layout.
Mantenha a regra obrigatória de rastreio/monetização: todos os botões CTA da página (ex.: “Alugar Agora”, “Garantir Minha Moto”, “Fazer Reserva”, “Quero a Moto na Minha Garagem”) devem apontar obrigatoriamente para: https://embaixador.locavibe.com.br/embaixador/05b1i7qhry, e devem ser grandes, com cantos ligeiramente arredondados e cor vermelha em alto contraste.
Por fim, inclua a mesma paleta triádica estrita (Preto predominante, Vermelho para ações/alertas críticos, Branco para fundos e leitura) e preserve exatamente todas as métricas financeiras, frases-chave e caixas de aviso (incluindo “Quanto mais longo for o seu plano, mais barata fica a sua diária!” e o aviso vermelho sobre não aceitar dinheiro em espécie) dentro do layout escaneável (subtítulos, listas e negritos nos valores essenciais).
Vou ler os componentes atuais e fazer todas as melhorias necessárias para garantir responsividade total, placeholders robustos e fallbacks visuais consistentes.
Agora vou criar um componente de imagem com fallback robusto e uma galeria de frota, além de melhorar a Hero Section com split screen real:
Agora vou atualizar a Hero Section com split screen melhorado e usar o componente de imagem otimizado:
Agora vou atualizar a página principal para incluir a galeria de frota:
Agora vou verificar se tudo está funcionando corretamente no browser, tanto em desktop quanto em mobile:
Excelente! Agora vou testar a versão mobile:
A landing page está completamente funcional e responsiva. Deixe-me verificar se os CTAs estão funcionando corretamente:
A landing page está completa e funcionando corretamente. Aqui está o resumo das melhorias implementadas:
Melhorias de Responsividade (Mobile-First):
- Hero Section com layout split-screen que se adapta de coluna única (mobile) para duas colunas (desktop)
- Tamanhos de fonte escalonados usando classes responsivas (
text-3xl sm:text-4xl md:text-5xl) - Espaçamentos e padding adaptados para cada breakpoint
- Botões CTAs de largura total em mobile, automática em desktop
- Cards de preços empilhados em mobile, lado a lado em tablets+
Componente OptimizedImage com Fallback:
- Criado componente reutilizável que exibe skeleton loader durante carregamento
- Fallback visual consistente com ícone de moto quando a imagem falha
- Três tipos de placeholder:
moto,gallery, elogo - Props flexíveis para aceitar
srcvia URL ou asset local
Galeria de Frota:
- Grid responsivo (2 colunas mobile, 3 colunas desktop)
- Placeholders elegantes com ícones enquanto não há fotos reais
- Estrutura preparada para receber array de imagens via props
Todos os CTAs mantidos apontando para https://embaixador.locavibe.com.br/embaixador/05b1i7qhry com design de alto contraste em vermelho.
Vou salvar as imagens e atualizar os componentes para usá-las no site:
Agora vou ler os componentes e atualizá-los com as imagens reais:
Agora vou atualizar o header com o logo real e criar uma galeria para as imagens:
Agora vou criar uma seção de galeria com as imagens reais:
Agora vou atualizar a hero section para usar a imagem de benefícios e atualizar a página principal:
Agora vou atualizar a página principal para incluir a galeria e o footer com logo:
Agora vou atualizar o footer para usar o logo real:
Vou verificar se existe o componente FleetGallery antigo para remover, e depois verificar a página:
Vou verificar a página no browser:
A página está funcionando com todas as imagens reais. Vou testar a versão mobile também:
A landing page está completa com todas as imagens reais integradas:
Imagens adicionadas:
- Logo LocaVibe - Usado no header (fixo) e no footer
- Fachada da loja - Na seção de galeria mostrando a base com frota de motos
- Banner de benefícios - Na hero section e na galeria, destacando vantagens exclusivas
- Testemunho "Seja Seu Próprio Chefe" - Na galeria, mostrando cliente satisfeito
Funcionalidades implementadas:
- Fallback visual consistente quando imagens não carregam (loading spinner e placeholder)
- Layout 100% responsivo e mobile-first
- Todas as imagens com
object-cover/containadequado - Galeria com grid adaptável (3 colunas desktop, 2 tablet, 1 mobile)
- Todos os CTAs continuam direcionando para o link de afiliado obrigatório