chore: deep semantic HTML audit and improvements across all pages

components/home/RecentPosts.tsx

@@ -35,7 +35,10 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
           {recentPosts.map((post) => (
             <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
-              <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl">
+              <Card
+                tag="article"
+                className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
+              >
                 {post.frontmatter.featuredImage && (
                   <div className="relative h-64 overflow-hidden">
                     <Image
@@ -57,11 +60,13 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                 <div className="p-6 md:p-8 flex flex-col flex-grow">
                   <div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
                     <span className="w-6 md:w-8 h-px bg-neutral-medium" />
-                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                      year: 'numeric',
-                      month: 'long',
-                      day: 'numeric',
-                    })}
+                    <time dateTime={post.frontmatter.date}>
+                      {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })}
+                    </time>
                   </div>
                   <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
                     {post.frontmatter.title}