@xexr/blog-platform 1.0.2 → 1.0.4

package/dist/app/blog/[slug]/page.tsx

@@ -3,16 +3,11 @@ import Image from "next/image";
 import Link from "next/link";
 import { MDXRemote } from "next-mdx-remote-client/rsc";
 import { type PublishedArticle } from "../../../types/contracts";
-import { format, formatDistanceToNow } from "date-fns";
 import { cn } from "../../../lib/utils";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, ArrowUpRight, Mail, Share2 } from "lucide-react";
 import { Badge } from "../../../components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../../../components/ui/card";
+import { Card, CardContent } from "../../../components/ui/card";
+import { ExpandableArticleImage } from "../../../components/ExpandableArticleImage";
 import { Separator } from "../../../components/ui/separator";
 import {
   generateCompleteArticleStructuredData,
@@ -20,6 +15,12 @@ import {
 } from "../../../lib/structured-data";
 import { articleMdxOptions } from "../../../lib/mdx";
 import { buildBlogPath, normalizeBlogBasePath } from "../../../lib/urls";
+import {
+  type BlogTheme,
+  extractTableOfContents,
+  formatArticleDateMeta,
+  getBlogThemeStyle,
+} from "../../../lib/article-ui";
 
 interface ArticlePageProps {
   article: PublishedArticle;
@@ -33,14 +34,31 @@ interface ArticlePageProps {
     previousArticle?: {
       url: string;
       title: string;
+      featuredImage?: string;
+      featuredImageAlt?: string;
     };
     nextArticle?: {
       url: string;
       title: string;
+      featuredImage?: string;
+      featuredImageAlt?: string;
     };
   };
   /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */
   basePath?: string;
+  /** Optional theme values for host-site brand integration. */
+  theme?: BlogTheme;
+  /** Optional post-article CTA supplied by the host site. */
+  postArticleCta?: {
+    title: string;
+    description?: string;
+    href: string;
+    label: string;
+  };
+  /** Optional related articles supplied by the host site. */
+  relatedArticles?: PublishedArticle[];
+  /** Whether to render static article share links. */
+  showShareLinks?: boolean;
 }
 
 /**
@@ -63,30 +81,35 @@ export default function ArticlePage({
   className,
   navigation,
   basePath = "/blog",
+  theme,
+  postArticleCta,
+  relatedArticles = [],
+  showShareLinks = true,
 }: ArticlePageProps) {
   const normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
-  const publishedDate = new Date(article.publishedAt);
-  const updatedDate = new Date(article.updatedAt);
-  const isUpdated = updatedDate.getTime() !== publishedDate.getTime();
-  const formattedDate = formatDistanceToNow(publishedDate, { addSuffix: true });
+  const dateMeta = formatArticleDateMeta(article.publishedAt, article.updatedAt);
   const readingTime = formatReadingTime(article.readingSeconds);
+  const tocItems = extractTableOfContents(article.content);
+  const articleUrl =
+    article.meta.canonicalUrl ?? buildBlogPath(normalizedBasePath, article.slug);
 
   // Use the featured image URL provided by Bloggy (hosted on Bloggy's domain)
   const imageUrl = article.featuredImage;
 
   return (
     <article
+      style={getBlogThemeStyle(theme)}
       className={cn(
-        "article-page mx-auto max-w-4xl px-4 py-6 pb-12 sm:px-6 sm:py-8 sm:pb-16 lg:px-8 lg:py-12 lg:pb-24",
+        "article-page mx-auto max-w-6xl px-4 py-6 pb-12 sm:px-6 sm:py-8 sm:pb-16 lg:px-8 lg:py-12 lg:pb-24",
         className,
       )}
     >
       {/* Navigation */}
       {navigation?.backToHome && (
-        <header className="mb-8 sm:mb-12 lg:mb-16">
+        <header className="mx-auto mb-8 max-w-4xl sm:mb-12 lg:mb-16">
           <Link
             href={navigation.backToHome.url}
-            className="text-muted-foreground hover:text-foreground group focus-visible:ring-ring inline-flex touch-manipulation items-center space-x-2 rounded-md px-2 py-1 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:space-x-3"
+            className="text-muted-foreground hover:text-[var(--blog-accent)] group focus-visible:ring-ring inline-flex touch-manipulation items-center space-x-2 rounded-md px-2 py-1 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:space-x-3"
             aria-label={navigation.backToHome.label ?? "Return to blog"}
           >
             <ArrowLeft
@@ -104,15 +127,15 @@ export default function ArticlePage({
       )}
 
       {/* Article Header */}
-      <header className="article-header mb-6 space-y-4 text-center sm:mb-8 sm:space-y-6 lg:mb-12 lg:space-y-8">
+      <header className="article-header mx-auto mb-6 max-w-4xl space-y-4 text-center sm:mb-8 sm:space-y-6 lg:mb-12 lg:space-y-8">
         {/* Title */}
-        <h1 className="article-title text-foreground px-4 text-2xl leading-tight font-light tracking-tight sm:px-0 sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
+        <h1 className="article-title bg-linear-to-br from-[var(--blog-accent-hover)] via-[var(--blog-text-accent)] to-fuchsia-200 bg-clip-text px-4 text-2xl leading-tight font-light tracking-tight text-balance text-transparent sm:px-0 sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
           {article.title}
         </h1>
 
         {/* Excerpt */}
         {article.excerpt && (
-          <p className="article-excerpt text-muted-foreground mx-auto mt-6 max-w-xs px-4 text-base leading-relaxed sm:mt-8 sm:max-w-lg sm:px-0 sm:text-lg md:max-w-2xl md:text-xl lg:max-w-4xl lg:text-2xl">
+          <p className="article-excerpt text-muted-foreground mx-auto mt-6 max-w-[42rem] px-4 text-lg leading-relaxed text-balance sm:mt-8 sm:max-w-[46rem] sm:px-0 sm:text-xl md:max-w-[52rem] md:text-2xl lg:max-w-4xl lg:text-2xl">
             {article.excerpt}
           </p>
         )}
@@ -135,17 +158,19 @@ export default function ArticlePage({
             <time
               dateTime={article.publishedAt}
               className="font-medium"
-              aria-label={`Published ${formattedDate}`}
+              aria-label={`Published ${dateMeta.publishedDateLabel}`}
             >
-              Published {formattedDate}
+              Published {dateMeta.publishedDateLabel}
             </time>
             <span className="text-border">•</span>
+            <span className="font-medium">{dateMeta.publishedRelativeLabel}</span>
+            <span className="text-border">•</span>
             <span className="font-medium">{readingTime}</span>
           </div>
 
-          {isUpdated && (
+          {dateMeta.isUpdated && (
             <time dateTime={article.updatedAt} className="text-xs">
-              Updated {format(updatedDate, "MMMM d, yyyy")}
+              Updated {dateMeta.updatedDateLabel}
             </time>
           )}
 
@@ -162,7 +187,7 @@ export default function ArticlePage({
 
       {/* Featured Image */}
       {imageUrl && (
-        <div className="article-featured-image relative my-8 aspect-[16/9] w-full overflow-hidden rounded-lg sm:my-12 lg:my-16">
+        <div className="article-featured-image mx-auto my-8 aspect-[16/9] w-full max-w-4xl overflow-hidden rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)] sm:my-12 lg:my-16">
           <Image
             src={imageUrl}
             alt={
@@ -177,50 +202,98 @@ export default function ArticlePage({
       )}
 
       {/* Article Content */}
-      <div className="article-content">
-        <div className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl prose-gray dark:prose-invert prose-headings:scroll-mt-20 prose-headings:font-light prose-h1:text-2xl sm:prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:text-xl sm:prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-lg sm:prose-h3:text-xl lg:prose-h3:text-2xl prose-p:leading-relaxed prose-img:mx-auto prose-img:rounded-lg prose-a:transition-colors max-w-none">
-          <MDXRemote source={article.content} options={articleMdxOptions} />
+      <div className="article-content mx-auto grid max-w-6xl grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12">
+        <div className="min-w-0">
+          <ArticleTableOfContents items={tocItems} variant="mobile" />
+
+          <div className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl prose-gray dark:prose-invert prose-headings:scroll-mt-20 prose-headings:font-light prose-headings:text-balance prose-headings:text-[var(--blog-text-accent)] prose-h1:text-2xl sm:prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:text-xl sm:prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-lg sm:prose-h3:text-xl lg:prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-pretty prose-a:text-[var(--blog-text-accent)] prose-a:transition-colors hover:prose-a:text-[var(--blog-text-accent-hover)] max-w-none">
+            <MDXRemote
+              source={article.content}
+              options={articleMdxOptions}
+              components={{ img: ExpandableArticleImage }}
+            />
+          </div>
         </div>
+
+        <ArticleTableOfContents items={tocItems} variant="desktop" />
       </div>
 
       {/* Author Bio */}
       {article.author?.bio && (
-        <div className="author-bio mt-12">
+        <div className="author-bio mx-auto mt-12 max-w-4xl">
           <Separator className="mb-8" />
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                About {article.author.name}
-                {article.author.isGuest && (
-                  <Badge variant="outline" className="text-xs">
-                    Guest Author
-                  </Badge>
-                )}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="prose dark:prose-invert">
-                <p className="text-muted-foreground">{article.author.bio}</p>
+          <Card className="border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)]">
+            <CardContent className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:p-6">
+              <div
+                className="flex size-12 shrink-0 items-center justify-center rounded-full bg-[var(--blog-accent)] text-lg font-semibold text-white"
+                aria-hidden="true"
+              >
+                {article.author.name.slice(0, 1)}
+              </div>
+              <div className="min-w-0 space-y-2">
+                <div>
+                  <p className="text-muted-foreground text-sm font-medium">
+                    Written by
+                  </p>
+                  <h2 className="text-foreground flex flex-wrap items-center gap-2 text-xl font-semibold">
+                    {article.author.name}
+                    {article.author.isGuest && (
+                      <Badge variant="outline" className="text-xs">
+                        Guest Author
+                      </Badge>
+                    )}
+                  </h2>
+                </div>
+                <p className="text-muted-foreground leading-relaxed">
+                  {article.author.bio}
+                </p>
               </div>
             </CardContent>
           </Card>
         </div>
       )}
 
+      {((postArticleCta ?? false) ||
+        showShareLinks ||
+        relatedArticles.length > 0) && (
+        <div className="mx-auto mt-12 max-w-4xl space-y-8">
+          <Separator />
+          {postArticleCta && <PostArticleCta cta={postArticleCta} />}
+          {showShareLinks && (
+            <ArticleShareLinks title={article.title} url={articleUrl} />
+          )}
+          {relatedArticles.length > 0 && (
+            <RelatedArticles
+              articles={relatedArticles.slice(0, 3)}
+              basePath={normalizedBasePath}
+            />
+          )}
+        </div>
+      )}
+
       {/* Article Navigation */}
       {(Boolean(navigation?.previousArticle) ||
         Boolean(navigation?.nextArticle)) && (
-        <nav className="article-nav mt-12">
+        <nav className="article-nav mx-auto mt-12 max-w-4xl">
           <Separator className="mb-8" />
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {navigation?.previousArticle && (
-              <Card className="group hover:bg-accent/50 cursor-pointer transition-colors">
+              <Card className="group hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] cursor-pointer transition-colors">
                 <Link href={navigation.previousArticle.url} className="block">
+                  {navigation.previousArticle.featuredImage && (
+                    <ArticleCardImage
+                      src={navigation.previousArticle.featuredImage}
+                      alt={
+                        navigation.previousArticle.featuredImageAlt ??
+                        `Featured image for ${navigation.previousArticle.title}`
+                      }
+                    />
+                  )}
                   <CardContent className="p-4">
                     <div className="text-muted-foreground mb-2 text-sm font-medium">
                       ← Previous Article
                     </div>
-                    <div className="text-foreground group-hover:text-primary transition-colors">
+                    <div className="text-foreground group-hover:text-[var(--blog-text-accent)] transition-colors">
                       {navigation.previousArticle.title}
                     </div>
                   </CardContent>
@@ -230,16 +303,25 @@ export default function ArticlePage({
             {navigation?.nextArticle && (
               <Card
                 className={cn(
-                  "group hover:bg-accent/50 cursor-pointer transition-colors",
+                  "group hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] cursor-pointer transition-colors",
                   !navigation?.previousArticle && "md:col-start-2",
                 )}
               >
                 <Link href={navigation.nextArticle.url} className="block">
+                  {navigation.nextArticle.featuredImage && (
+                    <ArticleCardImage
+                      src={navigation.nextArticle.featuredImage}
+                      alt={
+                        navigation.nextArticle.featuredImageAlt ??
+                        `Featured image for ${navigation.nextArticle.title}`
+                      }
+                    />
+                  )}
                   <CardContent className="p-4 md:text-right">
                     <div className="text-muted-foreground mb-2 text-sm font-medium">
                       Next Article →
                     </div>
-                    <div className="text-foreground group-hover:text-primary transition-colors">
+                    <div className="text-foreground group-hover:text-[var(--blog-text-accent)] transition-colors">
                       {navigation.nextArticle.title}
                     </div>
                   </CardContent>
@@ -270,6 +352,191 @@ export default function ArticlePage({
   );
 }
 
+function ArticleTableOfContents({
+  items,
+  variant,
+}: {
+  items: ReturnType<typeof extractTableOfContents>;
+  variant: "mobile" | "desktop";
+}) {
+  if (items.length === 0) {
+    return null;
+  }
+
+  const list = (
+    <ul className="space-y-2 text-sm">
+      {items.map((item) => (
+        <li key={item.id} className={item.level === 3 ? "pl-4" : undefined}>
+          <a
+            href={`#${item.id}`}
+            className="text-muted-foreground hover:text-[var(--blog-text-accent)] block leading-snug transition-colors"
+          >
+            {item.text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+
+  if (variant === "mobile") {
+    return (
+      <nav
+        aria-label="Table of contents"
+        className="mb-8 rounded-2xl border border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)] p-4 lg:hidden"
+      >
+        <p className="text-foreground mb-3 text-sm font-semibold">
+          On this page
+        </p>
+        {list}
+      </nav>
+    );
+  }
+
+  return (
+    <aside className="hidden lg:block">
+      <nav
+        aria-label="Table of contents"
+        className="sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto border-l border-border pl-5"
+      >
+        <p className="text-muted-foreground mb-3 text-xs font-semibold tracking-wider uppercase">
+          On this page
+        </p>
+        {list}
+      </nav>
+    </aside>
+  );
+}
+
+function PostArticleCta({
+  cta,
+}: {
+  cta: NonNullable<ArticlePageProps["postArticleCta"]>;
+}) {
+  return (
+    <div className="rounded-2xl border border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)] p-5 sm:p-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-1">
+          <h2 className="text-foreground text-xl font-semibold">{cta.title}</h2>
+          {cta.description && (
+            <p className="text-muted-foreground leading-relaxed">
+              {cta.description}
+            </p>
+          )}
+        </div>
+        <Link
+          href={cta.href}
+          className="inline-flex shrink-0 items-center justify-center gap-2 rounded-full bg-[var(--blog-accent)] px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+        >
+          {cta.label}
+          <ArrowUpRight className="size-4" aria-hidden="true" />
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function ArticleShareLinks({ title, url }: { title: string; url: string }) {
+  const encodedTitle = encodeURIComponent(title);
+  const encodedUrl = encodeURIComponent(url);
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3">
+      <span className="text-muted-foreground inline-flex basis-full items-center justify-center gap-2 text-sm font-medium sm:basis-auto">
+        <Share2 className="size-4" aria-hidden="true" />
+        Share
+      </span>
+      <a
+        href={`https://x.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Share on X"
+        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:text-foreground inline-flex size-9 items-center justify-center rounded-full border border-border grayscale transition-colors"
+      >
+        <span className="text-sm font-semibold" aria-hidden="true">
+          X
+        </span>
+      </a>
+      <a
+        href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Share on LinkedIn"
+        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:text-foreground inline-flex size-9 items-center justify-center rounded-full border border-border grayscale transition-colors"
+      >
+        <span className="text-sm font-bold" aria-hidden="true">
+          in
+        </span>
+      </a>
+      <a
+        href={`mailto:?subject=${encodedTitle}&body=${encodedUrl}`}
+        aria-label="Share by email"
+        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:text-foreground inline-flex size-9 items-center justify-center rounded-full border border-border grayscale transition-colors"
+      >
+        <Mail className="size-4" aria-hidden="true" />
+      </a>
+    </div>
+  );
+}
+
+function RelatedArticles({
+  articles,
+  basePath,
+}: {
+  articles: PublishedArticle[];
+  basePath: string;
+}) {
+  return (
+    <section className="space-y-4" aria-labelledby="related-articles-title">
+      <h2 id="related-articles-title" className="text-xl font-semibold">
+        You might also like
+      </h2>
+      <div className="grid gap-4 md:grid-cols-3">
+        {articles.map((article) => (
+          <Link
+            key={article.id}
+            href={buildBlogPath(basePath, article.slug)}
+            className="group overflow-hidden rounded-2xl border border-border transition-colors hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:no-underline"
+          >
+            {article.featuredImage && (
+              <ArticleCardImage
+                src={article.featuredImage}
+                alt={
+                  article.featuredImageAlt ??
+                  `Featured image for ${article.title}`
+                }
+              />
+            )}
+            <div className="p-4">
+              <h3 className="text-foreground group-hover:text-[var(--blog-text-accent)] line-clamp-3 font-semibold transition-colors">
+                {article.title}
+              </h3>
+              {article.excerpt && (
+                <p className="text-muted-foreground mt-2 line-clamp-3 text-sm leading-relaxed">
+                  {article.excerpt}
+                </p>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ArticleCardImage({ src, alt }: { src: string; alt: string }) {
+  return (
+    <div className="aspect-[16/9] overflow-hidden border-b border-border bg-[var(--blog-accent-bg)]">
+      <Image
+        src={src}
+        alt={alt}
+        width={480}
+        height={270}
+        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+      />
+    </div>
+  );
+}
+
 /**
  * Generate metadata for the article page for SEO optimization.
  * This function should be used in the Next.js metadata API.

package/dist/app/blog/page.tsx

@@ -13,6 +13,10 @@ import {
 } from "../../lib/structured-data";
 import { buildBlogPath, normalizeBlogBasePath } from "../../lib/urls";
 import { formatDistanceToNow } from "date-fns";
+import {
+  type BlogTheme,
+  getBlogThemeStyle,
+} from "../../lib/article-ui";
 
 interface BlogHomePageProps {
   articles: PublishedArticle[];
@@ -31,6 +35,8 @@ interface BlogHomePageProps {
     totalPages: number;
     baseUrl?: string;
   };
+  /** Optional theme values for host-site brand integration. */
+  theme?: BlogTheme;
 }
 
 /**
@@ -49,11 +55,13 @@ export default function BlogHomePage({
   includeStructuredData = false,
   basePath = "/blog",
   pagination,
+  theme,
 }: BlogHomePageProps) {
   const normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
 
   return (
     <div
+      style={getBlogThemeStyle(theme)}
       className={cn(
         "blog-home-page container mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16",
         className,
@@ -62,7 +70,7 @@ export default function BlogHomePage({
       {/* Site Header */}
       {siteName && (
         <header className="blog-header mb-8 text-center sm:mb-12 lg:mb-16">
-          <h1 className="blog-title text-foreground mb-2 text-3xl font-light tracking-tight sm:text-4xl lg:text-5xl">
+          <h1 className="blog-title mb-2 bg-linear-to-r from-[var(--blog-accent-hover)] to-[var(--blog-accent)] bg-clip-text text-3xl font-semibold tracking-tight text-balance text-transparent sm:text-4xl lg:text-5xl">
             {siteName}
           </h1>
           {siteTagline && (
@@ -162,13 +170,13 @@ function ArticlePreview({
     <article className="group border-border mb-6 block border-b pb-6 last:mb-0 last:border-b-0 last:pb-0 sm:mb-8 sm:pb-8">
       <Link
         href={articleUrl}
-        className="focus-visible:ring-ring block rounded-lg hover:no-underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+        className="focus-visible:ring-ring block rounded-2xl hover:no-underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
         aria-label={`Read article: ${article.title}`}
       >
         {/* Mobile/Small Tablet: Vertical layout */}
         <div className="space-y-4 lg:hidden">
           {imageUrl && (
-            <div className="relative aspect-[16/10] w-full overflow-hidden rounded-lg">
+            <div className="relative aspect-[16/10] w-full overflow-hidden rounded-2xl">
               <Image
                 src={imageUrl}
                 alt={
@@ -183,7 +191,7 @@ function ArticlePreview({
           )}
 
           <div className="space-y-3">
-            <h2 className="group-hover:text-primary text-lg leading-tight font-bold transition-colors sm:text-xl md:text-2xl">
+            <h2 className="group-hover:text-[var(--blog-accent)] text-lg leading-tight font-bold text-balance transition-colors sm:text-xl md:text-2xl">
               {article.title}
             </h2>
 
@@ -216,7 +224,7 @@ function ArticlePreview({
         {/* Large Tablet/Desktop: Horizontal layout */}
         <div className="hidden items-start gap-6 lg:flex xl:gap-8">
           {imageUrl && (
-            <div className="relative aspect-[16/10] w-64 shrink-0 overflow-hidden rounded-lg xl:w-72">
+            <div className="relative aspect-[16/10] w-64 shrink-0 overflow-hidden rounded-2xl xl:w-72">
               <Image
                 src={imageUrl}
                 alt={
@@ -232,7 +240,7 @@ function ArticlePreview({
 
           <div className="flex min-h-[180px] flex-1 flex-col justify-between space-y-4 xl:min-h-[200px]">
             <div className="space-y-4">
-              <h2 className="group-hover:text-primary text-2xl leading-tight font-bold transition-colors xl:text-3xl">
+              <h2 className="group-hover:text-[var(--blog-accent)] text-2xl leading-tight font-bold text-balance transition-colors xl:text-3xl">
                 {article.title}
               </h2>