From a11ed74017dfb0c0ee515e26c5ffefcb5c95f2c7 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Fri, 11 Oct 2024 22:39:38 -0300
Subject: [PATCH] Landing page

---
 src/app/_components/h1.tsx            |  7 +++++++
 src/app/_components/h4.tsx            | 15 +++++++++++++++
 src/app/_components/login-page.tsx    | 21 ++++++++++++++++++---
 src/app/_components/spotify-login.tsx |  4 ++--
 src/styles/globals.css                | 26 ++++++++++++++++++++++++++
 5 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/app/_components/h1.tsx
 create mode 100644 src/app/_components/h4.tsx

diff --git a/src/app/_components/h1.tsx b/src/app/_components/h1.tsx
new file mode 100644
index 0000000..20a0d9f
--- /dev/null
+++ b/src/app/_components/h1.tsx
@@ -0,0 +1,7 @@
+export function TypographyH1({ children }: { children: React.ReactNode }) {
+  return (
+    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+      {children}
+    </h1>
+  );
+}
diff --git a/src/app/_components/h4.tsx b/src/app/_components/h4.tsx
new file mode 100644
index 0000000..b2a07db
--- /dev/null
+++ b/src/app/_components/h4.tsx
@@ -0,0 +1,15 @@
+export function TypographyH4({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className: string;
+}) {
+  return (
+    <h4
+      className={`scroll-m-20 text-xl font-semibold tracking-tight ${className}`}
+    >
+      {children}
+    </h4>
+  );
+}
diff --git a/src/app/_components/login-page.tsx b/src/app/_components/login-page.tsx
index 1500089..2e02e77 100644
--- a/src/app/_components/login-page.tsx
+++ b/src/app/_components/login-page.tsx
@@ -1,10 +1,25 @@
+import Link from "next/link";
+import { TypographyH1 } from "./h1";
+import { TypographyH4 } from "./h4";
 import SpotifyLogin from "./spotify-login";
 
 export function LoginPage() {
   return (
-    <div>
-      <h1>Spooky Spotify Showcase</h1>
-      <SpotifyLogin />
+    <div className="flex flex-col items-center gap-y-8 pt-4">
+      <div className="text-center">
+        <TypographyH1>Spooky Spotify Showcase</TypographyH1>
+        <TypographyH4 className="font-normal opacity-90">
+          <a
+            className="external-link"
+            href="https://cloudinary.com/blog/cloudinary-cloudcreate-spooky-ai-hackathon"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <code>franp-code</code>'s Cloudinary participation
+          </a>
+        </TypographyH4>
+      </div>
+      <SpotifyLogin className="grow-0" />
     </div>
   );
 }
diff --git a/src/app/_components/spotify-login.tsx b/src/app/_components/spotify-login.tsx
index b4e579f..5ae69cc 100644
--- a/src/app/_components/spotify-login.tsx
+++ b/src/app/_components/spotify-login.tsx
@@ -2,14 +2,14 @@
 
 import { MdiSpotify } from "./spotify-icon";
 
-export default function SpotifyLogin() {
+export default function SpotifyLogin({ className }: { className?: string }) {
   const loginToSpotify = () => {
     window.location.href = "/api/spotify-login";
   };
 
   return (
     <button
-      className="flex items-center justify-center gap-1 rounded-full bg-green-500 py-2 pl-4 pr-5 font-bold text-white hover:bg-green-700"
+      className={`flex items-center justify-center gap-1 rounded-full bg-green-500 py-2 pl-4 pr-5 font-bold text-white hover:bg-green-700 ${className}`}
       onClick={loginToSpotify}
     >
       <MdiSpotify className="h-10 w-10" />
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c9..8b37e71 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.external-link {
+  color: #5bc0eb; /* Light blue color */
+  text-decoration: none;
+  font-weight: 500;
+  transition:
+    filter 0.3s ease,
+    text-decoration 0.3s ease;
+}
+
+.external-link:hover {
+  filter: brightness(0.85); /* Slightly darken the color on hover */
+  text-decoration: underline;
+}
+
+.external-link:active {
+  filter: brightness(0.8); /* Even darker blue when clicked */
+}
+
+code {
+  background-color: #f5f5f512; /* Light gray background to mimic a code block */
+  border: 1px solid #e0e0e012; /* Subtle border */
+  border-radius: 4px; /* Rounded corners */
+  color: #d63384d0; /* Code text color (optional, adjust as needed) */
+  white-space: pre-wrap; /* Handle long code lines by wrapping */
+}