fix: reduce footer text, move project information to faq page

src/__tests__/sanity-check.test.tsx

@@ -16,6 +16,7 @@ test('should be able to render App', async () => {
   await waitFor(() => screen.getByTestId('sdk-version'));
 
   // Quick sanity check of known strings.
-  expect(screen.getByText(/在浏览器内对文件进行解锁/i)).toBeInTheDocument();
-  expect(screen.getByText(/UnlockMusic 团队/i)).toBeInTheDocument();
+  expect(screen.getByText(/音乐解锁/i)).toBeInTheDocument();
+  expect(screen.getByText(/Unlock Music/i)).toBeInTheDocument();
+  expect(screen.getByText(/MIT/i)).toBeInTheDocument();
 });

src/components/Footer.tsx

@@ -5,24 +5,28 @@ export function Footer() {
   const appVersionShort = '__APP_VERSION_SHORT__';
   return (
     <footer className="flex flex-col text-center p-4 bg-base-200">
-      <div className="flex flex-row justify-center items-center h-[1em]">
+      <p className="flex flex-row justify-center items-center h-[1em]">
         <a className="link link-info mr-1" href="https://git.unlock-music.dev/um/um-react">
           音乐解锁
         </a>
-        (v{appVersionShort}
-        <SDKVersion />) - 移除已购音乐的加密保护。
-      </div>
-      <div>
+        (
+        <a
+          title="使用 MIT 授权协议"
+          className="link link-info"
+          href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE"
+        >
+          MIT
+        </a>
+        , v{appVersionShort}
+        <SDKVersion />)
+      </p>
+      <p>
         {'© 2019 - '}
-        <CurrentYear />{' '}
-        <a className="link link-info" href="https://git.unlock-music.dev/um">
-          UnlockMusic 团队
+        <CurrentYear />
+        <a className="ml-1 link link-info" href="https://git.unlock-music.dev/um">
+          Unlock Music
         </a>
-        {' | '}
-        <a className="link link-info" href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE">
-          使用 MIT 授权协议
-        </a>
-      </div>
+      </p>
     </footer>
   );
 }

src/faq/FAQAbout.tsx

@@ -0,0 +1,45 @@
+import { Header2, Header3 } from '~/components/HelpText/Headers';
+import { FaRust } from 'react-icons/fa';
+
+export function FAQAboutProject() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Header2>关于项目</Header2>
+
+      <Header3 id="failed">um-react 是什么</Header3>
+      <p>
+        um-react 是由
+        <a className="mx-1 link link-info" href="https://git.unlock-music.dev/um">
+          Unlock Music
+        </a>
+        基于 React 框架制作的一款用于移除已购音乐的加密保护的小工具，使用
+        <a className="mx-1 link link-info" href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE">
+          MIT
+        </a>
+        授权协议。
+      </p>
+      <p>
+        它的解密核心由 <FaRust className="inline" />
+        <a className="mx-1 link link-info" href="https://git.unlock-music.dev/um/lib_um_crypto_rust">
+          <code>lib_um_crypto_rust</code>
+        </a>
+        驱动，使用
+        <a
+          className="mx-1 link link-info"
+          href="https://git.unlock-music.dev/um/lib_um_crypto_rust/src/branch/main/LICENSE_MIT"
+        >
+          MIT
+        </a>
+        +
+        <a
+          className="mx-1 link link-info"
+          href="https://git.unlock-music.dev/um/lib_um_crypto_rust/src/branch/main/LICENSE_APACHE"
+        >
+          Apache
+        </a>
+        双协议。
+      </p>
+      <p>这意味着你可以自由地使用、修改和分发这个软件，但请注意遵守相应的授权协议。</p>
+    </div>
+  );
+}

src/faq/FAQPages.tsx

@@ -4,6 +4,7 @@ import { KuwoFAQ } from './KuwoFAQ';
 import { KugouFAQ } from './KugouFAQ';
 import { OtherFAQ } from './OtherFAQ';
 import { AndroidEmulatorFAQ } from './AndroidEmulatorFAQ';
+import { FAQAboutProject } from './FAQAbout';
 
 export type FAQEntry = {
   id: string;
@@ -17,4 +18,5 @@ export const FAQ_PAGES: FAQEntry[] = [
   { id: 'kugou', name: '酷狗音乐', Component: KugouFAQ },
   { id: 'android-emu', name: '安卓模拟器', Component: AndroidEmulatorFAQ },
   { id: 'other', name: '其它问题', Component: OtherFAQ },
+  { id: 'about', name: '关于项目', Component: FAQAboutProject },
 ];

src/faq/FaqHome.tsx

@@ -1,9 +1,10 @@
 import { ExtLink } from '~/components/ExtLink';
+import { Header2 } from '~/components/HelpText/Headers';
 
 export function FaqHome() {
   return (
     <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">答疑</h1>
+      <Header2>答疑</Header2>
       <p>从目录选择一项来查看相关说明。</p>
       <p>
         也欢迎造访