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>

src/lib/hooks/useWebMediaQueries.tsx

@@ -2,6 +2,9 @@ import {useMediaQuery} from 'react-responsive'
 
 import {isNative} from '#/platform/detection'
 
+/**
+ * @deprecated use `useBreakpoints` from `#/alf` instead
+ */
 export function useWebMediaQueries() {
   const isDesktop = useMediaQuery({minWidth: 1300})
   const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300 - 1})

src/lib/statsig/gates.ts

@@ -15,3 +15,4 @@ export type Gate =
   | 'remove_show_latest_button'
   | 'test_gate_1'
   | 'test_gate_2'
+  | 'welcome_modal'