Feat/home screen

docs/README.md

@@ -26,16 +26,6 @@ This command generates static content into the `build` directory and can be serv
 
 ### Deployment
 
-Using SSH:
+We are hosting docs on vercel, co you could just use this command:
 
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+- vercel --prod

docs/docs/data-management/MOCKING.md

@@ -18,7 +18,7 @@ description: Mocking - check how to mock data from backend and display it for us
 
 This template uses [MSW](https://mswjs.io/docs) to mock data.
 
-Mocks are automatically generated with orval script - you can check [docs here](/api-connection)
+Mocks are automatically generated with orval script - you can check [docs here](/docs/api-connection)
 
 ## Enabling mocks
 

docs/src/components/HomePageHeader/HeaderButtons.tsx

@@ -0,0 +1,26 @@
+import styles from './styles.module.css'
+import Link from '@docusaurus/Link'
+import clsx from 'clsx'
+
+export default function HeaderButtons() {
+  return (
+    <div className={styles.buttonsContainer}>
+      <Link
+        className={clsx(
+          'button button--secondary button--lg',
+          styles.button,
+          styles.buttonReadDocs
+        )}
+        to="/docs/overview"
+      >
+        Read docs
+      </Link>
+      <Link
+        className={clsx('button button--secondary button--lg', styles.button, styles.buttonTryIt)}
+        to="https://binarapps.online/sign-in"
+      >
+        Try it
+      </Link>
+    </div>
+  )
+}

docs/src/pages/components/ImageSlider.tsx → docs/src/components/HomePageHeader/ImageSlider.tsx

@@ -1,4 +1,4 @@
-import styles from '../index.module.css'
+import styles from './styles.module.css'
 import Slider from 'react-slick'
 
 const sliderSettings = {
@@ -48,14 +48,16 @@ const sliderImages = [
   },
 ]
 
-export const ImageSlider = () => (
-  <div className={styles.sliderContainer}>
-    <Slider {...sliderSettings}>
-      {sliderImages.map((image, index) => (
-        <div key={index} className={styles.imageWrapper}>
-          <img src={image.src} alt={image.alt} className={styles.image} />
-        </div>
-      ))}
-    </Slider>
-  </div>
-)
+export default function ImageSlider() {
+  return (
+    <div className={styles.sliderContainer}>
+      <Slider {...sliderSettings}>
+        {sliderImages.map((image, index) => (
+          <div key={index} className={styles.imageWrapper}>
+            <img src={image.src} alt={image.alt} className={styles.image} />
+          </div>
+        ))}
+      </Slider>
+    </div>
+  )
+}

docs/src/pages/HomepageHeader.tsx → docs/src/components/HomePageHeader/index.tsx

@@ -1,11 +1,12 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-import { HeaderButtons } from './components/HeaderButtons'
-import { ImageSlider } from './components/ImageSlider'
-import styles from './index.module.css'
+
+import styles from './styles.module.css'
 import Heading from '@theme/Heading'
 import clsx from 'clsx'
+import HeaderButtons from './HeaderButtons'
+import ImageSlider from './ImageSlider'
 
-export function HomepageHeader() {
+export default function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext()
 
   return (

docs/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-import { HomepageHeader } from './HomepageHeader'
+import HomepageHeader from '@site/src/components/HomePageHeader'
 import Layout from '@theme/Layout'
 
 export default function Home(): JSX.Element {

src/constants/index.ts

@@ -6,3 +6,4 @@ export * from './images'
 export * from './navigation'
 export * from './regex'
 export * from './time'
+export * from './links'

src/constants/links.ts

@@ -1,2 +1,4 @@
 export const APP_STORE_URL = `https://apps.apple.com/app/id`
 export const PLAY_STORE_URL = `https://play.google.com/store/apps/details?id=`
+export const BACA_APP_URL = `https://binarapps.online/sign-in`
+export const BACA_DOCS_URL = `https://baca-docs.vercel.app/docs/overview`

src/design-system/components/Text/Text.tsx

@@ -248,6 +248,10 @@ Text.XlBold = generateTextVariant('XlBold')
 Text.XlMedium = generateTextVariant('XlMedium')
 Text.XlRegular = generateTextVariant('XlRegular')
 Text.XlSemibold = generateTextVariant('XlSemibold')
+Text.XxlBold = generateTextVariant('XxlBold')
+Text.XxlMedium = generateTextVariant('XxlMedium')
+Text.XxlRegular = generateTextVariant('XxlRegular')
+Text.XxlSemibold = generateTextVariant('XxlSemibold')
 
 export { Display, Text }
 

src/design-system/config/textVariants.ts

@@ -17,6 +17,10 @@ export type TextVariant =
   | 'XlMedium'
   | 'XlRegular'
   | 'XlSemibold'
+  | 'XxlBold'
+  | 'XxlMedium'
+  | 'XxlRegular'
+  | 'XxlSemibold'
   | 'XsBold'
   | 'XsMedium'
   | 'XsRegular'
@@ -47,6 +51,11 @@ export const textVariants: {
   XlRegular: { fontWeight: 'Regular', fontSize: 'xl' },
   // FIXME: Investigate why Semibold is crashing
   XlSemibold: { fontWeight: 'Bold', fontSize: 'xl' },
+  XxlBold: { fontWeight: 'Bold', fontSize: 'xxl' },
+  XxlMedium: { fontWeight: 'Medium', fontSize: 'xxl' },
+  XxlRegular: { fontWeight: 'Regular', fontSize: 'xxl' },
+  // FIXME: Investigate why Semibold is crashing
+  XxlSemibold: { fontWeight: 'Bold', fontSize: 'xxl' },
   XsBold: { fontWeight: 'Bold', fontSize: 'xs' },
   XsMedium: { fontWeight: 'Medium', fontSize: 'xs' },
   XsRegular: { fontWeight: 'Regular', fontSize: 'xs' },

src/design-system/config/theme.ts

@@ -93,7 +93,7 @@ export const ProjectColors = {
   //CONFIG: Add your project specific colors here
   modalBackground: 'rgba(0, 0, 0, 0.5)',
 }
-export type TextFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type TextFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
 export type DisplayFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
 export type FontWeight = 'Regular' | 'Medium' | 'Semibold' | 'Bold'
 
@@ -103,6 +103,7 @@ export const fontTextSize: { [key in TextFontSize]: number } = {
   md: 16,
   lg: 18,
   xl: 20,
+  xxl: 22,
 } as const
 
 export const fontDisplaySize: { [key in DisplayFontSize]: number } = {

src/i18n/translations/en.json

@@ -207,7 +207,11 @@
     "reset_password": "Reset password"
   },
   "home_screen": {
-    "details": "Details"
+    "details": "Details",
+    "header_title": "BACA - react native starter",
+    "header_subtitle": "Start your react native project and boost your productivity",
+    "read_docs": "Read docs",
+    "try_it": "Try it"
   },
   "landing_screen": {
     "go_to_blog": "Open blog",

src/i18n/translations/pl.json

@@ -207,7 +207,11 @@
     "reset_password": "Zresetuj hasło"
   },
   "home_screen": {
-    "details": "Detale"
+    "details": "Detale",
+    "header_subtitle": "Zacznij swój projekt w react native i zwiększ swoją produktywność",
+    "header_title": "BACA - react native starter",
+    "read_docs": "Przeczytaj dokumentacje",
+    "try_it": "Wypróbuj"
   },
   "landing_screen": {
     "go_to_blog": "Otwórz blog",

src/screens/HomeScreen.tsx

@@ -5,7 +5,6 @@ import { router } from 'expo-router'
 
 export const HomeScreen = () => {
   const { t } = useTranslation()
-
   useScreenOptions({
     title: t('navigation.screen_titles.home'),
   })

src/screens/LandingScreen.tsx

@@ -1,38 +1,100 @@
-import { CompanyLogo, KeyboardAwareScrollView, LandingHeader } from '@baca/components'
-import { Button, Center, Text } from '@baca/design-system'
+import { KeyboardAwareScrollView, LandingHeader } from '@baca/components'
+import { BACA_DOCS_URL } from '@baca/constants'
+import { Button, Center, Text, Box } from '@baca/design-system'
 import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks'
-import { router } from 'expo-router'
+import { draftImages } from '@baca/screens'
+import { useRouter } from 'expo-router'
+import { useState, useEffect, useMemo } from 'react'
+import { ImageSourcePropType, Linking, Image, Dimensions, StyleSheet } from 'react-native'
 
 export const LandingScreen = () => {
   const { t } = useTranslation()
+  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width)
 
-  useScreenOptions({
-    title: t('navigation.screen_titles.home'),
-  })
+  const { push } = useRouter()
 
-  const navigateToBlog = useCallback(() => {
-    router.navigate('/blog')
-  }, [])
+  const navigateToLogin = useCallback(() => push('/sign-in'), [push])
+  const navigateToDocs = useCallback(() => Linking.openURL(BACA_DOCS_URL), [])
 
-  const navigateToBigForm = useCallback(() => {
-    router.navigate('/big-form')
+  useEffect(() => {
+    const onChange = ({ window }: { window: { width: number } }) => setScreenWidth(window.width)
+    const subscription = Dimensions.addEventListener('change', onChange)
+    return () => subscription?.remove()
   }, [])
 
+  const imageWidth = useMemo(() => {
+    if (screenWidth >= 1100) {
+      return '25%'
+    } else if (screenWidth >= 767) {
+      return '50%'
+    } else {
+      return '100%'
+    }
+  }, [screenWidth])
+
+  const paddingBetweenImages = useMemo(() => {
+    if (screenWidth >= 1100) {
+      return 2
+    } else if (screenWidth >= 767) {
+      return 8
+    } else if (screenWidth <= 400) {
+      return 4
+    } else {
+      return 16
+    }
+  }, [screenWidth])
+
+  const renderItem = (item: ImageSourcePropType, index: number) => (
+    <Box key={index} width={imageWidth} px={paddingBetweenImages} pb={paddingBetweenImages}>
+      <Box style={{ aspectRatio: 9 / 16 }} height="100%" borderRadius={16} bg="bg.active">
+        <Image source={item} resizeMode="contain" style={styles.imageSize} />
+      </Box>
+    </Box>
+  )
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.home'),
+  })
+
   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>
+      <Center bg="bg.brand.section" flex={1} px={4}>
+        <Text.XxlBold fontSize={40} mt={20} color="text.white" textAlign="center">
+          {t('home_screen.header_title')}
+        </Text.XxlBold>
+        <Text.LgRegular color="text.white" 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} onPress={navigateToDocs}>
+            {t('home_screen.read_docs')}
+          </Button>
+          <Button.SecondaryColor m={3} h={12} minWidth={160} onPress={navigateToLogin}>
+            {t('home_screen.try_it')}
+          </Button.SecondaryColor>
+        </Box>
+
+        <Box
+          flexDirection="row"
+          flexWrap="wrap"
+          justifyContent="center"
+          mt={4}
+          width={screenWidth - 16}
+          px={`${16}px`}
+        >
+          {draftImages.map(renderItem)}
+        </Box>
       </Center>
     </KeyboardAwareScrollView>
   )
 }
+
+const styles = StyleSheet.create({
+  imageSize: {
+    borderRadius: 16,
+    height: '100%',
+    width: '100%',
+  },
+})

src/screens/drafts/images.ts

@@ -0,0 +1,8 @@
+import { ImageSourcePropType } from 'react-native'
+
+export const draftImages: ImageSourcePropType[] = [
+  require('./iphone_signup_draft_light.png'),
+  require('./iphone_signup_draft_dark.png'),
+  require('./iphone_settings_draft_light.png'),
+  require('./iphone_settings_draft_dark.png'),
+]

src/screens/index.ts

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