From 2f13c5c7bdea34f783e08738ffa6af37f7ef4c97 Mon Sep 17 00:00:00 2001
From: Valti <valentinalondono911@gmail.com>
Date: Tue, 29 Apr 2025 14:40:22 -0500
Subject: [PATCH] Update footer layout and styles

- Updated the background gradient for a smoother visual
- Reorganized text alignment for better readability
- Added hover effects for interactive feedback
---
 app/_components/Footer.tsx | 54 +++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/app/_components/Footer.tsx b/app/_components/Footer.tsx
index 86d08a7..f38e89a 100644
--- a/app/_components/Footer.tsx
+++ b/app/_components/Footer.tsx
@@ -1,31 +1,53 @@
+import Link from 'next/link';
+
 export default function Footer() {
   return (
-    <section className="flex flex-col p-8 gap-8 bg-linear-to-b from-black to-purple-950">
-      <div className="flex flex-row justify-between py-16 border-b gap-10 flex-wrap">
-        <div className="space-y-2 w-full">
-          <h3 className="text-xl font-semibold">ParChat</h3>
-          <h2 className="text-4xl font-bold whitespace-pre-line">Comunica, Conecta y Transmite</h2>
+    <section className="flex flex-col p-8 lg:px-20 gap-8 bg-linear-to-b from-mediumblue via-slate-950 to-violet-950">
+      <div className="flex flex-row justify-between py-16 border-b gap-10 flex-wrap lg:flex-nowrap">
+        <div className="space-y-2 text-center lg:text-left">
+          <h3 className="text-xl font-semibold motion-safe:animate-bounce">ParChat</h3>
+          <h2 className="text-4xl font-bold">
+            <span className="hover:text-purple-400 transition-colors duration-300">Comunica</span>,{' '}
+            <span className="hover:text-indigo-400 transition-colors duration-300">Conecta</span> y{' '}
+            <span className="hover:text-slate-400 transition-colors duration-300">Transmite</span>
+          </h2>
         </div>
-        <div className="flex flex-col sm:flex-row w-full justify-between flex-wrap gap-10">
+        <div className="flex flex-col sm:flex-row w-full justify-end flex-wrap gap-10 lg:gap-32">
           <div className="text-center flex flex-col gap-2">
             <h3 className="font-semibold">Stacks</h3>
-            <ul className="">
+            <ul className="space-y-3">
               <li>Sobre Nosotros</li>
               <li>Otros Proyectos</li>
-              <li>GitHub</li>
+              <li>
+                <a
+                  href="https://github.com/Parchat"
+                  className="text-white hover:text-purple-400 transition-colors duration-300"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  GitHub
+                </a>
+              </li>
             </ul>
           </div>
           <div className="text-center flex flex-col gap-2">
             <h3 className="font-semibold">Info</h3>
-            <ul className="">
+            <ul className="space-y-3">
               <li>Información</li>
               <li>Salas</li>
-              <li>Registro</li>
+              <li>
+                <Link
+                  href="/login"
+                  className="text-white hover:text-purple-400 transition-colors duration-300"
+                >
+                  Únete
+                </Link>
+              </li>
             </ul>
           </div>
           <div className="text-center flex flex-col gap-2">
             <h3 className="font-semibold">Contacto</h3>
-            <ul className="">
+            <ul className="space-y-3">
               <li>Tuluá, Valle</li>
               <li>Colombia</li>
               <li>3000000000</li>
@@ -33,9 +55,15 @@ export default function Footer() {
           </div>
         </div>
       </div>
-      <div className="flex flex-row justify-between px-4 text-[14px] text-babyblue">
+      <div className="flex flex-row justify-center lg:justify-between px-4 text-[14px] text-purple flex-wrap lg:flex-nowrap">
         <p>© 2025 ParChat. Todos los derechos reservados.</p>
-        <p>Hecho con amor por el equipo de Rippio ♥</p>
+        <p>
+          Hecho con amor por el equipo{' '}
+          <a href="https://rippio.netlify.app" target="_blank" rel="noopener noreferrer">
+            Rippio{' '}
+          </a>
+          ♥
+        </p>
       </div>
     </section>
   );