refactor(app): migrate banner styles to tailwind

src/app/splash/components/__tests__/tailwind-components.test.tsx

@@ -1,10 +1,25 @@
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
 import { SplashBackground } from "../splash-background";
+import { SplashButton } from "../splash-button";
 import { SplashContent } from "../splash-content";
 import { SplashLogo } from "../splash-logo";
 
+const authStateMock = vi.hoisted(() => ({
+  value: {
+    authPanelMode: "facebook",
+    isLoading: false,
+    errorMessage: null,
+    loginStatus: "notLoggedIn",
+    hasInitialized: true,
+  },
+}));
+
+vi.mock("@/stores/auth/auth-context", () => ({
+  useAuthState: () => authStateMock.value,
+}));
+
 describe("splash Tailwind components", () => {
   it("renders SplashLogo with Tailwind wrapper and image classes", () => {
     const html = renderToStaticMarkup(<SplashLogo />);
@@ -32,4 +47,31 @@ describe("splash Tailwind components", () => {
     expect(html).toContain("whitespace-pre-line");
     expect(html).toContain("Welcome to my secret hideout");
   });
+
+  it("renders SplashButton ready and loading states", () => {
+    authStateMock.value = {
+      ...authStateMock.value,
+      hasInitialized: true,
+      isLoading: false,
+    };
+    const readyHtml = renderToStaticMarkup(
+      <SplashButton onStartChat={() => undefined} />,
+    );
+
+    authStateMock.value = {
+      ...authStateMock.value,
+      hasInitialized: false,
+      isLoading: false,
+    };
+    const loadingHtml = renderToStaticMarkup(
+      <SplashButton onStartChat={() => undefined} />,
+    );
+
+    expect(readyHtml).toContain("z-[2]");
+    expect(readyHtml).toContain("max-w-[480px]");
+    expect(readyHtml).toContain("bg-[linear-gradient(to_right");
+    expect(readyHtml).toContain("Start Chatting");
+    expect(loadingHtml).toContain("disabled");
+    expect(loadingHtml).toContain("animate-spin");
+  });
 });