Site de Viagem Cinematográfico com Scroll para Tour por Mumbai

Construa um site premium e cinematográfico de página única para um tour guiado pela cidade de Mumbai chamado “MUMBAI: A CIDADE QUE NUNCA PARA”. A experiência deve parecer um filme de viagem interativo, em vez de um site de turismo convencional, usando uma sequência de rolagem fixa em tela cheia, fotografia em camadas, profundidade dramática, movimento de parallax suave, tipografia editorial superdimensionada, storytelling imersivo e cards de destinos interativos. 1. Direção Visual Principal Crie uma experiência visual cinematográfica e imersiva inspirada em documentários de viagem premium e sites de turismo editorial de luxo. O site deve combinar: Fotografia cinematográfica de Mumbai em tela cheia Imagens em camadas de primeiro plano, meio-termo e fundo Storytelling controlado por rolagem Parallax suave baseado em profundidade Movimento sutil responsivo ao ponteiro Tipografia serifada grande e elegante Elementos de interface em tom creme minimalista Iluminação atmosférica de hora dourada Sombras profundas e realces quentes Zoom suave entre locais Transições visuais perfeitas criadas por movimento, escala, desfoque e opacidade Fotografia de viagem editorial premium Hierarquia visual forte com pouca poluição visual Evite estilos genéricos de template de turismo, cards excessivos, gradientes, cores neon, ilustrações de desenho animado e seções de site em caixas convencionais. 2. Cena Hero Abra com uma vista cinematográfica de tirar o fôlego de Mumbai na hora dourada. Construa a cena com múltiplas camadas visuais: Fundo: Skyline de Mumbai, Mar Arábico, céu atmosférico, prédios distantes e névoa quente de pôr do sol. Meio-termo: Porta da Índia e arquitetura histórica ao redor. Primeiro plano: Elementos arquitetônicos ou à beira-mar que criam forte profundidade cinematográfica. Coloque um título serifado enorme e centralizado: MUMBAI Abaixo dele: A cidade indiana dos sonhos, histórias, ruas, mar e energia imparável. Adicione três tags creme em formato de pílula: Patrimônio Vida nas Ruas Mar Arábico A cena deve responder sutilmente ao movimento do ponteiro, de modo que os elementos do primeiro plano se movam mais do que os elementos distantes. Conforme o visitante rola, MUMBAI deve subir lentamente, encolher levemente e desaparecer enquanto a arquitetura do primeiro plano se expande em direção ao visitante. 3. Navegação Crie uma barra de navegação transparente posicionada sobre a cena cinematográfica. À esquerda: Mumbai Experiences Navegação central: Explorar Pontos Turísticos Cultura Tour Reservar À direita: EN ⌄ Use tipografia creme elegante com espaçamento generoso. Mantenha a navegação visualmente leve para que a fotografia permaneça dominante. 4. Experiência de Rolagem Crie um longo palco cinematográfico fixo que abrange aproximadamente 3.500 a 4.500 pixels de distância de rolagem. O viewport permanece fixo enquanto Mumbai se transforma ao redor do visitante. Rolar deve parecer viajar fisicamente por Mumbai, em vez de se mover entre seções normais de página da web. Use interpolação e easing estilo smoothstep para todas as animações controladas por rolagem. Use requestAnimationFrame para renderização suave. Adicione suavização sutil de rolagem e parallax de ponteiro no desktop. Suporte prefers-reduced-motion desabilitando inércia e parallax de ponteiro, preservando a sequência de conteúdo. 5. Cena Um: Porta da Índia Comece com a Porta da Índia dominando a composição. Conforme a rolagem começa: A tipografia hero se move para cima e desaparece A arquitetura do primeiro plano aumenta lentamente O fundo se move em velocidade mais lenta A câmera parece avançar em direção à Porta da Índia A névoa atmosférica aumenta sutilmente As camadas ao redor se separam para criar profundidade Introduza o texto central da história: O portal onde Mumbai encontra o mar. Texto de apoio: Em pé ao lado do Mar Arábico desde 1924, a Porta da Índia continua sendo um dos marcos mais definidores de Mumbai e o ponto de partida perfeito para descobrir a cidade. Abaixo, mostre: 1924 Porta concluída Século XX Marco icônico à beira-mar de Mumbai Mantenha a tipografia elegante, minimalista, centralizada e cinematográfica. 6. Cena Dois: Marine Drive Continue rolando em uma transformação cinematográfica em direção à Marine Drive. O primeiro plano da Porta da Índia deve se separar para fora e se mover além do viewport enquanto uma nova cena costeira em tela cheia emerge por baixo. Mostre: Mar Arábico Calçadão da Marine Drive Costa curva Edifícios Art Déco Tráfego em movimento representado visualmente Reflexos quentes de pôr do sol Luzes atmosféricas da cidade começando a aparecer Aplique desfoque de profundidade temporário nas camadas de saída enquanto a nova cena fica nítida. Título da história: Mumbai respira ao lado do Mar Arábico. Texto de apoio: Siga a curva ampla da Marine Drive, onde a brisa do mar, a arquitetura Art Déco, os pores do sol, o tráfego e a vida urbana se encontram ao longo de um dos calçadões mais reconhecíveis de Mumbai. A transição visual deve parecer a câmera viajando através da fotografia anterior até a Marine Drive. 7. Cena Três: Chhatrapati Shivaji Maharaj Terminus Transicione para uma cena arquitetônica centrada no Chhatrapati Shivaji Maharaj Terminus. Use fotografia dramática de fim de tarde ou hora dourada destacando: Arquitetura neogótica Detalhes em pedra Torres e cúpulas Tráfego de Mumbai Ruas históricas Atmosfera urbana densa Título: A história se move na velocidade de Mumbai. Texto de apoio: Explore um dos grandes marcos arquitetônicos de Mumbai e experimente o contraste extraordinário entre a cantaria histórica e o movimento implacável da cidade moderna. Use tráfego em primeiro plano ou elementos arquitetônicos para criar forte profundidade de parallax. 8. Cena Quatro: Vida nas Ruas de Mumbai Passe da arquitetura monumental para a escala humana de Mumbai. Crie uma composição imersiva de rua com referências visuais autênticas, como: Kala Ghoda Ruas do Colaba Cafés locais Táxis pretos e amarelos Vendedores de rua Fachadas históricas Ruas de pedestres movimentadas Mercados locais Título: A Mumbai real vive entre os pontos turísticos. Texto de apoio: Caminhe por ruas cheias de comida, arquitetura, mercados, táxis, conversas, cafés e inúmeras pequenas histórias que revelam a personalidade de Mumbai. Mantenha a apresentação sofisticada e documental, em vez de caótica. 9. Explorador de Destinos Perto do estágio final da rolagem cinematográfica, introduza um slider horizontal interativo de destinos. O slider deve voar dramaticamente para dentro do viewport a partir da direita. Crie grandes cards creme com cantos arredondados, tipografia preta, pequenos rótulos de categoria, descrições concisas e pins de localização fotográficos ou ilustrados. Cards: Porta da Índia Categoria: Marco à Beira-Mar Descrição: Comece ao lado do monumento mais reconhecível de Mumbai com vista para o Mar Arábico. Marine Drive Categoria: Mumbai Costeira Descrição: Experimente o famoso calçadão à beira-mar de Mumbai e suas vistas amplas do mar. Chhatrapati Shivaji Maharaj Terminus Categoria: Arquitetura Descrição: Descubra um dos marcos ferroviários históricos mais espetaculares de Mumbai. Kala Ghoda Categoria: Distrito das Artes Descrição: Explore arquitetura histórica, galerias, cafés, museus e o lado criativo de Mumbai. Colaba Categoria: Bairro Histórico Descrição: Caminhe por ruas vibrantes cheias de arquitetura, compras, cafés e caráter local. Dhobi Ghat Categoria: Mumbai Local Descrição: Veja um dos marcos de trabalho mais distintos de Mumbai e entenda outra camada da vida cotidiana da cidade. Os cards devem se mover horizontalmente com animação inercial suave. Inclua controles circulares de seta anterior e próxima. Crie loop infinito contínuo clonando conjuntos de cards e normalizando a posição do slider após as transições. Os cards devem suportar interação com mouse, toque e teclado. 10. Seção de Conversão do Tour Guiado Após a sequência de destinos, faça a transição para uma cena final dramática de reserva. Use um skyline cinematográfico de Mumbai na hora azul, com prédios brilhantes, luzes costeiras, rastros de tráfego e o Mar Arábico. Título grande: Não visite apenas Mumbai. Viva Mumbai. Texto de apoio: Descubra Mumbai com um tour guiado pela cidade que conecta seus marcos, patrimônio, ruas, arquitetura, cultura e vistas inesquecíveis do mar. CTA principal: Reserve Seu Tour por Mumbai CTA secundário: Ver Detalhes do Tour Abaixo dos botões, mostre três indicadores de confiança compactos: Experiência Guiada Local Destaques Icônicos de Mumbai Roteiro de Cidade Selecionado O CTA de reserva deve ser o elemento de conversão mais forte do site, mantendo ainda a estética editorial minimalista. 11. Design de Interação Todo movimento deve parecer cinematográfico, em vez de decorativo. Use a posição de rolagem para controlar: Translação de camadas Escala de imagem Opacidade da cena Desfoque de profundidade Brilho Saturação Visibilidade do painel de história Separação do primeiro plano Zoom do fundo Entrada horizontal dos cards de destinos O movimento do ponteiro deve produzir parallax sutil. Os elementos do primeiro plano devem responder mais fortemente do que os elementos do fundo. Nunca torne o movimento agressivo ou distrativo. As animações devem usar interpolação suave em vez de transições CSS abruptas. 12. Tipografia Use uma serifa editorial elegante de alto contraste para títulos principais e storytelling de destinos. Use uma sans-serif moderna e limpa para navegação, descrições, rótulos, botões e informações de apoio. A palavra MUMBAI deve inicialmente dominar o viewport com tipografia extremamente grande. Use texto creme ou off-white quente em vez de branco puro. Paleta sugerida: Creme: #FDF1E1 Charcoal: #111411 Noite Profunda: #0B1110 Azul do Mar Arábico: #4AB5E0 Pôr do Sol Quente: #D99A55 Use cores com moderação e permita que a fotografia defina a maior parte da paleta visual. 13. Requisitos Técnicos Construa o site como uma experiência responsiva refinada usando a pilha de tecnologia solicitada. Para uma implementação simples, use: HTML CSS JavaScript Vanilla Para construtores de sites de IA que usam React por padrão, recrie a mesma arquitetura usando componentes React sem alterar o comportamento visual. Use: position: sticky para o palco cinematográfico Custom properties CSS para estado de animação requestAnimationFrame para animação de rolagem transform: translate3d() para movimento com desempenho will-change apenas em elementos animados dimensionamento responsivo com clamp() object-fit: cover para fotografia cinematográfica composição em camadas com z-index interpolação smoothstep para entradas e saídas de cena transforms otimizados para GPU HTML semântico navegação acessível aria-labels descritivos cards de destinos acessíveis por teclado layouts responsivos para desktop, tablet e celular Evite bibliotecas de animação de terceiros desnecessárias, a menos que exigidas pela plataforma. 14. Comportamento Responsivo O desktop deve entregar a experiência cinematográfica completa em camadas. O tablet deve manter a mesma narrativa de rolagem, reduzindo a tipografia superdimensionada e a escala do primeiro plano. O celular deve: Preservar o storytelling cinematográfico Reduzir a intensidade do parallax Reenquadrar as fotografias de forma inteligente Manter MUMBAI legível Tornar a navegação rolável horizontalmente, se necessário Usar cards de destinos com aproximadamente 80 a 85vw Manter alvos de toque grandes Manter os CTAs de reserva em destaque Evitar transbordamento horizontal da página Não simplesmente empilhar cada cena cinematográfica em seções móveis comuns. 15. Direção de Imagens Use fotografia cinematográfica de Mumbai em alta resolução e realista. Priorize visuais autênticos de: Porta da Índia Marine Drive Chhatrapati Shivaji Maharaj Terminus Kala Ghoda Colaba Dhobi Ghat Mar Arábico Skyline de Mumbai Táxis pretos e amarelos Arquitetura histórica do sul de Mumbai As imagens devem parecer frames de um documentário de viagem premium. Prefira hora dourada, pôr do sol, hora azul, luz do dia atmosférica, iluminação realista de rua, perspectiva profunda, enquadramento em primeiro plano, multidões naturais e arquitetura autêntica de Mumbai. Evite arquitetura obviamente gerada por IA, marcos imprecisos, imagens futuristas de Mumbai, imagens genéricas da Índia, fotografias supersaturadas e gráficos turísticos clichês. 16. Experiência Final O site final deve parecer rolar por uma jornada cinematográfica por Mumbai. A sequência deve fluir naturalmente: HERO MUMBAI ↓ PORTA DA ÍNDIA ↓ MARINE DRIVE ↓ CSMT ↓ VIDA NAS RUAS DE MUMBAI ↓ DESTINOS ICÔNICOS ↓ RESERVE SEU TOUR GUIADO PELA CIDADE O visitante deve se sentir progressivamente atraído para dentro de Mumbai antes de chegar ao CTA de reserva. Priorize atmosfera, storytelling, fotografia, profundidade, movimento e imersão emocional em vez de layouts convencionais de site. A experiência final deve parecer premium o suficiente para uma empresa de turismo de alto padrão de Mumbai, permanecendo empolgante o suficiente para fazer alguém querer explorar a cidade e reservar o tour guiado imediatamente.