Triviaverse / src /app /layout.tsx
Simeon Garratt
feat: add OG social images for Triviaverse, Spark, and Game Night
ab8ef15
Raw
History Blame Contribute Delete
2.18 kB
import type { Metadata } from "next";
import { Inter, Caveat } from "next/font/google";
import "./globals.css";
import Starfield from "@/components/ui/Starfield";
import { Providers } from "@/components/Providers";
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const caveat = Caveat({ subsets: ["latin"], variable: "--font-caveat", weight: ["400", "500", "600", "700"] });
export const metadata: Metadata = {
metadataBase: new URL("https://thetriviaverse.com"),
title: "Triviaverse — Multiplayer Trivia Battle Arena",
description: "Test your knowledge. Prove your worth. Real-time multiplayer trivia with ELO matchmaking.",
openGraph: {
title: "Triviaverse — Multiplayer Trivia Battle Arena",
description: "Test your knowledge. Prove your worth. Real-time multiplayer trivia with ELO matchmaking.",
images: [{ url: "/og-image.png", width: 1200, height: 630, alt: "Triviaverse" }],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Triviaverse — Multiplayer Trivia Battle Arena",
description: "Test your knowledge. Prove your worth. Real-time multiplayer trivia with ELO matchmaking.",
images: ["/og-image.png"],
},
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${inter.variable} ${caveat.variable}`}>
<body className="relative overflow-x-hidden antialiased">
{/* Decorative gradient blobs */}
<div
aria-hidden="true"
className="pointer-events-none fixed left-0 top-0 z-[-1] h-[400px] w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-magenta opacity-10 mix-blend-screen blur-[120px]"
/>
<div
aria-hidden="true"
className="pointer-events-none fixed bottom-0 right-0 z-[-1] h-[500px] w-[500px] translate-x-1/3 translate-y-1/3 rounded-full bg-gold opacity-10 mix-blend-screen blur-[150px]"
/>
<Providers>
{/* Starfield inside Providers so it receives CosmeticContext for rainbow cosmetic */}
<Starfield />
{children}
</Providers>
</body>
</html>
);
}