Gera um mockup de landing page responsiva para desktop e mobile para um site de newsletter elegante de jogo de mistério gótico japonês.
Objetivo: Criar um mockup de site responsivo e refinado para uma comunidade de jogos de mistério/horror japoneses chamada 月蝕綺譚, exibido lado a lado como uma janela de navegador de desktop e uma tela de smartphone.
Canvas: Imagem de apresentação em 16:9 sobre um fundo cinza claro. Coloque um mockup de navegador de desktop grande à esquerda, ocupando cerca de 75% da largura, e um mockup de smartphone vertical à direita. Use sombras suaves, cantos de dispositivo arredondados e enquadramento de interface realista.
Estilo visual: Estética elegante de mistério gótico japonês, fundos com textura de papel washi off-white, painéis em azul-marinho profundo, bordas cinzas finas, detalhes em vermelho suave, tipografia serifada japonesa refinada, linhas sutis semelhantes a tinta, motivos de lua crescente, documentos de arquivo, mapas antigos, imagens de floresta escura/noite e espaçamento de web design premium contido.
Layout para desktop: Uma janela de navegador com uma barra superior escura e três pequenos botões circulares de janela. O cabeçalho contém o logotipo do título do site 「月蝕綺譚」 à esquerda com um arco de lua crescente fino e um selo vermelho, 4 links de navegação centralizados rotulados como 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 e um botão de call-to-action azul-marinho à direita rotulado como 「メールで会員になる」. Abaixo, crie uma seção hero dividida em uma grande área de imagem escura à esquerda e um cartão de inscrição à direita. A imagem hero mostra um céu noturno nublado com uma lua crescente eclipsada brilhante e o título vertical 「月蝕綺譚」, com linhas de órbita circulares finas e pequenas anotações verticais. Sobreponha um painel translúcido estilo arquivo contendo documentos japoneses antigos e 5 pequenos cartões de miniatura; ao longo da parte inferior da imagem hero, inclua exatamente 5 imagens de miniatura horizontais: um prédio antigo à noite, um desenho de sala estilo planta baixa, um detalhe simbólico escuro, documentos manuscritos e uma mesa com mapas/telas.
Cartão de inscrição: À direita do hero no desktop, crie um cartão em formato de bilhete cor creme com bordas recortadas, borda fina, pequena etiqueta vermelha 「入会札」, título 「メールで会員になる」, um ícone de envelope, um breve texto explicativo, um campo de entrada de e-mail com o placeholder 「メールアドレスを入力」 e um botão vermelho rotulado como 「登録する」 com uma seta para a direita. Adicione um pequeno texto estilo política de privacidade abaixo.
Conteúdo inferior para desktop: Abaixo do hero, coloque uma mensagem de introdução grande à esquerda com uma linha vertical vermelha e o título 物語の続きを、いちばん近くで。, além de um pequeno corpo de texto cinza. À direita, coloque exatamente 3 cartões de artigo em uma linha. Seção de título do Cartão 1 「月蝕綺譚 最新便」 com uma imagem de lua, etiqueta vermelha NEW, título 「大型アップデート『〇〇』を公開しました」, data 2024.05.20. Seção de título do Cartão 2 「開発記録」 com uma imagem de caderno e caneta, título 「開発記録 #12:環境演出の調整について」, data 2024.05.18. Seção de título do Cartão 3 「ご意見箱」 com uma imagem de caixa de correio escura, título 「ご意見・ご感想をお聞かせください」, data 2024.05.16. Cada cartão possui uma pequena seta para a direita no cabeçalho e linhas de resumo em cinza.
Rodapé: Rodapé azul-marinho ocupando toda a largura do desktop com exatamente 6 links: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Adicione um ícone de lua crescente perto da direita e o texto de direitos autorais 「© 2024 月蝕綺譚」.
Layout para mobile: Mostre uma prévia de smartphone do mesmo site. A barra de status superior lê 9:41, seguida por um cabeçalho compacto com o logotipo 「月蝕綺譚」 e um ícone de menu hambúrguer. A página mobile é empilhada verticalmente: imagem da lua do hero com título, exatamente 5 miniaturas pequenas em uma faixa horizontal, título de introdução 「物語の続きを、いちばん近くで。」, o mesmo cartão de inscrição de e-mail estilo bilhete, depois o primeiro cartão de notícias 「月蝕綺譚 最新便」 com a imagem da lua e a etiqueta NEW. Certifique-se de que todos os elementos pareçam a versão responsiva para mobile do layout de desktop.
Restrições: Use apenas texto em japonês onde especificado, mantenha a tipografia nítida e legível, evite seções extras além das descritas, preserve as contagens exatas de 4 links de navegação no desktop, 5 miniaturas no hero, 3 cartões de artigo no desktop, 6 links no rodapé e 1 menu hambúrguer no mobile.