feat: Add Section layout component and refactor page.tsx with updated styling and new Button variants.

components/ui/Button.tsx

@@ -1,12 +1,10 @@
 import Link from "next/link";
+import { JSX } from "react";
 
-interface ButtonProps {
-  children: React.ReactNode;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string;
-  variant?: "primary" | "secondary" | "ghost";
+  variant?: "primary" | "secondary" | "ghost" | "outline-white" | "ghost-white";
   className?: string;
-  type?: "button" | "submit" | "reset";
-  onClick?: () => void;
 }
 
 export function Button({
@@ -15,30 +13,32 @@ export function Button({
   variant = "primary",
   className = "",
   type = "button",
-  onClick,
+  ...props
 }: ButtonProps) {
   const base =
-    "inline-flex items-center justify-center px-6 py-3 text-sm font-medium transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+    "inline-flex items-center justify-center px-6 py-3 text-sm font-medium transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none cursor-pointer";
 
   const variants = {
-    primary: "bg-primary text-secondary hover:opacity-80",
-    secondary:
-      "border border-primary text-primary hover:bg-primary hover:text-secondary",
-    ghost: "text-primary underline-offset-4 hover:underline",
+    primary: "bg-primary text-secondary hover:opacity-90 border border-transparent",
+    secondary: "bg-transparent border border-primary text-primary hover:bg-primary hover:text-secondary",
+    ghost: "text-primary hover:bg-neutral/50",
+    "outline-white": "border border-secondary text-secondary hover:bg-secondary hover:text-primary",
+    "ghost-white": "text-secondary hover:bg-secondary/10",
   };
 
-  const classes = `${base} ${variants[variant]} ${className}`;
+  const selectedVariant = variants[variant] || variants.primary;
+  const combinedClasses = `${base} ${selectedVariant} ${className}`;
 
   if (href) {
     return (
-      <Link href={href} className={classes}>
+      <Link href={href} className={combinedClasses}>
         {children}
       </Link>
     );
   }
 
   return (
-    <button type={type} className={classes} onClick={onClick}>
+    <button type={type} className={combinedClasses} {...props}>
       {children}
     </button>
   );

components/ui/Container.tsx

@@ -11,8 +11,7 @@ export function Container({
 }: ContainerProps) {
   return (
     <Component
-      className={`mx-auto px-[var(--spacing-container-padding)] ${className}`}
-      style={{ maxWidth: "var(--spacing-container)" }}
+      className={`mx-auto w-full max-w-[var(--spacing-container)] px-[var(--spacing-container-padding)] ${className}`}
     >
       {children}
     </Component>