geekha/fix-hero-remove-pointer-events

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";
 
@@ -19,7 +20,7 @@ export default function Home() {
     <>
       <main className="text-white">
         <div className="relative h-screen">
-          <div className="absolute inset-0">
+          <div className="pointer-events-none absolute inset-0">
             <div className="flex h-screen w-full items-center justify-center">
               <div className="absolute">
                 <div className="relative -z-30 mx-auto w-[400px] max-w-[90%] animate-gradient-svg from-mountain-primary to-mountain-secondary blur-[1px] md:w-[746px] md:blur-sm lg:w-[900px] xl:w-[1200px]">
@@ -94,7 +95,7 @@ export default function Home() {
           ))}
         </div>
       </main>
-      <footer className="relative z-10 p-4 font-koulen text-white">
+      {/* <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) => (
@@ -110,7 +111,8 @@ export default function Home() {
             ))}
           </div>
         </div>
-      </footer>
+      </footer> */}
+      <Footer />
     </>
   );
 }

src/components/Footer/Footer.tsx

@@ -0,0 +1,75 @@
+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 z-10 h-[580px] w-[40%] bg-gradient-to-r from-transparent via-yellow-400 to-transparent opacity-[0.1] lg:h-[290px] lg:w-[60%]"></div>
+      <div className="mx-6 flex flex-col py-14 lg:mx-auto lg:w-11/12 xl:w-8/12">
+        <div className="flex w-full flex-col gap-8">
+          <div className="grid grid-cols-1 gap-6 px-20 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-1">
+                  <Logo color={theme?.colors?.jsconfYellow} size="38" />
+                  <Title width="64" height="46" />
+                </a>
+              </div>
+              <div className="flex items-center">
+                <span>Siguenos: </span>
+                <div className="ml-2 flex items-center gap-1 text-jsconf-yellow">
+                  {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">
+                <form className="flex w-full flex-col items-center justify-end gap-2 lg:flex-row">
+                  <input
+                    type="text"
+                    placeholder="Ingresa tu correo y suscribete ..."
+                    className="flex w-full flex-1 rounded-lg border border-gray-500 bg-transparent p-2 text-gray-500 lg:max-w-[300px]"
+                  />
+                  <button
+                    type="submit"
+                    className="w-full rounded-lg bg-jsconf-yellow p-2 text-gray-800 lg:w-36"
+                  >
+                    Suscribirme
+                  </button>
+                </form>
+                <p className="text-balance text-right text-sm text-gray-500">
+                  Te haremos llegar información y actualizaciones de la
+                  conferencia
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex">
+            <p className="w-full text-center">
+              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",
+    name: "Código de conducta",
     url: "https://github.com/jsconfcl/code_of_conduct",
   },
-  { 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: "#",
   },
   {
-    id: 4,
-    name: "Con ❤️ - El equipo JSConf Chile",
-    url: "https://github.com/jsconfcl",
+    id: 3,
+    name: "Política de privacidad",
+    url: "#",
   },
 ];