import React from 'react';
import {
  Container,
  Row,
  Col,
} from 'reactstrap';

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

export default class RouterHome extends React.Component {
  render() {
    this.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>
    );
  }
}
