feat(ui): add Container component and replace manual container divs

Implement a reusable Container component with size variants (sm, md, lg, xl, full) to standardize content width across the application. Replace all manual container divs with the new component for consistent styling and maintainability.

src/pages/blog/index.astro

@@ -3,6 +3,7 @@ import BlogLayout from '../../layouts/BlogLayout.astro';
 import BlogList from '../../components/blog/BlogList.astro';
 import CategoryCard from '../../components/blog/CategoryCard.astro';
 import TagCard from '../../components/blog/TagCard.astro';
+import Container from '../../components/ui/Container';
 import { type BlogPost } from '@/types';
 import { type Lang } from '@/i18n/utils';
 import { defaultLang } from '@/i18n/ui';
@@ -43,7 +44,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
 <BlogLayout title="Blog - Joy Zhao" description="Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.">
   <main class="min-h-screen">
     <!-- Header Section -->
-    <div class="container mx-auto px-4 pt-24 pb-12">
+    <Container client:load size="md" className="pt-24 pb-12">
       <div class="text-center mb-16">
         <h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
           Our <span class="text-purple-500">Latest</span> Blog
@@ -52,10 +53,10 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
           Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.
         </p>
       </div>
-    </div>
+    </Container>
 
     <!-- Main Content -->
-    <div class="container mx-auto px-4 pb-20">
+    <Container client:load size="md" className="pb-20">
       <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
         <!-- 侧边栏 -->
         <div class="lg:col-span-1 space-y-8">