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

components/layout/Section.tsx

@@ -1,19 +1,28 @@
 import type { ElementType, ReactNode } from "react";
 
-interface SectionProps {
+interface SectionProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode;
   className?: string;
   as?: ElementType;
+  variant?: "sm" | "lg" | "hero" | "flush";
 }
 
 export function Section({
   children,
   className = "",
   as: Tag = "section",
+  variant,
+  ...props
 }: SectionProps) {
+  const variantClass = variant === "sm" ? "section--sm" :
+    variant === "lg" ? "section--lg" :
+      variant === "hero" ? "section--hero" :
+        variant === "flush" ? "section--flush" : "";
+
   return (
     <Tag
-      className={`py-[var(--section-spacing-y)] ${className}`.trim()}
+      className={`section ${variantClass} ${className}`.trim()}
+      {...props}
     >
       {children}
     </Tag>