website poc

apps/website/components/ui/Button.tsx

@@ -0,0 +1,53 @@
+import { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+
+type ButtonAsButton = ButtonHTMLAttributes<HTMLButtonElement> & {
+  as?: 'button';
+  href?: never;
+};
+
+type ButtonAsLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  as: 'a';
+  href: string;
+};
+
+type ButtonProps = (ButtonAsButton | ButtonAsLink) & {
+  variant?: 'primary' | 'secondary';
+  children: ReactNode;
+};
+
+export default function Button({
+  variant = 'primary',
+  children,
+  className = '',
+  as = 'button',
+  ...props
+}: ButtonProps) {
+  const baseStyles = 'rounded-full px-6 py-3 text-sm font-semibold transition-all duration-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 hover:scale-[1.03] active:scale-[0.98]';
+  
+  const variantStyles = {
+    primary: 'bg-primary-blue text-white hover:shadow-glow active:ring-2 active:ring-primary-blue focus-visible:outline-primary-blue',
+    secondary: 'bg-iron-gray text-white border border-charcoal-outline hover:shadow-glow-strong hover:border-primary-blue focus-visible:outline-primary-blue'
+  };
+
+  const classes = `${baseStyles} ${variantStyles[variant]} ${className}`;
+
+  if (as === 'a') {
+    return (
+      <a
+        className={classes}
+        {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      className={classes}
+      {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {children}
+    </button>
+  );
+}