text: import { h, Fragment } from 'preact'
  import Bussiness from './component'
  import SignUpBtn from '../common_sign_up_btn'
  import styles from '../features/component/allFeatures/all.less'
  import style from './types.less'
  import common from '../hero/hero.less'
  
  export default ({ animation }) => {
  	return (
  		<div id='business_types' class={common.height}>
  			<section class={styles.top_section}>
  				<div class={`${styles.text} ${animation && (config.isRTL ? styles.text_end_rtl : styles.text_end_ltr)}`}>
  					{animation && <h2 >{config.translations.business_types.main_title}</h2>}
  					{animation && <SignUpBtn />}
  				</div>
  				<div class={styles.background_top}>
  					{!animation
  						? <img class={config.isRTL ? style.inactive_people_rtl : style.inactive_people_ltr} src={config.urls.media + 'business people.svg'} alt='business people' />
  						: <Fragment>
  							<img class={config.isRTL ? `${styles.scale} ${styles.start_bg_rtl}` : styles.start_bg} src={config.urls.media + 'bg_top.svg'} alt='background' />
  							<img class={config.isRTL ? style.city_rtl : style.city_ltr} src={config.urls.media + 'city.svg'} alt='city' />
  							<img class={config.isRTL ? style.active_people_rtl : style.active_people_ltr} src={config.urls.media + 'business people_active.svg'} alt='business people' />
  						</Fragment>}
  				</div>
  			</section>
  			<section class={`${animation && (config.isRTL ? styles.text_end_rtl : styles.text_end_ltr)}`}>
  				{animation && <h3 class={style.subtitle}>{config.translations.business_types.subtitle}</h3>}
  				{animation && <div class={style.business_type}>
  					{config.modules.business_types.data.map(item => <Bussiness name={item.name} icon={item.icon} />)}
  				</div>}
  			</section>
  		</div>
  	)
  }
  