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/layouts/BlogPostLayout.astro

@@ -10,6 +10,7 @@ import AuthorCard from '@/components/AuthorCard';
 import TableOfContents from '@/components/layout/TableOfContents.astro';
 import BlogNavigation from '@/components/layout/BlogNavigation.astro';
 import PostMeta from '@/components/blog/PostMeta.astro';
+import Container from '../components/ui/Container';
 
 // Use Astro's MarkdownLayoutProps for proper type safety
 export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -41,7 +42,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
   
   <!-- Main content with proper spacing for fixed header -->
   <div class="pt-16 sm:pt-20">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
+    <Container client:load size="md" className="py-6 sm:py-8">
       <div class="max-w-7xl mx-auto">
         <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
           <!-- Main Content -->
@@ -98,7 +99,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
           </aside>
         </div>
       </div>
-    </div>
+    </Container>
   </div>
   
   <!-- Footer -->