add new website Infinite Client

Author: The-Infinitys

src/app/minecraft/infinite-client/page.css

@@ -0,0 +1,50 @@
+.section {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 64px 24px;
+  box-sizing: border-box;
+  margin-bottom: 10vh;
+  margin-left: 5vw;
+  margin-right: 5vw;
+}
+
+.title {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 64px 24px;
+  box-sizing: border-box;
+}
+.title h1 {
+  font-size: 10vw !important;
+}
+h1 {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+}
+
+p,
+li,
+a {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+ul {
+  padding-left: 2rem;
+}
+
+a {
+  color: #2563eb;
+  text-decoration: underline;
+}

src/app/minecraft/infinite-client/page.tsx

@@ -1,37 +1,44 @@
 import React from "react";
-
+import "./page.css";
 export default function InfiniteClientPage() {
   return (
-      <h1 style={{ fontSize: "2.5rem", fontWeight: "bold", marginBottom: "1rem" }}>
-        Infinite Client
-      </h1>
-      <p style={{ fontSize: "1.2rem", marginBottom: "2rem" }}>
-        Infinite Clientは、Minecraftのプレイ体験を拡張するために開発された高機能なクライアントです。快適な操作性と多彩な機能を備え、初心者から上級者まで幅広いユーザーにおすすめです。
-      </p>
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "0.5rem" }}>主な特徴</h2>
-        <ul style={{ fontSize: "1.1rem", paddingLeft: "1.5rem" }}>
+    <>
+      <section className="title">
+        <h1>Infinite Client</h1>
+      </section>
+      <section className="section">
+        <p>
+          Infinite
+          Clientは、Minecraftのプレイ体験を拡張するために開発された高機能なクライアントです。
+        </p>
+        <p>
+          快適な操作性と多彩な機能を備え、初心者から上級者まで幅広いユーザーにおすすめです。
+        </p>
+      </section>
+      <section className="section">
+        <h2>主な特徴</h2>
+        <ul>
           <li>軽量かつ高速な動作</li>
           <li>スタイリッシュなUI</li>
           <li>統合されたショートカット機能</li>
           <li>サーバー対策強化</li>
           <li>最新バージョンへの迅速な対応</li>
         </ul>
       </section>
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "0.5rem" }}>ダウンロード</h2>
-        <p>
-          最新版のダウンロードは以下のリンクから行えます。
-        </p>
-        <a href="https://github.com/The-Infinitys/minecraft.infinite-client" target="_blank" style={{ color: "#1976d2", textDecoration: "underline", fontWeight: "bold" }}>
+      <section className="section">
+        <h2>ダウンロード</h2>
+        <p>最新版のダウンロードは以下のリンクから行えます。</p>
+        <a
+          href="https://github.com/The-Infinitys/minecraft.infinite-client"
+          target="_blank"
+        >
           Infinite Client ダウンロードページ
         </a>
       </section>
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "0.5rem" }}>サポート・お問い合わせ</h2>
-        <p>
-          ご質問や不具合報告は、GitHubまたはDiscordよりご連絡ください。
-        </p>
+      <section className="section">
+        <h2>サポート・お問い合わせ</h2>
+        <p>ご質問や不具合報告は、GitHubまたはDiscordよりご連絡ください。</p>
       </section>
+    </>
   );
 }