feat: add CMS info footer popup

src/components/cms-info-popup.test.tsx

@@ -0,0 +1,10 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { CmsInfoPopup } from "@/components/cms-info-popup";
+
+describe("CmsInfoPopup", () => {
+  it("renders the footer trigger", () => {
+    const html = renderToStaticMarkup(<CmsInfoPopup />);
+    expect(html).toContain("CMS Info");
+  });
+});

src/components/cms-info-popup.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const cmsDetails = [
+  ["Edition", "Next.js rebuild"],
+  ["Interface", "Public CMS"],
+  ["Runtime", "Next.js App Router"],
+];
+
+const credits = [
+  ["Remco", "AtomCMS direction and original project"],
+  ["Life", "Next.js experience and CMS refinements"],
+];
+
+export function CmsInfoPopup() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.location.hash === "#cms-info") setOpen(true);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  return (
+    <>
+      <button type="button" className="cms-info-trigger" onClick={() => setOpen(true)}>
+        CMS Info
+      </button>
+      {open ? (
+        <div className="cms-info-backdrop" role="presentation" onMouseDown={() => setOpen(false)}>
+          <section aria-labelledby="cms-info-title" aria-modal="true" className="cms-info-dialog" role="dialog" onMouseDown={(event) => event.stopPropagation()}>
+            <button type="button" aria-label="Close CMS info" className="cms-info-close" onClick={() => setOpen(false)}>x</button>
+            <div className="cms-info-kicker">CMS information</div>
+            <h2 id="cms-info-title">AtomCMS</h2>
+            <div className="cms-info-badge">Next.js edition</div>
+            <p className="cms-info-copy">A modern web layer for the hotel community, focused on fast navigation, clean administration, and a familiar AtomCMS experience.</p>
+            <dl className="cms-info-grid">
+              {cmsDetails.map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}
+            </dl>
+            <div className="cms-info-credit-list" aria-label="Credits">
+              {credits.map(([name, role]) => <div className="cms-info-credit" key={name}><span>{name}</span><small>{role}</small></div>)}
+            </div>
+          </section>
+        </div>
+      ) : null}
+    </>
+  );
+}

src/components/site-footer.tsx

@@ -1,4 +1,5 @@
 import { getTranslations } from "next-intl/server";
+import { CmsInfoPopup } from "@/components/cms-info-popup";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export async function SiteFooter() {
@@ -8,7 +9,7 @@ export async function SiteFooter() {
 
   return (
     <footer
-      className="mt-auto flex h-14 w-full flex-col items-center justify-center text-sm md:flex-row md:px-8"
+      className="mt-auto flex min-h-14 w-full flex-col items-center justify-center gap-1 px-4 py-3 text-sm md:flex-row md:gap-3 md:px-8"
       style={{
         backgroundColor: "var(--color-surface)",
         color: "var(--color-text-muted-readable, var(--color-text-muted))",
@@ -17,6 +18,7 @@ export async function SiteFooter() {
       <div className="md:font-semibold text-[12px] md:text-[14px]">
         {t("copyright", { year, hotel: hotelName ?? "Atom" })}
       </div>
+      <CmsInfoPopup />
     </footer>
   );
 }