Landing page

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>
+  );
+}

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>
+  );
+}

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>
+    <div className="flex flex-col items-center gap-y-8 pt-4">
-      <h1>Spooky Spotify Showcase</h1>
+      <div className="text-center">
-      <SpotifyLogin />
+        <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>
   );
 }

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" />

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 */
+}