diff --git a/src/view/com/auth/HomeLoggedOutCTA.tsx b/src/view/com/auth/HomeLoggedOutCTA.tsx new file mode 100644 index 0000000000..501ed332ec --- /dev/null +++ b/src/view/com/auth/HomeLoggedOutCTA.tsx @@ -0,0 +1,146 @@ +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' +import {ScrollView} from '../util/Views' +import {Text} from '../util/text/Text' +import {usePalette} from '#/lib/hooks/usePalette' +import {colors, s} from '#/lib/styles' +import {TextLink} from '../util/Link' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' + +export function HomeLoggedOutCTA() { + const pal = usePalette('default') + const {_} = useLingui() + const {isMobile} = useWebMediaQueries() + return ( + + + + Bluesky + + + See what's next + + + + + + Create a new account + + + + + Sign In + + + + + + + + + + + ) +} + +const styles = StyleSheet.create({ + container: { + height: '100%', + }, + hero: { + justifyContent: 'center', + paddingTop: 100, + paddingBottom: 30, + }, + heroMobile: { + paddingBottom: 50, + }, + title: { + textAlign: 'center', + fontSize: 68, + fontWeight: 'bold', + }, + subtitle: { + textAlign: 'center', + fontSize: 48, + fontWeight: 'bold', + }, + btnsDesktop: { + flexDirection: 'row', + justifyContent: 'center', + gap: 20, + marginHorizontal: 20, + }, + btn: { + borderRadius: 32, + width: 230, + paddingVertical: 12, + marginBottom: 20, + }, + btnMobile: { + flex: 1, + width: 'auto', + marginHorizontal: 20, + paddingVertical: 16, + }, + btnLabel: { + textAlign: 'center', + fontSize: 18, + }, + btnLabelMobile: { + textAlign: 'center', + fontSize: 21, + }, + + footer: { + flexDirection: 'row', + gap: 20, + justifyContent: 'center', + }, + footerLink: {}, +}) diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 42a958b95d..7bd770119c 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -9,6 +9,7 @@ import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' import {FeedsTabBar} from '../com/pager/FeedsTabBar' import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager' import {FeedPage} from 'view/com/feeds/FeedPage' +import {HomeLoggedOutCTA} from '../com/auth/HomeLoggedOutCTA' import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' import {usePreferencesQuery} from '#/state/queries/preferences' import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' @@ -199,12 +200,7 @@ function HomeScreenReady({ onPageScrollStateChanged={onPageScrollStateChanged} renderTabBar={renderTabBar} tabBarPosition="top"> - + ) }