Decouple admin from public max-w-7xl via (site) route group.

Public chrome and width live only under (site). /admin and /client inherit the root layout alone, so housekeeping width is no longer tied to the public template.

Co-authored-by: Cursor <[email protected]>

src/app/(site)/news/page.tsx

@@ -0,0 +1,123 @@
+import Image from "next/image";
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { excerpt } from "@/lib/format";
+import { prisma } from "@/lib/prisma";
+
+export const revalidate = 300;
+
+export const metadata = { title: "News" };
+
+function formatDate(d: Date | null): string {
+	return d ? d.toISOString().slice(0, 10) : "";
+}
+
+export default async function NewsPage() {
+	const t = await getTranslations("pages.news");
+
+	let articles: Awaited<ReturnType<typeof prisma.websiteArticles.findMany>> =
+		[];
+	try {
+		articles = await prisma.websiteArticles.findMany({
+			orderBy: { createdAt: "desc" },
+			take: 30,
+		});
+	} catch {
+		// DB unavailable — render the empty state rather than a 500.
+		articles = [];
+	}
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="📰" title={t("title")} subtitle={t("subtitle")} />
+
+			<ContentCard padded={articles.length === 0}>
+				{articles.length === 0 ? (
+					<EmptyState icon="📰">{t("noArticles")}</EmptyState>
+				) : (
+					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+						{articles.map((a) => (
+							<Link
+								key={a.slug}
+								href={`/news/${a.slug}`}
+								className="card hover"
+								style={{
+									display: "flex",
+									flexDirection: "column",
+									textDecoration: "none",
+									padding: 0,
+									overflow: "hidden",
+								}}
+							>
+								{a.image ? (
+									<div
+										style={{
+											position: "relative",
+											width: "100%",
+											aspectRatio: "16/9",
+										}}
+									>
+										<Image
+											src={a.image}
+											alt=""
+											fill
+											style={{ objectFit: "cover" }}
+											unoptimized
+										/>
+									</div>
+								) : (
+									<div
+										style={{
+											width: "100%",
+											aspectRatio: "16/9",
+											backgroundColor:
+												"color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar))",
+										}}
+									/>
+								)}
+								<div
+									style={{
+										padding: "1rem 1.1rem",
+										flex: 1,
+										display: "flex",
+										flexDirection: "column",
+									}}
+								>
+									<h3
+										style={{
+											margin: 0,
+											fontSize: "1.05rem",
+											color:
+												"var(--color-navbar-text-readable, var(--color-navbar-text))",
+											lineHeight: 1.4,
+										}}
+									>
+										{a.title}
+									</h3>
+									<p
+										className="muted"
+										style={{ margin: "0.35rem 0 0.6rem", fontSize: "0.78rem" }}
+									>
+										{formatDate(a.createdAt)}
+									</p>
+									<p
+										style={{
+											margin: 0,
+											color:
+												"var(--color-navbar-text-readable, var(--color-navbar-text))",
+											fontSize: "0.88rem",
+											lineHeight: 1.55,
+										}}
+									>
+										{excerpt(a.shortStory, 150)}
+									</p>
+								</div>
+							</Link>
+						))}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}