Files
monthlytracker/src/app/layout.tsx

48 lines
1.5 KiB
TypeScript

import type { Metadata } from "next";
import { Fraunces, Manrope } from "next/font/google";
import { SiteNav } from "@/components/site-nav";
import "./globals.css";
const headingFont = Fraunces({
variable: "--font-heading",
subsets: ["latin"],
});
const bodyFont = Manrope({
variable: "--font-body",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Monthy Tracker",
description: "Local-first monthly expense tracking with AI insights.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
lang="en"
className={`${headingFont.variable} ${bodyFont.variable} h-full antialiased`}
>
<body className="min-h-full bg-[linear-gradient(180deg,#f8f3ea_0%,#f5efe4_28%,#fbfaf7_100%)] text-stone-950">
<div className="mx-auto flex min-h-full w-full max-w-7xl flex-col px-4 py-6 sm:px-6 lg:px-8">
<header className="mb-10 flex flex-col gap-4 rounded-[2rem] border border-white/70 bg-white/80 px-6 py-5 shadow-[0_20px_50px_rgba(120,90,50,0.08)] backdrop-blur sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-amber-700">Monthy Tracker</p>
<p className="mt-2 text-lg text-stone-600">Track the month as it unfolds, not after it slips away.</p>
</div>
<SiteNav />
</header>
<main className="flex-1 pb-10">{children}</main>
</div>
</body>
</html>
);
}