引入头像，完成首页

tone-page-web/app/globals.css

@@ -116,7 +116,32 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
+
+@keyframes gradient-text {
+  0% {
+    background-position: 0% center;
+  }
+
+  100% {
+    background-position: -200% center;
+  }
+}
+
+.gradient-title {
+  background: linear-gradient(30deg,
+      #2657e8 0%,
+      #ef0c7e 25%,
+      #3527f5 50%,
+      #ec1111 75%,
+      #2657e8 100%);
+  background-size: 400% 200%;
+  color: transparent;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: gradient-text 20s linear infinite;
+}

tone-page-web/app/layout.tsx

@@ -1,4 +1,3 @@
-import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "./components/theme-provider";
@@ -37,7 +36,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <Header />
-          <main className="flex-grow bg-zinc-50">
+          <main className="flex-1 flex flex-col bg-zinc-50">
             {children}
             <Toaster />
           </main>

tone-page-web/app/page.tsx

@@ -1,7 +1,16 @@
+'use client';
+import favicon from './favicon.ico';
+
 export default function Home() {
   return (
-    <div>
-      1312能哦
+    <div className="w-full flex-1 flex flex-col items-center justify-center">
+      <img src={favicon.src} className="size-35 md:size-45 rounded-full duration-400" />
+      <h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400'>特恩(TONE)</h1>
+      <h2 className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400'>一名啥都会一点点的程序员</h2>
+      <div className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400'>
+        <a href='https://space.bilibili.com/474156211' target='_black' className='bg-[#488fe9] hover:bg-[#3972ba] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>哔哩哔哩</a>
+        <a href='https://github.com/tonecn' className='bg-[#da843f] hover:bg-[#c87d3e] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>GitHub</a>
+      </div>
     </div>
   );
 }