refactor: improve code quality, add Card component and Prettier config

Author: AIPTU

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "semi": true,
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ]
+}

app/components/Button.tsx

@@ -2,42 +2,42 @@ import { ButtonHTMLAttributes, ReactNode } from "react";
 import { SequenceType } from "../types/sequence";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-	children: ReactNode;
-	variant?: "primary" | "secondary" | SequenceType;
-	fullWidth?: boolean;
+  children: ReactNode;
+  variant?: "primary" | "secondary" | SequenceType;
+  fullWidth?: boolean;
 }
 
 export default function Button({
-	children,
-	variant = "primary",
-	fullWidth = false,
-	className = "",
-	...props
+  children,
+  variant = "primary",
+  fullWidth = false,
+  className = "",
+  ...props
 }: ButtonProps) {
-	const baseStyles =
-		"px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg";
+  const baseStyles =
+    "px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background";
 
-	const variantStyles: Record<string, string> = {
-		primary:
-			"bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700 text-white",
-		secondary:
-			"bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 text-white",
-		arithmetic:
-			"bg-gradient-to-r from-blue-400 to-blue-600 hover:from-blue-500 hover:to-blue-700 text-white",
-		geometric:
-			"bg-gradient-to-r from-purple-400 to-purple-600 hover:from-purple-500 hover:to-purple-700 text-white",
-		alphabet:
-			"bg-gradient-to-r from-green-400 to-green-600 hover:from-green-500 hover:to-green-700 text-white",
-	};
+  const variantStyles: Record<string, string> = {
+    primary:
+      "bg-primary text-primary-foreground hover:brightness-110 focus:ring-primary",
+    secondary:
+      "bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:ring-secondary",
+    arithmetic:
+      "bg-seq-arithmetic text-white hover:brightness-110 focus:ring-seq-arithmetic",
+    geometric:
+      "bg-seq-geometric text-white hover:brightness-110 focus:ring-seq-geometric",
+    alphabet:
+      "bg-seq-alphabet text-white hover:brightness-110 focus:ring-seq-alphabet",
+  };
 
-	const widthStyles = fullWidth ? "w-full" : "w-auto";
+  const widthStyles = fullWidth ? "w-full" : "w-auto";
 
-	return (
-		<button
-			className={`${baseStyles} ${variantStyles[variant]} ${widthStyles} ${className}`}
-			{...props}
-		>
-			{children}
-		</button>
-	);
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${widthStyles} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
 }

app/components/Card.tsx

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactNode } from "react";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  variant?: "default" | "glass";
+}
+
+export default function Card({
+  children,
+  className = "",
+  variant = "glass",
+  ...props
+}: CardProps) {
+  const baseStyles = "rounded-xl p-6 transition-all duration-300";
+
+  const variants = {
+    default: "bg-secondary text-secondary-foreground shadow-lg",
+    glass: "glass text-card-foreground",
+  };
+
+  return (
+    <div
+      className={`${baseStyles} ${variants[variant]} ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}