update footer

web/app/guides/[slug]/page.tsx

@@ -7,37 +7,38 @@ import matter from "gray-matter"
 import dynamic from "next/dynamic"
 import React from "react"
 import parse from "html-react-parser"
+import Footer from "@/components/footer2"
 
 const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
 
 const guidesDirectory = path.join(process.cwd(), "..", "guides")
 
-// 🔹 Encuentra todos los archivos Markdown dentro de `/guides`
+
 function getMarkdownFiles() {
   return fs
     .readdirSync(guidesDirectory)
     .filter((file) => file.endsWith(".md"))
     .map((file) => ({
-      slug: file.replace(/\.md$/, ""), // 🔹 Quitamos la extensión .md
+      slug: file.replace(/\.md$/, ""), 
       path: path.join(guidesDirectory, file),
     }))
 }
 
-// 🔹 Obtiene el contenido de una guía específica
+
 async function getGuideContent(slug: string) {
   try {
     const markdownFiles = getMarkdownFiles()
     const guideFile = markdownFiles.find((file) => file.slug === slug)
 
     if (!guideFile) {
-      console.error(`❌ No se encontró la guía: ${slug}`)
+      console.error(`Guide not found.: ${slug}`)
-      return { content: "<p class='text-red-600'>Error: No se encontró la guía solicitada.</p>", metadata: null }
+      return { content: "<p class='text-red-600'>Error: Guide not found.</p>", metadata: null }
     }
 
     const fileContents = fs.readFileSync(guideFile.path, "utf8")
-    const { content, data } = matter(fileContents) // 🔹 Extrae metadata y contenido del `.md`
+    const { content, data } = matter(fileContents) 
+
     
-    // 🔹 Convertimos el Markdown a HTML con soporte para imágenes y tablas
     const result = await remark()
       .use(gfm.default || gfm)
       .use(html)
@@ -50,7 +51,7 @@ async function getGuideContent(slug: string) {
   }
 }
 
-// 🔹 Generamos rutas estáticas asegurando que Next.js las acepte
+
 export async function generateStaticParams() {
   try {
     const markdownFiles = getMarkdownFiles()
@@ -61,14 +62,14 @@ export async function generateStaticParams() {
   }
 }
 
-// 🔹 Limpia las comillas invertidas en fragmentos de código en línea
+
 function cleanInlineCode(content: string) {
   return content.replace(/<code>(.*?)<\/code>/g, (_, codeContent) => {
     return `<code class="bg-gray-200 text-gray-900 px-1 rounded">${codeContent.replace(/^`|`$/g, "")}</code>`
   })
 }
 
-// 🔹 Envuelve los bloques de código en `<CopyableCode />`
+
 function wrapCodeBlocksWithCopyable(content: string) {
   return parse(content, {
     replace: (domNode: any) => {
@@ -83,7 +84,7 @@ function wrapCodeBlocksWithCopyable(content: string) {
   })
 }
 
-// 🔹 Página principal de cada guía
+
 export default async function GuidePage({ params }: { params: { slug: string } }) {
   const { content, metadata } = await getGuideContent(params.slug)
   const cleanedInlineCode = cleanInlineCode(content)
@@ -96,6 +97,7 @@ export default async function GuidePage({ params }: { params: { slug: string } }
         {metadata?.description && <p className="text-lg text-gray-700 mb-8">{metadata.description}</p>}
         <div className="prose max-w-none text-[16px]">{parsedContent}</div>
       </div>
+      </footer2>
     </div>
   )
 }

web/app/guides/page.tsx

@@ -3,7 +3,7 @@ import fs from "fs"
 import path from "path"
 import matter from "gray-matter"
 import Link from "next/link"
-import Footer from "@/components/footer"
+import Footer from "@/components/footer2"
 
 const guidesDirectory = path.join(process.cwd(), "..", "guides")
 
@@ -64,7 +64,7 @@ export default function GuidesPage() {
           ))}
         </div>
       </div>
-      <Footer />
+      <Footer2 />
     </div>
   )
 }

web/components/footer2.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import Link from "next/link"
+import { MessageCircle } from "lucide-react"
+import Image from "next/image"
+
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white py-12">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col md:flex-row justify-between">
+          {/* Support Section - Left Side */}
+          <div className="flex flex-col items-start mb-8 md:mb-0">
+            <h4 className="text-lg font-semibold mb-4">Sponsor</h4>
+            <p className="text-gray-400 mb-4 max-w-md">
+              If you would like to support the project.
+            </p>
+            <a
+              href="https://ko-fi.com/G2G313ECAN"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:opacity-90 transition-opacity flex items-center"
+            >
+              <Image
+                src="https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/kofi.png"
+                alt="Support me on Ko-fi"
+                width={150}
+                height={40}
+                className="w-[150px] h-[40px] mr-[50px]"
+                loading="lazy"
+              />
+            </a>
+          </div>
+
+          {/* Connect Section - Right Side */}
+          <div className="flex flex-col items-start md:items-end">
+            <h4 className="text-lg font-semibold mb-4">Connect</h4>
+            <p className="text-gray-400 mb-4 max-w-md md:text-right">
+              Join the community discussions on GitHub to get help, share ideas, and contribute to the project. Every idea is welcome!
+            </p>
+            <Link
+              href="https://github.com/MacRimi/ProxMenux/discussions"
+              className="flex items-center text-blue-400 hover:text-blue-300 transition-colors duration-200"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <MessageCircle className="mr-2 h-5 w-5" />
+              Join the Discussion
+            </Link>
+          </div>
+        </div>
+
+        {/* Copyright - Center */}
+        <div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
+        <p>ProxMenux, an open-source and collaborative project by MacRimi.</p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+