feat: add slogan

Author: MakinoharaShoko

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;
-}
+    @apply h-full w-full object-cover rounded-md;
+}

app/[locale]/components/TopVisual/TopVisual.tsx

@@ -48,10 +48,11 @@ const TopVisual = () => {
         {/* <Image src={'/images/main.webp'} fill alt='background' className={'object-cover object-center'} /> */}
       </div>
       <div className={styles.container}>
-        <div className={'flex flex-col item-center gap-2 pb-8 pt-20 text-center'}>
-          <h1 className={'text-5xl font-bold'}>{t('title')}</h1>
-          <p className={'text-xl font-medium'}>{t('subTitle')}</p>
-          <div className={'flex flex-row justify-center items-center gap-4'}>
+        <div className={styles.titlearea}>
+          <h1 className={'text-5xl font-bold'} style={{display: 'block'}}>{t('title-l1')}</h1>
+          <h1 className={'text-5xl font-bold'} style={{display: 'block'}}>{t('title-l2')}</h1>
+          <p className={'text-lg'}>{t('subTitle')}</p>
+          <div className={'flex flex-row items-center gap-4 flex-wrap'}>
             <Button>
               <Link href={`/${locale}/download/`}>{t('nowDownload')}</Link>
             </Button>
@@ -62,7 +63,7 @@ const TopVisual = () => {
               <Link href={docsRedirect('/')} target={'_blank'}>{t('viewDocument')}</Link>
             </Button>
           </div>
-          <div className={'flex flex-row justify-center items-center gap-4 pt-6'}>
+          <div className={'flex flex-row justify-center items-center gap-4 pt-2'}>
             <a
               href="https://www.producthunt.com/posts/webgal?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-webgal"
               target="_blank"><img
@@ -93,4 +94,4 @@ const TopVisual = () => {
   )
 }
 
-export default TopVisual
+export default TopVisual

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"
   }
-}
+}

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": "フレンドリーリンク"
   }
-}
+}

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": "友情链接"
   }
-}
+}