feat(content): add announcements and public news flows

apps/admin/src/app/announcements/page.tsx

@@ -0,0 +1,423 @@
+import {
+  createAnnouncement,
+  deleteAnnouncement,
+  listAnnouncements,
+  updateAnnouncement,
+} from "@cms/db"
+import { Button } from "@cms/ui/button"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+type SearchParamsInput = Record<string, string | string[] | undefined>
+
+function readFirstValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
+function readInputString(formData: FormData, field: string): string {
+  const value = formData.get(field)
+  return typeof value === "string" ? value.trim() : ""
+}
+
+function readNullableString(formData: FormData, field: string): string | null {
+  const value = readInputString(formData, field)
+  return value.length > 0 ? value : null
+}
+
+function readNullableDate(formData: FormData, field: string): Date | null {
+  const value = readInputString(formData, field)
+
+  if (!value) {
+    return null
+  }
+
+  const parsed = new Date(value)
+
+  if (Number.isNaN(parsed.getTime())) {
+    return null
+  }
+
+  return parsed
+}
+
+function readInt(formData: FormData, field: string, fallback = 100): number {
+  const value = readInputString(formData, field)
+
+  if (!value) {
+    return fallback
+  }
+
+  const parsed = Number.parseInt(value, 10)
+
+  if (!Number.isFinite(parsed)) {
+    return fallback
+  }
+
+  return parsed
+}
+
+function redirectWithState(params: { notice?: string; error?: string }) {
+  const query = new URLSearchParams()
+
+  if (params.notice) {
+    query.set("notice", params.notice)
+  }
+
+  if (params.error) {
+    query.set("error", params.error)
+  }
+
+  const value = query.toString()
+  redirect(value ? `/announcements?${value}` : "/announcements")
+}
+
+async function createAnnouncementAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/announcements",
+    permission: "banner:write",
+    scope: "global",
+  })
+
+  try {
+    await createAnnouncement({
+      title: readInputString(formData, "title"),
+      message: readInputString(formData, "message"),
+      placement: readInputString(formData, "placement"),
+      priority: readInt(formData, "priority", 100),
+      ctaLabel: readNullableString(formData, "ctaLabel"),
+      ctaHref: readNullableString(formData, "ctaHref"),
+      startsAt: readNullableDate(formData, "startsAt"),
+      endsAt: readNullableDate(formData, "endsAt"),
+      isVisible: readInputString(formData, "isVisible") === "true",
+    })
+  } catch {
+    redirectWithState({ error: "Failed to create announcement." })
+  }
+
+  revalidatePath("/announcements")
+  revalidatePath("/")
+  redirectWithState({ notice: "Announcement created." })
+}
+
+async function updateAnnouncementAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/announcements",
+    permission: "banner:write",
+    scope: "global",
+  })
+
+  try {
+    await updateAnnouncement({
+      id: readInputString(formData, "id"),
+      title: readInputString(formData, "title"),
+      message: readInputString(formData, "message"),
+      placement: readInputString(formData, "placement"),
+      priority: readInt(formData, "priority", 100),
+      ctaLabel: readNullableString(formData, "ctaLabel"),
+      ctaHref: readNullableString(formData, "ctaHref"),
+      startsAt: readNullableDate(formData, "startsAt"),
+      endsAt: readNullableDate(formData, "endsAt"),
+      isVisible: readInputString(formData, "isVisible") === "true",
+    })
+  } catch {
+    redirectWithState({ error: "Failed to update announcement." })
+  }
+
+  revalidatePath("/announcements")
+  revalidatePath("/")
+  redirectWithState({ notice: "Announcement updated." })
+}
+
+async function deleteAnnouncementAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/announcements",
+    permission: "banner:write",
+    scope: "global",
+  })
+
+  try {
+    await deleteAnnouncement(readInputString(formData, "id"))
+  } catch {
+    redirectWithState({ error: "Failed to delete announcement." })
+  }
+
+  revalidatePath("/announcements")
+  revalidatePath("/")
+  redirectWithState({ notice: "Announcement deleted." })
+}
+
+function dateInputValue(value: Date | null): string {
+  if (!value) {
+    return ""
+  }
+
+  return value.toISOString().slice(0, 10)
+}
+
+export default async function AnnouncementsPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParamsInput>
+}) {
+  const role = await requirePermissionForRoute({
+    nextPath: "/announcements",
+    permission: "banner:read",
+    scope: "global",
+  })
+
+  const [resolvedSearchParams, announcements] = await Promise.all([
+    searchParams,
+    listAnnouncements(200),
+  ])
+
+  const notice = readFirstValue(resolvedSearchParams.notice)
+  const error = readFirstValue(resolvedSearchParams.error)
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/announcements"
+      badge="Admin App"
+      title="Announcements"
+      description="Manage public site announcements with schedule and placement controls."
+    >
+      {notice ? (
+        <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
+          {notice}
+        </section>
+      ) : null}
+
+      {error ? (
+        <section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
+          {error}
+        </section>
+      ) : null}
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Create Announcement</h2>
+        <form action={createAnnouncementAction} className="mt-4 space-y-3">
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Title</span>
+            <input
+              name="title"
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Message</span>
+            <textarea
+              name="message"
+              rows={3}
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+          <div className="grid gap-3 md:grid-cols-3">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Placement</span>
+              <select
+                name="placement"
+                defaultValue="global_top"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              >
+                <option value="global_top">global_top</option>
+                <option value="homepage">homepage</option>
+              </select>
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Priority</span>
+              <input
+                name="priority"
+                type="number"
+                min={0}
+                defaultValue="100"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="inline-flex items-center gap-2 pt-6 text-sm text-neutral-700">
+              <input
+                name="isVisible"
+                type="checkbox"
+                value="true"
+                defaultChecked
+                className="size-4"
+              />
+              Visible
+            </label>
+          </div>
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">CTA label</span>
+              <input
+                name="ctaLabel"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">CTA href</span>
+              <input
+                name="ctaHref"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Starts at</span>
+              <input
+                name="startsAt"
+                type="date"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Ends at</span>
+              <input
+                name="endsAt"
+                type="date"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+          <Button type="submit">Create announcement</Button>
+        </form>
+      </section>
+
+      <section className="space-y-3">
+        {announcements.length === 0 ? (
+          <article className="rounded-xl border border-neutral-200 p-6 text-sm text-neutral-600">
+            No announcements yet.
+          </article>
+        ) : (
+          announcements.map((announcement) => (
+            <form
+              key={announcement.id}
+              action={updateAnnouncementAction}
+              className="rounded-xl border border-neutral-200 p-6"
+            >
+              <input type="hidden" name="id" value={announcement.id} />
+              <div className="grid gap-3 md:grid-cols-2">
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">Title</span>
+                  <input
+                    name="title"
+                    defaultValue={announcement.title}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">Placement</span>
+                  <select
+                    name="placement"
+                    defaultValue={announcement.placement}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  >
+                    <option value="global_top">global_top</option>
+                    <option value="homepage">homepage</option>
+                  </select>
+                </label>
+              </div>
+              <label className="mt-3 block space-y-1">
+                <span className="text-xs text-neutral-600">Message</span>
+                <textarea
+                  name="message"
+                  rows={2}
+                  defaultValue={announcement.message}
+                  className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                />
+              </label>
+              <div className="mt-3 grid gap-3 md:grid-cols-3">
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">Priority</span>
+                  <input
+                    name="priority"
+                    type="number"
+                    min={0}
+                    defaultValue={announcement.priority}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">Starts</span>
+                  <input
+                    name="startsAt"
+                    type="date"
+                    defaultValue={dateInputValue(announcement.startsAt)}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">Ends</span>
+                  <input
+                    name="endsAt"
+                    type="date"
+                    defaultValue={dateInputValue(announcement.endsAt)}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  />
+                </label>
+              </div>
+              <div className="mt-3 grid gap-3 md:grid-cols-2">
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">CTA label</span>
+                  <input
+                    name="ctaLabel"
+                    defaultValue={announcement.ctaLabel ?? ""}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">CTA href</span>
+                  <input
+                    name="ctaHref"
+                    defaultValue={announcement.ctaHref ?? ""}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  />
+                </label>
+              </div>
+              <div className="mt-3 flex flex-wrap items-center justify-between gap-3">
+                <label className="inline-flex items-center gap-2 text-sm text-neutral-700">
+                  <input
+                    name="isVisible"
+                    type="checkbox"
+                    value="true"
+                    defaultChecked={announcement.isVisible}
+                    className="size-4"
+                  />
+                  Visible
+                </label>
+                <div className="flex items-center gap-2">
+                  <Button type="submit" size="sm">
+                    Save
+                  </Button>
+                  <button
+                    type="submit"
+                    formAction={deleteAnnouncementAction}
+                    className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </form>
+          ))
+        )}
+      </section>
+    </AdminShell>
+  )
+}

