Files
worldcup/app/layout.tsx
T
valknar 479c3d93e4 fix: constrain nav and footer content to max-w-[1200px] like main content
Nav keeps full-width background; inner content wrapped in max-w-[1200px]
mx-auto px-7 container to align with page content width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-14 21:46:33 +02:00

45 lines
1.8 KiB
TypeScript

import type { Metadata } from 'next'
import { Bebas_Neue, Space_Grotesk } from 'next/font/google'
import './globals.css'
import { Nav } from '@/components/nav'
import { AppApolloProvider } from '@/components/apollo-provider'
const bebasNeue = Bebas_Neue({ weight: '400', subsets: ['latin'], variable: '--font-bebas' })
const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-space' })
export const metadata: Metadata = {
title: { default: 'World Cup', template: '%s · World Cup' },
description: 'Comprehensive World Cup statistics from 1930 to 2026',
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
],
apple: [
{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
],
},
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" data-scroll-behavior="smooth" className={`${bebasNeue.variable} ${spaceGrotesk.variable}`}>
<body>
<AppApolloProvider>
<Nav />
<main className="pt-[60px] min-h-screen">{children}</main>
<footer className="border-t mt-8" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
<div className="max-w-[1200px] mx-auto px-7 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] text-[#1a3a22]">
<span>© {new Date().getFullYear()} World Cup Statistics. Data via openfootball.</span>
<a href="https://dev.pivoine.art" target="_blank" rel="noopener noreferrer"
className="text-[#2a5c35] hover:text-[#22c55e] transition-colors">
dev.pivoine.art
</a>
</div>
</footer>
</AppApolloProvider>
</body>
</html>
)
}