geekha/refactor footer

src/app/page.tsx

@@ -1,12 +1,13 @@
 import { ChevronDown, Star } from "lucide-react";
 
 import { Card } from "@/components/Card";
+import { Footer } from "@/components/Footer/Footer";
 import { Header } from "@/components/Header/Header";
 import { Mountain } from "@/components/Icons/Mountain";
 import { Title } from "@/components/Icons/Title";
 import { Link } from "@/components/Link";
 import { Particles } from "@/components/Particles";
-import { data, footer } from "@/lib/data";
+import { data } from "@/lib/data";
 import { getMetaData, getViewports } from "@/lib/metadata";
 import { cn } from "@/lib/utils";
 
@@ -94,23 +95,7 @@ export default function Home() {
           ))}
         </div>
       </main>
-      <footer className="relative z-10 p-4 font-koulen text-white">
-        <div className="container mx-auto flex flex-col items-center justify-center gap-4 lg:flex-row">
-          <div className="flex flex-col gap-4 text-center lg:flex-row lg:gap-8">
-            {footer.map((link) => (
-              <a
-                key={link.url}
-                href={link.url}
-                target="_blank"
-                rel="noreferrer"
-                className="hover:text-jsconf-yellow"
-              >
-                {link.name}
-              </a>
-            ))}
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </>
   );
 }

src/components/Footer/Footer.tsx

@@ -0,0 +1,73 @@
+import { HeaderLink } from "@/components/Header/HeaderLink";
+import { Logo } from "@/components/Icons/Logo";
+import { Title } from "@/components/Icons/Title";
+import { footer, links } from "@/lib/data";
+import { theme } from "@/lib/theme";
+
+export function Footer() {
+  return (
+    <footer className="relative z-10 text-white">
+      <div className="pointer-events-none absolute inset-0 z-10 hidden w-[60%] bg-gradient-to-r from-transparent via-jsconf-yellow to-transparent opacity-10 md:inline-block"></div>
+      <div className="pointer-events-none absolute inset-0 z-10 w-[80%] bg-gradient-to-r from-jsconf-yellow via-jsconf-yellow to-transparent opacity-10 md:hidden"></div>
+      <div className="mx-6 flex flex-col py-14 lg:mx-auto lg:w-11/12 xl:w-8/12">
+        <div className="absolute top-0 ml-[25%] w-full rounded-full bg-gradient-to-r from-transparent via-jsconf-yellow to-transparent p-[0.4px] lg:w-[550px]"></div>
+        <div className="flex w-full flex-col gap-8">
+          <div className="grid grid-cols-1 gap-6 px-6 lg:grid-cols-8 lg:gap-8 lg:px-0">
+            <div className="col-span-1 flex flex-col items-center gap-4 lg:col-span-2 lg:items-start">
+              <div className="flex">
+                <a href="/" className="flex items-center gap-3">
+                  <Logo color={theme?.colors?.jsconfYellow} size="52" />
+                  <Title width="82" />
+                </a>
+              </div>
+              <div className="flex items-center text-jsconf-yellow">
+                <span>Siguenos: </span>
+                <div className="ml-2 flex items-center gap-1">
+                  {links.map((link) => (
+                    <HeaderLink key={link.id} link={link} />
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-2 lg:items-start">
+              <p className="text-xl text-gray-400">Información</p>
+              {footer.map((link) => (
+                <a
+                  key={link.id}
+                  href={link.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="hover:text-jsconf-yellow"
+                >
+                  {link.name}
+                </a>
+              ))}
+            </div>
+            <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-4 lg:items-end">
+              <div className="flex flex-col justify-end gap-2">
+                <div className="flex w-full flex-col items-center justify-end gap-2 lg:flex-row">
+                  <a
+                    target="_blank"
+                    href="https://auth.jschile.org"
+                    className="w-full rounded-lg bg-jsconf-yellow p-2 py-3 text-center text-gray-800 transition-all duration-300 ease-in-out hover:bg-jsconf-red hover:text-white lg:w-36"
+                  >
+                    Suscribirme
+                  </a>
+                </div>
+                <p className="text-balance text-center text-sm text-gray-500 lg:text-right">
+                  Te haremos llegar información y <br />
+                  actualizaciones de la conferencia.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex">
+            <p className="w-full text-center text-gray-400">
+              Con ❤️ - El equipo JSConf Chile
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/Icons/Title.tsx

@@ -1,7 +1,12 @@
-export const Title = () => (
+interface propsType {
+  width?: string;
+  height?: string;
+}
+
+export const Title = ({ width = "100%", height = "100%" }: propsType) => (
   <svg
-    width="100%"
-    height="100%"
+    width={width}
+    height={height}
     viewBox="0 0 178 103"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/lib/data.ts

@@ -75,18 +75,17 @@ export const data = [
 export const footer = [
   {
     id: 1,
-    name: "Codigo de Conducta",
-    url: "https://github.com/jsconfcl/code_of_conduct",
+    name: "Código de conducta",
+    url: "https://github.com/JSConfCL/code_of_conduct/blob/main/README.md",
   },
-  { id: 2, name: "Contacto", url: "mailto:[email protected]" },
   {
-    id: 3,
-    name: "MIT Licencse  - JSConf Chile",
-    url: "https://github.com/JSConfCL/2024",
+    id: 2,
+    name: "Términos y condiciones",
+    url: "https://github.com/JSConfCL/code_of_conduct/blob/main/terminos_de_servicio/README.md",
   },
   {
-    id: 4,
-    name: "Con ❤️ - El equipo JSConf Chile",
-    url: "https://github.com/jsconfcl",
+    id: 3,
+    name: "Política de privacidad",
+    url: "https://github.com/JSConfCL/code_of_conduct/blob/main/politica_de_privacidad/README.md",
   },
 ];