From ad3fe8b06db39db67b0fb3c7c56f506db132cf81 Mon Sep 17 00:00:00 2001
From: Nurul Sundarani <sundarani@prisma.io>
Date: Tue, 16 Jun 2026 19:18:12 +0530
Subject: [PATCH 1/2] (feat) Keep reading section + updated series component

---
 apps/blog/src/app/(blog)/[slug]/page.tsx      |  7 ++-
 apps/blog/src/components/KeepReading.tsx      | 17 +++++++
 apps/blog/src/components/PostCard.tsx         | 22 ++++-----
 apps/blog/src/components/SeriesNavigation.tsx | 32 +++++--------
 apps/blog/src/lib/post-card-item.ts           | 46 +++++++++++++++++++
 apps/blog/src/lib/related-posts.ts            | 37 +++++++++++++++
 apps/blog/src/lib/series.ts                   | 10 ++--
 packages/ui/src/components/post-card.tsx      | 36 ++++-----------
 8 files changed, 140 insertions(+), 67 deletions(-)
 create mode 100644 apps/blog/src/components/KeepReading.tsx
 create mode 100644 apps/blog/src/lib/post-card-item.ts
 create mode 100644 apps/blog/src/lib/related-posts.ts

diff --git a/apps/blog/src/app/(blog)/[slug]/page.tsx b/apps/blog/src/app/(blog)/[slug]/page.tsx
index 8b66172527..9f14a6986f 100644
--- a/apps/blog/src/app/(blog)/[slug]/page.tsx
+++ b/apps/blog/src/app/(blog)/[slug]/page.tsx
@@ -14,7 +14,9 @@ import { AuthorAvatarGroup } from "@/components/AuthorAvatarGroup";
 import { SeriesBanner } from "@/components/SeriesBanner";
 import { SeriesMarker } from "@/components/SeriesMarker";
 import { SeriesNavigation } from "@/components/SeriesNavigation";
+import { KeepReading } from "@/components/KeepReading";
 import { getSeriesContext } from "@/lib/series";
+import { getRelatedPosts } from "@/lib/related-posts";
 import { getBaseUrl, withBlogBasePath, withBlogBasePathForImageSrc } from "@/lib/url";
 import Link from "next/link";
 import type { Metadata } from "next";
@@ -163,6 +165,7 @@ export default async function Page(props: { params: Promise<{ slug: string }> })
   const MDX = page.data.body;
   const blogPostingJsonLd = getBlogPostingJsonLd(page);
   const seriesContext = getSeriesContext(page);
+  const relatedPosts = seriesContext ? [] : getRelatedPosts(page, 2);
 
   const newsletterApiUrl = withBlogBasePath("/api/newsletter");
   return (
@@ -257,7 +260,9 @@ export default async function Page(props: { params: Promise<{ slug: string }> })
             <SeriesBanner series={seriesContext} />
             <SeriesNavigation series={seriesContext} />
           </>
-        ) : null}
+        ) : (
+          <KeepReading posts={relatedPosts} />
+        )}
         <Separator className="my-12" />
 
         {/* Conversion CTA */}