apps/admin/src/app/news/page.tsx

@@ -0,0 +1,276 @@
+import { createPost, deletePost, listPosts, updatePost } from "@cms/db"
+import { Button } from "@cms/ui/button"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+type SearchParamsInput = Record<string, string | string[] | undefined>
+
+function readFirstValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
+function readInputString(formData: FormData, field: string): string {
+  const value = formData.get(field)
+  return typeof value === "string" ? value.trim() : ""
+}
+
+function readNullableString(formData: FormData, field: string): string | undefined {
+  const value = readInputString(formData, field)
+  return value.length > 0 ? value : undefined
+}
+
+function redirectWithState(params: { notice?: string; error?: string }) {
+  const query = new URLSearchParams()
+
+  if (params.notice) {
+    query.set("notice", params.notice)
+  }
+
+  if (params.error) {
+    query.set("error", params.error)
+  }
+
+  const value = query.toString()
+  redirect(value ? `/news?${value}` : "/news")
+}
+
+async function createNewsAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/news",
+    permission: "news:write",
+    scope: "team",
+  })
+
+  try {
+    await createPost({
+      title: readInputString(formData, "title"),
+      slug: readInputString(formData, "slug"),
+      excerpt: readNullableString(formData, "excerpt"),
+      body: readInputString(formData, "body"),
+      status: readInputString(formData, "status") === "published" ? "published" : "draft",
+    })
+  } catch {
+    redirectWithState({ error: "Failed to create post." })
+  }
+
+  revalidatePath("/news")
+  revalidatePath("/")
+  redirectWithState({ notice: "Post created." })
+}
+
+async function updateNewsAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/news",
+    permission: "news:write",
+    scope: "team",
+  })
+
+  try {
+    await updatePost(readInputString(formData, "id"), {
+      title: readInputString(formData, "title"),
+      slug: readInputString(formData, "slug"),
+      excerpt: readNullableString(formData, "excerpt"),
+      body: readInputString(formData, "body"),
+      status: readInputString(formData, "status") === "published" ? "published" : "draft",
+    })
+  } catch {
+    redirectWithState({ error: "Failed to update post." })
+  }
+
+  revalidatePath("/news")
+  revalidatePath("/")
+  redirectWithState({ notice: "Post updated." })
+}
+
+async function deleteNewsAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/news",
+    permission: "news:write",
+    scope: "team",
+  })
+
+  try {
+    await deletePost(readInputString(formData, "id"))
+  } catch {
+    redirectWithState({ error: "Failed to delete post." })
+  }
+
+  revalidatePath("/news")
+  revalidatePath("/")
+  redirectWithState({ notice: "Post deleted." })
+}
+
+export default async function NewsManagementPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParamsInput>
+}) {
+  const role = await requirePermissionForRoute({
+    nextPath: "/news",
+    permission: "news:read",
+    scope: "team",
+  })
+
+  const [resolvedSearchParams, posts] = await Promise.all([searchParams, listPosts()])
+
+  const notice = readFirstValue(resolvedSearchParams.notice)
+  const error = readFirstValue(resolvedSearchParams.error)
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/news"
+      badge="Admin App"
+      title="News"
+      description="Manage blog/news posts for public updates and announcements archive."
+    >
+      {notice ? (
+        <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
+          {notice}
+        </section>
+      ) : null}
+
+      {error ? (
+        <section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
+          {error}
+        </section>
+      ) : null}
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Create Post</h2>
+        <form action={createNewsAction} className="mt-4 space-y-3">
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Title</span>
+              <input
+                name="title"
+                required
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Slug</span>
+              <input
+                name="slug"
+                required
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Excerpt</span>
+            <input
+              name="excerpt"
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Body</span>
+            <textarea
+              name="body"
+              rows={5}
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Status</span>
+            <select
+              name="status"
+              defaultValue="draft"
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            >
+              <option value="draft">draft</option>
+              <option value="published">published</option>
+            </select>
+          </label>
+          <Button type="submit">Create post</Button>
+        </form>
+      </section>
+
+      <section className="space-y-3">
+        {posts.map((post) => (
+          <form
+            key={post.id}
+            action={updateNewsAction}
+            className="rounded-xl border border-neutral-200 p-6"
+          >
+            <input type="hidden" name="id" value={post.id} />
+            <div className="grid gap-3 md:grid-cols-2">
+              <label className="space-y-1">
+                <span className="text-xs text-neutral-600">Title</span>
+                <input
+                  name="title"
+                  defaultValue={post.title}
+                  className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                />
+              </label>
+              <label className="space-y-1">
+                <span className="text-xs text-neutral-600">Slug</span>
+                <input
+                  name="slug"
+                  defaultValue={post.slug}
+                  className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                />
+              </label>
+            </div>
+            <label className="mt-3 block space-y-1">
+              <span className="text-xs text-neutral-600">Excerpt</span>
+              <input
+                name="excerpt"
+                defaultValue={post.excerpt ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="mt-3 block space-y-1">
+              <span className="text-xs text-neutral-600">Body</span>
+              <textarea
+                name="body"
+                rows={4}
+                defaultValue={post.body}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <div className="mt-3 flex flex-wrap items-center justify-between gap-3">
+              <select
+                name="status"
+                defaultValue={post.status}
+                className="rounded border border-neutral-300 px-3 py-2 text-sm"
+              >
+                <option value="draft">draft</option>
+                <option value="published">published</option>
+              </select>
+              <div className="flex items-center gap-2">
+                <Button type="submit" size="sm">
+                  Save
+                </Button>
+                <button
+                  type="submit"
+                  formAction={deleteNewsAction}
+                  className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </form>
+        ))}
+      </section>
+    </AdminShell>
+  )
+}

