- Hero: gradient text, enhanced CTAs, improved terminal styling - Features: color-coded cards (blue/purple/cyan) with hover effects - Why: card grid layout with color-coded left borders - CTA: stronger visual hierarchy with gradient text - Accessibility: skip-to-content link, main landmark - Remove duplicate main tag from page.tsx Co-Authored-By: Paperclip <noreply@paperclip.ing>
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Inter, JetBrains_Mono } from "next/font/google";
|
|
import "./globals.css";
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
|
|
const inter = Inter({
|
|
subsets: ["latin"],
|
|
variable: "--font-inter",
|
|
});
|
|
|
|
const jetbrainsMono = JetBrains_Mono({
|
|
subsets: ["latin"],
|
|
variable: "--font-mono",
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Hatch — Self-hostable HTTP request inspector + mocker",
|
|
description: "Hatch is a self-hostable HTTP request inspector and mocker. One Go binary, SQLite, no SaaS, no per-request fee. Open source, MIT.",
|
|
openGraph: {
|
|
title: "Hatch — Self-hostable HTTP request inspector + mocker",
|
|
description: "Hatch is a self-hostable HTTP request inspector and mocker. One Go binary, SQLite, no SaaS, no per-request fee. Open source, MIT.",
|
|
url: "https://hatch.surf",
|
|
siteName: "Hatch",
|
|
images: [
|
|
{
|
|
url: "/brand/og/default.png",
|
|
width: 1200,
|
|
height: 630,
|
|
},
|
|
],
|
|
type: "website",
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title: "Hatch — Self-hostable HTTP request inspector + mocker",
|
|
description: "Hatch is a self-hostable HTTP request inspector and mocker. One Go binary, SQLite, no SaaS, no per-request fee. Open source, MIT.",
|
|
images: ["/brand/og/default.png"],
|
|
},
|
|
icons: {
|
|
icon: "/brand/favicon/favicon-48.png",
|
|
},
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
|
|
<body className="min-h-screen bg-zinc-950 text-white font-sans antialiased">
|
|
<a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-500 focus:text-white focus:rounded-lg">
|
|
Skip to content
|
|
</a>
|
|
<Header />
|
|
<main id="main-content" role="main">
|
|
{children}
|
|
</main>
|
|
<Footer />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|