feat: add pixel font for hotel name, toggle text/logo on click in site header

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
-import { Nunito } from "next/font/google";
+import { Nunito, Pixelify_Sans } from "next/font/google";
 import { headers } from "next/headers";
 import type { ReactNode } from "react";
 import { Navigation } from "@/components/navigation";
@@ -22,6 +22,13 @@ const nunito = Nunito({
   variable: "--font-nunito",
 });
 
+const pixelFont = Pixelify_Sans({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  display: "swap",
+  variable: "--font-pixel",
+});
+
 export async function generateMetadata(): Promise<Metadata> {
   const hotel = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
   return {
@@ -42,7 +49,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
   const pathname = headersList.get("x-pathname") || headersList.get("next-url") || "";
   const isClient = pathname === "/client" || pathname.startsWith("/client/");
   return (
-    <html lang={locale} className={`app ${nunito.variable}`}>
+    <html lang={locale} className={`app ${nunito.variable} ${pixelFont.variable}`}>
       <head>
         {/* Apply the saved/default theme before first paint to avoid a flash. */}
         <script

src/components/site-header-title.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+interface SiteHeaderTitleProps {
+  hotelName: string;
+  logo: string;
+}
+
+export function SiteHeaderTitle({ hotelName, logo }: SiteHeaderTitleProps) {
+  const [showLogo, setShowLogo] = useState(!!logo);
+
+  return (
+    <Link
+      href="/"
+      className="transition-transform duration-300 hover:scale-105 mb-8 block"
+      onClick={(e) => {
+        if (logo) {
+          e.preventDefault();
+          setShowLogo((prev) => !prev);
+        }
+      }}
+    >
+      {showLogo && logo ? (
+        <img className="drop-shadow-2xl block mx-auto" src={logo} alt={hotelName} style={{ maxHeight: 120 }} />
+      ) : (
+        <h1
+          className="text-center font-extrabold tracking-tight leading-none text-white"
+          style={{
+            fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
+            textShadow: "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
+            letterSpacing: "-0.02em",
+            fontFamily: "var(--font-pixel), monospace",
+          }}
+        >
+          {hotelName} - Hotel
+        </h1>
+      )}
+    </Link>
+  );
+}

src/components/site-header.tsx

@@ -1,8 +1,8 @@
 import { getTranslations } from "next-intl/server";
-import Link from "next/link";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
+import { SiteHeaderTitle } from "@/components/site-header-title";
 
 export async function SiteHeader() {
   const t = await getTranslations("header");
@@ -44,22 +44,7 @@ export async function SiteHeader() {
 
       {/* Content */}
       <div className="relative flex flex-col items-center justify-center px-4 py-12 min-h-[18rem]">
-        <Link href="/" className="transition-transform duration-300 hover:scale-105 mb-8">
+        <SiteHeaderTitle hotelName={hotelName ?? "Atom"} logo={logo ?? ""} />
-          {logo ? (
-            <img className="drop-shadow-2xl block" src={logo} alt={hotelName ?? "Hotel"} style={{ maxHeight: 120 }} />
-          ) : (
-            <h1
-              className="text-center font-extrabold tracking-tight leading-none text-white"
-              style={{
-                fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
-                textShadow: "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
-                letterSpacing: "-0.02em",
-              }}
-            >
-              {hotelName} - Hotel
-            </h1>
-          )}
-        </Link>
 
         {/* Online badge */}
         <div