From 8edceaa982461db8f92ac412368656087aaaaa61 Mon Sep 17 00:00:00 2001
From: Jose Lezama <me@joseglego.io>
Date: Thu, 28 Mar 2024 09:49:36 -0300
Subject: [PATCH] feat(Index): show link for CFP

---
 src/app/cfp/page.tsx | 47 ++++++++++++++++++++++++++------------------
 src/app/page.tsx     | 25 ++++++++++++++---------
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/app/cfp/page.tsx b/src/app/cfp/page.tsx
index 9d1662e..b84981f 100644
--- a/src/app/cfp/page.tsx
+++ b/src/app/cfp/page.tsx
@@ -1,10 +1,14 @@
 import { CallToActionProps, Hero, ImageProps } from "@/sections/Hero/Hero";
 import { Header } from "@/components/Header/Header";
-import { getMetaData, getViewports } from "@/lib/metadata";
-
 import { cfp as data, footer } from "@/lib/data";
+import { getMetaData, getViewports } from "@/lib/metadata";
 
-export const generateMetadata = getMetaData;
+export const generateMetadata = () =>
+  getMetaData({
+    title: "CFP - Call For Proposals | JSConf Chile",
+    description:
+      "Únete a JSConf Chile como ponente. Comparte tus innovaciones en JavaScript y conecta con líderes tecnológicos. Envía tu propuesta.",
+  });
 
 export const generateViewport = getViewports;
 
@@ -23,28 +27,33 @@ export default function Home() {
           <div className="w-full md:w-7/12">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
-              className="mx-auto rounded-2xl w-full"
+              className="mx-auto w-full rounded-2xl"
               src={data.sections[1].image.src}
               alt={data.sections[1].image.name}
             />
           </div>
-          <div className="w-full md:w-5/12 rounded-2xl bg-gradient-to-tr from-jsconf-black via-jsconf-black to-jsconf-yellow p-[2px]">
-            <div className="rounded-2xl bg-gradient-to-br from-slate-950 to-jsconf-black w-full h-full font-barlow px-5 py-8  md:p-12">
-            <h2 className="text-4xl font-semibold uppercase pb-10 text-center md:text-left">
-              {data.sections[1]?.benefits?.title}
-            </h2>
-            <div className="flex flex-row">
-              <div>
-                <div className="relative top-[16px] mx-4 h-full w-[2px] shrink-0 bg-gradient-to-b from-jsconf-yellow via-jsconf-black via-70% to-transparent md:to-90%" />
+          <div className="w-full rounded-2xl bg-gradient-to-tr from-jsconf-black via-jsconf-black to-jsconf-yellow p-[2px] md:w-5/12">
+            <div className="size-full rounded-2xl bg-gradient-to-br from-slate-950 to-jsconf-black px-5 py-8 font-barlow md:p-12">
+              <h2 className="pb-10 text-center text-4xl font-semibold uppercase md:text-left">
+                {data.sections[1]?.benefits?.title}
+              </h2>
+              <div className="flex flex-row">
+                <div>
+                  <div className="relative top-[16px] mx-4 h-full w-[2px] shrink-0 bg-gradient-to-b from-jsconf-yellow via-jsconf-black via-70% to-transparent md:to-90%" />
+                </div>
+                <ul className="flex flex-col gap-4 leading-7">
+                  {data.sections[1]?.benefits?.list.map((benefit) => (
+                    <li
+                      className="relative before:absolute before:left-[-23px] before:top-[10px] before:inline-block before:size-3 before:rounded-full before:bg-gradient-radial before:from-jsconf-yellow before:to-transparent before:to-70% before:content-['']"
+                      key={benefit}
+                    >
+                      {benefit}
+                    </li>
+                  ))}
+                </ul>
               </div>
-              <ul className="flex flex-col gap-4 leading-7">
-                {data.sections[1]?.benefits?.list.map(benefit => (
-                  <li className="relative before:content-[''] before:inline-block before:w-3 before:absolute before:h-3 before:rounded-full before:left-[-23px] before:top-[10px] before:bg-gradient-radial before:from-jsconf-yellow before:to-transparent before:to-70%"key={benefit}>{benefit}</li>
-                ))}
-              </ul>
             </div>
-            </div>
-          </div>          
+          </div>
         </div>
       </main>
       <footer className="relative z-10 p-4 font-koulen text-white">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 73422a7..b6b69d3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown, Star } from "lucide-react";
+import { ChevronDown, ScrollText, Star } from "lucide-react";
 
 import { EventInfo } from "@/sections/EventInfo/EventInfo";
 import { Card } from "@/components/Card";
@@ -47,14 +47,21 @@ export default function Home() {
                 Buscamos sponsors para talento, exposición de marca o
                 lanzamientos innovadores. ¿Listo para destacar? ¡Háznoslo saber!
               </div>
-              <div className="mx-auto inline-block">
-                <Link
-                  href="https://tally.so/r/mO5j9A"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Ser Sponsor <Star size={16} />
-                </Link>
+              <div className="flex flex-col justify-center gap-2 md:flex-row md:gap-4">
+                <div className="w-full md:w-auto">
+                  <Link
+                    href="https://tally.so/r/mO5j9A"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Ser Sponsor <Star size={16} />
+                  </Link>
+                </div>
+                <div className="w-full md:w-auto">
+                  <Link href="/cfp" variant="outline">
+                    Registro CFP <ScrollText size={16} />
+                  </Link>
+                </div>
               </div>
               <a
                 href="#more-info"