components

components/ui/Button.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Link from 'next/link';
+import { cn } from './utils';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'white';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
+  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
+  
+  const variants = {
+    primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
+    secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
+    accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
+    outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
+    ghost: 'hover:bg-primary-light text-primary',
+    white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
+  };
+
+  const sizes = {
+    sm: 'h-9 px-4 text-sm',
+    md: 'h-11 px-6 text-base',
+    lg: 'h-14 px-8 text-lg',
+    xl: 'h-16 px-10 text-xl',
+  };
+
+  const styles = cn(baseStyles, variants[variant], sizes[size], className);
+
+  if (href) {
+    return (
+      <Link href={href} className={styles}>
+        {props.children}
+      </Link>
+    );
+  }
+
+  return (
+    <button className={styles} {...props} />
+  );
+}