ようこそページの大改修

src/frontend/langs/ja-JP.json

@@ -1,7 +1,7 @@
 {
 	"title": "Misskey Tools",
-	"description1": "Misskeyは楽しいものです。気がついたら1日中入り浸っていることも多いでしょう。",
-	"description2": "さあ、今すぐMisskey Toolsをインストールして、あなたの活動を把握しよう。",
+	"description1": "Misskeyをもっと効果的に。様々な機能を持ったオールインワンツール。",
+	"description2": "お使いのインスタンスURLを入力して、今すぐMisskey Toolsを使おう！",
 	"notes": "ノート",
 	"following": "フォロー",
 	"followers": "フォロワー",
@@ -48,6 +48,15 @@
 		"pattern5": "息するように Misskey、そんなあなたへ。",
 		"pattern6": "あなたは真の Misskey 廃人ですか？"
 	},
+	"_welcome": {
+		"title": "プロ仕様のツールキット",
+		"description": "Misskey Toolsでは、Misskeyのために設計された、Misskeyをより楽しめるツールを取り揃えています。",
+		"misshaiAlertTitle": "ミス廃アラート",
+		"misshaiAlertDescription": "Misskeyにのめり込んでいませんか？ミス廃アラートを使えば、毎日のMisskeyでの活動量を以下のように定期投稿できます。",
+		"misshaiRankingDescription": "ミス廃ランキングでは、Misskeyでの活動を数値化し、ランキング表示します。",
+		"nextFeaturesTitle": "今後も追加予定。",
+		"nextFeaturesDescription": "これだけではありません。今後もアップデートで様々な機能を追加します！"
+	},
 	"_nav": {
 		"data": "データ",
 		"ranking": "ランキング",
@@ -62,7 +71,8 @@
 		"dataScore": "スコア",
 		"dataDelta": "前日比",
 		"rating": "レート",
-		"order": "順位"
+		"order": "順位",
+		"showRanking": "ランキングを見る"
 	},
 	"_developerInfo": {
 		"title": "開発者",

src/frontend/pages/index.welcome.tsx

@@ -1,16 +1,23 @@
-import React  from 'react';
+import React, { useMemo }  from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import { Ranking } from '../components/Ranking';
 import { LoginForm } from '../components/LoginForm';
-import { DeveloperInfo } from '../components/DeveloperInfo';
-import { HashtagTimeline } from '../components/HashtagTimeline';
 import { Header } from '../components/Header';
-
 export const IndexWelcomePage: React.VFC = () => {
 	const {t} = useTranslation();
 
+	const example = useMemo(() => (
+		t('_template.default')
+			.replace('{notesCount}', '32000')
+			.replace('{notesDelta}', '+190')
+			.replace('{followingCount}', '510')
+			.replace('{followingDelta}', '+3')
+			.replace('{followersCount}', '1020')
+			.replace('{followersDelta}', '-1')
+			.replace('{url}', 'https://misskey.tools')
+	), []);
+
 	return (
 		<>
 			<Header>
@@ -20,20 +27,29 @@ export const IndexWelcomePage: React.VFC = () => {
 				</article>
 				<LoginForm />
 			</Header>
-			<article className="xarticle card ghost">
+			<article className="xarticle vstack pa-2">
+				<header>
+					<h2>{t('_welcome.title')}</h2>
+					<p>{t('_welcome.description')}</p>
+				</header>
+				<article>
+					<h3>{t('_welcome.misshaiAlertTitle')}</h3>
+					<p>{t('_welcome.misshaiAlertDescription')}</p>
+					<div className="card ma-2 shadow-2" style={{maxWidth: 320}}>
 						<div className="body">
-					<h1 className="mb-1">{t('_missHai.ranking')}</h1>
-					<Ranking limit={10} />
-					<Link to="/ranking">{t('_missHai.showAll')}</Link>
+							<pre>{example}</pre>
+						</div>
 					</div>
 				</article>
-			<article className="xarticle mt-4 row">
-				<div className="col-12 pc-6 card ghost">
-					<div className="body"><DeveloperInfo/></div>
-				</div>
-				<div className="col-12 pc-6 card ghost">
-					<div className="body"><HashtagTimeline hashtag="misshaialert"/></div>
-				</div>
+				<article>
+					<h3 className="mb-1">{t('_missHai.ranking')}</h3>
+					<p>{t('_welcome.misshaiRankingDescription')}</p>
+					<Link to="/ranking">{t('_missHai.showRanking')}</Link>
+				</article>
+				<article>
+					<h3>{t('_welcome.nextFeaturesTitle')}</h3>
+					<p>{t('_welcome.nextFeaturesDescription')}</p>
+				</article>
 			</article>
 		</>
 	);