apps/admin/src/components/admin-shell.tsx

@@ -31,6 +31,8 @@ const navItems: NavItem[] = [
   { href: "/portfolio", label: "Portfolio", permission: "media:read", scope: "team" },
   { href: "/users", label: "Users", permission: "users:read", scope: "own" },
   { href: "/commissions", label: "Commissions", permission: "commissions:read", scope: "own" },
+  { href: "/announcements", label: "Announcements", permission: "banner:read", scope: "global" },
+  { href: "/news", label: "News", permission: "news:read", scope: "team" },
   { href: "/settings", label: "Settings", permission: "users:manage_roles", scope: "global" },
   { href: "/todo", label: "Roadmap", permission: "roadmap:read", scope: "global" },
 ]

apps/admin/src/lib/access.test.ts

@@ -47,5 +47,13 @@ describe("admin route access rules", () => {
       permission: "commissions:read",
       scope: "own",
     })
+    expect(getRequiredPermission("/announcements")).toEqual({
+      permission: "banner:read",
+      scope: "global",
+    })
+    expect(getRequiredPermission("/news")).toEqual({
+      permission: "news:read",
+      scope: "team",
+    })
   })
 })

apps/admin/src/lib/access.ts

@@ -85,6 +85,20 @@ const guardRules: GuardRule[] = [
       scope: "own",
     },
   },
