Update page.tsx

web/app/guides/page.tsx

@@ -2,6 +2,7 @@ import fs from "fs"
 import path from "path"
 import matter from "gray-matter"
 import Link from "next/link"
+import { Play, MessageCircle, Users, Book, Database, Code } from "lucide-react"
 import Footer2 from "@/components/footer2"
 
 const guidesDirectory = path.join(process.cwd(), "..", "guides")
@@ -49,6 +50,8 @@ export default function GuidesPage() {
       <div className="flex-grow container mx-auto px-4 py-16">
         <h1 className="text-4xl font-bold mb-8">ProxMenux Guides</h1>
         <p className="text-xl mb-8">Complementary guides to make the most of your Proxmox VE.</p>
+
+        {/* Dynamic Guides */}
         <div className="grid md:grid-cols-2 gap-6 mb-12">
           {guides.map((guide) => (
             <Link
@@ -61,15 +64,20 @@ export default function GuidesPage() {
             </Link>
           ))}
         </div>
+
+        {/* Additional Resources */}
         <h2 className="text-3xl font-bold mb-6">Additional Resources</h2>
-        <div className="grid md:grid-cols-2 gap-6">
+        <div className="grid md:grid-cols-2 gap-6 mb-12">
           <a
             href="https://github.com/community-scripts/ProxmoxVE/blob/main/USER_SUBMITTED_GUIDES.md"
             target="_blank"
             rel="noopener noreferrer"
             className="block p-6 bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 transition-colors"
           >
-            <h2 className="text-2xl font-semibold mb-2 text-white">Proxmox VE Helper-Scripts (Community Edition)</h2>
+            <div className="flex items-center gap-3 mb-2">
+              <Code className="h-6 w-6 text-white" />
+              <h2 className="text-2xl font-semibold text-white">Community Scripts</h2>
+            </div>
             <p className="text-gray-200">
               Explore user-submitted guides and scripts for Proxmox VE from the community.
             </p>
@@ -80,12 +88,80 @@ export default function GuidesPage() {
             rel="noopener noreferrer"
             className="block p-6 bg-green-600 rounded-lg shadow-md hover:bg-green-700 transition-colors"
           >
-            <h2 className="text-2xl font-semibold mb-2 text-white">Official Proxmox Documentation</h2>
+            <div className="flex items-center gap-3 mb-2">
+              <Book className="h-6 w-6 text-white" />
+              <h2 className="text-2xl font-semibold text-white">Official Documentation</h2>
+            </div>
+            <p className="text-gray-200">Access the comprehensive Proxmox VE documentation and administration guide.</p>
+          </a>
+        </div>
+
+        {/* PBS Documentation */}
+        <h2 className="text-3xl font-bold mb-6">Backup Server Documentation</h2>
+        <div className="mb-12">
+          <a
+            href="https://pbs.proxmox.com/docs/index.html"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block p-6 bg-yellow-600 rounded-lg shadow-md hover:bg-yellow-700 transition-colors"
+          >
+            <div className="flex items-center gap-3 mb-2">
+              <Database className="h-6 w-6 text-white" />
+              <h2 className="text-2xl font-semibold text-white">Backup Server Docs</h2>
+            </div>
             <p className="text-gray-200">
-              Access the official Proxmox VE documentation for comprehensive guides and information.
+              Learn about Proxmox Backup Server, a powerful backup solution for Proxmox VE.
             </p>
           </a>
         </div>
+
+        {/* Video Tutorials */}
+        <h2 className="text-3xl font-bold mb-6">Video Tutorials</h2>
+        <div className="mb-12">
+          <a
+            href="https://www.proxmox.com/en/services/training-courses/videos?utm_source"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block p-6 bg-red-600 rounded-lg shadow-md hover:bg-red-700 transition-colors"
+          >
+            <div className="flex items-center gap-3 mb-2">
+              <Play className="h-6 w-6 text-white" />
+              <h2 className="text-2xl font-semibold text-white">Official Video Training</h2>
+            </div>
+            <p className="text-gray-200">
+              Access official Proxmox video tutorials and training courses to enhance your skills.
+            </p>
+          </a>
+        </div>
+
+        {/* Community Discussion */}
+        <h2 className="text-3xl font-bold mb-6">Community Discussion</h2>
+        <div className="grid md:grid-cols-2 gap-6">
+          <a
+            href="https://forum.proxmox.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block p-6 bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 transition-colors"
+          >
+            <div className="flex items-center gap-3 mb-2">
+              <MessageCircle className="h-6 w-6 text-white" />
+              <h2 className="text-2xl font-semibold text-white">Proxmox Forum</h2>
+            </div>
+            <p className="text-gray-200">Join the official Proxmox forum to ask questions and share experiences.</p>
+          </a>
+          <a
+            href="https://www.reddit.com/r/Proxmox/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block p-6 bg-orange-600 rounded-lg shadow-md hover:bg-orange-700 transition-colors"
+          >
+            <div className="flex items-center gap-3 mb-2">
+              <Users className="h-6 w-6 text-white" />
+              <h2 className="text-2xl font-semibold text-white">Proxmox Reddit</h2>
+            </div>
+            <p className="text-gray-200">Join the Proxmox community on Reddit for discussions, tips, and support.</p>
+          </a>
+        </div>
       </div>
       <Footer2 />
     </div>