app-clever-panda-sprint/app/layout.tsx

137 lines
5.0 KiB
TypeScript

import type { Metadata } from "next";
import "./globals.css";
import { GeistSans } from "geist/font/sans";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/context/theme-provider";
import { NavBar } from "@/components/navbar";
import { KleapScripts } from "@/components/kleap-scripts";
import { DevToolsGuard } from "./devtools-guard";
import { TailwindCDNClient } from "@/components/tailwind-cdn-client";
export const metadata: Metadata = {
title: {
default: "Apex Young Detailers | Cedar Rapids Car Detailing",
template: "%s | Apex Young Detailers",
},
description:
"Real human car detailing by hardworking 13-year-old entrepreneurs in Cedar Rapids. No AI, just real elbow grease and professional results.",
keywords: ["Car Detailing", "Cedar Rapids", "Young Entrepreneurs", "Hand Wash", "Interior Cleaning"],
authors: [{ name: "Apex Young Detailers Team" }],
creator: "Apex Young Detailers",
publisher: "Apex Young Detailers",
icons: {
icon: "/favicon.ico",
shortcut: "/favicon.ico",
apple: "/favicon.ico",
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
"max-video-preview": -1,
"max-image-preview": "large",
"max-snippet": -1,
},
},
openGraph: {
type: "website",
locale: "en_US",
url: process.env.NEXT_PUBLIC_URL || "https://kleap.co",
siteName: "Apex Young Detailers",
title: "Apex Young Detailers | Cedar Rapids Car Detailing",
description:
"Real human car detailing by hardworking 13-year-old entrepreneurs in Cedar Rapids. No AI, just real elbow grease and professional results.",
images: [
{
url: "/og-image.png",
width: 1200,
height: 630,
alt: "Apex Young Detailers",
},
],
},
twitter: {
card: "summary_large_image",
title: "Apex Young Detailers | Cedar Rapids Car Detailing",
description:
"Real human car detailing by hardworking 13-year-old entrepreneurs in Cedar Rapids. No AI, just real elbow grease and professional results.",
images: ["/og-image.png"],
creator: "@yourtwitter",
},
metadataBase: new URL(process.env.NEXT_PUBLIC_URL || "https://kleap.co"),
alternates: {
canonical: "/",
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<head suppressHydrationWarning>
<style href="kleap-base-styles" precedence="high">{`
.bg-white { background-color: white; }
.bg-black { background-color: black; }
.text-white { color: white; }
.text-black { color: black !important; }
.text-neutral-700 { color: rgb(64 64 64) !important; }
.text-neutral-600 { color: rgb(82 82 82) !important; }
.text-neutral-500 { color: rgb(115 115 115) !important; }
.text-muted { color: rgb(82 82 82) !important; }
.antialiased { -webkit-font-smoothing: antialiased; }
.h-full { height: 100%; }
.w-full { width: 100%; }
.bg-primary { background-color: #020022; }
.text-primary-foreground { color: hsl(0 0% 98%); }
.hover\\:bg-primary\\/90:hover { background-color: rgba(2, 0, 34, 0.9); }
.bg-secondary { background-color: hsl(240 4.8% 95.9%); }
.text-secondary-foreground { color: hsl(240 5.9% 10%); }
.hover\\:bg-secondary\\/80:hover { background-color: hsla(240, 4.8%, 95.9%, 0.8); }
.bg-destructive { background-color: hsl(0 84.2% 60.2%); }
.text-destructive-foreground { color: hsl(0 0% 98%); }
.hover\\:bg-destructive\\/90:hover { background-color: hsla(0, 84.2%, 60.2%, 0.9); }
.border-input { border-color: hsl(240 5.9% 90%); }
.bg-background { background-color: hsl(0 0% 100%); }
.bg-accent { background-color: hsl(240 4.8% 95.9%); }
.text-accent-foreground { color: hsl(240 5.9% 10%); }
.hover\\:bg-accent:hover { background-color: hsl(240 4.8% 95.9%); }
.hover\\:text-accent-foreground:hover { color: hsl(240 5.9% 10%); }
.ring-offset-background { --tw-ring-offset-color: hsl(0 0% 100%); }
.focus-visible\\:ring-2:focus-visible { --tw-ring-width: 2px; }
.focus-visible\\:ring-ring:focus-visible { --tw-ring-color: hsl(240 5.9% 10%); }
.focus-visible\\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; }
body { opacity: 1; }
body:not(.css-loaded) { opacity: 0; }
`}</style>
</head>
<body
className={cn(
GeistSans.className,
"bg-white antialiased h-full w-full",
)}
suppressHydrationWarning
>
<TailwindCDNClient />
<DevToolsGuard />
<ThemeProvider
attribute="class"
enableSystem={false}
disableTransitionOnChange
defaultTheme="light"
>
<KleapScripts />
<main>
<NavBar />
{children}
</main>
</ThemeProvider>
</body>
</html>
);
}