Ela_Front/src/components/ProduitsServices.js

535 lines
22 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { FacebookLoginButton, GoogleLoginButton } from "react-social-login-buttons";
//import { getCookie, setCookie, removeCookie } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import tick_ok from "../mysy_img/tick_OK.png";
import tick_ko from "../mysy_img/tick_KO.png";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import axios from "axios";
import { useParams } from 'react-router-dom'
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import Header from "./Header";
import SendIcon from '@mui/icons-material/Send';
function ProduitsServices() {
const history = useHistory();
const [check, setCheck] = useState(false);
const [periode, setperiode] = useState("Mensuel");
function handleChange(checked) {
//this.setState({ checked });
setCheck(checked);
if (String(periode) === String("Mensuel")) {
setperiode("Annuel");
}
else if (String(periode) === String("Annuel")) {
setperiode("Mensuel");
}
}
function Clik_bton_mensuel(e) {
document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_mensuel")[0].style.opacity = "100%";
document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_annuel")[0].style.opacity = "80%";
document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_mensuel2")[0].style.opacity = "100%";
document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_annuel2")[0].style.opacity = "80%";
setperiode("Mensuel");
}
function Clik_bton_annuel(e) {
document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_annuel")[0].style.opacity = "100%";
document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_mensuel")[0].style.opacity = "80%";
document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_annuel2")[0].style.opacity = "100%";
document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_mensuel2")[0].style.opacity = "80%";
setperiode("Annuel");
}
const [PartnerMenu, setPartnerMenu] = React.useState(null);
const [AccountMenu, setAccountMenu] = React.useState(null);
const PartnerMenu_Close = () => {
setPartnerMenu(null);
};
const AccountMenu_Close = () => {
setAccountMenu(null);
};
const handlePartnerMenu = (event) => {
setPartnerMenu(event.currentTarget);
};
const handleAccountMenu = (event) => {
setAccountMenu(event.currentTarget);
};
const handleClose_Account = () => {
alert(" my account");
setAccountMenu(null);
};
const handleAccountConnexion = () => {
setAccountMenu(null);
history.push("/Connexion")
};
const handleAccountCreation = () => {
setAccountMenu(null);
history.push("/create_account")
};
const handlePartnerConnexion = () => {
setAccountMenu(null);
history.push("/PartnerLogin")
};
function sendEmail(){
window.location = "mailto:contact@mysy-training.com";
}
return (
<div className="produitsservices">
<Helmet>
<title>Produits & Services</title>
<meta name="description" content="Produits et Services" />
<meta name="robots" content="index,follow" />
<meta name="title" content="Produits et Services" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/mysy-training-login/0/0"} />
</Helmet>
<Header />
<div className="div_mobile">
<div className="critere">
<div className="critere_gauche">
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm3">Devise </span>
<select className="form-select form-select-sm limite_input" onChange={"ChangeDevise"} aria-label=".form-select-sm example"
id={"devise"} name={"devise"} >
<option selected value="euro"></option>
{/*<option value="dollard">$ US</option>*/}
</select>
</div>
</div>
<div className="critere_droite">
<span className="span1"> Periodicité &nbsp; </span>
<button
onClick={Clik_bton_mensuel}
className="bton_radius_gauche"
id="bton_mensuel" name="bton_mensuel">Mensuelle
</button>
<button
onClick={Clik_bton_annuel}
className="bton_radius_droite"
id="bton_annuel" name="bton_annuel">Annuelle
</button>
</div>
</div>
<div className="div_row">
<div className="div_row_description">
<div className="div_basique_header"> &nbsp;
</div>
<div style={{ "marginBottom": "1rem", "background": "#E9ECEF" }}>
Produits & Services
</div>
<div className="produits_service_label height_publication">
<b> Publication des
formations </b>
<ul>
<li>Mise en ligne de votre formation
(Description, Objectif,
Programme, etc).</li>
<li>Mise en forme des textes selon
votre souhait. </li>
<li>Définition du pays et la région
de
publication</li>
<li>Import/Export Excel</li>
</ul>
</div>
<div className="produits_service_label height_Reporting">
<b> Reporting standard
automatique </b>
<ul>
<li>Nombre de fois que vos
formations ont été vues
</li>
<li>Les régions elles ont été
vues</li>
<li>Top 5 des formations avec le
détail du nombre de vu</li>
</ul>
</div>
<div className="produits_service_label height_support">
<b> Support téléphonique </b>
</div>
<div className="produits_service_label height_leads">
<b>3 Mots clés
supplémentaires </b>
<ul>
<li>Ajout de 3 mots clés
supplémentaires associés à la
formation.</li>
<li>Ces mots seront utilisés dans
la barre de recherche.</li>
</ul>
</div>
<div className="produits_service_label height_publication">
<b>Personnalisation de
l'affichage
d'une formation</b>
<ul>
<li>Ajout de vos propres images pour
communiquer sur votre structure
et votre marque.</li>
<li>Affichage de votre logo à côté
de la
formation. </li>
<li>Affichage votre bannière en
grand
sur la page détaillée.</li>
</ul>
</div>
<div className="produits_service_label">
<b>Gestion administrative
des
stagiaires (pré-inscriptions,
émargement, présence, etc)</b>
<ul>
<li>Date ouverture et fermeture des
inscriptions en ligne</li>
<li>Gestion du nombre de
participants</li>
<li> Gestion des pré-inscriptions / Inscriptions des stagiaires</li>
<li> Les listes démargement / Fiche de présence</li>
</ul>
</div>
<div className="produits_service_label height_leads">
<b>Génération automatique de
leads</b>
<ul>
<li>Lintérêt des stagiaires génère
des leads qui vous sont envoyé
automatiquement.</li>
</ul>
</div>
<div className="produits_service_label">
<b>Envoi de 1000 emails
markéting / mois pour votre
formation</b>
<ul>
<li>MySy crée un visuel de
communication sous forme demail
markéting.</li>
<li>Avec votre validation, ce visuel
est envoyé 1000 contacts de
notre base de données (ou la
vôtre) </li>
<li>Un rapport vous ai envoyé avec
la liste des personnes ayant
manifesté un intérêt pour
votre formation.</li>
</ul>
</div>
</div>
<div className="div_row_basique">
<div className="div_basique_header"> Découverte </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.8rem" , "fontSize":"small"}}>
Pour chaque Formation
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_Reporting">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_support">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick ">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="div_row_basique_price">
Gratuit 15 jours
</div>
<div className="div_row_basique_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
e.preventDefault();
window.location.href = "/Partner";
}}
> Je m'abonne </Button>
</div>
</div>
<div className="div_row_standard">
<div className="div_standard_header"> Standard </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.8rem" , "fontSize":"small"}}>
Pour chaque Formation
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_Reporting">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_support">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="div_row_standard_price">
50 HT €/mois
</div>
<div className="div_row_standard_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
e.preventDefault();
window.location.href = "/Partner";
}}> Je m'abonne </Button>
</div>
</div>
<div className="div_row_gold">
<div className="div_gold_header"> Gold </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.8rem" , "fontSize":"small"}}>
Pour chaque Formation
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_Reporting">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_support">
<img src={tick_ok} alt="OK" className="tick_ok_ko " />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="div_row_gold_price">
90 HT /mois
</div>
<div className="div_row_gold_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
e.preventDefault();
window.location.href = "/Partner";
}}
> Je m'abonne </Button>
</div>
</div>
{<div style={{ "width": "1%" }}> &nbsp;</div>}
</div>
<div className="div_row">
<div style={{"float":"right", "width":"65%" , "textAlign":"center"}}>
<Button variant="contained" className="bton_envoyer"
onClick={sendEmail}
startIcon={<SendIcon />}>Vous souhaitez avoir des précisions, contactez nous. &nbsp; &nbsp; {<SendIcon />}</Button>
</div>
</div>
{/* <div className="div_row">
<div className="div_row_description" >
{String(periode) === String("Mensuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
Prix par Mois
</div>}
{String(periode) === String("Annuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
Prix par An
</div>}
</div>
<div className="div_row_basique_price">
Gratuit
</div>
<div className="div_row_standard_price">
{String(periode) === String("Mensuel") && "350 €/mois"}
{String(periode) === String("Annuel") && "1 500 €/an - (2 mois offerts)"}
</div>
<div className="div_row_gold_price">
{String(periode) === String("Mensuel") && "550 €/mois"}
{String(periode) === String("Annuel") && "4 950 €/an - (3 mois offerts)"}
</div>
<div className="div_row_sur_mesure_price">
CONTACTEZ-NOUS
</div>
</div> ---*/}
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default ProduitsServices;