Gera um mockup de landing page responsiva para desktop e dispositivos móveis para um site de newsletter elegante de um 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/terror japonês chamada 月蝕綺譚, exibido lado a lado como uma janela de navegador de desktop e uma tela de smartphone.
Canvas: Imagem de apresentação 16:9 em um fundo cinza claro. Coloque um mockup de navegador de desktop grande à esquerda, ocupando cerca de 75% da largura, e um mockup de smartphone alto à direita. Use sombras suaves, cantos de dispositivo arredondados e enquadramento de interface realista.
Estilo visual: Estética de mistério gótico japonês elegante, 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 de 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 escuro à 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; na 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 do desktop, crie um cartão em formato de bilhete creme com bordas recortadas, borda fina, pequena etiqueta vermelha 「入会札」, manchete 「メールで会員になる」, 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 do desktop: Abaixo do hero, coloque uma grande mensagem de introdução à esquerda com uma linha vertical vermelha e a manchete 物語の続きを、いちばん近くで。, além de um pequeno texto de corpo 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, manchete 「大型アップデート『〇〇』を公開しました」, data 2024.05.20. Seção de título do Cartão 2 「開発記録」 com uma imagem de caderno e caneta, manchete 「開発記録 #12:環境演出の調整について」, data 2024.05.18. Seção de título do Cartão 3 「ご意見箱」 com uma imagem de caixa de correio escura, manchete 「ご意見・ご感想をお聞かせください」, 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 escuro abrangendo 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 móvel: Mostre uma prévia do 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 móvel é empilhada verticalmente: imagem da lua do hero com título, exatamente 5 miniaturas pequenas em uma faixa horizontal, manchete 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 móvel 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 de desktop, 5 miniaturas de hero, 3 cartões de artigo de desktop, 6 links de rodapé e 1 menu hambúrguer móvel.