import React from 'react';
import { Box, config } from 'folds';
import { Page, PageHero, PageHeroSection } from '../../components/page';
import VojoSVG from '../../../../public/res/svg/vojo.svg';

export function WelcomePage() {
  return (
    <Page>
      <Box
        grow="Yes"
        style={{ padding: config.space.S400, paddingBottom: config.space.S700 }}
        alignItems="Center"
        justifyContent="Center"
      >
        <PageHeroSection>
          <PageHero
            icon={<img width="70" height="70" src={VojoSVG} alt="Vojo Logo" />}
            title="Welcome to Vojo"
            subTitle={<span>{__APP_VERSION__}</span>}
          />
        </PageHeroSection>
      </Box>
    </Page>
  );
}