From 15251e22cb96d2fba77d8b421f9f2f18fd84dd8e Mon Sep 17 00:00:00 2001 From: Mahiru Date: Sat, 22 Jun 2024 00:56:11 +0800 Subject: [PATCH] feat: add slogan --- .../components/TopVisual/TopVisual.module.css | 77 +++++++++++-------- .../components/TopVisual/TopVisual.tsx | 13 ++-- locales/en.json | 7 +- locales/ja.json | 7 +- locales/zh-cn.json | 7 +- 5 files changed, 64 insertions(+), 47 deletions(-) diff --git a/app/[locale]/components/TopVisual/TopVisual.module.css b/app/[locale]/components/TopVisual/TopVisual.module.css index e6c269a..05fcfb7 100644 --- a/app/[locale]/components/TopVisual/TopVisual.module.css +++ b/app/[locale]/components/TopVisual/TopVisual.module.css @@ -1,49 +1,62 @@ .topVisual { - @apply pt-16 pb-8; + @apply pt-16 pb-8; } @media screen and (max-width: 768px) { - .topVisual { - @apply pt-16 pb-4; - } + .topVisual { + @apply pt-16 pb-4; + } } .background { - position: fixed; - top: -100vh; - left: -100%; - z-index: -1; - height: 300vh; - width: 300%; - background: linear-gradient(135deg, rgba(0, 93, 175, 0.1), rgba(181, 73, 91, 0.1)); - animation: rotatebg 10s infinite linear; + position: fixed; + top: -100vh; + left: -100%; + z-index: -1; + height: 300vh; + width: 300%; + background: linear-gradient(135deg, rgba(0, 93, 175, 0.1), rgba(181, 73, 91, 0.1)); + animation: rotatebg 10s infinite linear; } @keyframes rotatebg { - 0% { - transform: rotate(0deg); - } + 0% { + transform: rotate(0deg); + } - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } } .container { - @apply max-w-screen-xl mx-auto h-full p-4; - display: flex; - flex-direction: column; - justify-content: flex-end; - overflow: hidden; + @apply max-w-screen-xl mx-auto h-full p-4; + display: flex; + /*flex-direction: column;*/ + justify-content: center; + align-items: flex-start; + flex-wrap: wrap; + overflow: hidden; + margin-top: 2rem; +} + +.titlearea { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.8rem; + text-align: left; + padding: 4px 0 0 0; + max-width: 350px; } .card { - @apply max-w-screen-md mx-auto drop-shadow rounded-md; - transform: translateY(4px); - /* transform: translateY(calc(768px/120)); */ - /* max-height: calc(768px/3); */ - transition: 0.35s ease-out; - float: left; + @apply max-w-screen-md mx-auto drop-shadow rounded-md; + transform: translateY(4px); + /* transform: translateY(calc(768px/120)); */ + /* max-height: calc(768px/3); */ + transition: 0.35s ease-out; + float: left; } /* @media screen and (max-width: 768px) { @@ -54,9 +67,9 @@ } */ .card:hover { - transform: none; + transform: none; } .card-image { - @apply h-full w-full object-cover rounded-md; -} \ No newline at end of file + @apply h-full w-full object-cover rounded-md; +} diff --git a/app/[locale]/components/TopVisual/TopVisual.tsx b/app/[locale]/components/TopVisual/TopVisual.tsx index 0a3d56c..1a88a30 100644 --- a/app/[locale]/components/TopVisual/TopVisual.tsx +++ b/app/[locale]/components/TopVisual/TopVisual.tsx @@ -48,10 +48,11 @@ const TopVisual = () => { {/* background */}
-
-

{t('title')}

-

{t('subTitle')}

-
+
+

{t('title-l1')}

+

{t('title-l2')}

+

{t('subTitle')}

+
@@ -62,7 +63,7 @@ const TopVisual = () => { {t('viewDocument')}
-
+
{ ) } -export default TopVisual \ No newline at end of file +export default TopVisual diff --git a/locales/en.json b/locales/en.json index cc098e6..6e23dcd 100644 --- a/locales/en.json +++ b/locales/en.json @@ -26,8 +26,9 @@ "blog": "BLOG" }, "home": { - "title": "WebGAL", - "subTitle": "The new web-based Visual Novel Engine", + "title-l1": "Creating visual novels, ", + "title-l2": "who needs coding?", + "subTitle": "Without writing any code, WebGAL will help you create fully functional visual novels with beautiful UI.", "nowDownload": "Download", "viewDocument": "Documents", "sponsor": "Sponsor" @@ -143,4 +144,4 @@ "bilibili": "Bilibili", "links": "Links" } -} \ No newline at end of file +} diff --git a/locales/ja.json b/locales/ja.json index 75b9bdc..4048eaa 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -26,8 +26,9 @@ "blog": "ブログ" }, "home": { - "title": "WebGAL", - "subTitle": "未だかつてない Web ベースビジュアルノベルエンジン", + "title-l1": "プログラミング不要で、", + "title-l2": "ビジュアルノベルを作成！", + "subTitle": "WebGALを使えば、コードを一切書かずに、高機能で美しいインターフェースのビジュアルノベルゲームを作成できます。", "nowDownload": "今すぐダウンロード", "viewDocument": "ドキュメントに移動", "sponsor": "スポンサー" @@ -143,4 +144,4 @@ "bilibili": "Bilibili", "links": "フレンドリーリンク" } -} \ No newline at end of file +} diff --git a/locales/zh-cn.json b/locales/zh-cn.json index 380fd81..4fc93eb 100644 --- a/locales/zh-cn.json +++ b/locales/zh-cn.json @@ -26,8 +26,9 @@ "blog": "博客" }, "home": { - "title": "WebGAL", - "subTitle": "全新的网页端视觉小说引擎", + "title-l1": "创作视觉小说，", + "title-l2": "何须会编程？", + "subTitle": "无需编写任何代码，WebGAL 将帮助你制作出功能完备、界面美观的视觉小说游戏。", "nowDownload": "立即下载", "viewDocument": "查看文档", "sponsor": "赞助 WebGAL" @@ -143,4 +144,4 @@ "bilibili": "哔哩哔哩", "links": "友情链接" } -} \ No newline at end of file +}