refactor(blog): updated hero-section, blog-related-post section & cta section as per design

- updated changelog.md

Author: Vatsal6288

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 All notable changes to this template will be documented in this file
 
-## v1.0.0 (2026-01-20)
+## v1.0.0 (2026-01-23)
 
 ### Added
 

src/components/blocks/blog-component/blog-component.tsx

@@ -26,7 +26,7 @@ export type BlogPost = {
   description: string
   imageUrl: string
   imageAlt: string
-  pubDate: Date
+  pubDate: string
   author: string
   avatarUrl: string
   category: string
@@ -67,13 +67,7 @@ const BlogGrid = ({ posts, onCategoryClick }: { posts: BlogPost[]; onCategoryCli
               <div className='flex items-center justify-between gap-1.5'>
                 <div className='text-muted-foreground flex items-center gap-1.5'>
                   <CalendarDaysIcon className='size-6' />
-                  <p className='font-medium'>
-                    {new Date(post.pubDate).toLocaleDateString('en-US', {
-                      year: 'numeric',
-                      month: 'long',
-                      day: 'numeric'
-                    })}
-                  </p>
+                  <p className='font-medium'>{post.pubDate}</p>
                 </div>
                 <Badge
                   className='bg-primary/10 text-primary badge rounded-full border-0 text-sm'

src/components/blocks/blog-related-post/blog-related-post.tsx

@@ -53,7 +53,7 @@ const Blog = ({ relatedPosts }: { relatedPosts: BlogPost[] }) => {
                   <div className='flex items-center justify-between gap-1.5'>
                     <div className='text-muted-foreground flex items-center gap-1.5'>
                       <CalendarDaysIcon className='size-6' />
-                      <span>{post.pubDate.toLocaleDateString()}</span>
+                      <span>{post.pubDate}</span>
                     </div>
                     <Badge
                       className='bg-primary/10 text-primary border-0 text-sm'

src/components/blocks/hero-section/hero-section.tsx

@@ -50,13 +50,7 @@ const HeroSection = ({ blogData }: { blogData: BlogPost[] }) => {
                     <div className='flex items-center gap-1.5 py-1'>
                       <div className='text-muted-foreground flex grow items-center gap-1.5'>
                         <CalendarDaysIcon className='size-6' />
-                        <p className='font-medium'>
-                          {new Date(item.pubDate).toLocaleDateString('en-US', {
-                            year: 'numeric',
-                            month: 'long',
-                            day: 'numeric'
-                          })}
-                        </p>
+                        <p className='font-medium'>{item.pubDate}</p>
                       </div>
                       <Badge
                         className='bg-primary/10 text-primary cursor-pointer border-0 text-sm'

src/content.config.ts

@@ -10,7 +10,7 @@ const blog = defineCollection({
     description: z.string(),
     imageUrl: z.string().optional(),
     imageAlt: z.string().optional(),
-    pubDate: z.coerce.date(),
+    pubDate: z.string(),
     author: z.string().default('shadcn Studio'),
     avatarUrl: z.string().optional(),
     category: z.string().default('General'),

src/pages/blog/[slug].astro

@@ -13,7 +13,7 @@ import {
 } from '@/components/ui/breadcrumb'
 import DynamicToc from '@/components/astro/DynamicToc.astro'
 import { AuthorMetadata } from '@/components/AuthorAvatar'
-import { getRelatedPosts, getPostNavigation, calculateReadTime, formatDate } from '@/utils/blog'
+import { getRelatedPosts, getPostNavigation, calculateReadTime } from '@/utils/blog'
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 
 import { mdxComponents } from '@/components/mdx-components'
@@ -66,7 +66,7 @@ const schema = {
   headline: entry.data.title,
   description: entry.data.description,
   image: entry.data.imageUrl,
-  datePublished: entry.data.pubDate.toISOString(),
+  datePublished: entry.data.pubDate,
   author: {
     '@type': 'Person',
     name: entry.data.author
@@ -79,7 +79,7 @@ const schema = {
   description={entry.data.description}
   image={entry.data.imageUrl}
   type='article'
-  publishedTime={entry.data.pubDate.toISOString()}
+  publishedTime={entry.data.pubDate}
   author={entry.data.author}
   schema={schema}
 >
@@ -133,7 +133,7 @@ const schema = {
                 </div>
                 <div class='flex flex-col gap-1.5'>
                   <span class='text-muted-foreground text-sm'>Posted on</span>
-                  <span class='text-foreground text-sm font-medium'>{formatDate(entry.data.pubDate)}</span>
+                  <span class='text-foreground text-sm font-medium'>{entry.data.pubDate}</span>
                 </div>
               </div>
             </div>

src/pages/index.astro

@@ -26,7 +26,7 @@ const allBlogPosts = publishedPosts
     readTime: post.data.readTime || 5,
     featured: post.data.featured || false
   }))
-  .sort((a, b) => b.pubDate.getTime() - a.pubDate.getTime())
+  .sort((a, b) => b.pubDate.localeCompare(a.pubDate))
 
 // Page-specific SEO configuration
 const pageTitle = ''

src/utils/blog.ts

@@ -45,7 +45,7 @@ export function getPostNavigation(
   currentSlug: string
 ): { previous: CollectionEntry<'blog'> | null; next: CollectionEntry<'blog'> | null } {
   // Sort posts by pubDate (newest first)
-  const sortedPosts = [...posts].sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
+  const sortedPosts = [...posts].sort((a, b) => b.data.pubDate.localeCompare(a.data.pubDate))
   const currentIndex = sortedPosts.findIndex(post => post.id === currentSlug)
 
   if (currentIndex === -1) {