diff --git a/frontend/apps/artcraft-webapp/src/components/generation-gallery/useGalleryData.ts b/frontend/apps/artcraft-webapp/src/components/generation-gallery/useGalleryData.ts
index 87d0edbc47..0f48818e7d 100644
--- a/frontend/apps/artcraft-webapp/src/components/generation-gallery/useGalleryData.ts
+++ b/frontend/apps/artcraft-webapp/src/components/generation-gallery/useGalleryData.ts
@@ -120,14 +120,19 @@ export function useGalleryData(options: {
[username, filterMediaClasses, pageIndex, api, mapApiItem, excludeUploads],
);
- // Initial load + filter change
+ // Initial load + filter change. When logged out (no username), clear the
+ // loading flag so the shell renders the empty state instead of a spinner.
useEffect(() => {
- if (!username) return;
setItems([]);
setPageIndex(0);
+ isLoadingRef.current = false;
+ if (!username) {
+ setHasMore(false);
+ setIsInitialLoading(false);
+ return;
+ }
setHasMore(true);
setIsInitialLoading(true);
- isLoadingRef.current = false;
loadItems(true);
}, [username, JSON.stringify(filterMediaClasses)]); // eslint-disable-line react-hooks/exhaustive-deps
diff --git a/frontend/apps/artcraft-webapp/src/components/signup-cta-modal.tsx b/frontend/apps/artcraft-webapp/src/components/signup-cta-modal.tsx
new file mode 100644
index 0000000000..eb111ac305
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/components/signup-cta-modal.tsx
@@ -0,0 +1,118 @@
+import { Link, useLocation } from "react-router-dom";
+import { create } from "zustand";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/pro-solid-svg-icons";
+import { Modal } from "@storyteller/ui-modal";
+import { Button } from "@storyteller/ui-button";
+import { useSession } from "../lib/session";
+
+interface SignupCtaState {
+ isOpen: boolean;
+ open: () => void;
+ close: () => void;
+}
+
+const useSignupCtaStore = create
((set) => ({
+ isOpen: false,
+ open: () => set({ isOpen: true }),
+ close: () => set({ isOpen: false }),
+}));
+
+/**
+ * Hook that exposes the logged-in flag plus an imperative `openSignupCta()`
+ * trigger. Use it at the top of a generate handler:
+ *
+ * const { loggedIn, openSignupCta } = useSignupCta();
+ * if (!loggedIn) { openSignupCta(); return; }
+ */
+export function useSignupCta(): {
+ loggedIn: boolean;
+ openSignupCta: () => void;
+} {
+ const { loggedIn } = useSession();
+ const openSignupCta = useSignupCtaStore((s) => s.open);
+ return { loggedIn, openSignupCta };
+}
+
+const PERKS: string[] = [
+ "Generate images and videos with top AI models",
+ "Save your work and access it from any device",
+];
+
+export function SignupCtaModal() {
+ const isOpen = useSignupCtaStore((s) => s.isOpen);
+ const close = useSignupCtaStore((s) => s.close);
+ const location = useLocation();
+ const from = encodeURIComponent(location.pathname + location.search);
+
+ return (
+
+
+ {/* Off-center ambient glow — feels designed, not generic */}
+
+
+
+
+
+ Start crafting in seconds.
+
+
+ Free to try. Sign up and pick up where you left off.
+
+
+
+ {PERKS.map((perk) => (
+ -
+
+
+
+ {perk}
+
+ ))}
+
+
+
+
+
+
+
+ Already have an account?{" "}
+ Log in
+
+
+
+
-
-
-
-
-
Background Change
-
- Sign in to swap the backdrop of a video using a reference image.
-
-
-
-
-
-
-
-
-
-
-
{
+ if (!loggedIn) {
+ openSignupCta();
+ return;
+ }
if (
!prompt.trim() ||
isGeneratingRef.current ||
@@ -849,6 +854,8 @@ export default function CreateVideo() {
setIsGenerating(false);
isGeneratingRef.current = false;
}, [
+ loggedIn,
+ openSignupCta,
prompt,
needsImage,
isReferenceMode,
@@ -888,10 +895,6 @@ export default function CreateVideo() {
title="Create Video - ArtCraft"
description="Generate stunning AI videos with ArtCraft"
authChecked={authChecked}
- isLoggedIn={!!user}
- heroIcon={faFilm}
- heroTitle="Create Video"
- heroSubtitle="Sign in to generate stunning AI videos with multiple models"
hasContent={hasContent}
emptyStateTitle="Generate Video"
emptyStateSubtitle="Add a prompt, then generate"
diff --git a/frontend/apps/artcraft-webapp/src/pages/home/home.tsx b/frontend/apps/artcraft-webapp/src/pages/home/home.tsx
index eb349367be..99c32be680 100644
--- a/frontend/apps/artcraft-webapp/src/pages/home/home.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/home/home.tsx
@@ -14,6 +14,8 @@ type AppCard = {
href: string;
icon: IconDefinition;
accent: string;
+ iconBg: string;
+ iconColor: string;
};
const APPS: AppCard[] = [
@@ -23,6 +25,8 @@ const APPS: AppCard[] = [
href: "/create-image",
icon: faImage,
accent: "from-blue-500/20 to-blue-500/0",
+ iconBg: "bg-blue-500/25 border-blue-400/30",
+ iconColor: "text-blue-300",
},
{
label: "Video",
@@ -30,6 +34,8 @@ const APPS: AppCard[] = [
href: "/create-video",
icon: faVideo,
accent: "from-purple-500/20 to-purple-500/0",
+ iconBg: "bg-purple-500/25 border-purple-400/30",
+ iconColor: "text-purple-300",
},
{
label: "Background Change",
@@ -37,6 +43,8 @@ const APPS: AppCard[] = [
href: "/background-change",
icon: faWandMagicSparkles,
accent: "from-emerald-500/20 to-emerald-500/0",
+ iconBg: "bg-emerald-500/25 border-emerald-400/30",
+ iconColor: "text-emerald-300",
},
];
@@ -54,14 +62,16 @@ export function Home() {
-
+
@@ -71,7 +81,7 @@ export function Home() {