update

web/components/resources.tsx

@@ -0,0 +1,52 @@
+import { Book, GitBranch, FileText, Github } from "lucide-react"
+import Link from "next/link"
+
+const resources = [
+  {
+    icon: <Book className="h-6 w-6" />,
+    title: "Documentation",
+    description: "Comprehensive guides to get you started",
+    link: "/docs/introduction",
+  },
+  {
+    icon: <FileText className="h-6 w-6" />,
+    title: "Changelog",
+    description: "Stay up to date with the latest changes",
+    link: "/changelog",
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" />,
+    title: "Guides",
+    description: "Step-by-step tutorials for common tasks",
+    link: "/guides",
+  },
+  {
+    icon: <Github className="h-6 w-6" />,
+    title: "GitHub Repository",
+    description: "Explore the source code and contribute",
+    link: "https://github.com/MacRimi/ProxMenux",
+  },
+]
+
+export default function Resources() {
+  return (
+    <section className="py-20 bg-gray-900">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {resources.map((resource, index) => (
+            <Link key={index} href={resource.link} className="block">
+              <div className="bg-gray-800 p-6 rounded-lg shadow-lg hover:bg-gray-700 transition-colors duration-200">
+                <div className="flex items-center mb-4">
+                  {resource.icon}
+                  <h3 className="text-xl font-semibold ml-2">{resource.title}</h3>
+                </div>
+                <p className="text-gray-400">{resource.description}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+