first commit

components/ui/Button.tsx

@@ -0,0 +1,44 @@
+"use client";
+import { motion, HTMLMotionProps } from "framer-motion";
+import { ReactNode } from "react";
+
+// Extendemos de HTMLMotionProps para heredar todos los atributos nativos de un botón (incluyendo disabled)
+interface ButtonProps extends HTMLMotionProps<"button"> {
+  children: ReactNode;
+  variant?: "primary" | "outline" | "ocean";
+  className?: string;
+}
+
+export const Button = ({ 
+  children, 
+  variant = "primary", 
+  className = "", 
+  disabled,
+  ...props 
+}: ButtonProps) => {
+  
+  const variants = {
+    primary: "bg-navy text-white hover:bg-ocean disabled:bg-navy/50",
+    outline: "border-2 border-navy text-navy hover:bg-navy hover:text-white disabled:opacity-50",
+    ocean: "bg-ocean text-white hover:bg-sky disabled:bg-ocean/50",
+  };
+
+  return (
+    <motion.button
+      // Los botones en sistemas tipo Together AI tienen interacciones táctiles sutiles
+      whileHover={disabled ? {} : { scale: 1.02 }}
+      whileTap={disabled ? {} : { scale: 0.98 }}
+      disabled={disabled}
+      className={`
+        px-8 py-4 rounded-full font-bold text-[14px] 
+        transition-all duration-300 uppercase tracking-tight 
+        disabled:cursor-not-allowed
+        ${variants[variant]} 
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </motion.button>
+  );
+};