import { IonContent, IonPage, IonButton } from '@ionic/react';
import React from 'react';
import styles from './Welcome.module.scss';

type Props = { };

const WelcomePage: React.FC<Props> = () => {
    return (<IonPage>
        <IonContent fullscreen>
            <section className={styles.upfold}>
                <figure>
                    <img src="assets/images/welcome/upfold.svg" alt="upfold image"/>
                </figure>
            </section>

            <section className={styles.content}>
                <div className={styles.container}>
                    <h2> Let's Get Started </h2>
                    <p>
                        Welcome to <strong> WorkX </strong>                            
                    </p>

                    <div className={styles.actionButtonsHolder}>
                        <IonButton className={styles.actionButton} expand="block" routerLink="/signup"> Create Account </IonButton>
                        <IonButton className={styles.actionButton} fill="outline" expand="block" routerLink="/login"> Login </IonButton>
                    </div>
                </div>
            </section>
            
        </IonContent>
    </IonPage>);
};

export default WelcomePage;