535 lines
22 KiB
JavaScript
535 lines
22 KiB
JavaScript
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é </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">
|
||
</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 où 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>L’inté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 d’email
|
||
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">
|
||
|
||
</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">
|
||
|
||
</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">
|
||
|
||
</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%" }}> </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. {<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; |