Welcome modal on logged-out homepage (#8944)

* Adds welcome modal to logged-out homepage

* Adds metrics and feature gate for welcome modal

* Slightly smaller text for mobile screens to avoid wrapping

* Remove unused SVG

* Adds text gradient and "X" close button

* Fix color on "Already have an account?" text

* tweak hooks, react import

* rm stylesheet

* use hardcoded colors

* add focus guards and scope

* no such thing as /home

* reduce spacign

* use css animations

* use session storage

* fix animation fill mode

* add a11y props

* Fix link/button color mismatch, reduce gap between buttons, show modal until user dismisses it

* Fix "Already have an account?" line left-aligning in small window sizes

* Adds "dismissed" and "presented" metric events

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 43 insertions, 0 deletions

diff --git a/src/components/hooks/useWelcomeModal.ts b/src/components/hooks/useWelcomeModal.ts
new file mode 100644
index 000000000..7183f361e
--- /dev/null
+++ b/src/components/hooks/useWelcomeModal.ts
@@ -0,0 +1,43 @@
+import {useEffect, useState} from 'react'
+
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
+
+export function useWelcomeModal() {
+  const {hasSession} = useSession()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const open = () => setIsOpen(true)
+  const close = () => {
+    setIsOpen(false)
+    // Mark that user has actively closed the modal, don't show again this session
+    if (typeof window !== 'undefined') {
+      sessionStorage.setItem('welcomeModalClosed', 'true')
+    }
+  }
+
+  useEffect(() => {
+    // Only show modal if:
+    // 1. User is not logged in
+    // 2. We're on the web (this is a web-only feature)
+    // 3. We're on the homepage (path is '/' or '/home')
+    // 4. User hasn't actively closed the modal in this session
+    if (isWeb && !hasSession && typeof window !== 'undefined') {
+      const currentPath = window.location.pathname
+      const isHomePage = currentPath === '/'
+      const hasUserClosedModal =
+        sessionStorage.getItem('welcomeModalClosed') === 'true'
+
+      if (isHomePage && !hasUserClosedModal) {
+        // Small delay to ensure the page has loaded
+        const timer = setTimeout(() => {
+          open()
+        }, 1000)
+
+        return () => clearTimeout(timer)
+      }
+    }
+  }, [hasSession])
+
+  return {isOpen, open, close}
+}