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):
text-3xl sm:text-4xl md:text-5xl)Componente OptimizedImage com Fallback:
moto, gallery, e logosrc via URL ou asset localGaleria de Frota:
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:
Funcionalidades implementadas:
object-cover/contain adequado