kleap
/
app-clever-panda-sprint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update app/layout.tsx

This commit is contained in:
kleap-admin 2026-01-16 16:31:28 +00:00
parent 86eb0e84b4
commit 60f883b5b9
1 changed files with 14 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/layout.tsx
View File

@ -10,15 +10,15 @@ import { TailwindCDNClient } from "@/components/tailwind-cdn-client";
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
default: "Apex Detailing - Premium Auto Detailing in Cedar Rapids - AI-Powered Solution", default: "Apex Young Detailers | Cedar Rapids Car Detailing",
template: "%s | Apex Detailing - Premium Auto Detailing in Cedar Rapids", template: "%s | Apex Young Detailers",
}, },
description: description:
"Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.", "Real human car detailing by hardworking 13-year-old entrepreneurs in Cedar Rapids. No AI, just real elbow grease and professional results.",
keywords: ["SaaS", "AI", "Template", "Next.js", "React", "TypeScript"], keywords: ["Car Detailing", "Cedar Rapids", "Young Entrepreneurs", "Hand Wash", "Interior Cleaning"],
authors: [{ name: "Apex Detailing Team" }], authors: [{ name: "Apex Young Detailers Team" }],
creator: "Apex Detailing", creator: "Apex Young Detailers",
publisher: "Apex Detailing", publisher: "Apex Young Detailers",
icons: { icons: {
icon: "/favicon.ico", icon: "/favicon.ico",
shortcut: "/favicon.ico", shortcut: "/favicon.ico",
@ -39,24 +39,24 @@ export const metadata: Metadata = {
type: "website", type: "website",
locale: "en_US", locale: "en_US",
url: process.env.NEXT_PUBLIC_URL || "https://kleap.co", url: process.env.NEXT_PUBLIC_URL || "https://kleap.co",
siteName: "Apex Detailing - Premium Auto Detailing in Cedar Rapids", siteName: "Apex Young Detailers",
title: "Apex Detailing - Premium Auto Detailing in Cedar Rapids - AI-Powered Solution", title: "Apex Young Detailers | Cedar Rapids Car Detailing",
description: description:
"Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.", "Real human car detailing by hardworking 13-year-old entrepreneurs in Cedar Rapids. No AI, just real elbow grease and professional results.",
images: [ images: [
{ {
url: "/og-image.png", url: "/og-image.png",
width: 1200, width: 1200,
height: 630, height: 630,
alt: "Apex Detailing - Premium Auto Detailing in Cedar Rapids", alt: "Apex Young Detailers",
}, },
], ],
}, },
twitter: { twitter: {
card: "summary_large_image", card: "summary_large_image",
title: "Apex Detailing - Premium Auto Detailing in Cedar Rapids - AI-Powered Solution", title: "Apex Young Detailers | Cedar Rapids Car Detailing",
description: description:
"Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.", "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"], images: ["/og-image.png"],
creator: "@yourtwitter", creator: "@yourtwitter",
}, },
@ -74,13 +74,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<head suppressHydrationWarning> <head suppressHydrationWarning>
{/*
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">{` <style href="kleap-base-styles" precedence="high">{`
/* Base styles to prevent FOUC - always rendered server+client */
.bg-white { background-color: white; } .bg-white { background-color: white; }
.bg-black { background-color: black; } .bg-black { background-color: black; }
.text-white { color: white; } .text-white { color: white; }
@ -92,13 +86,6 @@ export default function RootLayout({
.antialiased { -webkit-font-smoothing: antialiased; } .antialiased { -webkit-font-smoothing: antialiased; }
.h-full { height: 100%; } .h-full { height: 100%; }
.w-full { width: 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; } .bg-primary { background-color: #020022; }
.text-primary-foreground { color: hsl(0 0% 98%); } .text-primary-foreground { color: hsl(0 0% 98%); }
.hover\\:bg-primary\\/90:hover { background-color: rgba(2, 0, 34, 0.9); } .hover\\:bg-primary\\/90:hover { background-color: rgba(2, 0, 34, 0.9); }
@ -118,8 +105,6 @@ export default function RootLayout({
.focus-visible\\:ring-2:focus-visible { --tw-ring-width: 2px; } .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-ring:focus-visible { --tw-ring-color: hsl(240 5.9% 10%); }
.focus-visible\\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; } .focus-visible\\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; }
/* FOUC prevention - hide body until CSS is loaded */
body { opacity: 1; } body { opacity: 1; }
body:not(.css-loaded) { opacity: 0; } body:not(.css-loaded) { opacity: 0; }
`}</style> `}</style>
@ -129,7 +114,7 @@ export default function RootLayout({
GeistSans.className, GeistSans.className,
"bg-white antialiased h-full w-full", "bg-white antialiased h-full w-full",
)} )}
suppressHydrationWarning // Prevents browser extension conflicts suppressHydrationWarning
> >
<TailwindCDNClient /> <TailwindCDNClient />
<DevToolsGuard /> <DevToolsGuard />