feat: site institucional completo com design system - Implementa\u00e7\u00e3o do site institucional da Aggios com design system completo incluindo gradientes, tipografia, componentes e se\u00e7\u00f5es de recursos, pre\u00e7os e CTA

2025-12-07 02:19:08 -03:00
parent 53f240a4da
commit bf6707e746
90 changed files with 25927 additions and 1 deletions
--- a/front-end-dash.aggios.app/components/ui/Button.tsx
+++ b/front-end-dash.aggios.app/components/ui/Button.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { ButtonHTMLAttributes, forwardRef } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+    leftIcon?: string;
+    rightIcon?: string;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+        {
+            children,
+            variant = "primary",
+            size = "md",
+            isLoading = false,
+            leftIcon,
+            rightIcon,
+            className = "",
+            disabled,
+            ...props
+        },
+        ref
+    ) => {
+        const baseStyles =
+            "inline-flex items-center justify-center font-medium rounded-[6px] transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF3A05] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer";
+
+        const variants = {
+            primary: "text-white hover:opacity-90 active:opacity-80",
+            secondary:
+                "bg-[#E5E5E5] dark:bg-gray-700 text-[#000000] dark:text-white hover:opacity-90 active:opacity-80",
+            outline:
+                "border border-[#E5E5E5] dark:border-gray-600 text-[#000000] dark:text-white hover:bg-[#E5E5E5]/10 dark:hover:bg-gray-700/50 active:bg-[#E5E5E5]/20 dark:active:bg-gray-700",
+            ghost: "text-[#000000] dark:text-white hover:bg-[#E5E5E5]/20 dark:hover:bg-gray-700/30 active:bg-[#E5E5E5]/30 dark:active:bg-gray-700/50",
+        };
+
+        const sizes = {
+            sm: "h-9 px-3 text-[13px]",
+            md: "h-10 px-4 text-[14px]",
+            lg: "h-12 px-6 text-[14px]",
+        };
+
+        return (
+            <button
+                ref={ref}
+                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+                style={variant === 'primary' ? { background: 'var(--gradient)' } : undefined}
+                disabled={disabled || isLoading}
+                {...props}
+            >
+                {isLoading && (
+                    <i className="ri-loader-4-line animate-spin mr-2 text-[20px]" />
+                )}
+                {!isLoading && leftIcon && (
+                    <i className={`${leftIcon} mr-2 text-[20px]`} />
+                )}
+                {children}
+                {!isLoading && rightIcon && (
+                    <i className={`${rightIcon} ml-2 text-[20px]`} />
+                )}
+            </button>
+        );
+    }
+);
+
+Button.displayName = "Button";
+
+export default Button;