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/components/Footer.tsx

@@ -3,6 +3,7 @@ import { personalInfo } from "@/lib/data";
 import { motion } from "framer-motion";
 import { useState, useEffect } from "react";
 import { defaultLang } from "@/i18n/ui";
+import Container from "./ui/Container";
 import { type FooterProps } from "@/types";
 
 export default function Footer({ lang: propLang }: FooterProps) {
@@ -20,7 +21,7 @@ export default function Footer({ lang: propLang }: FooterProps) {
   const t = useTranslations(lang);
   return (
     <footer className="border-t border-purple-500/10 py-6 bg-gradient-to-b from-background to-muted/20 backdrop-blur-sm">
-      <div className="container max-w-4xl mx-auto px-6 md:px-4">
+      <Container size="sm">
         <motion.div
           className="flex flex-col md:flex-row justify-between items-center"
           initial={{ opacity: 0, y: 20 }}
@@ -67,7 +68,7 @@ export default function Footer({ lang: propLang }: FooterProps) {
             </motion.span>
           </motion.p>
         </motion.div>
-      </div>
+      </Container>
     </footer>
   );
 }