feat: homePage 新增了一些东西

Author: coderz-w

src/app/(app)/(home)/page.tsx

@@ -6,9 +6,59 @@ import Image from 'next/image';
 
 import { TextUpTransitionView } from '@/components/ui/transition/TextUpTransitionView';
 import { SocialIcon } from '@/components/modules/home/SocialIcon';
+import {
+  FaSolidFeatherAlt,
+  FaSolidHistory,
+  FaSolidUserFriends,
+  IcTwotoneSignpost,
+  MdiFlask,
+  MdiLightbulbOn20,
+  RMixPlanet,
+} from '@/components/icons/menu-collection';
 import { cn } from '@/lib/helper';
 import { FocusCards } from '@/components/ui/focus-cards.tsx';
 
+const windsock = [
+  {
+    title: '文稿',
+    path: '/posts',
+    type: 'Post',
+    subMenu: [],
+    icon: IcTwotoneSignpost,
+  },
+  {
+    title: '手记',
+    type: 'Note',
+    path: '/notes',
+    icon: FaSolidFeatherAlt,
+  },
+  {
+    title: '度过的时光',
+    icon: FaSolidHistory,
+    path: '/timeline',
+  },
+  {
+    title: '朋友们',
+    icon: FaSolidUserFriends,
+    path: '/friends',
+  },
+  {
+    title: '写下一点思考',
+    icon: MdiLightbulbOn20,
+    path: '/thinking',
+  },
+  {
+    title: '看看我做些啥',
+    icon: MdiFlask,
+    path: '/projects',
+  },
+  {
+    title: '跃迁',
+    icon: RMixPlanet,
+    path: 'https://travel.moe/go.html',
+  },
+];
+
 export default function Home() {
   return (
     <div>
@@ -246,7 +296,7 @@ const BlogCardList = () => {
 
   return (
     <div className=" w-full mt-10 md:mt-16 flex flex-col gap-y-8 px-4">
-      <span className="text-2xl font-medium leading-loose md:ml-4 font-mono hidden gap-x-2 items-center  md:flex">
+      <span className="text-2xl font-medium leading-loose justify-center md:justify-start md:ml-4 font-mono gap-x-2 items-center flex">
         最近文章
         <span className=" i-material-symbols-kid-star-outline cursor-pointer hover:rotate-[720deg] animate-ease-out duration-150" />
       </span>
@@ -257,11 +307,62 @@ const BlogCardList = () => {
 
 const WindVane = () => {
   return (
-    <div className=" w-full mt-10 md:mt-16 flex flex-col gap-y-8 px-4">
-      <span className="text-2xl flex justify-center md:justify-start items-center gap-x-2 text-center  font-medium leading-loose md:ml-4 font-mono ">
+    <div className=" w-full mt-14 md:mt-20 flex flex-col gap-y-8 px-4">
+      <span className="text-2xl flex justify-center items-center gap-x-2 text-center font-medium leading-loose font-mono ">
         风向标
         <span className=" i-mingcute-navigation-line cursor-pointer hover:rotate-[360deg] animate-ease-out duration-200" />
       </span>
+      <div className=" center flex">
+        <ul className=" flex flex-col flex-wrap gap-2 gap-y-10 opacity-80 lg:flex-row">
+          {windsock.map((item, index) => {
+            return (
+              <motion.li
+                initial={{ opacity: 0.0001, y: 15 }}
+                viewport={{ once: true }}
+                whileInView={{
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    stiffness: 641,
+                    damping: 23,
+                    mass: 3.9,
+                    type: 'spring',
+                    delay: index * 0.05,
+                  },
+                }}
+                transition={{
+                  delay: 0.001,
+                }}
+                whileHover={{
+                  y: -6,
+                  transition: {
+                    stiffness: 641,
+                    damping: 23,
+                    mass: 4.9,
+                    type: 'spring',
+                  },
+                }}
+                key={index}
+                className="flex items-center justify-between text-sm group"
+              >
+                <a
+                  href={item.path}
+                  className="flex items-center gap-4 text-neutral-800 duration-200 hover:!text-accent dark:text-neutral-200 group-hover:text-[var(--accent-color)]"
+                >
+                  {createElement(item.icon, {
+                    className: 'w-6 h-6 group-hover:text-[var(--accent-color)]',
+                  })}
+                  <span className=" group-hover:text-[var(--accent-color)]">{item.title}</span>
+                </a>
+
+                {index != windsock.length - 1 && (
+                  <span className="mx-4 hidden select-none lg:inline"> · </span>
+                )}
+              </motion.li>
+            );
+          })}
+        </ul>
+      </div>
     </div>
   );
 };