feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.

components/layout/Container.tsx

@@ -1,19 +1,27 @@
 import type { ElementType, ReactNode } from "react";
+import React from "react"; // Added import for React to use React.HTMLAttributes
 
-interface ContainerProps {
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode;
   className?: string;
   as?: ElementType;
+  variant?: "narrow" | "wide"; // Add variant support
 }
 
 export function Container({
   children,
   className = "",
   as: Tag = "div",
+  variant,
+  ...props
 }: ContainerProps) {
+  const variantClass = variant === "narrow" ? "container--narrow" :
+    variant === "wide" ? "container--wide" : "";
+
   return (
     <Tag
-      className={`mx-auto w-full max-w-[var(--container-max-width)] px-[var(--container-padding-x)] ${className}`.trim()}
+      className={`container ${variantClass} ${className}`.trim()}
+      {...props}
     >
       {children}
     </Tag>