From 4a72619924d3a93b9de5aa300c00711bb71db4b1 Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Fri, 26 Apr 2024 05:36:45 +0900
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E6=97=A6=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout.scss | 31 ++++++++++++++++--
 src/components/page.tsx    |  6 ++++
 src/pages/song/index.tsx   | 65 +++++++++++++++++++++++++++++++-------
 3 files changed, 89 insertions(+), 13 deletions(-)

diff --git a/src/components/layout.scss b/src/components/layout.scss
index c59407b5..32c8e13d 100644
--- a/src/components/layout.scss
+++ b/src/components/layout.scss
@@ -783,10 +783,37 @@ $dropdown-item-active-background-color: $primary;
     }
   }
 
-  .voices-container {
+  .feature {
+    width: 100%;
+    @extend .is-max-widescreen;
+    @extend .mb-6;
+
+    .feature-cells {
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      gap: 1rem;
+
+      @include touch {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .feature-cell {
+        background-color: #43554239;
+        @extend .is-size-5;
+        @extend .is-size-6-mobile;
+        text-align: center;
+        padding: 2rem 0;
+        border-radius: 1rem;
+      }
+    }
+  }
+
+  .voices {
     display: flex;
     flex-direction: column;
     @extend .is-max-widescreen;
+    @extend .mb-6;
 
     .voice-cards {
       display: flex;
@@ -843,7 +870,7 @@ $dropdown-item-active-background-color: $primary;
     }
   }
 
-  .explain-humming-container {
+  .explain-humming {
     @extend .is-max-widescreen;
   }
 }
diff --git a/src/components/page.tsx b/src/components/page.tsx
index f0edbfd5..6d4a547f 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -85,6 +85,12 @@ export const Page: React.FC<{
           className={`navbar-menu ${isBurgerActive ? "is-active" : ""}`}
         >
           <div className="navbar-end">
+            <Link to={"/"} className="navbar-item">
+              トーク
+            </Link>
+            <Link to={"/song/"} className="navbar-item">
+              ソング
+            </Link>
             <Link to={"/term/"} className="navbar-item">
               利用規約
             </Link>
diff --git a/src/pages/song/index.tsx b/src/pages/song/index.tsx
index 0be10711..1efa9c98 100644
--- a/src/pages/song/index.tsx
+++ b/src/pages/song/index.tsx
@@ -184,17 +184,32 @@ export default () => {
   const { characterKeys } = useContext(CharacterContext)
 
   // ソングを持つキャラクターを前に表示する
+  // ソング・ハミングどちらも無いキャラクターはフィルター
   const orderedCharacterKeys = useMemo(() => {
-    return characterKeys.toSorted((a, b) => {
-      const hasSong = (songVoiceUrls: { styleType: "song" | "humming" }[]) =>
-        songVoiceUrls.some(({ styleType }) => styleType === "song")
-      return hasSong(characterInfos[a].songVoiceUrls) &&
-        !hasSong(characterInfos[b].songVoiceUrls)
-        ? -1
-        : 1
-    })
+    return characterKeys
+      .filter(key => characterInfos[key].songVoiceUrls.length > 0)
+      .toSorted((a, b) => {
+        const hasSong = (songVoiceUrls: { styleType: "song" | "humming" }[]) =>
+          songVoiceUrls.some(({ styleType }) => styleType === "song")
+        return hasSong(characterInfos[a].songVoiceUrls) &&
+          !hasSong(characterInfos[b].songVoiceUrls)
+          ? -1
+          : 1
+      })
   }, [characterKeys, characterInfos])
 
+  // キャラクター数
+  const characterCount = useMemo(() => {
+    return orderedCharacterKeys.length
+  }, [orderedCharacterKeys])
+
+  // スタイル数
+  const styleCount = useMemo(() => {
+    return orderedCharacterKeys.reduce((acc, key) => {
+      return acc + characterInfos[key].songVoiceUrls.length
+    }, 0)
+  }, [orderedCharacterKeys, characterInfos])
+
   return (
     <Page showingHeader={true} isDark={true}>
       {/* TODO: SEOワードいれる */}
@@ -241,7 +256,33 @@ export default () => {
         </section>
 
         <section className="section">
-          <div className="container voices-container">
+          <div className="feature container">
+            <h2 className="title">特徴</h2>
+            <div className="feature-cells">
+              <div className="feature-cell">
+                商用利用可能な
+                <br />
+                フリーソフトウェア
+              </div>
+              <div className="feature-cell">
+                マルチOSに対応
+                <br />
+                (Win / Mac / Linux)
+              </div>
+              <div className="feature-cell">
+                {characterCount} 名のキャラクターと
+                <br />
+                {styleCount} 種類のボイス
+              </div>
+              <div className="feature-cell">
+                すぐ使える GUI と
+                <br />
+                歌唱 AI で創作支援
+              </div>
+            </div>
+          </div>
+
+          <div className="container voices">
             <h2 className="title">音声ライブラリ一覧</h2>
             <div className="voice-cards">
               {orderedCharacterKeys.map(characterKey => (
@@ -254,16 +295,18 @@ export default () => {
             </div>
           </div>
 
-          <div className="container explain-humming-container">
+          <div className="container explain-humming">
             <h2 className="title">ハミングとは？</h2>
             <p>
               喋り声のデータを用いて音声ライブラリを作成し、
               歌えるキャラクターに歌い方を倣うことで、
-              キャラクターの喋り声に近い声で歌える技術で実現された機能です。
+              キャラクターの喋り声に近い声で歌える機能です。
             </p>
             <p>キャラクターによっていろんなスタイルで歌うことができます。</p>
           </div>
         </section>
+
+        {/* TODO: トーク側にあるOSSとかの案内を追加 */}
       </main>
     </Page>
   )