nomadmania-app/src/screens/InfoScreens/DiscoverInfoScreen/index.tsx

import { FC } from 'react';
import { ImageBackground, View, Text, Image, ScrollView } from 'react-native';
import type { NavigationProp } from '@react-navigation/native';

import { Header, PageWrapper } from '../../../components';
import { styles } from './styles';
import { Colors } from 'src/theme';
import TravellersIcon from 'assets/icons/bottom-navigation/travellers.svg';

type Props = {
  navigation: NavigationProp<any>;
};

export const DiscoverInfoScreen: FC<Props> = ({ navigation }) => {
  return (
    <PageWrapper>
      <Header label={'Discover the World'} />
      <ImageBackground
        style={styles.background}
        source={require('../../../../assets/images/nm-background.png')}
      >
        <ScrollView
          style={styles.wrapper}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainerStyle}
        >
          <View style={{ gap: 10 }}>
            <Text style={styles.title}>Use the map to explore</Text>
            <View style={styles.infoBlock}>
              <View style={styles.imgContainer}>
                <Image source={require('../../../../assets/images/map.jpeg')} style={styles.image} />
              </View>
              <Text style={styles.text}>
                Tap a region to see more details. Zoom the map to reveal our series.
              </Text>
            </View>
          </View>

          <View style={{ gap: 10 }}>
            <Text style={styles.title}>User Travels section</Text>
            <View style={styles.infoBlock}>
              <View style={[styles.imgContainer, { width: 80, height: 80 }]}>
                <TravellersIcon fill={Colors.DARK_BLUE} />
                <Text style={styles.imgText}>Travellers</Text>
              </View>
              <Text style={styles.text}>
                Use our Travels section to explore information in a structured layout.
              </Text>
            </View>
          </View>
        </ScrollView>
      </ImageBackground>
    </PageWrapper>
  );
};