refactoring ui into separate components, updating ui, adding color scheme

apps/web/src/components/game/OptionButton.tsx

@@ -0,0 +1,27 @@
+type OptionButtonProps = {
+  text: string;
+  state: "idle" | "disabled" | "correct" | "wrong";
+  onSelect: () => void;
+};
+
+export const OptionButton = ({ text, state, onSelect }: OptionButtonProps) => {
+  const base =
+    "w-full py-3 px-6 rounded-2xl text-lg font-semibold transition-all duration-200 border-b-4 cursor-pointer";
+
+  const styles = {
+    idle: "bg-white text-purple-900 border-purple-200 hover:bg-purple-50 hover:border-purple-300 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2",
+    disabled: "bg-gray-100 text-gray-400 border-gray-200 cursor-default",
+    correct: "bg-emerald-400 text-white border-emerald-600 scale-[1.02]",
+    wrong: "bg-pink-400 text-white border-pink-600",
+  };
+
+  return (
+    <button
+      className={`${base} ${styles[state]}`}
+      onClick={onSelect}
+      disabled={state !== "idle"}
+    >
+      {text}
+    </button>
+  );
+};