From 948defbcb882d17006b91a6e91a6a2f7e29982e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B4natas=20A=2E?= <jonatasaraujo2257@gmail.com>
Date: Sun, 4 Aug 2024 13:30:49 -0300
Subject: [PATCH] feat: Update Footer component to improve layout and add
 useful links

---
 src/components/Footer.tsx | 52 +++++++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5f6df8c..e81ad2c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,16 +1,48 @@
 import Link from "next/link";
 
 const Footer: React.FC = () => (
-  <footer className="py-4 text-center text-sm text-gray-500">
-    Feito com ❤️ por{" "}
-    <Link
-      href="https://jnaraujo.com/"
-      target="_blank"
-      className="text-violet-600 underline hover:text-violet-700"
-    >
-      Jônatas Araújo
-    </Link>{" "}
-    - {new Date().getFullYear()}
+  <footer className="container grid grid-cols-1 gap-4 py-4 text-center text-gray-500 md:grid-cols-2 md:text-start">
+    <p className="text-sm text-zinc-500 dark:text-stone-400">
+      Feito com ❤️ por{" "}
+      <Link
+        href="https://jnaraujo.com/"
+        target="_blank"
+        className="text-violet-600 underline hover:text-violet-700 dark:text-violet-400"
+      >
+        Jônatas Araújo
+      </Link>{" "}
+      - {new Date().getFullYear()}
+    </p>
+
+    <div className="md:justify-self-end">
+      <h5 className="text-lg font-semibold text-zinc-700">Links úteis:</h5>
+      <ul className="space-y-1">
+        <li>
+          <a
+            className="text-sm text-violet-600 underline hover:text-violet-700 dark:text-violet-400"
+            href="/contador-de-palavras"
+          >
+            Contador de Palavras
+          </a>
+        </li>
+        <li>
+          <a
+            className="text-sm text-violet-600 underline hover:text-violet-700 dark:text-violet-400"
+            href="/editor"
+          >
+            Editor de Leiturabilidade
+          </a>
+        </li>
+        <li>
+          <a
+            className="text-sm text-violet-600 underline hover:text-violet-700 dark:text-violet-400"
+            href="/blog"
+          >
+            Blog
+          </a>
+        </li>
+      </ul>
+    </div>
   </footer>
 );