+  {
+    route: /^\/announcements(?:\/|$)/,
+    requirement: {
+      permission: "banner:read",
+      scope: "global",
+    },
+  },
+  {
+    route: /^\/news(?:\/|$)/,
+    requirement: {
+      permission: "news:read",
+      scope: "team",
+    },
+  },
   {
     route: /^\/settings(?:\/|$)/,
     requirement: {

apps/web/src/app/[locale]/layout.tsx

@@ -3,7 +3,7 @@ import { notFound } from "next/navigation"
 import { hasLocale, NextIntlClientProvider } from "next-intl"
 import { getTranslations } from "next-intl/server"
 import type { ReactNode } from "react"
-
+import { PublicAnnouncements } from "@/components/public-announcements"
 import { PublicHeaderBanner } from "@/components/public-header-banner"
 import { PublicSiteFooter } from "@/components/public-site-footer"
 import { PublicSiteHeader } from "@/components/public-site-header"
@@ -52,6 +52,7 @@ export default async function LocaleLayout({ children, params }: LocaleLayoutPro
     <NextIntlClientProvider locale={locale}>
       <Providers>
         <PublicHeaderBanner banner={banner} />
+        <PublicAnnouncements placement="global_top" />
         <PublicSiteHeader />
         <main>{children}</main>
         <PublicSiteFooter />

apps/web/src/app/[locale]/news/[slug]/page.tsx

@@ -0,0 +1,30 @@
+import { getPostBySlug } from "@cms/db"
+import { notFound } from "next/navigation"
+
+export const dynamic = "force-dynamic"
+
+type PageProps = {
+  params: Promise<{ slug: string }>
+}
+
+export default async function PublicNewsDetailPage({ params }: PageProps) {
+  const { slug } = await params
+  const post = await getPostBySlug(slug)
+
+  if (!post || post.status !== "published") {
+    notFound()
+  }
+
+  return (
+    <article className="mx-auto w-full max-w-4xl space-y-4 px-6 py-16">
+      <header className="space-y-2">
+        <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">News</p>
+        <h1 className="text-4xl font-semibold tracking-tight">{post.title}</h1>
+        {post.excerpt ? <p className="text-neutral-600">{post.excerpt}</p> : null}
+      </header>
+      <section className="prose prose-neutral max-w-none whitespace-pre-wrap rounded-xl border border-neutral-200 bg-white p-6 text-neutral-800">
+        {post.body}
+      </section>
+    </article>
+  )
+}

apps/web/src/app/[locale]/news/page.tsx

@@ -0,0 +1,33 @@
+import { listPosts } from "@cms/db"
+import Link from "next/link"
+
+export const dynamic = "force-dynamic"
+
+export default async function PublicNewsIndexPage() {
+  const posts = await listPosts()
+
+  return (
+    <section className="mx-auto w-full max-w-4xl space-y-4 px-6 py-16">
+      <header className="space-y-2">
+        <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">News</p>
+        <h1 className="text-4xl font-semibold tracking-tight">Latest updates</h1>
+      </header>
+
+      <div className="space-y-3">
+        {posts.map((post) => (
+          <article key={post.id} className="rounded-lg border border-neutral-200 p-4">
+            <p className="text-xs uppercase tracking-wide text-neutral-500">{post.status}</p>
+            <h2 className="mt-1 text-lg font-medium">{post.title}</h2>
+            <p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? "No excerpt"}</p>
+            <Link
+              href={`/news/${post.slug}`}
+              className="mt-2 inline-block text-sm underline underline-offset-2"
+            >
+              Read post
+            </Link>
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}

apps/web/src/app/[locale]/page.tsx

@@ -1,7 +1,7 @@
 import { getPublishedPageBySlug, listPosts } from "@cms/db"
 import { Button } from "@cms/ui/button"
 import { getTranslations } from "next-intl/server"
-
+import { PublicAnnouncements } from "@/components/public-announcements"
 import { PublicPageView } from "@/components/public-page-view"
 
 export const dynamic = "force-dynamic"
@@ -16,6 +16,7 @@ export default async function HomePage() {
   return (
     <section>
       {homePage ? <PublicPageView page={homePage} /> : null}
+      <PublicAnnouncements placement="homepage" />
 
       <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-6 pb-16">
         <header className="space-y-3">

apps/web/src/components/public-announcements.tsx

@@ -0,0 +1,39 @@
+import { listActiveAnnouncements, type PublicAnnouncement } from "@cms/db"
+import Link from "next/link"
+
+type PublicAnnouncementsProps = {
+  placement: "global_top" | "homepage"
+}
+
+function AnnouncementCard({ announcement }: { announcement: PublicAnnouncement }) {
+  return (
+    <article className="rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900">
+      <p className="text-xs uppercase tracking-wide text-blue-700">{announcement.title}</p>
+      <p className="mt-1">{announcement.message}</p>
+      {announcement.ctaLabel && announcement.ctaHref ? (
+        <Link
+          href={announcement.ctaHref}
+          className="mt-2 inline-block font-medium underline underline-offset-2"
+        >
+          {announcement.ctaLabel}
+        </Link>
+      ) : null}
+    </article>
+  )
+}
+
+export async function PublicAnnouncements({ placement }: PublicAnnouncementsProps) {
+  const announcements = await listActiveAnnouncements(placement)
+
+  if (announcements.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="mx-auto w-full max-w-6xl space-y-2 px-6 py-3">
+      {announcements.map((announcement) => (
+        <AnnouncementCard key={announcement.id} announcement={announcement} />
+      ))}
+    </section>
+  )
+}