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/AboutLayout.astro

@@ -5,6 +5,7 @@ import { type Lang, type FrontmatterProps } from '@/types';
 import { defaultLang } from '@/i18n/ui';
 import GlassHeader from '@/components/GlassHeader';
 import Footer from '@/components/Footer';
+import Container from '../components/ui/Container';
 
 // Use Astro's MarkdownLayoutProps for proper type safety
 export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -21,7 +22,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   <div class="fixed inset-0 -z-10 h-full w-full bg-background">
     <!-- Additional subtle gradient for about page -->
     <div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10">
-    </div>
+     </div>
   </div>
   
   <!-- Glass Header with navigation -->
@@ -29,7 +30,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   
   <!-- 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-8 md:py-12">
       <div class="max-w-7xl mx-auto">
         <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
           <!-- Main Content -->

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 -->

src/layouts/TaxonomyPageLayout.astro

@@ -7,6 +7,7 @@ import BlogLayout from './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 Lang } from '@/i18n/utils';
 import { defaultLang } from '@/i18n/ui';
 import { type BlogPost } from '@/types';
@@ -53,7 +54,7 @@ const localizedText = getLocalizedText();
 ---
 
 <BlogLayout title={title} description={Astro.props.description}>
-  <div class="container max-w-6xl px-4 py-8">
+  <Container client:load size="md" className="py-8">
     <!-- Header Section - Centered at the top -->
     <div class="text-center mb-10">
       <h1 class="text-4xl font-bold mb-3">
@@ -91,5 +92,5 @@ const localizedText = getLocalizedText();
         )}
       </div>
     </div>
-  </div>
+  </Container>
 </BlogLayout>