Files
zooqueen 86a0a93206 Zen is the face
The site fetched a third-party family from a font host at build time and
minted a per-build family name that <body> had to carry as a class, while
body itself was pinned to Arial. Two type systems, neither of them ours.

@hanzo/font ships Zen as woff2 in the package; its /css entry is @font-face
plus --font-zen-sans/--font-zen-mono, and globals.css binds those to
--font-sans/--font-mono, which is what Tailwind's utilities already read.
No request leaves the origin.

public/previews/{arch,betacrm-html} are vendored third-party template
samples served as previews; they name their own faces and are left alone.
2026-08-24 13:22:31 -07:00

107 lines
3.3 KiB
TypeScript

import type { Metadata } from "next";
// THE FACES. Zen is the Hanzo family and `@hanzo/font` is where it is authored;
// this entry is @font-face and nothing else, plus --font-zen-sans/--font-zen-mono
// on :root, which globals.css binds to --font-sans/--font-mono. First, so the
// faces are declared before anything reads them.
//
// It replaced `next/font/google`, which fetched a third-party family at build
// time and minted a per-build family name that every element then had to carry
// as a class. The faces ship in the package; nothing to remember to apply.
import "@hanzo/font/css";
import "./globals.css";
import { Header } from "./components/header";
import { Footer } from "./components/footer";
export const metadata: Metadata = {
metadataBase: new URL('https://gallery.hanzo.ai'),
title: {
default: "Hanzo Templates Gallery - 75+ Premium UI/UX Templates",
template: "%s | Hanzo Templates",
},
description: "Browse 75+ production-ready templates built with Next.js, React, and modern frameworks. Free, open-source templates for SaaS, portfolios, dashboards, blogs, and more. Deploy instantly to Hanzo Cloud.",
keywords: [
"Next.js templates",
"React templates",
"UI templates",
"SaaS templates",
"portfolio templates",
"dashboard templates",
"blog templates",
"free templates",
"open source templates",
"Hanzo templates",
"web templates",
"modern UI",
"responsive templates",
"TypeScript templates",
],
authors: [{ name: "Hanzo AI", url: "https://hanzo.ai" }],
creator: "Hanzo AI",
publisher: "Hanzo AI",
openGraph: {
type: "website",
locale: "en_US",
url: "https://gallery.hanzo.ai",
title: "Hanzo Templates Gallery - 75+ Premium UI/UX Templates",
description: "Browse 75+ production-ready templates built with Next.js, React, and modern frameworks. Free, open-source templates for SaaS, portfolios, dashboards, blogs, and more.",
siteName: "Hanzo Templates Gallery",
images: [
{
url: "/og-image.png",
width: 1200,
height: 630,
alt: "Hanzo Templates Gallery - Premium Templates Collection",
},
],
},
twitter: {
card: "summary_large_image",
title: "Hanzo Templates Gallery - 75+ Premium UI/UX Templates",
description: "Browse 75+ production-ready templates built with Next.js, React, and modern frameworks. Deploy instantly to Hanzo Cloud.",
images: ["/twitter-image.png"],
creator: "@hanzoai",
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
viewport: {
width: 'device-width',
initialScale: 1,
maximumScale: 5,
},
themeColor: [
{ media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
],
icons: {
icon: '/favicon.ico',
apple: '/apple-icon.png',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="dark">
<body className="antialiased bg-[#0a0a0a] text-white">
<Header />
<main className="pt-16">
{children}
</main>
<Footer />
</body>
</html>
);
}