puffin-app/app/layout.tsx
Matt 6b12e2ae2a
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m12s
Fix header spacing and homepage centering issues
- Changed layout padding from Tailwind pt-48 to inline style paddingTop: 110px for reliable CSS specificity
- Added negative margin to homepage hero section to maintain vertical centering
- Updated client components (About, Contact, HowItWorks) from py-12 to pb-12 for proper spacing
- All pages now have proper header clearance without content cutoff

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-02 19:13:15 +01:00

112 lines
3.7 KiB
TypeScript

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Script from 'next/script';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: {
default: 'Puffin Offset - Carbon Offsetting for Yachts',
template: '%s | Puffin Offset',
},
description: 'Premium carbon offset calculator and solutions for luxury yachts. Offset your vessel\'s carbon footprint with verified climate projects.',
keywords: ['carbon offset', 'yacht carbon offset', 'luxury yacht sustainability', 'marine carbon calculator', 'yacht emissions', 'climate action'],
authors: [{ name: 'Puffin Offset' }],
creator: 'Puffin Offset',
publisher: 'Puffin Offset',
metadataBase: new URL(process.env.NEXT_PUBLIC_API_BASE_URL || 'https://puffinoffset.com'),
alternates: {
canonical: '/',
},
openGraph: {
type: 'website',
locale: 'en_US',
url: 'https://puffinoffset.com',
title: 'Puffin Offset - Carbon Offsetting for Yachts',
description: 'Premium carbon offset calculator and solutions for luxury yachts. Offset your vessel\'s carbon footprint with verified climate projects.',
siteName: 'Puffin Offset',
images: [
{
url: '/puffinOffset.png',
width: 1200,
height: 630,
alt: 'Puffin Offset Logo',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Puffin Offset - Carbon Offsetting for Yachts',
description: 'Premium carbon offset calculator and solutions for luxury yachts.',
images: ['/puffinOffset.png'],
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
verification: {
// Add Google Search Console verification here when available
// google: 'your-verification-code',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={inter.className}>
<head>
{/* Preconnect to external domains for performance */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
{/* Favicon and app icons */}
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/puffinOffset.png" />
{/* PWA manifest */}
<link rel="manifest" href="/manifest.json" />
{/* Theme color */}
<meta name="theme-color" content="#1E40AF" />
</head>
<body className="flex flex-col min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 wave-pattern">
{/* Google Analytics - using Next.js Script component for security and performance */}
{process.env.NODE_ENV === 'production' && (
<>
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
`}
</Script>
</>
)}
<Header />
<main className="flex-1 max-w-[1600px] w-full mx-auto pb-8 sm:pb-12 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ paddingTop: '110px' }}>
{children}
</main>
<Footer />
</body>
</html>
);
}