Add NavCard component and front-end interview resources post

Author: gptkong

src/components/NavCard.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Album } from "lucide-react";
+
+type NavCardProps = {
+  title: string;
+  description: string;
+  href: string;
+  icon?: React.ElementType;
+};
+
+export default function NavCard({
+  title,
+  description,
+  href,
+  icon,
+}: NavCardProps) {
+  const Icon = icon;
+  return (
+    <a
+      href={href}
+      className="block rounded-xl border border-gray-200 bg-white p-6 shadow-md transition hover:shadow-lg hover:border-blue-400 group"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div className="flex items-center space-x-4">
+        <div className="text-blue-500 text-3xl">
+          {Icon ? <Icon /> : <Album />}
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold group-hover:text-blue-600">
+            {title}
+          </h3>
+          <p className="text-gray-500 text-sm">{description}</p>
+        </div>
+      </div>
+    </a>
+  );
+}

src/content/blog/fe/面试学习资源.mdx

@@ -0,0 +1,13 @@
+---
+title: 前端面试学习资源
+pubDate: 2025-07-02
+description: 前端面试学习资源收集
+tags: [front-end, 前端, 面试, js, ts, webpack, 设计模式]
+---
+import NavCard from '@/components/NavCard'
+
+
+<NavCard
+  title="Front-End-Lib"
+  description="notion 整理的笔记库"
+  href="https://evelance.notion.site/Front-End-Lib-641a7f4ffdc643239155757324fdce02" />