updated landing with code improvements

Author: olafch

src/screens/HomeScreen.tsx

@@ -19,13 +19,7 @@ export const HomeScreen = () => {
       <Text.XxlBold textAlign="center">{t('home_screen.header_title')}</Text.XxlBold>
       <Text.LgRegular textAlign="center">{t('home_screen.header_subtitle')}</Text.LgRegular>
 
-      <Box
-        alignItems={'center'}
-        flexDirection={'row'}
-        flexWrap={'wrap'}
-        justifyContent={'center'}
-        mt={4}
-      >
+      <Box alignItems="center" flexDirection="row" flexWrap="wrap" justifyContent="center" mt={4}>
         <Button h={12} m={3} maxWidth={160} minWidth={160} onPress={() => openLink(BACA_DOCS_URL)}>
           {t('home_screen.read_docs')}
         </Button>

src/screens/HomeScreen.web.tsx

@@ -1,38 +1,77 @@
-import { CompanyLogo, KeyboardAwareScrollView, LandingHeader } from '@baca/components'
-import { Button, Center, Text } from '@baca/design-system'
-import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks'
-import { router } from 'expo-router'
+import { KeyboardAwareScrollView, LandingHeader } from '@baca/components'
+import { BACA_APP_URL, BACA_DOCS_URL } from '@baca/constants'
+import { Button, Center, Text, Box, ScrollView } from '@baca/design-system'
+import { useCallback, useScreenOptions, useTranslation, useViewportDimensions } from '@baca/hooks'
+import { draftImages } from '@baca/screens'
+import { ImageSourcePropType, Linking, Image, StyleSheet } from 'react-native'
 
 export const LandingScreen = () => {
   const { t } = useTranslation()
+  const { viewportWidth, viewportHeight } = useViewportDimensions()
+
+  useScreenOptions({ title: t('navigation.screen_titles.home') })
+
+  const openLink = useCallback((url: string) => Linking.openURL(url), [])
+
+  const renderItem = (item: ImageSourcePropType, index: number) => (
+    <Box key={index} height={viewportHeight * 0.6} width={viewportWidth * 0.6}>
+      <Image source={item} resizeMode="contain" style={styles.imageSize} />
+    </Box>
+  )
 
   useScreenOptions({
     title: t('navigation.screen_titles.home'),
   })
 
-  const navigateToBlog = useCallback(() => {
-    router.navigate('/blog')
-  }, [])
-
-  const navigateToBigForm = useCallback(() => {
-    router.navigate('/big-form')
-  }, [])
-
   return (
     <KeyboardAwareScrollView>
       <LandingHeader />
       <Center flex={1} px={4}>
-        <CompanyLogo />
-        <Text.LgBold textAlign="center">{t('hello')}</Text.LgBold>
-        <Text.MdRegular textAlign="center">{t('thanks')}</Text.MdRegular>
-        <Text.MdRegular textAlign="center">{t('app_information')}</Text.MdRegular>
-        <Button mt={4} onPress={navigateToBigForm}>
-          {t('landing_screen.go_to_form')}
-        </Button>
-        <Button mt={4} onPress={navigateToBlog}>
-          {t('landing_screen.go_to_blog')}
-        </Button>
+        <Text.XxlBold mt={20} textAlign="center">
+          {t('home_screen.header_title')}
+        </Text.XxlBold>
+        <Text.LgRegular textAlign="center">{t('home_screen.header_subtitle')}</Text.LgRegular>
+
+        <Box alignItems="center" flexDirection="row" flexWrap="wrap" justifyContent="center" mt={4}>
+          <Button
+            m={3}
+            h={12}
+            minWidth={160}
+            maxWidth={160}
+            onPress={() => openLink(BACA_DOCS_URL)}
+          >
+            {t('home_screen.read_docs')}
+          </Button>
+          <Button.SecondaryColor
+            m={3}
+            h={12}
+            minWidth={160}
+            maxWidth={160}
+            onPress={() => openLink(BACA_APP_URL)}
+          >
+            {t('home_screen.try_it')}
+          </Button.SecondaryColor>
+        </Box>
+
+        <ScrollView
+          height={viewportHeight * 0.6}
+          horizontal
+          mt={8}
+          pagingEnabled
+          scrollEventThrottle={16}
+          showsHorizontalScrollIndicator={false}
+          width={viewportWidth * 0.6}
+        >
+          {draftImages.map(renderItem)}
+        </ScrollView>
       </Center>
     </KeyboardAwareScrollView>
   )
 }
+
+const styles = StyleSheet.create({
+  imageSize: {
+    height: '100%',
+    width: '100%',
+  },
+})

src/screens/LandingScreen.tsx

@@ -15,4 +15,4 @@ export * from './SettingsScreen'
 export * from './TestFormScreen'
 export * from './TypographyScreen'
 export * from './UserSessionScreen'
-export * from '../screens/drafts/images'
+export * from './drafts/images'