import React from 'react';
import PropTypes from 'prop-types';
import {
  Container,
  Row,
  Col,
} from 'reactstrap';

import '../css/Home.css';

function RouterHome(props) {
  const {
    changeBackground,
  } = props;

  changeBackground('home');

  return (
    <Container>
      <Row className="with-margin">
        {/* <Row className="mainContainer"> */}
        <Col xs="12" className=" with-border with-background">
          <img src="/logo.png" className="logo float-left" alt="RodiVert" />
          <p>
            En tant qu’étudiant, nous savons ce que c’est que de chercher chaque caractéristique
            d’un végétal et de créer une fiche de technique. Cela demande un temps énorme, en plus
            du travail que l’on doit fournir pour réussir notre BTS. C’est pour cela que nous avons
            pensé à créer un site rassemblant toutes les informations sur le végétal que nous avons
            besoin au cours de notre scolarité.
          </p>
          <p>
            Rodi’Vert regroupe toutes les caractéristiques d’une plante, sa nomenclature et une
            photo de celle-ci pour pouvoir le reconnaitre. C’est maintenant facile et un plaisir
            d’apprendre !
          </p>
          <p>
            Etant donné que nous finissons nos études cette année, le site sera utile pour la
            génération future. Notre but est de faire découvrir aux futurs étudiants une nouvelle
            méthode d’apprentissage, qui évolue avec l’aire du temps, une méthode plus moderne.
            Mais aussi de créer un lieu entre les formateurs et les élèves.
          </p>
          <p>
            Il permet aussi d’apporter une plus-value au CFA du Gard. Le lien sera inscrit sur le
            site officiel de l’établissement.
          </p>
          <p>
            Nous laissons l’évolution du site entre les mains de formateur compétent en
            reconnaissance de végétaux et technique.
          </p>
          <Col lg={{ size: 8, offset: 2 }} xs="12" className="margin-botton">
            <img src="/img/Home_01.jpg" className="img-fluid" alt="Sharlotte, Julie, Clément, Alois" />
          </Col>
        </Col>
      </Row>
    </Container>
  );
}

RouterHome.propTypes = {
  changeBackground: PropTypes.func.isRequired,
};

export default RouterHome;