style: 调整整体的头部、尾部，增加注册登录的插图

app/components/logo.tsx

@@ -0,0 +1,20 @@
+export default function Logo() {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
+    >
+      <path
+        d="M982.408306 18.466839c-3.577415-16.618263-33.607551-23.264652-66.743305-14.767718l-298.185137 76.444925a9874.756874 9874.756874 0 0 1-120.706853 29.970589l-112.613009 27.061934c-33.264009 7.988492-68.51598 23.718127-78.355018 34.945074-9.839038 11.231527-17.882497 48.402752-17.882496 82.605775V708.413324l-62.162747-1.873448s-74.333288-2.258215-131.283361 57.353162c-68.996939 72.221651-79.390224 174.290216-23.214266 227.937706 56.171378 53.674974 157.64447 38.627842 226.65057-33.59839 37.125419-38.866031 44.614631-69.867245 44.614631-69.867245 8.029717-33.250267 14.644043-60.449618 14.694428-60.449618 0.054967 0 0.096192-27.982626 0.096192-62.19023V409.417428c0-34.203023 27.098579-69.175581 60.220591-77.704579l440.292355-113.410025c33.122012-8.528998 60.220591 12.472858 60.220591 46.675882v204.187515c0 34.207604-27.982626 62.199391-62.18565 62.208553 0 0-63.110922 0.022903-115.136895 54.476571-65.140109 68.204502-74.956244 164.593176-21.93171 215.267884 53.056598 50.674709 148.895605 36.452077 214.044875-31.743264 35.132877-36.795619 41.394499-62.895636 41.394499-62.895636 7.979331-33.259429 14.547851-60.467941 14.593657-60.467941 0.050386 0 0.08245-27.982626 0.08245-62.185649V110.856685c0.004581-34.203023-2.922396-75.776164-6.504392-92.389846zM321.136111 730.271745l-1.749773-1.676484c-2.001704-1.731451-1.868867-2.070412 0.288575-0.746631 2.157443 1.323781 3.920957 2.972782 3.920957 3.673607 0 0.700825-0.723728 0.503861-1.612356-0.430572 0.004581-0.009161 0.004581-0.009161-0.847403-0.81992z"
+        fill="#fff"
+      ></path>
+    </svg>
+  );
+}

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import SignoutButton from "./components/signout-button";
+import Logo from "./components/logo";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -24,38 +25,27 @@ export default function RootLayout({
               href="#"
               className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
             >
-              <svg
+              <Logo />
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
-                viewBox="0 0 24 24"
-              >
-                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
-              </svg>
               <span className="ml-3 text-xl">音乐弹幕</span>
             </a>
             <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
               <a href="#" className="mr-5 hover:text-gray-900">
-                First Link
+                歌词曲库
               </a>
               <a href="#" className="mr-5 hover:text-gray-900">
-                Second Link
+                直播间列表
               </a>
               <a href="#" className="mr-5 hover:text-gray-900">
-                Third Link
+                弹幕 AI
               </a>
               <a href="#" className="mr-5 hover:text-gray-900">
-                Fourth Link
+                关于
               </a>
             </nav>
             <SignoutButton className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0" />
           </div>
         </header>
-        <main className="min-h-[50vh]">{children}</main>
+        <main>{children}</main>
         <footer className="text-gray-600 body-font">
           <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
             <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
@@ -63,129 +53,113 @@ export default function RootLayout({
                 href="#"
                 className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900"
               >
-                <svg
+                <Logo />
-                  xmlns="http://www.w3.org/2000/svg"
+                <span className="ml-3 text-xl">音乐弹幕</span>
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
-                </svg>
-                <span className="ml-3 text-xl">Tailblocks</span>
               </a>
               <p className="mt-2 text-sm text-gray-500">
-                Air plant banjo lyft occupy retro adaptogen indego
+                歌曲歌词到直播间
               </p>
             </div>
             <div className="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
               <div className="lg:w-1/4 md:w-1/2 w-full px-4">
                 <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
-                  CATEGORIES
+                  歌词曲库
                 </h2>
                 <nav className="list-none mb-10">
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      First Link
+                      流行音乐
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Second Link
+                      古典音乐
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Third Link
+                      民间音乐
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Fourth Link
+                      爵士乐
                     </a>
                   </li>
                 </nav>
               </div>
               <div className="lg:w-1/4 md:w-1/2 w-full px-4">
                 <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
-                  CATEGORIES
+                  直播间列表
                 </h2>
                 <nav className="list-none mb-10">
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      First Link
+                      热门直播
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Second Link
+                      音乐直播
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Third Link
+                      颜值直播
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Fourth Link
+                      舞见直播
                     </a>
                   </li>
                 </nav>
               </div>
               <div className="lg:w-1/4 md:w-1/2 w-full px-4">
                 <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
-                  CATEGORIES
+                  弹幕 AI
                 </h2>
                 <nav className="list-none mb-10">
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      First Link
+                      音乐同步
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Second Link
+                      智能回复
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Third Link
+                      烘托气氛
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Fourth Link
+                      猜谜抽奖
                     </a>
                   </li>
                 </nav>
               </div>
               <div className="lg:w-1/4 md:w-1/2 w-full px-4">
                 <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
-                  CATEGORIES
+                  关于
                 </h2>
                 <nav className="list-none mb-10">
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      First Link
+                      如何接入
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Second Link
+                      联系我们
                     </a>
                   </li>
                   <li>
                     <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Third Link
+                      发展故事
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" className="text-gray-600 hover:text-gray-800">
-                      Fourth Link
                     </a>
                   </li>
                 </nav>

app/page.tsx

@@ -8,16 +8,13 @@ export default function Home() {
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
           <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
-            Before they sold out
+            搜索直播间
             <br className="hidden lg:inline-block" />
-            readymade gluten
+            同步发送歌曲歌词
           </h1>
 
           <p className="mb-8 leading-relaxed">
-            Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
+          只需在搜索框中输入你感兴趣的歌曲名称或歌手，即可找到相关的歌词。然后，选择你喜欢的歌词段落，将其发送为弹幕，即可在视频播放时实现动态同步。这种互动方式不仅有助于分享感受，还能让观众更深入地了解你所喜爱的音乐。
-            plant cold-pressed tacos poke beard tote bag. Heirloom echo park
-            mlkshk tote bag selvage hot chicken authentic tumeric truffaut
-            hexagon try-hard chambray.
           </p>
           <div className="flex justify-center">
             <Link
@@ -27,7 +24,7 @@ export default function Home() {
               弹幕测试
             </Link>
             <button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
-              Button
+              歌词曲库
             </button>
           </div>
         </div>

app/signin/page.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { signin } from "@/app/lib/actions/auth";
+import Image from "next/image";
 import Link from "next/link";
 import { useFormState, useFormStatus } from "react-dom";
+import signinSvg from '@/app/signin/signin.svg';
+
 
 export default function Page() {
   const [errorMessage, dispatch] = useFormState(signin, undefined);
@@ -11,13 +14,12 @@ export default function Page() {
     <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
         <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
-          <h1 className="title-font font-medium text-3xl text-gray-900">
+          <Image
-            Slow-carb next level shoindcgoitch ethical authentic, poko scenester
+            width={600}
-          </h1>
+            className="object-cover object-center rounded"
-          <p className="leading-relaxed mt-4">
+            alt="signin"
-            Poke slow-carb mixtape knausgaard, typewriter street art gentrify
+            src={signinSvg}
-            hammock starladder roathse. Craies vegan tousled etsy austin.
+          />
-          </p>
         </div>
         <form
           action={dispatch}

app/signup/page.tsx

@@ -3,6 +3,8 @@
 import { signup } from "@/app/lib/actions/auth";
 import Link from "next/link";
 import { useFormState, useFormStatus } from "react-dom";
+import signupSvg from "@/app/signup/signup.svg";
+import Image from "next/image";
 
 export default function Page() {
   const [errorMessage, dispatch] = useFormState(signup, undefined);
@@ -11,13 +13,12 @@ export default function Page() {
     <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
         <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
-          <h1 className="title-font font-medium text-3xl text-gray-900">
+          <Image
-            Slow-carb next level shoindcgoitch ethical authentic, poko scenester
+            width={600}
-          </h1>
+            className="object-cover object-center rounded"
-          <p className="leading-relaxed mt-4">
+            alt="signup"
-            Poke slow-carb mixtape knausgaard, typewriter street art gentrify
+            src={signupSvg}
-            hammock starladder roathse. Craies vegan tousled etsy austin.
+          />
-          </p>
         </div>
         <form
           action={dispatch}
@@ -72,7 +73,9 @@ export default function Page() {
             />
           </div>
           <SignupButton className="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" />
-          <Link href="/signin" className="btn btn-link">已经有账号？点此直接登录。</Link>
+          <Link href="/signin" className="btn btn-link">
+            已经有账号？点此直接登录。
+          </Link>
           {errorMessage ? (
             <p className="text-xs text-red-400 mt-3">{errorMessage}</p>
           ) : null}
@@ -82,7 +85,6 @@ export default function Page() {
   );
 }
 
-
 // export default function Page() {
 //   const [errorMessage, dispatch] = useFormState(signup, undefined);
 
@@ -122,4 +124,3 @@ function SignupButton({ className }: { className: string | undefined }) {
     </button>
   );
 }
-