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

components/ui/Button.tsx

@@ -1,42 +1,34 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 
-type ButtonVariant = "primary" | "secondary" | "ghost";
-type ButtonSize = "sm" | "md" | "lg";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+type ButtonSize = "sm" | "lg";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   variant?: ButtonVariant;
   size?: ButtonSize;
+  className?: string; // Explicitly allow className
 }
 
-const baseClasses =
-  "inline-flex items-center justify-center font-medium rounded-[var(--radius-md)] transition-all duration-[var(--duration-normal)] ease-[var(--easing-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)] disabled:pointer-events-none disabled:opacity-50";
-
-const variantClasses: Record<ButtonVariant, string> = {
-  primary:
-    "bg-[var(--color-primary)] text-[color:var(--color-background)] hover:opacity-90",
-  secondary:
-    "bg-[var(--color-muted)] text-[color:var(--color-foreground)] border border-[color:var(--color-border)] hover:opacity-80",
-  ghost:
-    "bg-transparent text-[color:var(--color-foreground)] hover:bg-[var(--color-muted)]",
-};
-
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: "px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-[length:var(--font-size-sm)]",
-  md: "px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[length:var(--font-size-base)]",
-  lg: "px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[length:var(--font-size-lg)]",
-};
-
 export function Button({
   children,
   variant = "primary",
-  size = "md",
+  size,
   className = "",
   ...props
 }: ButtonProps) {
+  // Construct class names based on stylesheet.css
+  const variantClass = variant === "primary" ? "btn-primary" :
+    variant === "secondary" ? "btn-secondary" :
+      variant === "outline" ? "btn-outline" :
+        variant === "ghost" ? "btn-ghost" : "";
+
+  const sizeClass = size === "sm" ? "btn-sm" :
+    size === "lg" ? "btn-lg" : "";
+
   return (
     <button
-      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()}
+      className={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
       {...props}
     >
       {children}

components/ui/Card.tsx

@@ -13,7 +13,7 @@ export function Card({
 }: CardProps) {
   return (
     <Tag
-      className={`rounded-[var(--radius-md)] border border-[color:var(--color-border)] shadow-[var(--shadow-sm)] p-[var(--spacing-lg)] ${className}`.trim()}
+      className={`card ${className}`.trim()}
     >
       {children}
     </Tag>