feat: add auth

app/layout.tsx

@@ -1,13 +1,16 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Lora, Bricolage_Grotesque } from "next/font/google";
 import { ogDefault } from "@/lib/og";
 import { ThemeProvider } from "@/components/theme-provider";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { SiteHeader } from "@/components/site-header";
 import { SiteFooter } from "@/components/site-footer";
 import { TextSelectionToolbar } from "@/components/text-selection-toolbar";
 import { TextHighlighter } from "@/components/text-highlighter";
 import { AudioPlayerProvider, FloatingPlayer } from "@/components/audio-player";
+import { AuthProvider } from "@/components/auth/auth-provider";
+import { VerifyEmailBanner } from "@/components/auth/verify-email-banner";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -20,6 +23,26 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+// Editorial serif — used for verse text always, and for site titles when
+// the user enables "Serif Font" in reading settings.
+const lora = Lora({
+  variable: "--font-serif",
+  weight: ["400", "500", "600", "700"],
+  style: ["normal", "italic"],
+  subsets: ["latin", "latin-ext"],
+  display: "swap",
+});
+
+// Display sans — used for site titles when Serif Font is OFF (the default).
+// Bricolage Grotesque has slight humanist warmth so it pairs well with the
+// reverent aesthetic without feeling cold or generic.
+const bricolage = Bricolage_Grotesque({
+  variable: "--font-display",
+  weight: ["400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "Prabhupāda Says",
   description:
@@ -36,7 +59,7 @@ export default function RootLayout({
     <html
       lang="en"
       suppressHydrationWarning
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} ${lora.variable} ${bricolage.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
         <ThemeProvider
@@ -45,17 +68,21 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <AudioPlayerProvider>
-            <TooltipProvider>
-              {children}
-              <TextSelectionToolbar />
-              <Suspense fallback={null}>
-                <TextHighlighter />
-              </Suspense>
-              <FloatingPlayer />
-              <SiteFooter />
-            </TooltipProvider>
-          </AudioPlayerProvider>
+          <AuthProvider>
+            <AudioPlayerProvider>
+              <TooltipProvider>
+                <VerifyEmailBanner />
+                <SiteHeader />
+                {children}
+                <TextSelectionToolbar />
+                <Suspense fallback={null}>
+                  <TextHighlighter />
+                </Suspense>
+                <FloatingPlayer />
+                <SiteFooter />
+              </TooltipProvider>
+            </AudioPlayerProvider>
+          </AuthProvider>
         </ThemeProvider>
       </body>
     </html>