Fix some UI flaws

pages/friends.tsx

@@ -1,4 +1,5 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { SEO } from "@/components/utils/SEO";
@@ -17,7 +18,7 @@ export default function FriendsPage() {
         <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"FRIENDS"}
         </h2>
-        <hr />
+        <Separator />
         <div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
           {FriendsList.map((item) => (
             <Link className="mx-3 p-2 underline" href={item.url} key={nanoid()}>
@@ -25,7 +26,7 @@ export default function FriendsPage() {
             </Link>
           ))}
         </div>
-        <hr />
+        <Separator />
         <div className="my-3 text-base flex-col flex justify-start">
           <div className="mx-auto">
             {"Welcome to exchange our friend links and every high-quality blog websites are welcomed. "}