Changed titles

src/app/_components/h1.tsx

@@ -1,6 +1,14 @@
-export function TypographyH1({ children }: { children: React.ReactNode }) {
+export function TypographyH1({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    <h1
+      className={`scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl ${className}`}
+    >
       {children}
     </h1>
   );

src/app/_components/h2.tsx

@@ -1,12 +1,12 @@
-export function TypographyH2({
-  children,
-  className,
-}: {
+export function TypographyH2(props: {
   children: React.ReactNode;
   className?: string;
+  [key: string]: any;
 }) {
+  const { children, className, ...otherProps } = props;
   return (
     <h2
+      {...otherProps}
       className={`scroll-m-20 border-b border-none pb-2 text-3xl font-semibold tracking-tight first:mt-0 ${className}`}
     >
       {children}

src/app/_components/showcase.tsx

@@ -6,6 +6,7 @@ import AlbumShowcase from "./album-showcase";
 import ArtistShowcase from "./artist-showcase";
 import UserShowcase from "./user-showcase";
 import { TypographyH2 } from "./h2";
+import { TypographyH1 } from "./h1";
 
 export function Showcase({
   userData,
@@ -29,7 +30,9 @@ export function Showcase({
         <Switch isChecked={spookify} setIsChecked={setSpookify} />
       </div>
       <UserShowcase spookify={spookify} {...userData} />
-      <TypographyH2 className="justify-start">Tracks by album</TypographyH2>
+      <TypographyH1 className="mb-2 mt-8 self-baseline text-3xl lg:text-4xl">
+        Tracks by album
+      </TypographyH1>
       {Object.values(tracksByAlbum)
         .sort((a, b) => b.position - a.position)
         .map((album, index) => {
@@ -44,7 +47,9 @@ export function Showcase({
             />
           );
         })}
-      <h3>Artists images</h3>
+      <TypographyH1 className="mb-2 mt-8 self-baseline text-3xl lg:text-4xl">
+        Artists
+      </TypographyH1>
       <div
         style={{
           display: "flex",

src/styles/globals.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "ClimateCrisis";
+  src: url("../../public/fonts/ClimateCrisis-Regular.ttf");
+}
+
 .external-link {
   color: #5bc0eb; /* Light blue color */
   text-decoration: none;

tailwind.config.ts

@@ -8,6 +8,7 @@ export default {
     extend: {
       fontFamily: {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        climateCrisis: ["ClimateCrisis", ...fontFamily.sans],
       },
     },
   },