Update app/layout.tsx
This commit is contained in:
parent
cf0166d8b4
commit
c008a2ec09
|
|
@ -0,0 +1,173 @@
|
|||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
// Tailwind CSS v4 - Empty on CodeSandbox (uses CDN), filled by postinstall on Vercel
|
||||
import "./tailwind.css";
|
||||
import { GeistSans } from "geist/font/sans";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ThemeProvider } from "@/context/theme-provider";
|
||||
import { NavBar } from "@/components/navbar";
|
||||
import { Footer } from "@/components/footer";
|
||||
import { KleapScripts } from "@/components/kleap-scripts";
|
||||
import { DevToolsGuard } from "./devtools-guard";
|
||||
import { TailwindCDNClient } from "@/components/tailwind-cdn-client";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: "Your SaaS Name - AI-Powered Solution",
|
||||
template: "%s | Your SaaS Name",
|
||||
},
|
||||
description:
|
||||
"Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.",
|
||||
keywords: ["SaaS", "AI", "Template", "Next.js", "React", "TypeScript"],
|
||||
authors: [{ name: "Your Name" }],
|
||||
creator: "Your Company",
|
||||
publisher: "Your Company",
|
||||
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: "Your SaaS Name",
|
||||
title: "Your SaaS Name - AI-Powered Solution",
|
||||
description:
|
||||
"Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.",
|
||||
images: [
|
||||
{
|
||||
url: "/og-image.png",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "Your SaaS Name",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Your SaaS Name - AI-Powered Solution",
|
||||
description:
|
||||
"Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.",
|
||||
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>
|
||||
{/*
|
||||
Tailwind CSS v4:
|
||||
- CodeSandbox: Uses CDN (loaded here in <head> BEFORE React)
|
||||
- Vercel: Uses compiled CSS via @tailwindcss/postcss (imported above)
|
||||
*/}
|
||||
|
||||
{/*
|
||||
CRITICAL: Base styles to prevent FOUC and hydration errors
|
||||
⚠️ DO NOT REMOVE OR MODIFY WITHOUT CAREFUL TESTING ⚠️
|
||||
React 19 requires href and precedence attributes on style tags
|
||||
*/}
|
||||
<style href="kleap-base-styles" precedence="high">{`
|
||||
/* Base styles to prevent FOUC - always rendered server+client */
|
||||
.bg-white { background-color: white; }
|
||||
.bg-black { background-color: black; }
|
||||
.text-white { color: white; }
|
||||
.text-black { color: black; }
|
||||
.dark .dark\\:bg-black { background-color: black; }
|
||||
.dark .dark\\:text-white { color: white; }
|
||||
.antialiased { -webkit-font-smoothing: antialiased; }
|
||||
.h-full { height: 100%; }
|
||||
.w-full { width: 100%; }
|
||||
|
||||
/*
|
||||
IMPORTANT: Button and shadcn/ui color styles
|
||||
These classes are NOT generated by Tailwind v4 CDN and MUST be defined manually
|
||||
Without these, buttons and shadcn components will appear unstyled
|
||||
DO NOT REMOVE - Required for all shadcn/ui components to work properly
|
||||
*/
|
||||
.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; }
|
||||
|
||||
/* Dark mode button styles */
|
||||
.dark .bg-primary { background-color: #020022; }
|
||||
.dark .text-primary-foreground { color: hsl(0 0% 98%); }
|
||||
.dark .bg-secondary { background-color: hsl(240 3.7% 15.9%); }
|
||||
.dark .text-secondary-foreground { color: hsl(0 0% 98%); }
|
||||
.dark .bg-destructive { background-color: hsl(0 62.8% 30.6%); }
|
||||
.dark .text-destructive-foreground { color: hsl(0 0% 98%); }
|
||||
.dark .border-input { border-color: hsl(240 3.7% 15.9%); }
|
||||
.dark .bg-background { background-color: hsl(240 10% 3.9%); }
|
||||
.dark .bg-accent { background-color: hsl(240 3.7% 15.9%); }
|
||||
.dark .text-accent-foreground { color: hsl(0 0% 98%); }
|
||||
.dark .ring-offset-background { --tw-ring-offset-color: hsl(240 10% 3.9%); }
|
||||
.dark .focus-visible\\:ring-ring:focus-visible { --tw-ring-color: hsl(240 4.9% 83.9%); }
|
||||
|
||||
/* FOUC Prevention - Hide until CSS loads */
|
||||
body { opacity: 0; transition: opacity 0.15s ease-in; }
|
||||
body.css-loaded { opacity: 1; }
|
||||
`}</style>
|
||||
</head>
|
||||
<body
|
||||
className={cn(
|
||||
GeistSans.className,
|
||||
"bg-white dark:bg-black antialiased h-full w-full",
|
||||
)}
|
||||
suppressHydrationWarning // Prevents browser extension conflicts
|
||||
>
|
||||
<DevToolsGuard />
|
||||
<TailwindCDNClient />
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
enableSystem={false}
|
||||
disableTransitionOnChange
|
||||
defaultTheme="light"
|
||||
>
|
||||
<KleapScripts />
|
||||
<main>
|
||||
<NavBar />
|
||||
{children}
|
||||
<Footer />
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue