design

components/Button.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  variant?: 'primary' | 'accent' | 'outline' | 'ghost';
+  className?: string;
+  showArrow?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+}
+
+export const Button = ({ 
+  children, 
+  href, 
+  onClick, 
+  variant = 'primary', 
+  className = '',
+  showArrow = false,
+  type = 'button',
+  disabled = false
+}: ButtonProps) => {
+  const baseStyles = "inline-flex items-center justify-center px-8 py-4 rounded-xl font-bold uppercase tracking-widest text-xs transition-all duration-300 relative overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed";
+  
+  const variants = {
+    primary: "bg-primary text-white hover:bg-primary-light hover:shadow-[0_0_20px_rgba(15,23,42,0.3)]",
+    accent: "bg-accent text-white hover:bg-accent-hover hover:shadow-[0_0_20px_rgba(16,185,129,0.3)]",
+    outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
+    ghost: "bg-slate-100 text-primary hover:bg-slate-200"
+  };
+
+  const content = (
+    <>
+      <span className="relative z-10 flex items-center gap-2">
+        {children}
+        {showArrow && (
+          <motion.span
+            animate={{ x: [0, 4, 0] }}
+            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
+          >
+            <ArrowRight size={16} strokeWidth={3} />
+          </motion.span>
+        )}
+      </span>
+      <motion.div 
+        initial={{ x: '-100%' }}
+        whileHover={{ x: '100%' }}
+        transition={{ duration: 0.6, ease: "easeInOut" }}
+        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 pointer-events-none"
+      />
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button 
+      type={type}
+      onClick={onClick} 
+      disabled={disabled}
+      className={`${baseStyles} ${variants[variant]} ${className}`}
+    >
+      {content}
+    </button>
+  );
+};