diff --git a/apps/blog/src/components/KeepReading.tsx b/apps/blog/src/components/KeepReading.tsx
new file mode 100644
index 0000000000..4b9eefbd44
--- /dev/null
+++ b/apps/blog/src/components/KeepReading.tsx
@@ -0,0 +1,17 @@
+import { PostCard } from "./PostCard";
+import type { BlogCardItem } from "./BlogGrid";
+
+export function KeepReading({ posts }: { posts: BlogCardItem[] }) {
+  if (posts.length === 0) return null;
+
+  return (
+    <section aria-label="Keep reading" className="my-12">
+      <h2 className="type-title-2xl text-center mb-8 text-foreground-neutral">Keep reading</h2>
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+        {posts.map((post) => (
+          <PostCard key={post.url} post={post} currentCategory="show-all" vertical />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/blog/src/components/PostCard.tsx b/apps/blog/src/components/PostCard.tsx
index 0789d79631..14df8e0048 100644
--- a/apps/blog/src/components/PostCard.tsx
+++ b/apps/blog/src/components/PostCard.tsx
@@ -26,25 +26,19 @@ export function PostCard({
   post,
   currentCategory,
   featured = false,
+  vertical = false,
 }: {
   post: PostCardItem;
   currentCategory: string;
   featured?: boolean;
+  vertical?: boolean;
 }) {
   const sourceAuthorNames =
-    post.authors && post.authors.length > 0
-      ? post.authors
-      : post.author
-        ? [post.author]
-        : [];
-  const authorProfiles: AuthorProfile[] = getAuthorProfiles(sourceAuthorNames).map(
-    (profile) => ({
-      name: profile.name,
-      imageSrc: profile.imageSrc
-        ? withBlogBasePathForImageSrc(profile.imageSrc)
-        : null,
-    }),
-  );
+    post.authors && post.authors.length > 0 ? post.authors : post.author ? [post.author] : [];
+  const authorProfiles: AuthorProfile[] = getAuthorProfiles(sourceAuthorNames).map((profile) => ({
+    name: profile.name,
+    imageSrc: profile.imageSrc ? withBlogBasePathForImageSrc(profile.imageSrc) : null,
+  }));
   const author: AuthorProfile | null = authorProfiles[0] ?? null;
 
   const badge =
@@ -64,5 +58,5 @@ export function PostCard({
     badge,
   };
 
-  return <SharedPostCard post={sharedPost} featured={featured} />;
+  return <SharedPostCard post={sharedPost} featured={featured} vertical={vertical} />;
 }
diff --git a/apps/blog/src/components/SeriesNavigation.tsx b/apps/blog/src/components/SeriesNavigation.tsx
index 36bf1de2b7..fff16b73c7 100644
--- a/apps/blog/src/components/SeriesNavigation.tsx
+++ b/apps/blog/src/components/SeriesNavigation.tsx
@@ -1,38 +1,28 @@
-import Link from "next/link";
+import { PostCard } from "./PostCard";
 import type { SeriesContext } from "@/lib/series";
 
 export function SeriesNavigation({ series }: { series: SeriesContext }) {
   if (!series.prev && !series.next) return null;
 
   return (
-    <nav aria-label="Series navigation" className="grid gap-4 sm:grid-cols-2 my-12">
+    <nav aria-label="Series navigation" className="grid gap-6 sm:grid-cols-2 my-12">
       {series.prev ? (
-        <Link
-          href={series.prev.url}
-          className="group block rounded-square border border-stroke-neutral-strong p-5 transition-colors hover:border-stroke-ppg hover:bg-background-ppg/5"
-        >
-          <div className="text-xs uppercase tracking-wide text-foreground-neutral-weak mb-1">
+        <div>
+          <div className="text-xs uppercase tracking-wide text-foreground-neutral-weak mb-2">
             ← Previous in series
           </div>
-          <div className="font-semibold text-foreground-neutral group-hover:text-foreground-ppg">
-            {series.prev.title}
-          </div>
-        </Link>
+          <PostCard post={series.prev} currentCategory="show-all" vertical />
+        </div>
       ) : (
-        <div />
+        <div className="hidden sm:block" />
       )}
       {series.next ? (
-        <Link
-          href={series.next.url}
-          className="group block rounded-square border border-stroke-neutral-strong p-5 transition-colors hover:border-stroke-ppg hover:bg-background-ppg/5 sm:text-right"
-        >
-          <div className="text-xs uppercase tracking-wide text-foreground-neutral-weak mb-1">
+        <div>
+          <div className="text-xs uppercase tracking-wide text-foreground-neutral-weak mb-2 sm:text-right">
             Next in series →
           </div>
-          <div className="font-semibold text-foreground-neutral group-hover:text-foreground-ppg">
-            {series.next.title}
-          </div>
-        </Link>
+          <PostCard post={series.next} currentCategory="show-all" vertical />
+        </div>
       ) : null}
     </nav>
   );
diff --git a/apps/blog/src/lib/post-card-item.ts b/apps/blog/src/lib/post-card-item.ts
new file mode 100644
index 0000000000..12eea535f4
--- /dev/null
+++ b/apps/blog/src/lib/post-card-item.ts
@@ -0,0 +1,46 @@
+import { blog } from "./source";
+import { withBlogBasePath, withBlogBasePathForImageSrc } from "./url";
+import type { BlogCardItem } from "@/components/BlogGrid";
+
+export type BlogPage = ReturnType<typeof blog.getPages>[number];
+
+/** Epoch millis for a post's `date`, or 0 when missing/invalid. */
+export function getPostTime(page: BlogPage): number {
+  const date = (page.data as { date?: Date | string }).date;
+  const time = date instanceof Date ? date.getTime() : new Date(date ?? 0).getTime();
+  return Number.isNaN(time) ? 0 : time;
+}
+
+/**
+ * Maps a blog page to the `BlogCardItem` shape consumed by `PostCard`.
+ *
+ * Shared by the home feed, "Keep reading", and series navigation so card data
+ * is built one consistent way. `url`/`imageSrc` are base-path prefixed here
+ * (the prefixing helpers are idempotent, so a second pass in `PostCard` is safe).
+ */
+export function toBlogCardItem(page: BlogPage): BlogCardItem {
+  const data = page.data as {
+    title?: string;
+    metaDescription?: string;
+    authors?: unknown;
+    heroImagePath?: string;
+    heroImageAlt?: string;
+    tags?: string[];
+  };
+  const authors = Array.isArray(data.authors)
+    ? data.authors.filter((name): name is string => typeof name === "string")
+    : [];
+  const time = getPostTime(page);
+
+  return {
+    url: withBlogBasePath(page.url),
+    title: data.title ?? "",
+    date: time ? new Date(time).toISOString() : "",
+    excerpt: data.metaDescription ?? null,
+    author: authors[0] ?? null,
+    authors,
+    imageSrc: withBlogBasePathForImageSrc(data.heroImagePath ?? ""),
+    imageAlt: data.heroImageAlt ?? data.title ?? "",
+    tags: data.tags,
+  };
+}
diff --git a/apps/blog/src/lib/related-posts.ts b/apps/blog/src/lib/related-posts.ts
new file mode 100644
index 0000000000..afc9a22f05
--- /dev/null
+++ b/apps/blog/src/lib/related-posts.ts
@@ -0,0 +1,37 @@
+import { blog } from "./source";
+import { getPostTime, toBlogCardItem, type BlogPage } from "./post-card-item";
+import type { BlogCardItem } from "@/components/BlogGrid";
+
+function getSlug(page: BlogPage): string {
+  return page.slugs[0] ?? "";
+}
+
+function getTags(page: BlogPage): string[] {
+  const tags = (page.data as { tags?: unknown }).tags;
+  return Array.isArray(tags) ? tags.filter((t): t is string => typeof t === "string") : [];
+}
+
+/**
+ * Returns up to `limit` posts to recommend after the given post.
+ *
+ * Ranking: most shared tags with the current post first, then most recent.
+ * The current post is excluded; any other post is eligible (including posts
+ * that belong to other series). Returns an empty array when no other posts
+ * exist.
+ */
+export function getRelatedPosts(current: BlogPage, limit = 2): BlogCardItem[] {
+  const currentSlug = getSlug(current);
+  const currentTags = new Set(getTags(current));
+
+  return blog
+    .getPages()
+    .filter((page) => getSlug(page) !== currentSlug)
+    .map((page) => ({
+      page,
+      sharedTags: getTags(page).filter((tag) => currentTags.has(tag)).length,
+      time: getPostTime(page),
+    }))
+    .sort((a, b) => b.sharedTags - a.sharedTags || b.time - a.time)
+    .slice(0, limit)
+    .map((candidate) => toBlogCardItem(candidate.page));
+}
diff --git a/apps/blog/src/lib/series.ts b/apps/blog/src/lib/series.ts
index 312cb6e853..bb5c72960d 100644
--- a/apps/blog/src/lib/series.ts
+++ b/apps/blog/src/lib/series.ts
@@ -1,5 +1,7 @@
 import { blog } from "./source";
 import { getSeriesMetadata } from "./series-registry";
+import { toBlogCardItem } from "./post-card-item";
+import type { BlogCardItem } from "@/components/BlogGrid";
 
 type BlogPage = ReturnType<typeof blog.getPages>[number];
 
@@ -17,8 +19,8 @@ export type SeriesContext = {
   posts: SeriesPostRef[];
   index: number;
   total: number;
-  prev: SeriesPostRef | null;
-  next: SeriesPostRef | null;
+  prev: BlogCardItem | null;
+  next: BlogCardItem | null;
 };
 
 function getSlug(page: BlogPage): string {
@@ -108,7 +110,7 @@ export function getSeriesContext(page: BlogPage): SeriesContext | null {
     posts: posts.map(toRef),
     index: currentIndex >= 0 ? currentIndex + 1 : 0,
     total: posts.length,
-    prev: prevPage ? toRef(prevPage) : null,
-    next: nextPage ? toRef(nextPage) : null,
+    prev: prevPage ? toBlogCardItem(prevPage) : null,
+    next: nextPage ? toBlogCardItem(nextPage) : null,
   };
 }
diff --git a/packages/ui/src/components/post-card.tsx b/packages/ui/src/components/post-card.tsx
index 6ac1c06ee1..eb75c67f37 100644
--- a/packages/ui/src/components/post-card.tsx
+++ b/packages/ui/src/components/post-card.tsx
@@ -41,13 +41,14 @@ export function PostCard({
   );
   const imageWrapperClassName = cn(
     "relative aspect-video w-full h-full",
-    isFeatured ? "order-1" : "order-2 max-w-96 hidden sm:block",
+    isFeatured && "order-1",
+    // Horizontal (non-vertical) feed cards hide the image on mobile by design.
+    // Vertical cards (e.g. "Keep reading") must keep the image visible on all widths.
+    !isFeatured && !vertical && "order-2 max-w-96 hidden sm:block",
     vertical && "order-none! h-52 cover",
   );
 
-  const titleClassName = cn(
-    "text-foreground-neutral mt-4 mb-2 type-heading-xl",
-  );
+  const titleClassName = cn("text-foreground-neutral mt-4 mb-2 type-heading-xl");
   const excerptClassName = cn(
     "text-sm text-foreground-neutral-weak line-clamp-2",
     isFeatured && "leading-[20px]!",
@@ -61,29 +62,15 @@ export function PostCard({
     <>
       <div>
         <div className="eyebrow flex gap-2 items-center">
-          {post.badge && (
-            <Badge
-              color="success"
-              label={post.badge}
-              className="w-fit text-xs"
-            />
-          )}
-          {post.date && (
-            <span className="text-xs text-foreground-neutral-weak">
-              {post.date}
-            </span>
-          )}
+          {post.badge && <Badge color="success" label={post.badge} className="w-fit text-xs" />}
+          {post.date && <span className="text-xs text-foreground-neutral-weak">{post.date}</span>}
         </div>
         {post.title && <h2 className={titleClassName}>{post.title}</h2>}
         {post.excerpt && <p className={excerptClassName}>{post.excerpt}</p>}
       </div>
       {(() => {
         const authors =
-          post.authors && post.authors.length > 0
-            ? post.authors
-            : post.author
-              ? [post.author]
-              : [];
+          post.authors && post.authors.length > 0 ? post.authors : post.author ? [post.author] : [];
         return authors.length > 0 ? (
           <AuthorAvatarGroup authors={authors} className={authorClassName} />
         ) : null;
@@ -113,12 +100,7 @@ export function PostCard({
           {postBody}
         </Card>
       ) : (
-        <div
-          className={cn(
-            "flex flex-col justify-between",
-            !vertical && "order-1",
-          )}
-        >
+        <div className={cn("flex flex-col justify-between", !vertical && "order-1")}>
           {postBody}
         </div>
       )}

From 4f30fa66b06b0f19a9e5b5b677863a58a910d98b Mon Sep 17 00:00:00 2001
From: Nurul Sundarani <sundarani@prisma.io>
Date: Tue, 16 Jun 2026 20:04:45 +0530
Subject: [PATCH 2/2] (feat) Updated Series and Newsletter component

---
 apps/blog/src/app/(blog)/[slug]/page.tsx      |   8 --
 apps/blog/src/app/(blog)/layout.tsx           |   9 +-
 .../src/components/navigation-wrapper.tsx     |   8 +-
 packages/ui/src/components/footer.tsx         | 109 +++++++-----------
 packages/ui/src/components/newsletter.tsx     |  39 ++++---
 5 files changed, 79 insertions(+), 94 deletions(-)

diff --git a/apps/blog/src/app/(blog)/[slug]/page.tsx b/apps/blog/src/app/(blog)/[slug]/page.tsx
index 9f14a6986f..de6ae33ebc 100644
--- a/apps/blog/src/app/(blog)/[slug]/page.tsx
+++ b/apps/blog/src/app/(blog)/[slug]/page.tsx
@@ -7,7 +7,6 @@ import { blog } from "@/lib/source";
 import { Badge, InlineTOC, Separator } from "@prisma/eclipse";
 
 import { JsonLd } from "@prisma-docs/ui/components/json-ld";
-import { FooterNewsletterForm } from "@prisma-docs/ui/components/newsletter";
 import { BlogShare } from "@/components/BlogShare";
 import { BlogCTA } from "@/components/BlogCTA";
 import { AuthorAvatarGroup } from "@/components/AuthorAvatarGroup";
@@ -167,7 +166,6 @@ export default async function Page(props: { params: Promise<{ slug: string }> })
   const seriesContext = getSeriesContext(page);
   const relatedPosts = seriesContext ? [] : getRelatedPosts(page, 2);
 
-  const newsletterApiUrl = withBlogBasePath("/api/newsletter");
   return (
     <div className="w-full px-4 z-1 mx-auto md:grid md:grid-cols-[1fr_180px] mt-4 md:mt-22 gap-12 max-w-257">
       {blogPostingJsonLd ? (
@@ -263,18 +261,12 @@ export default async function Page(props: { params: Promise<{ slug: string }> })
         ) : (
           <KeepReading posts={relatedPosts} />
         )}
-        <Separator className="my-12" />
 
         {/* Conversion CTA */}
         <BlogCTA />
 
         {/* Share Container */}
         <BlogShare desc={page.data.metaDescription as string} />
-
-        {/* Newsletter CTA */}
-        <div className="w-full px-8 py-12 shadow-box-low newsletter-bg rounded-square border border-background-neutral flex max-sm:flex-col wrap items-start gap-4 sm:items-center justify-between my-12">
-          <FooterNewsletterForm apiUrl={newsletterApiUrl} />
-        </div>
       </div>
       <div className="max-md:hidden toc">
         <div className="sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto [&_a[data-state=inactive]]:text-foreground-neutral-weak! [&_a[data-state=active]]:text-foreground-neutral!">
diff --git a/apps/blog/src/app/(blog)/layout.tsx b/apps/blog/src/app/(blog)/layout.tsx
index b6fdce6fff..3515ff8fbb 100644
--- a/apps/blog/src/app/(blog)/layout.tsx
+++ b/apps/blog/src/app/(blog)/layout.tsx
@@ -1,7 +1,9 @@
 import { Footer } from "@prisma-docs/ui/components/footer";
+import { FooterNewsletterForm } from "@prisma-docs/ui/components/newsletter";
 import { ThemeProvider } from "@prisma-docs/ui/components/theme-provider";
 import { NavigationWrapper } from "@/components/navigation-wrapper";
 import { UtmPersistence } from "@/components/utm-persistence";
+import { withBlogBasePath } from "@/lib/url";
 export function baseOptions() {
   return {
     nav: {
@@ -107,7 +109,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <UtmPersistence />
       <NavigationWrapper links={baseOptions().links} utm={{ source: "website", medium: "blog" }} />
       {children}
-      <Footer basePath="/blog" />
+      <Footer
+        basePath="/blog"
+        newsletterComponent={
+          <FooterNewsletterForm stacked apiUrl={withBlogBasePath("/api/newsletter")} />
+        }
+      />
     </ThemeProvider>
   );
 }
diff --git a/apps/site/src/components/navigation-wrapper.tsx b/apps/site/src/components/navigation-wrapper.tsx
index c90d063d0a..34288d5e0b 100644
--- a/apps/site/src/components/navigation-wrapper.tsx
+++ b/apps/site/src/components/navigation-wrapper.tsx
@@ -2,6 +2,7 @@
 
 import { WebNavigation } from "@prisma-docs/ui/components/web-navigation";
 import { Footer } from "@prisma-docs/ui/components/footer";
+import { FooterNewsletterForm } from "@prisma-docs/ui/components/newsletter";
 import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import { getUtmParams, hasUtmParams, type UtmParams } from "@prisma-docs/ui/lib/utm";
@@ -98,5 +99,10 @@ export function FooterWrapper() {
     return "ppg"; // default variant
   };
 
-  return <Footer color={getButtonVariant()} />;
+  return (
+    <Footer
+      color={getButtonVariant()}
+      newsletterComponent={<FooterNewsletterForm stacked apiUrl="/api/newsletter" />}
+    />
+  );
 }
diff --git a/packages/ui/src/components/footer.tsx b/packages/ui/src/components/footer.tsx
index ad586630a6..e30ef78ee9 100644
--- a/packages/ui/src/components/footer.tsx
+++ b/packages/ui/src/components/footer.tsx
@@ -36,12 +36,7 @@ const Link = ({ external, color, children, href, ...rest }: LinkProps) => {
 
   if (external || !href || href.startsWith("http") || href.startsWith("#")) {
     return (
-      <a
-        {...rest}
-        href={href}
-        className={className}
-        target={external ? "_blank" : "_self"}
-      >
+      <a {...rest} href={href} className={className} target={external ? "_blank" : "_self"}>
         {children}
         {external && (
           <i className="fa-regular fa-arrow-up-right text-foreground-neutral-weaker text-xs ml-1" />
@@ -75,6 +70,8 @@ const Footer = ({
   absoluteLinks = false,
   color = "ppg",
   basePath = "",
+  hideNewsletter = false,
+  newsletterComponent,
 }: FooterProps) => {
   return (
     <footer className="z-1 bg-background-default w-screen overflow-x-hidden overflow-y-visible max-w-full">
@@ -86,52 +83,49 @@ const Footer = ({
         style={style}
       >
         <div className="font-inter print:hidden relative">
-          {/* Logo and Social Links Column */}
-          <div className="mb-8 flex-1 lg:mb-0 w-full top-0 flex justify-between items-center lg:flex-col lg:items-start lg:absolute lg:max-w-fit lg:h-[217px]">
-            <div className="flex flex-col justify-center">
-              <div className="text-stroke-neutral-stronger [&>svg]:h-10!">
-                {Logo}
+          {/* Logo, Social Links, and Newsletter Column */}
+          <div className="mb-8 lg:mb-0 w-full top-0 flex flex-col gap-8 lg:absolute lg:max-w-fit">
+            <div className="flex w-full justify-between items-center lg:flex-col lg:items-start lg:gap-8">
+              <div className="flex flex-col justify-center">
+                <div className="text-stroke-neutral-stronger [&>svg]:h-10!">{Logo}</div>
               </div>
-            </div>
-            <div className="flex justify-start gap-2 md:max-w-[190px]">
-              {footerData.socialIcons.map((socialLink: any, idx: number) => {
-                const socialHoverClass =
-                  color === "orm"
-                    ? "hover:[&>div]:bg-background-orm-strong"
-                    : color === "ppg"
-                      ? "hover:[&>div]:bg-background-ppg-strong"
-                      : "";
+              <div className="flex justify-start gap-2 md:max-w-[190px]">
+                {footerData.socialIcons.map((socialLink: any, idx: number) => {
+                  const socialHoverClass =
+                    color === "orm"
+                      ? "hover:[&>div]:bg-background-orm-strong"
+                      : color === "ppg"
+                        ? "hover:[&>div]:bg-background-ppg-strong"
+                        : "";
 
-                return (
-                  <a
-                    href={socialLink.url}
-                    target="_blank"
-                    rel="noopener"
-                    key={idx}
-                    aria-label={socialLink.title}
-                    className={cn(
-                      "text-[1.375rem] transition-colors",
-                      socialHoverClass,
-                    )}
-                  >
-                    <Action color="neutral" size="2xl">
-                      <i
-                        className={`fa-brands fa-${socialLink.icon} text-current text-foreground-neutral-weak transition-colors`}
-                      />
-                    </Action>
-                  </a>
-                );
-              })}
+                  return (
+                    <a
+                      href={socialLink.url}
+                      target="_blank"
+                      rel="noopener"
+                      key={idx}
+                      aria-label={socialLink.title}
+                      className={cn("text-[1.375rem] transition-colors", socialHoverClass)}
+                    >
+                      <Action color="neutral" size="2xl">
+                        <i
+                          className={`fa-brands fa-${socialLink.icon} text-current text-foreground-neutral-weak transition-colors`}
+                        />
+                      </Action>
+                    </a>
+                  );
+                })}
+              </div>
             </div>
+            {!hideNewsletter && newsletterComponent ? (
+              <div className="w-full max-w-sm lg:max-w-[280px]">{newsletterComponent}</div>
+            ) : null}
           </div>
           {/* Main Grid Row */}
           <div className="grid max-md:gap-8 max-md:grid-cols-2 grid-cols-[repeat(4,auto)] lg:gap-8 xl:gap-12 relative lg:w-fit ml-auto">
             {/* Footer Columns */}
             {footerData.footerItems.map((footerItem: any, idx: number) => (
-              <div
-                className="flex-1 lg:mb-0 lg:px-2 min-w-40"
-                key={`footer-${idx}`}
-              >
+              <div className="flex-1 lg:mb-0 lg:px-2 min-w-40" key={`footer-${idx}`}>
                 <span className="uppercase stretch-display font-sans-display inline-block font-bold text-base text-foreground-neutral tracking-[0.1em] mt-0 mb-2.5 lg:mb-3">
                   {footerItem.title}
                 </span>
@@ -165,31 +159,18 @@ const Footer = ({
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         {link.links.map(
-                          (dropLink: {
-                            title: string;
-                            url: string;
-                            external?: boolean;
-                          }) => {
+                          (dropLink: { title: string; url: string; external?: boolean }) => {
                             const dropdownHoverClass =
                               color === "orm"
                                 ? "hover:bg-background-orm-strong!"
                                 : "hover:bg-background-ppg-strong!";
 
                             return (
-                              <DropdownMenuItem
-                                key={dropLink.title}
-                                className={dropdownHoverClass}
-                              >
+                              <DropdownMenuItem key={dropLink.title} className={dropdownHoverClass}>
                                 <a
                                   href={dropLink.url}
-                                  target={
-                                    dropLink.external ? "_blank" : "_self"
-                                  }
-                                  rel={
-                                    dropLink.external
-                                      ? "noopener noreferrer"
-                                      : undefined
-                                  }
+                                  target={dropLink.external ? "_blank" : "_self"}
+                                  rel={dropLink.external ? "noopener noreferrer" : undefined}
                                   className="text-left capitalize text-foreground-neutral-weak text-md font-semibold"
                                 >
                                   {dropLink.title}
@@ -244,11 +225,7 @@ const Footer = ({
                 {soc2(basePath)}
               </a>
             </div>
-            <ThemeToggle
-              color={color}
-              mode="light-dark-system"
-              className="md:order-3 order-2"
-            />
+            <ThemeToggle color={color} mode="light-dark-system" className="md:order-3 order-2" />
           </div>
         </div>
       </div>
diff --git a/packages/ui/src/components/newsletter.tsx b/packages/ui/src/components/newsletter.tsx
index c8b201cc4a..e35dca49b9 100644
--- a/packages/ui/src/components/newsletter.tsx
+++ b/packages/ui/src/components/newsletter.tsx
@@ -5,10 +5,6 @@ import { Button, Input } from "@prisma/eclipse";
 import { cn } from "@prisma-docs/ui/lib/cn";
 import { useNewsletter } from "../hooks/use-newsletter";
 
-const icon = (name: string) => (
-  <i color="currentColor" className={cn("text-[1.125rem]", name)} />
-);
-
 type ColorType = "orm" | "ppg" | undefined;
 
 type FooterNewsletterFormProps = {
@@ -16,21 +12,17 @@ type FooterNewsletterFormProps = {
   color?: ColorType;
   blog?: boolean;
   apiUrl?: string;
+  /** Vertical layout (heading → email → button) for narrow containers like the footer column. */
+  stacked?: boolean;
 };
 
 export const FooterNewsletterForm = ({
   blog = false,
   apiUrl,
+  stacked = false,
 }: FooterNewsletterFormProps) => {
-  const {
-    email,
-    setEmail,
-    isSubmitting,
-    isSubmitted,
-    isAlreadySubscribed,
-    error,
-    subscribe,
-  } = useNewsletter({ apiUrl });
+  const { email, setEmail, isSubmitting, isSubmitted, isAlreadySubscribed, error, subscribe } =
+    useNewsletter({ apiUrl });
 
   const buttonText = blog ? "Sign up" : "Subscribe";
 
@@ -64,14 +56,24 @@ export const FooterNewsletterForm = ({
     <div className="w-full">
       <form
         onSubmit={handleSubmit}
-        className="flex gap-6 sm:gap-2 items-center justify-between w-full flex-col sm:flex-row "
+        className={cn(
+          "flex w-full",
+          stacked
+            ? "flex-col items-start gap-4"
+            : "flex-col items-center justify-between gap-6 sm:flex-row sm:gap-2",
+        )}
       >
         <h5 className="font-family-display font-[650] text-neutral text-base">
           Subscribe to our newsletter
         </h5>
-        <div>
-          <div className="flex gap-2 items-center w-full sm:w-auto">
-            <label htmlFor="MERGE0" aria-label="Email" className="flex-grow">
+        <div className={stacked ? "w-full" : undefined}>
+          <div
+            className={cn(
+              "flex",
+              stacked ? "w-full flex-col items-start gap-3" : "w-full items-center gap-2 sm:w-auto",
+            )}
+          >
+            <label htmlFor="MERGE0" aria-label="Email" className={stacked ? "w-full" : "flex-grow"}>
               <Input
                 type="email"
                 name="EMAIL"
@@ -82,6 +84,7 @@ export const FooterNewsletterForm = ({
                 onChange={(e) => setEmail(e.target.value)}
                 autoCapitalize="off"
                 autoCorrect="off"
+                className={stacked ? "w-full" : undefined}
                 disabled={isSubmitting || isSubmitted || isAlreadySubscribed}
               />
             </label>
@@ -98,7 +101,7 @@ export const FooterNewsletterForm = ({
               />
             </Button>
           </div>
-          <div className="mt-2 min-h-5 absolute">
+          <div className={cn("mt-2 min-h-5", stacked ? "" : "absolute")}>
             {statusMessage ? (
               <p
                 className={cn("text-sm self-start", statusMessage.className)}