feat: update blog page localization and styling

- Change "publisher" to "author" in English and Chinese translation files
- Add Lucide icons for date and reading time in blog post page
- Implement link underline animation in global CSS
- Enhance blog post page layout with icon-based metadata display
- Improve visual consistency and internationalization for blog components

messages/en.json

@@ -66,7 +66,7 @@
   "BlogPage": {
     "title": "Blog",
     "subtitle": "Latest news and updates from our team",
-    "publisher": "Publisher",
+    "author": "Author",
     "categories": "Categories",
     "tableOfContents": "Table of Contents",
     "all": "All",

messages/zh.json

@@ -66,7 +66,7 @@
   "BlogPage": {
     "title": "博客",
     "subtitle": "来自我们的团队最新新闻和更新",
-    "publisher": "发布者",
+    "author": "作者",
     "categories": "分类",
     "tableOfContents": "目录",
     "all": "全部",

src/app/[locale]/(marketing)/blog/[...slug]/page.tsx

@@ -7,10 +7,11 @@ import { getBaseUrl } from '@/lib/urls/get-base-url';
 import { estimateReadingTime, getLocaleDate } from '@/lib/utils';
 import type { NextPageProps } from '@/types/next-page-props';
 import { allPosts } from 'content-collections';
+import { CalendarIcon, ClockIcon } from 'lucide-react';
 import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
-import { getTranslations } from 'next-intl/server';
 
 import '@/styles/mdx.css';
 
@@ -115,8 +116,14 @@ export default async function BlogPostPage(props: NextPageProps) {
 
             {/* blog post date */}
             <div className="flex items-center justify-between gap-2">
-              <p className="text-sm text-muted-foreground">{date}</p>
-              <p className="text-sm text-muted-foreground">{estimateReadingTime(post.body.raw)}</p>
+              <div className="flex items-center gap-2">
+                <CalendarIcon className="size-4 text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">{date}</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <ClockIcon className="size-4 text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">{estimateReadingTime(post.body.raw)}</p>
+              </div>
             </div>
 
             {/* blog post title */}
@@ -141,7 +148,7 @@ export default async function BlogPostPage(props: NextPageProps) {
           <div className="space-y-4 lg:sticky lg:top-24">
             {/* author info */}
             <div className="bg-muted/50 rounded-lg p-6">
-              <h2 className="text-lg font-semibold mb-4">{t("publisher")}</h2>
+              <h2 className="text-lg font-semibold mb-4">{t("author")}</h2>
               <div className="flex items-center gap-4">
                 <div className="relative h-8 w-8 flex-shrink-0">
                   {post.author?.avatar && (
@@ -166,7 +173,7 @@ export default async function BlogPostPage(props: NextPageProps) {
                     <li key={category.slug}>
                       <LocaleLink
                         href={`/blog/category/${category.slug}`}
-                        className="text-sm link-underline"
+                        className="text-sm link-underline-animation"
                       >
                         {category.name}
                       </LocaleLink>

src/styles/globals.css

@@ -62,3 +62,10 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .link-underline-animation {
+    @apply relative underline underline-offset-4 decoration-transparent decoration-2
+          hover:decoration-primary hover:text-primary transition-all duration-300 ease-in-out;
+  }
+}