import type React from “react”
import type { Metadata } from “next”
import { Inter } from “next/font/google”
import { Libre_Baskerville } from “next/font/google”
import { Analytics } from “@vercel/analytics/next”
import { Suspense } from “react”
import “./globals.css”
const inter = Inter({
subsets: [“latin”],
variable: “–font-inter”,
display: “swap”,
})
const libreBaskerville = Libre_Baskerville({
weight: [“400”, “700”],
subsets: [“latin”],
variable: “–font-libre-baskerville”,
display: “swap”,
})
export const metadata: Metadata = {
title: “The National Express – Breaking News & Analysis”,
description: “Your trusted source for breaking news, in-depth analysis, and expert commentary”,
generator: “v0.app”,
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang=”en”>
<body className={`font-sans ${inter.variable} ${libreBaskerville.variable}`}>
<div className=”container mx-auto max-w-7xl px-4 py-2 md:px-4″>
<Suspense fallback={<div>Loading…</div>}>{children}</Suspense>
<Analytics />
</div>
</body>
</html>
)
}import { Facebook, Twitter, Instagram, Linkedin } from “lucide-react”
const footerLinks = {
Sections: [“World”, “Politics”, “Business”, “Technology”, “Science”, “Health”],
Company: [“About Us”, “Careers”, “Contact”, “Advertise”],
Support: [“Help Center”, “Terms of Service”, “Privacy Policy”, “Cookie Policy”],
}
export function SiteFooter() {
return (
<footer className=”border-t border-border bg-muted/30 mt-16″>
<div className=”container px-4 py-12 md:px-6″>
<div className=”grid gap-8 sm:grid-cols-2 md:grid-cols-4″>
<div>
<h3 className=”font-serif text-lg font-bold mb-4″>The National Express</h3>
<p className=”text-sm leading-relaxed text-muted-foreground mb-4″>
Trusted journalism since 1985. Committed to truth, accuracy, and excellence.
</p>
<div className=”flex gap-3″>
{[Facebook, Twitter, Instagram, Linkedin].map((Icon, i) => (
<a
key={i}
href=”#”
className=”flex h-9 w-9 items-center justify-center rounded-full bg-muted hover:bg-primary hover:text-primary-foreground transition-colors”
>
<Icon className=”h-4 w-4″ />
</a>
))}
</div>
</div>
{Object.entries(footerLinks).map(([title, links]) => (
<div key={title}>
<h3 className=”font-semibold mb-4″>{title}</h3>
<ul className=”space-y-2″>
{links.map((link) => (
<li key={link}>
<a href=”#” className=”text-sm text-muted-foreground hover:text-foreground transition-colors”>
{link}
</a>
</li>
))}
</ul>
</div>
))}
</div>
<div className=”mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground”>
<p>© {new Date().getFullYear()} The National Express. All rights reserved.</p>
</div>
</div>
</footer>
)
}
Leave a Reply