import React, { FunctionComponent, Fragment } from "react";

export interface WelcomeContentProps {

}

export const WelcomeContent: FunctionComponent<WelcomeContentProps> = () => {
  return (
    <Fragment>
      <section className="hero is-normal is-light is-bold">
        <div className="hero-body has-text-centered">
          <div className="container">
            <h1 className="title">
              Bienvenue sur Daddy !
            </h1>
            <h2 className="subtitle">
              L'outil de suivi de la vie d'entreprise démocratique.
            </h2>
          </div>
        </div>
      </section>
      <div className="box cta">
        <p className="has-text-centered">
          <span className="tag is-info">Attention</span> Le service est actuellement en alpha. L'accès est restreint aux adresses autorisées.
        </p>
      </div>
      <section className="container mt-5">
        <div className="columns">
          <div className="column is-4">
            <div className="card is-shady">
              <div className="card-image has-text-centered">
                <i className="fa fa-at mt-5" style={{fontSize: '8rem'}}></i>
              </div>
              <div className="card-content">
                <div className="content">
                  <h4>Une adresse courriel et c'est parti !</h4>
                  <p>Pas de création de compte, pas de mot de passe à retenir. Entrez votre adresse courriel et commencez directement à travailler !</p>
                  {/* <p><a href="#">En savoir plus</a></p> */}
                </div>
              </div>
            </div>
          </div>
          <div className="column is-4">
            <div className="card is-shady">
              <div className="card-image has-text-centered">
                <i className="fa fa-edit mt-5" style={{fontSize: '8rem'}}></i>
              </div>
              <div className="card-content">
                <div className="content">
                  <h4>Préparer vos dossiers d'aide à la décision</h4>
                  <p>Une décision à prendre ? Un nouveau projet à lancer ? Crééz votre groupe de travail et rédigez un dossier pour faciliter la prise de décision collective !</p>
                  {/* <p><a href="#">En savoir plus</a></p> */}
                </div>
              </div>
            </div>
          </div>
          <div className="column is-4">
            <div className="card is-shady">
              <div className="card-image has-text-centered">
                <i className="fa fa-users mt-5" style={{fontSize: '8rem'}}></i>
              </div>
              <div className="card-content">
                <div className="content">
                  <h4>Travaillez collaborativement</h4>
                  <p>Éditez à plusieurs vos dossiers d'aide à la décision, suivi l'avancée des débats et retrouvez simplement les décisions prises dans l'entreprise.</p>
                  {/* <p><a href="#">En savoir plus</a></p> */}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </Fragment>
  );
};