16/02/2025 - 19h

recette2
cherif 2025-02-16 19:31:50 +01:00
parent 533c99ecb5
commit 693762bbf4
114 changed files with 2277 additions and 830 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 521 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 630 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 616 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 962 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 B

BIN
public/img/qualiopi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 293 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 389 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 511 B

View File

@ -76,7 +76,7 @@ import New_Marktplace_2025 from "./pages/new_p_marketplace_2025";
import New_Fonctionnalite_2025 from "./pages/new_p_fonctionnalite_2025"; import New_Fonctionnalite_2025 from "./pages/new_p_fonctionnalite_2025";
import New_A_Propos_2025 from "./pages/new_p_a_propos_2025"; import New_A_Propos_2025 from "./pages/new_p_a_propos_2025";
import New_Home_Page_2025 from "./pages/new_p_home_page_2025";
import New_Test_Header_Footer_2025 from "./pages/new_p_test_header_footer_2025"; import New_Test_Header_Footer_2025 from "./pages/new_p_test_header_footer_2025";
@ -167,10 +167,8 @@ function App() {
<Route path="/maintenance" exact component={Maintenance} /> <Route path="/maintenance" exact component={Maintenance} />
<Route path="/fonctionnalites" exact component={Fonctionnalites} />
<Route path="/markeplace" exact component={Contact} />
<Route path="/contact" exact component={Contact} /> <Route path="/markeplace" exact component={Contact} />
<Route path="/create_account" exact component={CreateAccount} /> <Route path="/create_account" exact component={CreateAccount} />
<Route path="/user-connexion" exact component={Connexion} /> <Route path="/user-connexion" exact component={Connexion} />
@ -187,16 +185,7 @@ function App() {
<Route path="/Recherche-Article-formation" exact component={RechecheArticles} />
<Route path="/Ajout-Article-formation" exact component={AddArticle} />
<Route path="/ResetUserPwd/:token/:accounttype" exact component={ResetUserPwd} />
<Route path="/DeleteUserAccount/:token" exact component={DeleteUserAccount} />
<Route path="/QuiSommesNous" exact component={QuiSommesNous_v3} />
<Route path="/qui-sommes-nous" exact component={QuiSommesNous_v3} />
<Route path="/QuiSommesNous_v3" exact component={QuiSommesNous_v3} />
<Route path="/ContactezNous" exact component={ContactezNous} />
<Route path="/mysy-account-activated/" exact component={AccountUserActivated} /> <Route path="/mysy-account-activated/" exact component={AccountUserActivated} />
{/* <Route path="/Produits-Services/" exact component={ProduitsService} />*/} {/* <Route path="/Produits-Services/" exact component={ProduitsService} />*/}
@ -230,21 +219,21 @@ function App() {
<Route path="/intelligence-artificielle-mysy-training/" exact component={MySyIA} /> <Route path="/intelligence-artificielle-mysy-training/" exact component={MySyIA} />
{/**** New design 2025 */} {/**** New design 2025 */}
<Route path="/new_signin/" exact component={New_Sign_In_2025} /> <Route path="/signin/" exact component={New_Sign_In_2025} />
<Route path="/new_signup/" exact component={New_Sign_Up_2025} /> <Route path="/signup/" exact component={New_Sign_Up_2025} />
<Route path="/new_tarif/" exact component={New_Tarif_2025} /> <Route path="/tarif/" exact component={New_Tarif_2025} />
<Route path="/new_contact/" exact component={New_Contact_2025} /> <Route path="/contact/" exact component={New_Contact_2025} />
<Route path="/new_display-detail-article/:articleId" exact component={New_Article_Detail_2025} /> <Route path="/display-detail-article/:articleId" exact component={New_Article_Detail_2025} />
<Route path="/Display-Detail-Article/:articleId" exact component={New_Article_Detail_2025} /> <Route path="/Display-Detail-Article/:articleId" exact component={New_Article_Detail_2025} />
<Route path="/detaile-formation/:classId" exact component={New_Formation_Detail_2025} /> <Route path="/detaile-formation/:classId" exact component={New_Formation_Detail_2025} />
{/* ex : http://localhost:3009/detaile-formation/habilitation-electrique-882*/} {/* ex : http://localhost:3009/detaile-formation/habilitation-electrique-882*/}
<Route path="/marketplace/" exact component={New_Marktplace_2025} /> <Route path="/marketplace/" exact component={New_Marktplace_2025} />
<Route path="/new_fonctionnalite/" exact component={New_Fonctionnalite_2025} /> <Route path="/fonctionnalites/" exact component={New_Fonctionnalite_2025} />
<Route path="/new_aporpos/" exact component={New_A_Propos_2025} /> <Route path="/apropos/" exact component={New_A_Propos_2025} />
<Route path="/" exact component={New_A_Propos_2025} /> <Route path="/" exact component={New_Home_Page_2025} />
@ -269,6 +258,18 @@ function App() {
<Route path="/PartnerLogin1" exact component={PartnerLogin1} /> <Route path="/PartnerLogin1" exact component={PartnerLogin1} />
<Route path="/mysy-user-account" exact component={Account} /> <Route path="/mysy-user-account" exact component={Account} />
<Route path="/Ajout-Article-formation" exact component={AddArticle} />
<Route path="/ResetUserPwd/:token/:accounttype" exact component={ResetUserPwd} />
<Route path="/QuiSommesNous" exact component={New_A_Propos_2025} />
<Route path="/QuiSommesNous_v3" exact component={New_A_Propos_2025} />
<Route path="/qui-sommes-nous" exact component={New_A_Propos_2025} />
<Route path="/ContactezNous" exact component={New_Contact_2025} />
<Route path="/DeleteUserAccount/:token" exact component={DeleteUserAccount} />
{/* Fin Migration */} {/* Fin Migration */}

View File

@ -636,7 +636,7 @@ const DisplayDetailArticle = (props) => {
<title> {`${DetailArticleAvis.title_formation}`} </title> <title> {`${DetailArticleAvis.title_formation}`} </title>
</Helmet> </Helmet>
<Header />
<h1 className="h1_transparent">{`${DetailArticleAvis.title_formation}`}</h1> <h1 className="h1_transparent">{`${DetailArticleAvis.title_formation}`}</h1>
<div className="div_mobile"> <div className="div_mobile">
@ -1122,9 +1122,7 @@ const DisplayDetailArticle = (props) => {
<ListeArticle /> <ListeArticle />
<div className="pieddepage">
<Footer />
</div>
</div> </div>

View File

@ -41,7 +41,7 @@ const Footer = () => {
<div className='Row_Div'> <div className='Row_Div'>
<div className='Column_div'> <div className='Column_div'>
<div className='Heading_p'>MySy Training</div> <div className='Heading_p'>MySy Training</div>
<a href="/qui-sommes-nous/#en_4_points" className='FooterLink_a'>À propos de nous</a> <a href="/apropos" className='FooterLink_a'>À propos de nous</a>
<a href="/qui-sommes-nous/#notre_objectif" className='FooterLink_a'>Notre vision</a> <a href="/qui-sommes-nous/#notre_objectif" className='FooterLink_a'>Notre vision</a>
<a href="/ContactezNous" className='FooterLink_a'>Nous contacter</a> <a href="/ContactezNous" className='FooterLink_a'>Nous contacter</a>
</div> </div>

View File

@ -103,7 +103,7 @@ function New_C_Article_Detail_2025() {
setpagecanonikurl(window.location.host); setpagecanonikurl(window.location.host);
console.log(" hello zzz, articleId = ", articleId);
async function fetchData() { async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',); const result = await axios('https://geolocation-db.com/json/',);
@ -137,6 +137,11 @@ function New_C_Article_Detail_2025() {
} else { } else {
setuserconnected("1"); setuserconnected("1");
} }
window.scrollTo({
top: 0,
behavior: "smooth",
});
// setwindowWidth(window.innerWidth); // setwindowWidth(window.innerWidth);
// setwindowheight(window.innerHeight); // setwindowheight(window.innerHeight);
@ -356,7 +361,7 @@ function New_C_Article_Detail_2025() {
e.preventDefault(); e.preventDefault();
window.location.href = "/Recherche-Article-formation" window.location.href = "/Recherche-Article-formation"
}}> }}>
<FcUndo /> &nbsp; Retour vers la liste des articles <FcUndo /> &nbsp; Retour vers la liste des articles
</div> </div>

View File

@ -89,12 +89,12 @@ function New_C_Header_2025() {
<div className="header-menu"> <div className="header-menu">
<div className="logo-menu"> <div className="logo-menu">
<img src="https://dashboard.codeparrot.ai/api/image/Z5NXXvA8XwfbJQA7/logo-my-s.png" alt="Logo MySy" className="logo" /> <img src="/img/c_header_logo.png" alt="Logo MySy" className="logo" />
<div className="menu-list"> <div className="menu-list">
<a href="/" className="menu-link">À propos</a> <a href="/apropos" className="menu-link">À propos</a>
<a href="/new_fonctionnalite" className="menu-link">Fonctionnalités</a> <a href="/fonctionnalites" className="menu-link">Fonctionnalités</a>
<a href="/new_tarif" className="menu-link">Tarifs</a> <a href="/tarif" className="menu-link">Tarifs</a>
<a href="/Recherche-Article-formation" className="menu-link">Blog</a> <a href="/Recherche-Article-formation" className="menu-link">Blog</a>
<div className="separator"></div> <div className="separator"></div>
<a href="/marketplace" className="menu-link">Marketplace</a> <a href="/marketplace" className="menu-link">Marketplace</a>
@ -108,7 +108,7 @@ function New_C_Header_2025() {
</div> </div>
<div className="separator"></div> <div className="separator"></div>
<div className="login-link"> <div className="login-link">
<img src="https://dashboard.codeparrot.ai/api/image/Z5NXXvA8XwfbJQA7/user.png" alt="User" className="user-icon" /> <img src="/img/user.png" alt="User" className="user-icon" />
<span>Connexion</span> <span>Connexion</span>
</div> </div>
</div> </div>

View File

@ -809,7 +809,7 @@ function New_C_Sign_In_2025() {
<div className="create-account"> <div className="create-account">
<p className="text-wrapper-4">Vous n'avez pas de compte ?</p> <p className="text-wrapper-4">Vous n'avez pas de compte ?</p>
<div className="text-wrapper-5" style={{ cursor: 'pointer' }} onClick={(e) => { <div className="text-wrapper-5" style={{ cursor: 'pointer' }} onClick={(e) => {
history.push("/new_signup"); history.push("/signup");
}}>Créez un compte</div> }}>Créez un compte</div>
</div> </div>
</div> </div>
@ -968,7 +968,7 @@ function New_C_Sign_In_2025() {
<div className="create-account"> <div className="create-account">
<p className="text-wrapper-6">Vous n'avez pas de compte ?</p> <p className="text-wrapper-6">Vous n'avez pas de compte ?</p>
<div className="text-wrapper-7" style={{ cursor: 'pointer' }} onClick={(e) => { <div className="text-wrapper-7" style={{ cursor: 'pointer' }} onClick={(e) => {
history.push("/new_signup"); history.push("/signup");
}}>Créez un compte</div> }}>Créez un compte</div>
</div> </div>
</div> </div>

View File

@ -1495,7 +1495,7 @@ function New_C_Sign_Up_2025() {
<div className="create-account"> <div className="create-account">
<p className="text-wrapper-4">Vous avez déjà un compte ?</p> <p className="text-wrapper-4">Vous avez déjà un compte ?</p>
<div className="text-wrapper-5" style={{cursor:'pointer'}} onClick={(e) => { <div className="text-wrapper-5" style={{cursor:'pointer'}} onClick={(e) => {
history.push("/new_signin"); history.push("/signin");
}}>Connectez-vous</div> }}>Connectez-vous</div>
</div> </div>
</div> </div>
@ -1929,7 +1929,7 @@ function New_C_Sign_Up_2025() {
<div className="create-account"> <div className="create-account">
<p className="text-wrapper-6">Vous avez déjà un compte ?</p> <p className="text-wrapper-6">Vous avez déjà un compte ?</p>
<div className="text-wrapper-7" style={{cursor:'pointer'}} onClick={(e) => { <div className="text-wrapper-7" style={{cursor:'pointer'}} onClick={(e) => {
history.push("/new_signin"); history.push("/signin");
}}>Connectez-vous</div> }}>Connectez-vous</div>
</div> </div>
</div> </div>

View File

@ -226,7 +226,7 @@ function ResetUserPwd() {
<meta name="description" content="utisateur formation connexion" /> <meta name="description" content="utisateur formation connexion" />
<meta name="robots" content="index,follow" /> <meta name="robots" content="index,follow" />
</Helmet> </Helmet>
<Header />
<div className="div_mobile"> <div className="div_mobile">
@ -329,9 +329,6 @@ function ResetUserPwd() {
Impossible de mettre à jour le mot de passe.<br /> Impossible de mettre à jour le mot de passe.<br />
</div>} </div>}
<div className="pieddepage">
<Footer />
</div>
</div> </div>
</div> </div>

View File

@ -3,22 +3,22 @@ import './new_a_propos.css'
const Features = () => { const Features = () => {
const values = [ const values = [
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons.png", icon: "/img/feature_innovation.png",
title: "Innovation", title: "Innovation",
description: "Nous anticipons vos besoins pour vous offrir des solutions adaptées." description: "Nous anticipons vos besoins pour vous offrir des solutions adaptées."
}, },
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-2.png", icon: "/img/feature_proximite.png",
title: "Proximité", title: "Proximité",
description: "Un accompagnement humain et personnalisé pour chaque client." description: "Un accompagnement humain et personnalisé pour chaque client."
}, },
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-3.png", icon: "/img/feature_excellence.png",
title: "Excellence", title: "Excellence",
description: "Des solutions fiables qui font leurs preuves au quotidien." description: "Des solutions fiables qui font leurs preuves au quotidien."
}, },
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-4.png", icon: "/img/feature_transparence.png",
title: "Transparence", title: "Transparence",
description: "Nous construisons des relations basées sur la confiance." description: "Nous construisons des relations basées sur la confiance."
} }

View File

@ -69,7 +69,7 @@ const ListCard = ({ imageUrl, title, buttonText }) => {
</div> </div>
<div className='ListCard_contentStyle'> <div className='ListCard_contentStyle'>
<h3 className='ListCard_titleStyle'>{title}</h3> <h3 className='ListCard_titleStyle'>{title}</h3>
<div style={{ display: 'flex', justifyContent: 'center' }}> {/*<div style={{ display: 'flex', justifyContent: 'center' }}>
<button className='ListCard_buttonStyle' <button className='ListCard_buttonStyle'
onMouseEnter={(e) => { onMouseEnter={(e) => {
Object.assign(e.target.style, buttonHoverStyle); Object.assign(e.target.style, buttonHoverStyle);
@ -80,14 +80,14 @@ const ListCard = ({ imageUrl, title, buttonText }) => {
> >
{buttonText} {buttonText}
</button> </button>
</div> </div>*/}
</div> </div>
</div> </div>
); );
}; };
ListCard.defaultProps = { ListCard.defaultProps = {
imageUrl: 'https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/france-1.png', imageUrl: '/img/editeur_fr_drapeau.png',
title: 'Editeur Français', title: 'Editeur Français',
buttonText: 'Découvrir' buttonText: 'Découvrir'
}; };

View File

@ -80,18 +80,7 @@ const LogoCloud = () => {
</div> </div>
{/*<div className="LogoCloud_block2" >
<img
src="https://dashboard.codeparrot.ai/api/image/Z6xwUmNxokPE5KT7/logos.png"
alt="Partner Logos"
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
filter: 'grayscale(0.6)',
}}
/>
</div>*/}
</div> </div>
</div> </div>

View File

@ -3,6 +3,8 @@ import Card_Title from './Card_Title';
import ListCard from './ListCard'; import ListCard from './ListCard';
import ButtonText from './ButtonText'; import ButtonText from './ButtonText';
import "./new_a_propos.css";
const WhyUsLayout = () => { const WhyUsLayout = () => {
return ( return (
<div className='WhyUsLayout_block1' > <div className='WhyUsLayout_block1' >
@ -10,12 +12,20 @@ const WhyUsLayout = () => {
<Card_Title /> <Card_Title />
</div> </div>
<div className='WhyUsLayout_block2'> <div className='WhyUsLayout_block2'>
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/france-1.png" title="Editeur Français" buttonText="Découvrir" /> <ListCard imageUrl="/img/editeur_fr_drapeau.png" title="Editeur Français" buttonText="Découvrir" />
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/qualiopi.png" title="Accompagnement à la certification" buttonText="Découvrir" /> <ListCard imageUrl="/img/qualiopi.png" title="Accompagnement à la certification" buttonText="Découvrir" />
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/solution.png" title="Solution complète pour gérer votre OF" buttonText="Découvrir" /> <ListCard imageUrl="/img/solution_complete.png" title="Solution complète pour gérer votre OF" buttonText="Découvrir" />
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/euro-1.png" title="Solution la moins chère du marché" buttonText="Découvrir" /> <ListCard imageUrl="/img/sol_moins_chere.png" title="Solution la moins chère du marché" buttonText="Découvrir" />
</div> </div>
<div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}> <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}
onClick={() => {
window.open(
"/fonctionnalites/",
'_self'
);
}}
>
<ButtonText text="Découvrir nos fonctionnalités" /> <ButtonText text="Découvrir nos fonctionnalités" />
</div> </div>
</div> </div>

View File

@ -2,10 +2,10 @@ import React from 'react';
import "./aboutussection.css"; import "./aboutussection.css";
const SolutionDescription = ({ const SolutionDescription = ({
title = "Votre outil tout-en-un pour la gestion de la formation", title = "ELYOS, votre outil tout-en-un pour la gestion de votre Organisme de formation",
subtitle = "Notre solution", subtitle = "Notre solution",
description = "Découvrez nos solutions logicielles adaptées à la gestion administrative, à la communication et au suivi des performances de votre établissement de formation.", description = "Découvrez nos solutions logicielles adaptées à la gestion administrative, à la communication et au suivi des performances de votre établissement de formation.",
buttonText = "Découvrir notre solution" buttonText = "Découvrir ELYOS"
}) => { }) => {
return ( return (
<div className='aboutussection' > <div className='aboutussection' >

View File

@ -69,6 +69,10 @@
cursor: pointer; cursor: pointer;
width: fit-content; width: fit-content;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
} }
.SolutionDescription_block3_bton_text { .SolutionDescription_block3_bton_text {

View File

@ -452,7 +452,7 @@
width: 100%; width: 100%;
height: 60px; height: 60px;
flex: none; flex: none;
flex-grow: 0; flex-grow: 0;
order: 0; order: 0;
flex-grow: 0; flex-grow: 0;
@ -1059,8 +1059,9 @@
} }
.ListCard_imageStyle { .ListCard_imageStyle {
height: 88px; width: 100%;
object-fit: contain; object-fit: contain;
max-height: 100px;
} }
.ListCard_contentStyle { .ListCard_contentStyle {
@ -1200,7 +1201,7 @@
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
/* mix-blend-mode: luminosity;*/ /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {
@ -1812,9 +1813,9 @@
} }
.ListCard_imageStyle { .ListCard_imageStyle {
width: 88px; width: 100%;
height: 88px;
object-fit: contain; object-fit: contain;
max-height: 100px;
} }
.ListCard_contentStyle { .ListCard_contentStyle {
@ -1952,7 +1953,7 @@
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
/* mix-blend-mode: luminosity;*/ /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {
@ -2562,9 +2563,9 @@
} }
.ListCard_imageStyle { .ListCard_imageStyle {
width: 88px; width: 100%;
height: 88px;
object-fit: contain; object-fit: contain;
max-height: 100px;
} }
.ListCard_contentStyle { .ListCard_contentStyle {
@ -2700,7 +2701,7 @@
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
/* mix-blend-mode: luminosity;*/ /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {

View File

@ -1,4 +1,5 @@
import React, { useRef, useState, useEffect } from "react"; import React, { useRef, useState, useEffect } from "react";
import { Helmet } from "react-helmet";
import moment from "moment"; import moment from "moment";
import "./new_a_propos.css"; import "./new_a_propos.css";
@ -7,24 +8,39 @@ import LogoCloud from './LogoCloud.js';
import VisionSection from './VisionSection.js'; import VisionSection from './VisionSection.js';
import KeyMetrics from './KeyMetrics.js'; import KeyMetrics from './KeyMetrics.js';
import Features from './Features.js'; import Features from './Features.js';
import AboutUsSection from './block_stat/AboutUsSection.js'; import AboutUsSection from './block_stat/AboutUsSection.js';
const New_C_A_Propos_2025 = (props) => { const New_C_A_Propos_2025 = (props) => {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
return ( return (
<div className="new_a_propos_2025"> <div className="new_a_propos_2025">
<Helmet>
<title>Éditeur Français de logiciels de gestion pour organismes de formation - Gestion administrative, CRM, E-Learning, Marketplace</title>
<meta name="description" content="Éditeur Français de logiciels pour organismes de formation. Avec notre solution Tout-en-Un, Nous automatisons les étapes Qualiopi (Inscription, Documents personnalisés, Les émargements sécurisés, Les évaluations, etc). Votre Le bilan pédagogique et financier est généré automatiquement." />
<meta name="robots" content="index,follow" />
<meta name="title" content="Éditeur Français de logiciels de gestion pour organismes de formation - Gestion administrative, CRM, E-Learning, Marketplace" />
<link rel="canonical" href={window.location.href} />
</Helmet>
<div className="fonctionnalite_Background"> <div className="fonctionnalite_Background">
<div className="title_and_cat"> <div className="title_and_cat">
<div className="title_and_cat_title"> <div className="title_and_cat_title">
<div className="title_and_cat_title_text1"> <div className="title_and_cat_title_text1">
Votre partenaire pour des formations & <br />une gestion simplifiée. Votre partenaire pour des formations <br />& une gestion simplifiée.
</div> </div>
<div className="title_and_cat_title_text2"> <div className="title_and_cat_title_text2">
Que ce soit pour simplifier vos tâches administratives, optimiser la gestion de vos apprenants ou enrichir vos parcours e-learning, MySy Training vous accompagne. MySy Training combine innovation et expertise pour transformer la manière dont vous formez et gérez votre établissement. </div>
</div>
</div> </div>
<div className="title_and_cat_title_cat"> <div className="title_and_cat_title_cat">
@ -45,7 +61,7 @@ const New_C_A_Propos_2025 = (props) => {
<div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => { <div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => {
window.open( window.open(
"/new_contact/", "/contact/",
'_self' '_self'
); );
}}> }}>

View File

@ -108,7 +108,7 @@ const ContactInfo = ({ style = {} }) => {
<div> <div>
<div style={labelStyles} >Nos réseaux sociaux :</div> <div style={labelStyles} >Nos réseaux sociaux :</div>
<div style={socialIconsContainerStyles}> <div style={socialIconsContainerStyles}>
<a href="https://www.linkedin.com/company/mysy-training/" target="_blank"><img src={Social_Link_icon} alt="social Mysy Training LinkedIn" style={socialIconStyles} /></a> <a href="https://www.linkedin.com/company/mysy-training/" target="_blank"><img src="/img/contact_img_linkedin.png" alt="social Mysy Training LinkedIn" style={socialIconStyles} /></a>
<a href="https://www.facebook.com/people/MySy-Training-Technology/100083219647910/" target="_blank"><img src={Social_Fa_icon} alt="social Mysy Training Facebook" style={socialIconStyles} /></a> <a href="https://www.facebook.com/people/MySy-Training-Technology/100083219647910/" target="_blank"><img src={Social_Fa_icon} alt="social Mysy Training Facebook" style={socialIconStyles} /></a>
<a href="https://twitter.com/mysy_training" target="_blank"> <img src={Social_X_icon} alt="social Mysy Training X (twitter)" style={socialIconStyles} /></a> <a href="https://twitter.com/mysy_training" target="_blank"> <img src={Social_X_icon} alt="social Mysy Training X (twitter)" style={socialIconStyles} /></a>

View File

@ -1,15 +1,31 @@
import React, { useState, useEffect } from "react";
import { Helmet } from "react-helmet";
import './contact_automatic_files.css'; import './contact_automatic_files.css';
import ContactForm from './ContactForm'; import ContactForm from './ContactForm';
import ContactInfo from './ContactInfo'; import ContactInfo from './ContactInfo';
import Footer from './Footer';
const Contact_Layout = () => { const Contact_Layout = () => {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
return ( return (
<div style={{ width: '100%', minHeight: '100vh', display: 'flex', flexDirection: 'column' }} id="debut"> <div style={{ width: '100%', minHeight: '100vh', display: 'flex', flexDirection: 'column' }} id="debut">
<div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', background: 'url(https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/backgrou.png)', backgroundSize: 'cover', padding: '90px 0' }}> <Helmet>
<meta name="description" content="Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser laudit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé. Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code), QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF). Nos options comme la signature électronique sont inclus dans le tarif de base." />
<meta name="robots" content="index,follow" />
<meta name="title" content="MySy Training, contactez-nous" />
<link rel="canonical" href={window.location.href} />
</Helmet>
<div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', background: 'url(/img/contact_img_backgrou.png)', backgroundSize: 'cover', padding: '90px 0' }}>
<h1 style={{ fontFamily: 'DM Sans', fontSize: '36px', fontWeight: 700, color: '#16274F', textAlign: 'center', marginBottom: '20px' }}>Un besoin, une question ?<br />Nous sommes à votre disposition.</h1> <h1 style={{ fontFamily: 'DM Sans', fontSize: '36px', fontWeight: 700, color: '#16274F', textAlign: 'center', marginBottom: '20px' }}>Un besoin, une question ?<br />Nous sommes à votre disposition.</h1>
<p style={{ fontFamily: 'Inter', fontSize: '16px', color: '#4B5162', textAlign: 'center', maxWidth: '600px', marginBottom: '0px' }}> <p style={{ fontFamily: 'Inter', fontSize: '16px', color: '#4B5162', textAlign: 'center', maxWidth: '600px', marginBottom: '0px' }}>
C'est à vous. Dites-nous tout &nbsp; &nbsp; <span style={{ 'fontSize': '30px' }}>&#9997;</span> C'est à vous. Dites-nous tout &nbsp; &nbsp; <span style={{ 'fontSize': '30px' }}>&#9997;</span>

View File

@ -1,176 +0,0 @@
import React from 'react';
const Footer = ({ style = {} }) => {
const footerStyle = {
width: '100%',
minWidth: '1024px',
height: '368px',
backgroundColor: '#043a32',
padding: '64px',
display: 'flex',
flexDirection: 'column',
boxSizing: 'border-box',
...style
};
const logoAddressStyle = {
display: 'flex',
flexDirection: 'column',
gap: '12px',
width: '416px',
marginBottom: '24px'
};
const addressTextStyle = {
color: '#ffffff',
opacity: 0.7,
fontSize: '16px',
lineHeight: '32px',
fontFamily: 'Inter'
};
const linksContainerStyle = {
display: 'flex',
flexDirection: 'row',
gap: '120px',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginBottom: '24px'
};
const linkColumnStyle = {
display: 'flex',
flexDirection: 'column',
gap: '12px'
};
const linkStyle = {
color: '#ffffff',
opacity: 0.8,
fontSize: '16px',
lineHeight: '24px',
fontFamily: 'Inter',
cursor: 'pointer'
};
const dividerStyle = {
width: '100%',
height: '1px',
backgroundColor: '#ffffff',
opacity: 0.2,
margin: '24px 0'
};
const bottomContainerStyle = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap'
};
const legalLinksStyle = {
display: 'flex',
flexDirection: 'row',
gap: '32px',
flexWrap: 'wrap'
};
const legalLinkStyle = {
color: '#ffffff',
fontSize: '14px',
lineHeight: '20px',
fontFamily: 'Inter',
cursor: 'pointer'
};
const socialIconsStyle = {
display: 'flex',
flexDirection: 'row',
gap: '12px'
};
const socialIconStyle = {
width: '24px',
height: '24px',
cursor: 'pointer'
};
return (
<footer style={footerStyle}>
<div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
<div style={logoAddressStyle}>
<img
src="https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/logo-my-s-2.png"
alt="MySy Logo"
style={{ width: '144px', height: '48px' }}
/>
<p style={addressTextStyle}>
Adresse : 1 Cr du Havre, 75008 Paris<br />
E-mail : contact@mysy-training.com<br />
Téléphone fixe : +331 77 00 38 57
</p>
</div>
<div style={linksContainerStyle}>
<div style={linkColumnStyle}>
<span style={linkStyle}>Qui sommes-nous ?</span>
<span style={linkStyle}>Fonctionnaltiés</span>
<span style={linkStyle}>Tarifs</span>
<span style={linkStyle}>Blog</span>
<span style={linkStyle}>Nous contacter</span>
</div>
<div style={linkColumnStyle}>
<span style={linkStyle}>Services</span>
<span style={linkStyle}>Intégrations</span>
<span style={linkStyle}>Assistance</span>
<span style={linkStyle}>FAQ</span>
<span style={linkStyle}>Carrières</span>
</div>
<div style={linkColumnStyle}>
<span style={linkStyle}>Solutions</span>
<span style={linkStyle}>Partenariats</span>
<span style={linkStyle}>Support</span>
<span style={linkStyle}>Communauté</span>
<span style={linkStyle}>Aide</span>
</div>
</div>
</div>
<div style={dividerStyle} />
<div style={bottomContainerStyle}>
<div style={legalLinksStyle}>
<span style={legalLinkStyle}>Privacy policy</span>
<span style={legalLinkStyle}>Cookies</span>
<span style={legalLinkStyle}>Legal</span>
<span style={legalLinkStyle}>Accessibility</span>
<span style={legalLinkStyle}>Copyright © 2024 MySy. Tous droits réservés.</span>
</div>
<div style={socialIconsStyle}>
<img
src="https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/facebook.png"
alt="Facebook"
style={socialIconStyle}
/>
<img
src="https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/instagra.png"
alt="Instagram"
style={socialIconStyle}
/>
<img
src="https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/twitter.png"
alt="Twitter"
style={socialIconStyle}
/>
</div>
</div>
</footer>
);
};
export default Footer;

View File

@ -60,8 +60,8 @@ const Badge_Fonctionnalite = (props) => {
{props.badge.detail_1 && <ul> {props.badge.detail_1 && <ul>
{props.badge.detail_1 && <li> {props.badge.detail_1} </li>} {props.badge.detail_1 && <li> {props.badge.detail_1} </li>}
{props.badge.detail_1 && <li> {props.badge.detail_2}</li>} {props.badge.detail_2 && <li> {props.badge.detail_2}</li>}
{props.badge.detail_1 && <li> {props.badge.detail_3}</li>} {props.badge.detail_3 && <li> {props.badge.detail_3}</li>}
</ul>} </ul>}
</p> </p>
</div> </div>

View File

@ -5,8 +5,9 @@ const MySy_CRM_Section = () => {
return ( return (
<div className='new_fonctionalites_2025 mysy_crm_section_block1'> <div className='new_fonctionalites_2025 mysy_crm_section_block1'>
{/* Right Image */} {/* Right Image */}
<div className='mysy_crm_section_block_image' /> <div className='mysy_crm_section_block_image'>
<img src="/img/fonctionnalite_img/img_crm.png" alt="Content illustration" className='contentsection_image' />
</div>
{/* Left Content Container */} {/* Left Content Container */}
<div className='mysy_crm_section_block_text'> <div className='mysy_crm_section_block_text'>
{/* Title + Description Container */} {/* Title + Description Container */}
@ -37,7 +38,14 @@ const MySy_CRM_Section = () => {
}} }}
onMouseOut={(e) => { onMouseOut={(e) => {
e.currentTarget.style.background = 'transparent'; e.currentTarget.style.background = 'transparent';
}}> }}
onClick={() => {
window.open(
"/tarif/",
'_self'
);
}}
>
<span className='mysy_crm_section_block_text_tite_desc_bton_span'> <span className='mysy_crm_section_block_text_tite_desc_bton_span'>
Découvrez nos tarifs Découvrez nos tarifs
</span> </span>

View File

@ -3,12 +3,16 @@ import React from 'react';
const ContentSection = ({ const ContentSection = ({
title = "GESTION ADMNISTRATIVE", title = "GESTION ADMNISTRATIVE",
heading = "Simplifiez vos processus administratifs.", heading = "Simplifiez vos processus administratifs.",
description = `Gagnez du temps et réduisez les erreurs grâce à des outils performants et intuitifs. Gérez facilement le processus d'inscription des apprenants, les émargements (à distance ou en présentiel) et les évaluations. description_1 = `Gagnez du temps et réduisez les erreurs grâce à des outils performants et intuitifs.`,
description_2 = `Gérez facilement le processus d'inscription des apprenants, les émargements (à distance ou en présentiel) et les évaluations.`,
description_3 = `Cette solution centralisée vous permet également d'administrer les enseignants, le matériel pédagogique, le planning de formation et les agendas. `,
description_4 = `Générez en un clic votre Bilan Pédagogique et Financier (BPF) et partagez vos formations en ligne grâce à un intranet intégré.`,
Cette solution centralisée vous permet également d'administrer les enseignants, le matériel pédagogique, le planning de formation et les agendas.
Générez en un clic votre Bilan Pédagogique et Financier (BPF) et partagez vos formations en ligne grâce à un intranet intégré.`,
buttonText = "Découvrez nos tarifs", buttonText = "Découvrez nos tarifs",
imageSrc = "img/fonctionnalite_img/img_gestion_admin.png" imageSrc = "/img/fonctionnalite_img/img_gestion_admin.png",
buttonText_link_url = "/tarif/",
}) => { }) => {
const styles = { const styles = {
section: { section: {
@ -89,20 +93,31 @@ Générez en un clic votre Bilan Pédagogique et Financier (BPF) et partagez vos
<div className='contentsection_categorytitle'>{title}</div> <div className='contentsection_categorytitle'>{title}</div>
<h1 className='contentsection_mainheading'>{heading}</h1> <h1 className='contentsection_mainheading'>{heading}</h1>
</div> </div>
<p className='contentsection_description'>{description}</p> <p className='contentsection_description'>{description_1}</p>
<button className='contentsection_button' <p className='contentsection_description'>{description_2}</p>
<p className='contentsection_description'>{description_3}</p>
<p className='contentsection_description'>{description_4}</p>
<button className='contentsection_description contentsection_button'
onMouseOver={(e) => { onMouseOver={(e) => {
e.currentTarget.style.backgroundColor = '#f5f6f7'; e.currentTarget.style.backgroundColor = '#f5f6f7';
}} }}
onMouseOut={(e) => { onMouseOut={(e) => {
e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.backgroundColor = 'transparent';
}} }}
onClick={() => {
window.open(
buttonText_link_url,
'_self'
);
}}
> >
<span className='contentsection_buttonText'>{buttonText}</span> <span className='contentsection_buttonText'>{buttonText}</span>
</button> </button>
</div> </div>
<div className='contentsection_contentcontainer_img'> <div className='contentsection_contentcontainer_img'>
<img src={imageSrc} alt="Content illustration" className='contentsection_image' /> <img src={imageSrc} alt="Content illustration" className='contentsection_image' />
</div> </div>
</div> </div>
); );

View File

@ -2,17 +2,17 @@ import React from 'react';
const ELearningSection = () => { const ELearningSection = () => {
return ( return (
<div className='new_fonctionalites_2025 elearningsection_block1'> <div className='new_fonctionalites_2025 elearningsection_block1'>
{/* Left Content Container */} {/* Left Content Container */}
<div className='elearningsection_block2'> <div className='elearningsection_block2'>
{/* Title + Description Container */} {/* Title + Description Container */}
<div className='elearningsection_text_title'> <div className='elearningsection_text_title'>
{/* Title Section */} {/* Title Section */}
<div className='elearningsection_text_title_title'> <div className='elearningsection_text_title_title'>
<span className='elearningsection_text_title_title_span'> <span className='elearningsection_text_title_title_span'>
e-learning e-learning
</span> </span>
<h1 className='elearningsection_text_title_title_h1'> <h1 className='elearningsection_text_title_title_h1'>
Enrichissez vos formations avec des outils e-learning Enrichissez vos formations avec des outils e-learning
</h1> </h1>
</div> </div>
@ -30,13 +30,19 @@ const ELearningSection = () => {
</div> </div>
{/* Button */} {/* Button */}
<button className='elearningsection_text_bton' <button className='elearningsection_text_bton'
onMouseOver={(e) => { onMouseOver={(e) => {
e.currentTarget.style.background = '#f5f5f5'; e.currentTarget.style.background = '#f5f5f5';
}} }}
onMouseOut={(e) => { onMouseOut={(e) => {
e.currentTarget.style.background = 'transparent'; e.currentTarget.style.background = 'transparent';
}}> }}
onClick={() => {
window.open(
"/tarif/",
'_self'
);
}}>
<span className='elearningsection_text_bton_span' > <span className='elearningsection_text_bton_span' >
Découvrez nos tarifs Découvrez nos tarifs
</span> </span>
@ -44,7 +50,9 @@ const ELearningSection = () => {
</div> </div>
{/* Right Image */} {/* Right Image */}
<div className='elearningsection_img'/> <div className='elearningsection_img'>
<img src="/img/fonctionnalite_img/img_lms.png" alt="Content illustration" className='contentsection_image' />
</div>
</div> </div>
); );
}; };

View File

@ -99,7 +99,14 @@ const ELearningSection = () => {
fontSize: '16px', fontSize: '16px',
fontWeight: 700, fontWeight: 700,
padding: '0 8px' padding: '0 8px'
}}> }}
onClick={() => {
window.open(
"/tarif/",
'_self'
);
}}
>
Découvrez nos tarifs Découvrez nos tarifs
</span> </span>
</button> </button>
@ -110,7 +117,7 @@ const ELearningSection = () => {
width: '692px', width: '692px',
height: '692px', height: '692px',
borderRadius: '16px', borderRadius: '16px',
backgroundImage: 'url(https://dashboard.codeparrot.ai/api/image/Z6NsXjRi7Jes3898/image-he.png)', backgroundImage: 'url(/img/elearning_section_img.png)',
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center' backgroundPosition: 'center'
}} /> }} />

View File

@ -36,19 +36,19 @@ const FeatureCard = ({ iconUrl, title, description, buttonText, module }) => {
if (String(module) === "gestion_admin") { if (String(module) === "gestion_admin") {
window.open( window.open(
"/new_header_footer#badge_gestion_admin", "/fonctionnalites#badge_gestion_admin",
'_self' '_self'
); );
} }
else if (String(module) === "crm") { else if (String(module) === "crm") {
window.open( window.open(
"/new_header_footer#badge_crm", "/fonctionnalites#badge_crm",
'_self' '_self'
); );
} }
else if (String(module) === "lms") { else if (String(module) === "lms") {
window.open( window.open(
"/new_header_footer#badge_lms", "/fonctionnalites#badge_lms",
'_self' '_self'
); );
} }

View File

@ -11,26 +11,34 @@ const FeaturesLayout = () => {
</div> </div>
<div className='featureslayout_block_cards' > <div className='featureslayout_block_cards' >
<FeatureCard <FeatureCard
iconUrl="img/fonctionnalite_img/img_top_mini_gestion_admin.png" iconUrl="/img/fonctionnalite_img/img_top_mini_gestion_admin.png"
title="Gestion administrative" title="Gestion administrative"
description="Simplifiez la gestion de vos processus grâce à des outils performants : planification, automatisation et rapports." description="Simplifiez la gestion de vos processus grâce à des outils performants : planification, automatisation et rapports."
buttonText="Découvrir" buttonText="Découvrir"
module="gestion_admin" module="gestion_admin"
/> />
<FeatureCard <FeatureCard
iconUrl="img/fonctionnalite_img/img_top_mini_crm.png" iconUrl="/img/fonctionnalite_img/img_top_mini_crm.png"
title="Relation Client (CRM)" title="Relation Client (CRM)"
description="Optimisez le suivi de vos apprenants avec des tableaux de bord personnalisés." description="Optimisez le suivi de vos apprenants avec des tableaux de bord personnalisés."
buttonText="Découvrir" buttonText="Découvrir"
module="crm" module="crm"
/> />
<FeatureCard <FeatureCard
iconUrl="img/fonctionnalite_img/img_top_mini_lms.png" iconUrl="/img/fonctionnalite_img/img_top_mini_lms.png"
title="E-learning (LMS)" title="E-learning (LMS)"
description="Créez des parcours engageants et modulables, avec des micro-certifications et des contenus interactifs." description="Créez des parcours engageants et modulables, avec des micro-certifications et des contenus interactifs."
buttonText="Découvrir" buttonText="Découvrir"
module="lms" module="lms"
/> />
<FeatureCard
iconUrl="/img/fonctionnalite_img/img_top_mini_market_place.png"
title="Marketplace"
description="Créez des parcours engageants et modulables, avec des micro-certifications et des contenus interactifs."
buttonText="Découvrir"
module="marketplace"
/>
</div> </div>
</div> </div>
); );

View File

@ -72,7 +72,7 @@
text-align: center; text-align: center;
color: #16274F; color: #16274F;
flex: none; flex: none;
flex-grow: 0; flex-grow: 0;
order: 0; order: 0;
flex-grow: 0; flex-grow: 0;
margin-left: auto; margin-left: auto;
@ -392,6 +392,8 @@
padding-top: 10px; padding-top: 10px;
margin-bottom: 5rem; margin-bottom: 5rem;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
} }
@ -427,13 +429,27 @@
} }
.contentsection_description { .contentsection_description {
/* Commons/Body/Body - L */
font-family: 'Inter'; font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: #4b5162; /* or 150% */
/* Foundation /Blue-Grey/Normal */
color: #4B5162;
opacity: 0.8; opacity: 0.8;
white-space: pre-line;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
text-align: left; text-align: left;
margin-bottom: 0px;
} }
.contentsection_button { .contentsection_button {
@ -470,6 +486,8 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: 32px; gap: 32px;
align-items: center;
justify-content: center;
} }
@ -492,7 +510,6 @@
width: 100%; width: 100%;
height: 25rem; height: 25rem;
border-radius: 16px; border-radius: 16px;
background: url("/public/img/fonctionnalite_img/img_crm.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -503,6 +520,8 @@
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 100%; width: 100%;
align-items: center;
justify-content: center;
} }
.mysy_crm_section_block_text_tite_desc { .mysy_crm_section_block_text_tite_desc {
@ -594,6 +613,8 @@
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 100%; width: 100%;
align-items: center;
justify-content: center;
} }
@ -1074,14 +1095,16 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 10px;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
.contentsection_contentcontainer { .contentsection_contentcontainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 540px; width: 45%;
gap: 32px; gap: 32px;
} }
@ -1090,6 +1113,7 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
width: 100%; width: 100%;
text-align: left;
} }
.contentsection_categorytitle { .contentsection_categorytitle {
@ -1110,12 +1134,27 @@
} }
.contentsection_description { .contentsection_description {
/* Commons/Body/Body - L */
font-family: 'Inter'; font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: #4b5162; /* or 150% */
/* Foundation /Blue-Grey/Normal */
color: #4B5162;
opacity: 0.8; opacity: 0.8;
white-space: 'pre-line';
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
text-align: left;
margin-bottom: 0px;
} }
.contentsection_button { .contentsection_button {
@ -1130,28 +1169,30 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF; background: #FFF;
max-width: 250px;
} }
.contentsection_buttonText { .contentsection_buttonText {
font-family: 'DM Sans'; font-family: 'DM Sans';
font-size: 16px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #4b5162; color: #4b5162;
padding: 0 8px; padding: 0 8px;
} }
.contentsection_image { .contentsection_image {
width: 100%; width: 90%;
height: unset;
border-radius: 16px; border-radius: 16px;
object-fit: cover; object-fit: contain;
} }
.contentsection_contentcontainer_img { .contentsection_contentcontainer_img {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 50%; width: 55%;
gap: 32px; gap: 32px;
align-items: center;
justify-content: center;
} }
@ -1160,20 +1201,21 @@
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
background: #FFFFFF; background: #FFFFFF;
width: 90%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 6rem;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
.mysy_crm_section_block_image { .mysy_crm_section_block_image {
width: 50%; width: 55%;
height: unset; height: unset;
border-radius: 16px; border-radius: 16px;
background: url("/public/img/fonctionnalite_img/img_crm.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -1183,7 +1225,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 50%;
align-items: center;
justify-content: center;
width: 45%;
text-align: left;
} }
.mysy_crm_section_block_text_tite_desc { .mysy_crm_section_block_text_tite_desc {
@ -1241,15 +1287,26 @@
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF;
background-color: rgb(255, 255, 255);
max-width: 250px;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: left;
} }
.mysy_crm_section_block_text_tite_desc_bton_span { .mysy_crm_section_block_text_tite_desc_bton_span {
font-style: normal;
line-height: 24px;
text-align: left;
font-family: 'DM Sans'; font-family: 'DM Sans';
font-size: 14px;
font-weight: 700; font-weight: 700;
font-size: 16px;
line-height: 122%;
color: #4b5162; color: #4b5162;
padding: 0 8px; padding: 0 8px;
@ -1261,11 +1318,13 @@
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
background: #FFFFFF; background: #FFFFFF;
width: 90%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 6rem;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
@ -1273,7 +1332,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 540px; max-width: 700px;
align-items: center;
justify-content: center;
width: 45%;
text-align: left;
} }
@ -1333,15 +1396,25 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF; background: #FFF;
background-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
max-width: 250px;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: left;
} }
.elearningsection_text_bton_span { .elearningsection_text_bton_span {
font-family: 'DM Sans'; font-family: 'DM Sans';
font-size: 14px;
font-weight: 700; font-weight: 700;
font-size: 16px;
line-height: 122%;
color: #4b5162; color: #4b5162;
padding: 0 8px; padding: 0 8px;
line-height: 122%;
} }
.elearningsection_img { .elearningsection_img {
@ -1749,14 +1822,16 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 10px;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
.contentsection_contentcontainer { .contentsection_contentcontainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 540px; width: 45%;
gap: 32px; gap: 32px;
} }
@ -1765,6 +1840,7 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
width: 100%; width: 100%;
text-align: left;
} }
.contentsection_categorytitle { .contentsection_categorytitle {
@ -1785,12 +1861,27 @@
} }
.contentsection_description { .contentsection_description {
/* Commons/Body/Body - L */
font-family: 'Inter'; font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: #4b5162; /* or 150% */
/* Foundation /Blue-Grey/Normal */
color: #4B5162;
opacity: 0.8; opacity: 0.8;
white-space: 'pre-line';
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
text-align: left;
margin-bottom: 0px;
} }
.contentsection_button { .contentsection_button {
@ -1805,6 +1896,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF; background: #FFF;
max-width: 250px;
} }
.contentsection_buttonText { .contentsection_buttonText {
@ -1816,17 +1908,18 @@
} }
.contentsection_image { .contentsection_image {
width: 100%; width: 90%;
height: unset;
border-radius: 16px; border-radius: 16px;
object-fit: cover; object-fit: contain;
} }
.contentsection_contentcontainer_img { .contentsection_contentcontainer_img {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 50%; width: 55%;
gap: 32px; gap: 32px;
align-items: center;
justify-content: center;
} }
@ -1835,20 +1928,21 @@
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
background: #FFFFFF; background: #FFFFFF;
width: 90%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 6rem;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
.mysy_crm_section_block_image { .mysy_crm_section_block_image {
width: 50%; width: 55%;
height: unset; height: unset;
border-radius: 16px; border-radius: 16px;
background: url("/public/img/fonctionnalite_img/img_crm.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -1858,7 +1952,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 540px;
align-items: center;
justify-content: center;
width: 45%;
text-align: left;
} }
.mysy_crm_section_block_text_tite_desc { .mysy_crm_section_block_text_tite_desc {
@ -1916,15 +2014,26 @@
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF;
background-color: rgb(255, 255, 255);
max-width: 250px;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: left;
} }
.mysy_crm_section_block_text_tite_desc_bton_span { .mysy_crm_section_block_text_tite_desc_bton_span {
font-style: normal;
line-height: 24px;
text-align: left;
font-family: 'DM Sans'; font-family: 'DM Sans';
font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 122%; font-weight: 700;
color: #4b5162; color: #4b5162;
padding: 0 8px; padding: 0 8px;
@ -1936,11 +2045,14 @@
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
background: #FFFFFF; background: #FFFFFF;
width: 90%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 6rem;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
@ -1949,7 +2061,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 540px; max-width: 700px;
align-items: center;
justify-content: center;
width: 45%;
text-align: left;
} }
@ -2009,15 +2125,25 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF; background: #FFF;
background-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
max-width: 250px;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: left;
} }
.elearningsection_text_bton_span { .elearningsection_text_bton_span {
font-family: 'DM Sans'; font-family: 'DM Sans';
font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 122%; font-weight: 700;
color: #4b5162; color: #4b5162;
padding: 0 8px; padding: 0 8px;
line-height: 122%;
} }
.elearningsection_img { .elearningsection_img {
@ -2281,7 +2407,7 @@
.block_badge { .block_badge {
display: flex; display: flex;
padding: 80px;
gap: 80px; gap: 80px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
width: 80%; width: 80%;
@ -2325,10 +2451,12 @@
.featureslayout_block1 { .featureslayout_block1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 80%;
padding: 80px;
background: #FFFFFF; background: #FFFFFF;
margin-bottom: 5rem; margin-bottom: 5rem;
margin-left: auto;
margin-right: auto;
padding-top: 80px;
} }
.featureslayout_block2 { .featureslayout_block2 {
@ -2422,23 +2550,24 @@
.contentsection_section { .contentsection_section {
padding: 80px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 80px; gap: 20px;
background: #FFFFFF; background: #FFFFFF;
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 10px;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
.contentsection_contentcontainer { .contentsection_contentcontainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 50%; width: 45%;
gap: 32px; gap: 32px;
} }
@ -2447,6 +2576,7 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
width: 100%; width: 100%;
text-align: left;
} }
.contentsection_categorytitle { .contentsection_categorytitle {
@ -2467,12 +2597,27 @@
} }
.contentsection_description { .contentsection_description {
/* Commons/Body/Body - L */
font-family: 'Inter'; font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: #4b5162; /* or 150% */
/* Foundation /Blue-Grey/Normal */
color: #4B5162;
opacity: 0.8; opacity: 0.8;
white-space: 'pre-line';
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
text-align: left;
margin-bottom: 0px;
} }
.contentsection_button { .contentsection_button {
@ -2487,6 +2632,13 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF; background: #FFF;
max-width: 250px;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: left;
} }
.contentsection_buttonText { .contentsection_buttonText {
@ -2498,39 +2650,40 @@
} }
.contentsection_image { .contentsection_image {
width: 540px; width: 90%;
height: unset;
border-radius: 16px; border-radius: 16px;
object-fit: cover; object-fit: contain;
} }
.contentsection_contentcontainer_img { .contentsection_contentcontainer_img {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 50%; width: 55%;
gap: 32px; gap: 32px;
align-items: center;
justify-content: center;
} }
.mysy_crm_section_block1 { .mysy_crm_section_block1 {
padding: 80px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 80px; gap: 20px;
background: #FFFFFF; background: #FFFFFF;
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 6rem;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
.mysy_crm_section_block_image { .mysy_crm_section_block_image {
width: 692px; width: 55%;
height: 692px; height: unset;
border-radius: 16px; border-radius: 16px;
background: url("/public/img/fonctionnalite_img/img_crm.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -2540,7 +2693,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 540px; max-width: 700px;
align-items: center;
justify-content: center;
width: 45%;
text-align: left;
} }
.mysy_crm_section_block_text_tite_desc { .mysy_crm_section_block_text_tite_desc {
@ -2584,6 +2741,27 @@
line-height: 24px; line-height: 24px;
color: #4b5162; color: #4b5162;
opacity: 0.8; opacity: 0.8;
/* Commons/Body/Body - L */
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
/* or 150% */
/* Foundation /Blue-Grey/Normal */
color: #4B5162;
opacity: 0.8;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
text-align: left;
margin-bottom: 0px;
} }
@ -2598,30 +2776,42 @@
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF;
background-color: rgb(255, 255, 255);
max-width: 250px;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: left;
} }
.mysy_crm_section_block_text_tite_desc_bton_span { .mysy_crm_section_block_text_tite_desc_bton_span {
font-style: normal;
line-height: 24px;
text-align: left;
font-family: 'DM Sans'; font-family: 'DM Sans';
font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 122%; font-weight: 700;
color: #4b5162; color: #4b5162;
padding: 0 8px; padding: 0 8px;
} }
.elearningsection_block1 { .elearningsection_block1 {
padding: 80px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 80px; gap: 20px;
background: #FFFFFF; background: #FFFFFF;
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 10px; padding-top: 6rem;
margin-bottom: 5rem; margin-bottom: 1rem;
align-items: center;
justify-content: center;
} }
@ -2629,7 +2819,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
width: 540px; max-width: 700px;
align-items: center;
justify-content: center;
width: 45%;
text-align: left;
} }
@ -2689,22 +2883,32 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFF; background: #FFF;
background-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
max-width: 250px;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: left;
} }
.elearningsection_text_bton_span { .elearningsection_text_bton_span {
font-family: 'DM Sans'; font-family: 'DM Sans';
font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 122%; font-weight: 700;
color: #4b5162; color: #4b5162;
padding: 0 8px; padding: 0 8px;
line-height: 122%;
} }
.elearningsection_img { .elearningsection_img {
width: 692px; width: 692px;
height: 692px; height: unset;
border-radius: 16px; border-radius: 16px;
background: url("/public/img/fonctionnalite_img/img_lms.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }

View File

@ -1,5 +1,6 @@
import React, { useRef, useState, useEffect } from "react"; import React, { useRef, useState, useEffect } from "react";
import moment from "moment"; import moment from "moment";
import { Helmet } from "react-helmet";
import "./new_fonctionalites_2025.css"; import "./new_fonctionalites_2025.css";
@ -26,7 +27,7 @@ const New_C_Fonctionalites_2025 = (props) => {
const gestion_admin_fonctionalite = [ const gestion_admin_fonctionalite = [
{ {
'title': 'Catalogue formations personnalisé', 'detail_1': 'Catalogue formations', 'detail_2': 'Nom domaine personnalisé', 'title': 'Catalogue formations personnalisé', 'detail_1': 'Catalogue formations', 'detail_2': 'Nom domaine personnalisé',
'detail_3': 'Modèle siteweb personnalisé', 'img': 'img/fonctionnalite_img/img_catalog.png' 'detail_3': 'Modèle siteweb personnalisé', 'img': '/img/fonctionnalite_img/img_catalog.png'
}, },
{ {
@ -42,55 +43,55 @@ const New_C_Fonctionalites_2025 = (props) => {
{ {
'title': 'Check-list QUALIOPI', 'detail_1': 'Traitement automatisé', 'detail_2': 'Affichage du reste à faire', 'title': 'Check-list QUALIOPI', 'detail_1': 'Traitement automatisé', 'detail_2': 'Affichage du reste à faire',
'detail_3': 'Affichage ce qui a été fait', 'img': 'img/fonctionnalite_img/img_qualiopi_checklist.png' 'detail_3': 'Affichage ce qui a été fait', 'img': '/img/fonctionnalite_img/img_qualiopi_checklist.png'
}, },
{ {
'title': 'Gestion avis participants', 'detail_1': 'Avis sur la formation', 'detail_2': 'Avis sur le formateur', 'title': 'Gestion avis participants', 'detail_1': 'Avis sur la formation', 'detail_2': 'Avis sur le formateur',
'detail_3': 'Génération automatique des statistiques de satisfaction', 'img': 'img/fonctionnalite_img/img_catalog.png' 'detail_3': 'Génération automatique des statistiques de satisfaction', 'img': '/img/fonctionnalite_img/img_catalog.png'
}, },
{ {
'title': 'Gestion Evaluation', 'detail_1': 'Evaluation à chaud', 'detail_2': 'Evaluation à froid', 'title': 'Gestion Evaluation', 'detail_1': 'Evaluation à chaud', 'detail_2': 'Evaluation à froid',
'detail_3': 'Evaluation formateur', 'img': 'img/fonctionnalite_img/img_evaluation.png' 'detail_3': 'Evaluation formateur', 'img': '/img/fonctionnalite_img/img_evaluation.png'
}, },
{ {
'title': 'Gestion documents (GED)', 'detail_1': 'Documents clients', 'detail_2': 'Documents apprenants', 'title': 'Gestion documents (GED)', 'detail_1': 'Documents clients', 'detail_2': 'Documents apprenants',
'detail_3': 'Documents formateur', 'img': 'img/fonctionnalite_img/img_storage.png' 'detail_3': 'Documents formateur', 'img': '/img/fonctionnalite_img/img_storage.png'
}, },
{ {
'title': 'Personnalisation des documents', 'detail_1': 'Personnalisation de tous les documents', 'detail_2': 'Sauvegarde et restauration', 'title': 'Personnalisation des documents', 'detail_1': 'Personnalisation de tous les documents', 'detail_2': 'Sauvegarde et restauration',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_personnalisation.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_personnalisation.png'
}, },
{ {
'title': 'Gestion des Sessions de formation', 'detail_1': 'Session inter/intra', 'detail_2': 'Personnalisation des étapes', 'title': 'Gestion des Sessions de formation', 'detail_1': 'Session inter/intra', 'detail_2': 'Personnalisation des étapes',
'detail_3': 'Affectation devis/ressources', 'img': 'img/fonctionnalite_img/img_session_formation.png' 'detail_3': 'Affectation devis/ressources', 'img': '/img/fonctionnalite_img/img_session_formation.png'
}, },
{ {
'title': 'Gestion des ressources', 'detail_1': 'Salle de classe', 'detail_2': 'Formateur & personnel administratif', 'title': 'Gestion des ressources', 'detail_1': 'Salle de classe', 'detail_2': 'Formateur & personnel administratif',
'detail_3': 'Matériel pédagogique', 'img': 'img/fonctionnalite_img/img_ressources.png' 'detail_3': 'Matériel pédagogique', 'img': '/img/fonctionnalite_img/img_ressources.png'
}, },
{ {
'title': 'Gestion formateurs', 'detail_1': 'Contrat formateurs', 'detail_2': 'Edition et stockage des contrats', 'title': 'Gestion formateurs', 'detail_1': 'Contrat formateurs', 'detail_2': 'Edition et stockage des contrats',
'detail_3': 'Evaluation', 'img': 'img/fonctionnalite_img/img_formateur.png' 'detail_3': 'Evaluation', 'img': '/img/fonctionnalite_img/img_formateur.png'
}, },
{ {
'title': 'Tableau de bord & BPF', 'detail_1': 'Suivi dactivité', 'detail_2': 'BPF', 'title': 'Tableau de bord & BPF', 'detail_1': 'Suivi dactivité', 'detail_2': 'BPF',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_tableau_bord.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_tableau_bord.png'
}, },
] ]
@ -98,43 +99,43 @@ const New_C_Fonctionalites_2025 = (props) => {
const crm_fonctionalite = [ const crm_fonctionalite = [
{ {
'title': 'Signature électronique', 'detail_1': 'Un module intégrée', 'detail_2': 'Permet de signer vos documents', 'title': 'Signature électronique', 'detail_1': 'Un module intégrée', 'detail_2': 'Permet de signer vos documents',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_signat_electro.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_signat_electro.png'
}, },
{ {
'title': 'Gestion des collaborateurs', 'detail_1': 'Affectation tâches', 'detail_2': 'Suivi avancement', 'title': 'Gestion des collaborateurs', 'detail_1': 'Affectation tâches', 'detail_2': 'Suivi avancement',
'detail_3': 'Notification par email', 'img': 'img/fonctionnalite_img/img_collaborateur.png' 'detail_3': 'Notification par email', 'img': '/img/fonctionnalite_img/img_collaborateur.png'
}, },
{ {
'title': 'Les Devis', 'detail_1': 'Envoi par email', 'detail_2': 'Validation automatique client', 'title': 'Les Devis', 'detail_1': 'Envoi par email', 'detail_2': 'Validation automatique client',
'detail_3': 'Relance automatique', 'img': 'img/fonctionnalite_img/img_devis.png' 'detail_3': 'Relance automatique', 'img': '/img/fonctionnalite_img/img_devis.png'
}, },
{ {
'title': 'Gestion Clients, Financeurs', 'detail_1': 'Contacts', 'detail_2': 'Stockage documents', 'title': 'Gestion Clients, Financeurs', 'detail_1': 'Contacts', 'detail_2': 'Stockage documents',
'detail_3': 'Import / Export Excel', 'img': 'img/fonctionnalite_img/img_client_financeur.png' 'detail_3': 'Import / Export Excel', 'img': '/img/fonctionnalite_img/img_client_financeur.png'
}, },
{ {
'title': 'Paiements', 'detail_1': 'Multi paiement', 'detail_2': 'Suivi du reste à payer', 'title': 'Paiements', 'detail_1': 'Multi paiement', 'detail_2': 'Suivi du reste à payer',
'detail_3': 'Import / Export Excel', 'img': 'img/fonctionnalite_img/img_paiement.png' 'detail_3': 'Import / Export Excel', 'img': '/img/fonctionnalite_img/img_paiement.png'
}, },
{ {
'title': 'opportunités daffaire', 'detail_1': 'Personnalisation des étapes', 'detail_2': 'Notification équipe', 'title': 'opportunités daffaire', 'detail_1': 'Personnalisation des étapes', 'detail_2': 'Notification équipe',
'detail_3': 'Conversion en devis', 'img': 'img/fonctionnalite_img/img_opportunite.png' 'detail_3': 'Conversion en devis', 'img': '/img/fonctionnalite_img/img_opportunite.png'
}, },
{ {
'title': 'Facturation & avoirs', 'detail_1': 'Envoi par email au client', 'detail_2': 'Fractionnement des factures', 'title': 'Facturation & avoirs', 'detail_1': 'Envoi par email au client', 'detail_2': 'Fractionnement des factures',
'detail_3': 'Transformation en avoir et Annotation', 'img': 'img/fonctionnalite_img/img_facture_avoir.png' 'detail_3': 'Transformation en avoir et Annotation', 'img': '/img/fonctionnalite_img/img_facture_avoir.png'
}, },
{ {
'title': 'Tableau de bord', 'detail_1': 'Suivi clients', 'detail_2': 'Suivi facturation', 'title': 'Tableau de bord', 'detail_1': 'Suivi clients', 'detail_2': 'Suivi facturation',
'detail_3': 'Factures prévisionnelles', 'img': 'img/fonctionnalite_img/img_tableau_bord.png' 'detail_3': 'Factures prévisionnelles', 'img': '/img/fonctionnalite_img/img_tableau_bord.png'
}, },
@ -143,44 +144,44 @@ const New_C_Fonctionalites_2025 = (props) => {
const lms_fonctionalite = [ const lms_fonctionalite = [
{ {
'title': 'Classe virtuelle', 'detail_1': '', 'detail_2': '', 'title': 'Classe virtuelle', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_class_virtuelle.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_class_virtuelle.png'
}, },
{ {
'title': 'Cours TD TP - Examen', 'detail_1': '', 'detail_2': '', 'title': 'Cours TD TP - Examen', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_cours_td_tp.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_cours_td_tp.png'
}, },
{ {
'title': 'Intranet Apprenant & Enseignant', 'detail_1': '', 'detail_2': '', 'title': 'Intranet Apprenant & Enseignant', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_intranet_apprenant.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_intranet_apprenant.png'
}, },
{ {
'title': 'Suivi temps de connexion apprenants', 'detail_1': '', 'detail_2': '', 'title': 'Suivi temps de connexion apprenants', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_suivi_tps_connexion.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_suivi_tps_connexion.png'
}, },
{ {
'title': 'Echange Enseignant / Apprenant', 'detail_1': '', 'detail_2': '', 'title': 'Echange Enseignant / Apprenant', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_echange_prof_apprenant.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_echange_prof_apprenant.png'
}, },
{ {
'title': 'Export / Import format SCORM', 'detail_1': '', 'detail_2': '', 'title': 'Export / Import format SCORM', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_export_scorm.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_export_scorm.png'
}, },
{ {
'title': 'Partage de fichiers', 'detail_1': '', 'detail_2': '', 'title': 'Partage de fichiers', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_partage_fichiers.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_partage_fichiers.png'
}, },
{ {
'title': 'Tableau de bord / Statistiques', 'detail_1': '', 'detail_2': '', 'title': 'Tableau de bord / Statistiques', 'detail_1': '', 'detail_2': '',
'detail_3': '', 'img': 'img/fonctionnalite_img/img_tableau_bord.png' 'detail_3': '', 'img': '/img/fonctionnalite_img/img_tableau_bord.png'
}, },
@ -190,6 +191,16 @@ const New_C_Fonctionalites_2025 = (props) => {
return ( return (
<div className="new_fonctionalites_2025"> <div className="new_fonctionalites_2025">
<Helmet>
<title>Logiciel de gestion pour Organisme de formation : Gestion Administrative, CRM, LMS, Marketplace, découvrez les Fonctionnalités et Modules du logiciel de gestion des organismes de formation</title>
<meta name="description" content="Avec notre logiciel Tout-en-Un, Nous automatisons les étapes Qualiopi (Inscription, Documents personnalisés, Les émargements sécurisés, Les évaluations, etc). Votre Le bilan pédagogique et financier est généré automatiquement." />
<meta name="robots" content="index,follow" />
<meta name="title" content="Gestion Administrative, CRM, LMS, Marketplace, découvrez les Fonctionnalités et Modules du logiciel de gestion des organismes de formation" />
<link rel="canonical" href={window.location.href} />
</Helmet>
<div className="fonctionnalite_Background"> <div className="fonctionnalite_Background">
<div className="title_and_cat"> <div className="title_and_cat">
@ -222,7 +233,7 @@ const New_C_Fonctionalites_2025 = (props) => {
<div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => { <div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => {
window.open( window.open(
"/new_tarif/", "/tarif/",
'_self' '_self'
); );
}}> }}>

View File

@ -34,7 +34,7 @@ const CallToActionSection = ({ title, demoButtonText, contactText }) => {
</button> </button>
<div className="cta-contact-link" onClick={(e) => { <div className="cta-contact-link" onClick={(e) => {
e.preventDefault(); e.preventDefault();
window.open("/new_contact/#debut", "_self"); window.open("/contact/#debut", "_self");
}}> }}>
<span>{contactText}</span> <span>{contactText}</span>
</div> </div>

View File

@ -42,7 +42,7 @@ const FooterSection = ({ logoSrc, address, email, phone }) => {
<a href="#">Fonctionnaltiés</a> <a href="#">Fonctionnaltiés</a>
<nav onClick={(e) => { <nav onClick={(e) => {
e.preventDefault(); e.preventDefault();
window.open("/new_tarif/#debut", "_self"); window.open("/tarif/#debut", "_self");
}} }}
style={{ cursor: 'pointer', opacity: '0.8' }}>Tarifs</nav> style={{ cursor: 'pointer', opacity: '0.8' }}>Tarifs</nav>
@ -50,7 +50,7 @@ const FooterSection = ({ logoSrc, address, email, phone }) => {
<nav onClick={(e) => { <nav onClick={(e) => {
e.preventDefault(); e.preventDefault();
window.open("/new_contact/#debut", "_self"); window.open("/contact/#debut", "_self");
}} }}
style={{ cursor: 'pointer', opacity: '0.8' }}> Nous contacter</nav> style={{ cursor: 'pointer', opacity: '0.8' }}> Nous contacter</nav>
</div> </div>

View File

@ -77,9 +77,9 @@
} }
.testimonial-text { .testimonial-text {
font-family: 'Inter', sans-serif; font-family: Inter;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 16px;
line-height: 160%; line-height: 160%;
color: #171717; color: #171717;
margin: 0; margin: 0;
@ -234,9 +234,9 @@
} }
.testimonial-text { .testimonial-text {
font-family: 'Inter', sans-serif; font-family: Inter;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 16px;
line-height: 160%; line-height: 160%;
color: #171717; color: #171717;
margin: 0; margin: 0;
@ -391,9 +391,9 @@
} }
.testimonial-text { .testimonial-text {
font-family: 'Inter', sans-serif; font-family: Inter;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 16px;
line-height: 160%; line-height: 160%;
color: #171717; color: #171717;
margin: 0; margin: 0;
@ -548,9 +548,9 @@
} }
.testimonial-text { .testimonial-text {
font-family: 'Inter', sans-serif; font-family: Inter;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 16px;
line-height: 160%; line-height: 160%;
color: #171717; color: #171717;
margin: 0; margin: 0;

View File

@ -4,26 +4,42 @@ import './TestimonialSection.css';
const TestimonialSection = ({ testimonials = [ const TestimonialSection = ({ testimonials = [
{ {
id: 1, id: 1,
text: '"MySy Training a révolutionné notre manière de gérer les formations. Un gain de temps précieux !"', text: '"ELYOS a transformé notre façon de travailler ! La connexion du CRM avec la gestion administrative permet quaprès signature électronique de nos conventions et devis que les sessions de formation se créent automatiquement, éliminant ainsi les tâches manuelles fastidieuses..."',
author: 'Marie D.', author: 'Marie D.',
role: 'Responsable Formation', role: 'Responsable Formation',
avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image.png', avatar: '/img/testimony_img1.jfif',
rating: 5 rating: 5
}, },
{ {
id: 2, id: 2,
text: '"Une interface intuitive et un support client réactif. Je recommande vivement."', text: '"Avec l\'AUTOMATISATION La checklist Qualiopi, Je ne me prends plus la tête à savoir où j\'en suis, le reste à faire etc... Je me concentre désormais sur mes clients et mes apprenants..."',
author: 'Marie D.', author: 'Marie D.',
role: 'Responsable Formation', role: 'Responsable Formation',
avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image-2.png', avatar: '/img/testimony_img1.jfif',
rating: 4.5 rating: 4.5
}, },
{ {
id: 3, id: 3,
text: '"MySy Training a révolutionné notre manière de gérer les formations. Un gain de temps précieux !"', text: '"Avec le changement d\'outils on appréhendait un peu, mais ils ont été là pendant toute la phase de demarrage. On pouvait les appeler à tout moment. Ca change :) :) Merci Elyos"',
author: 'Marie D.', author: 'Marie D.',
role: 'Responsable Formation', role: 'Responsable Formation',
avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image-3.png', avatar: '/img/testimony_img1.jfif',
rating: 4.5
},
{
id: 4,
text: '"C\est un outil facilitant, aidant pour le quotidien d\'un organisme de formation. les équipes sont à l\'écoute pour les évolutions."',
author: 'Marie D.',
role: 'Responsable Formation',
avatar: '/img/testimony_img2.jfif',
rating: 5
},
{
id: 4,
text: '"L\'équipe m\'a accompagner dans la prise en main de l\'outil et franchement ça change. J\'avais un contact dédié que je pouvais appeler à tout moment les premiers mois. Vraiment Top !!!"',
author: 'Marie D.',
role: 'Responsable Formation',
avatar: '/img/testimony_img2.jfif',
rating: 5 rating: 5
} }
]}) => { ]}) => {
@ -33,7 +49,7 @@ const TestimonialSection = ({ testimonials = [
stars.push( stars.push(
<img <img
key={i} key={i}
src="https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/star.png" src="/img/testimony_star.png"
alt="star" alt="star"
className="star-icon" className="star-icon"
/> />
@ -75,13 +91,13 @@ const TestimonialSection = ({ testimonials = [
<div className="slider-controls"> <div className="slider-controls">
<button className="arrow-button"> <button className="arrow-button">
<img src="https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/arrow-le.png" alt="Previous" /> <img src="/img/testimony_arrow1.png" alt="Previous" />
</button> </button>
<div className="slider-bullets"> <div className="slider-bullets">
<img src="https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/bullets.png" alt="Slider position" /> <img src="/img/testimony_bullet.png" alt="Slider position" />
</div> </div>
<button className="arrow-button"> <button className="arrow-button">
<img src="https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/arrow-ri.png" alt="Next" /> <img src="/img/testimony_arrow2.png" alt="Next" />
</button> </button>
</div> </div>
</section> </section>

View File

@ -95,7 +95,7 @@ const Header = () => {
const handleAccountCreation = () => { const handleAccountCreation = () => {
setAccountMenu(null); setAccountMenu(null);
history.push("/new_signup/") history.push("/signup/")
}; };
@ -106,7 +106,7 @@ const Header = () => {
const handleAccountConnexion = () => { const handleAccountConnexion = () => {
setAccountMenu(null); setAccountMenu(null);
history.push("/new_signin/") history.push("/signin/")
}; };
@ -266,12 +266,12 @@ const Header = () => {
}} /> }} />
<nav className="menu-list"> <nav className="menu-list">
<a href="/" className="menu-link">À propos</a> <a href="/apropos" className="menu-link">À propos</a>
<a href="/new_fonctionnalite" className="menu-link">Fonctionnalités</a> <a href="/fonctionnalites" className="menu-link">Fonctionnalités</a>
<a href="#" className="menu-link"> <a href="#" className="menu-link">
<nav onClick={(e) => { <nav onClick={(e) => {
history.push("/new_tarif/#debut"); history.push("/tarif/#debut");
// window.open("/new_tarif/#debut", "_self"); // window.open("/tarif/#debut", "_self");
}}>Tarifs </nav> }}>Tarifs </nav>
</a> </a>
<a href="/Recherche-Article-formation" className="menu-link">Blog</a> <a href="/Recherche-Article-formation" className="menu-link">Blog</a>

View File

@ -0,0 +1,35 @@
import React from 'react';
import CommentMarche_Card_Title from './CommentMarche_Card_Title';
import CommentMarche_ListCard from './CommentMarche_ListCard';
import ButtonText from './ButtonText';
const CommentMarche = () => {
return (
<div className='CommentMarche_block1' >
<div style={{ flexGrow: 1 }}>
<CommentMarche_Card_Title />
</div>
<div className='CommentMarche_block2'>
<CommentMarche_ListCard imageUrl="/img/home_page_marge_img1.png" title="Configuration de votre espace" buttonText="Découvrir" description="Nous vous accompagnons dans la création et paramétrage de votre espace" type="1" />
<CommentMarche_ListCard imageUrl="/img/home_page_marge_img_tiret_horiz.png" title="" buttonText="" description="" type="0" />
<CommentMarche_ListCard imageUrl="/img/home_page_marge_img2.png" title="Gestion de vos formations" buttonText="Découvrir" description="Organisez vos formations, suivez les progrès de vos apprenants, et automatisez vos tâches administratives" type="1" />
<CommentMarche_ListCard imageUrl="/img/home_page_marge_img_tiret_horiz.png" title="" buttonText="" description="" type="0" />
<CommentMarche_ListCard imageUrl="/img/home_page_marge_img3.png" title="Développez vos activités" buttonText="Découvrir" description="Exploitez les données et fonctionnalités avancées pour améliorer vos offres" type="1" />
</div>
<div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}
onClick={() => {
window.open(
"/fonctionnalites/",
'_self'
);
}}
>
<ButtonText text="Découvrir nos fonctionnalités" />
</div>
</div>
);
};
export default CommentMarche;

View File

@ -0,0 +1,23 @@
import React from 'react';
import "./new_homepage.css";
const CommentMarche_Card_Title = ({
subtitle = "Comment ça marche ?",
title = "De la complexité à la simplicité"
}) => {
return (
<div className='new_homepage_2025'>
<div className='CommentMarche_Card_Title_block1'>
<div className='CommentMarche_Card_Title_block2'>
{subtitle}
</div>
<div className='CommentMarche_Card_Title_block3'>
{title}
</div>
</div>
</div>
);
};
export default CommentMarche_Card_Title;

View File

@ -0,0 +1,63 @@
import React from 'react';
const CommentMarche_ListCard = ({ imageUrl, title, buttonText, description, type }) => {
const buttonStyle = {
padding: '12px 20px',
borderRadius: '200px',
border: '1px solid #c7c9ce',
backgroundColor: 'transparent',
color: '#4b5162',
fontFamily: 'DM Sans, sans-serif',
fontSize: '16px',
fontWeight: 700,
lineHeight: '122%',
cursor: 'pointer',
transition: 'all 0.2s ease-in-out',
};
const buttonHoverStyle = {
backgroundColor: '#f5f5f5',
};
return (
<div>
{type === "1" && <div className='CommentMarche_ListCard_cardStyle'>
<div className='CommentMarche_ListCard_imageContainerStyle'>
<img src={imageUrl} alt={title} className='CommentMarche_ListCard_imageStyle' />
</div>
<div className='CommentMarche_ListCard_contentStyle'>
<h3 className='CommentMarche_ListCard_titleStyle'>{title}</h3>
<div style={{ display: 'flex', justifyContent: 'center' }} className='CommentMarche_ListCard_description'>
{description}
</div>
</div>
</div>}
{type === "0" && <div className='CommentMarche_ListCard_cardStyle' style={{maxWidth:'200px', alignItems:'center', justifyContent:'center', marginLeft:'auto', marginRight:'auto'}}>
<div className='CommentMarche_ListCard_imageContainerStyle'>
<img src={imageUrl} alt={title} className='CommentMarche_ListCard_imageStyle' />
</div>
<div className='CommentMarche_ListCard_contentStyle'>
<h3 className='CommentMarche_ListCard_titleStyle'>{title}</h3>
<div style={{ display: 'flex', justifyContent: 'center' }} className='CommentMarche_ListCard_description'>
{description}
</div>
</div>
</div>}
</div>
);
};
CommentMarche_ListCard.defaultProps = {
imageUrl: 'https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/france-1.png',
title: 'Editeur Français',
description: 'Découvrir',
buttonText: 'Découvrir',
type: "1"
};
export default CommentMarche_ListCard;

View File

@ -3,24 +3,28 @@ import "./new_homepage.css";
const Features = () => { const Features = () => {
const values = [ const values = [
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons.png", icon: "/img/home_page_marge_img_gestion.png",
title: "Innovation", title: "Gestion",
description: "Nous anticipons vos besoins pour vous offrir des solutions adaptées." description: "Planifiez, suivez et évaluez vos sessions de manière intuitive.",
border_color : "1px solid #ECAE49",
}, },
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-2.png", icon: "/img/home_page_marge_img_suivi.png",
title: "Proximité", title: "Suivi",
description: "Un accompagnement humain et personnalisé pour chaque client." description: "Accédez à des rapports détaillés sur les performances et progrès",
border_color : "1px solid #3E6EE3",
}, },
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-3.png", icon: "/img/home_page_marge_img_automatisation.png",
title: "Excellence", title: "Automatisation",
description: "Des solutions fiables qui font leurs preuves au quotidien." description: "Réduisez le temps consacré aux tâches répétitives",
border_color : "1px solid #0AA690",
}, },
{ {
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-4.png", icon: "/img/home_page_marge_img_personalisation.png",
title: "Transparence", title: "Personnalisation",
description: "Nous construisons des relations basées sur la confiance." description: "Adaptez les contenus et certifications aux besoins spécifiques",
border_color : "1px solid #1A1C22",
} }
]; ];
@ -29,13 +33,13 @@ const Features = () => {
<div className="Features_container"> <div className="Features_container">
<div className="Features_titleContainer"> <div className="Features_titleContainer">
<span className="Features_subtitle">NOS VALEURS</span> <span className="Features_subtitle">FONCTIONNALITÉS</span>
<h2 className="Features_title">Des valeurs qui nous guident.</h2> <h2 className="Features_title">Des outils puissants pour une gestion efficace</h2>
</div> </div>
<div className="Features_cardContainer"> <div className="Features_cardContainer">
{values.map((value, index) => ( {values.map((value, index) => (
<div key={index} className="Features_card"> <div key={index} className="Features_card" style={{border:`${value.border_color}`}}>
<div className="Features_iconWrapper"> <div className="Features_iconWrapper">
<img src={value.icon} alt="" className="Features_icon" /> <img src={value.icon} alt="" className="Features_icon" />
</div> </div>
@ -47,8 +51,15 @@ const Features = () => {
))} ))}
</div> </div>
<button className="Features_button"> <button className="Features_button"
Découvrir notre solution onClick={() => {
window.open(
"/fonctionnalites/",
'_self'
);
}}
>
Découvrir nos fonctionnalités
</button> </button>
</div> </div>
</div> </div>

View File

@ -36,9 +36,9 @@ const FrenchSolution = ({ width = 162, height = 120 }) => {
return ( return (
<div style={containerStyle}> <div style={containerStyle}>
<div style={solutionsStyle}>Solutions</div> <div className="FrenchSolution_block_containerStyle">Solutions</div>
<div style={percentageStyle}>100%</div> <div className="FrenchSolution_block_percentageStyle">100%</div>
<div style={frenchStyle}>française 🇫🇷</div> <div className="FrenchSolution_block_frenchStyle">française 🇫🇷</div>
</div> </div>
); );
}; };

View File

@ -70,7 +70,7 @@ const ListCard = ({ imageUrl, title, buttonText }) => {
<div className='ListCard_contentStyle'> <div className='ListCard_contentStyle'>
<h3 className='ListCard_titleStyle'>{title}</h3> <h3 className='ListCard_titleStyle'>{title}</h3>
<div style={{ display: 'flex', justifyContent: 'center' }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
<button className='ListCard_buttonStyle' {/*<button className='ListCard_buttonStyle'
onMouseEnter={(e) => { onMouseEnter={(e) => {
Object.assign(e.target.style, buttonHoverStyle); Object.assign(e.target.style, buttonHoverStyle);
}} }}
@ -79,7 +79,7 @@ const ListCard = ({ imageUrl, title, buttonText }) => {
}} }}
> >
{buttonText} {buttonText}
</button> </button>*/}
</div> </div>
</div> </div>
</div> </div>

View File

@ -80,18 +80,7 @@ const LogoCloud = () => {
</div> </div>
{/*<div className="LogoCloud_block2" >
<img
src="https://dashboard.codeparrot.ai/api/image/Z6xwUmNxokPE5KT7/logos.png"
alt="Partner Logos"
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
filter: 'grayscale(0.6)',
}}
/>
</div>*/}
</div> </div>
</div> </div>

View File

@ -10,12 +10,19 @@ const WhyUsLayout = () => {
<Card_Title /> <Card_Title />
</div> </div>
<div className='WhyUsLayout_block2'> <div className='WhyUsLayout_block2'>
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/france-1.png" title="Editeur Français" buttonText="Découvrir" /> <ListCard imageUrl="/img/editeur_fr_drapeau.png" title="Editeur Français" buttonText="Découvrir" />
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/qualiopi.png" title="Accompagnement à la certification" buttonText="Découvrir" /> <ListCard imageUrl="/img/qualiopi.png" title="Accompagnement à la certification" buttonText="Découvrir" />
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/solution.png" title="Solution complète pour gérer votre OF" buttonText="Découvrir" /> <ListCard imageUrl="/img/solution_complete.png" title="Solution complète pour gérer votre OF" buttonText="Découvrir" />
<ListCard imageUrl="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/euro-1.png" title="Solution la moins chère du marché" buttonText="Découvrir" /> <ListCard imageUrl="/img/sol_moins_chere.png" title="Solution la moins chère du marché" buttonText="Découvrir" />
</div> </div>
<div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}> <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}
onClick={() => {
window.open(
"/fonctionnalites/",
'_self'
);
}}
>
<ButtonText text="Découvrir nos fonctionnalités" /> <ButtonText text="Découvrir nos fonctionnalités" />
</div> </div>
</div> </div>

View File

@ -0,0 +1,87 @@
import React from 'react';
const ButtonSection = ({ style }) => {
return (
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '20px',
width: '100%',
maxWidth: '287px',
...style
}}>
<button
style={{
width: '100%',
height: '48px',
padding: '12px 20px',
borderRadius: '200px',
border: '1px solid #c7c9ce',
background: 'transparent',
cursor: 'pointer',
transition: 'all 0.2s ease-in-out',
textAlign: 'center'
}}
onMouseOver={(e) => {
e.target.style.background = '#f5f5f5';
}}
onMouseOut={(e) => {
e.target.style.background = 'transparent';
}}
>
<div style={{
padding: '0 8px'
}}>
<span style={{
fontFamily: 'DM Sans',
fontSize: '16px',
fontWeight: 700,
lineHeight: '122%',
color: '#4b5162'
}}>
Découvrir nos fonctionnalités
</span>
</div>
</button>
<a
href="#"
style={{
display: 'inline-block',
padding: '0 0 6px 0',
border: 'none',
borderBottom: '1px solid #4b5162',
color: '#4b5162',
textDecoration: 'none',
cursor: 'pointer',
alignSelf: 'center',
transition: 'all 0.2s ease-in-out'
}}
onMouseOver={(e) => {
e.target.style.color = '#2d3142';
e.target.style.borderBottom = '1px solid #2d3142';
}}
onMouseOut={(e) => {
e.target.style.color = '#4b5162';
e.target.style.borderBottom = '1px solid #4b5162';
}}
>
<span style={{
fontFamily: 'DM Sans',
fontSize: '14px',
fontWeight: 700,
lineHeight: '126%'
}}>
Créer un compte
</span>
</a>
</div>
);
};
ButtonSection.defaultProps = {
style: {}
};
export default ButtonSection;

View File

@ -0,0 +1,287 @@
import React from 'react';
const IllustrationSection = ({ style = {} }) => {
return (
<div style={{ ...style, padding: '20px', boxSizing: 'border-box' }}>
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
width: '100%',
maxWidth: '1136px',
minHeight: '338px',
margin: '0 auto',
flexWrap: 'wrap'
}}>
{/* First illustration */}
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '35px',
width: '256px',
boxSizing: 'border-box',
margin: '10px'
}}>
<div style={{
width: '188px',
height: '157px',
marginLeft: '34px'
}}>
<img
src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/illustra.png"
alt="Configuration"
style={{ width: '100%', height: '100%' }}
/>
</div>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '12px',
width: '100%'
}}>
<h3 style={{
fontFamily: 'DM Sans',
fontSize: '20px',
fontWeight: 700,
lineHeight: '130%',
color: '#16274f',
textAlign: 'center',
margin: 0,
padding: '0 8px'
}}>
Configuration<br />de votre espace
</h3>
<p style={{
fontFamily: 'Inter',
fontSize: '14px',
fontWeight: 400,
lineHeight: '160%',
color: '#4b5162',
opacity: 0.8,
textAlign: 'center',
margin: 0
}}>
Nous vous accompagnons dans la création et paramétrage de votre espace.
</p>
</div>
</div>
{/* Divider 1 */}
<div style={{
width: '150px',
height: '20px',
borderTop: '2px solid #3e6ee3',
margin: '105px 0'
}} />
{/* Second illustration */}
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '29px',
width: '256px',
boxSizing: 'border-box',
margin: '10px'
}}>
<div style={{
width: '183px',
height: '169px',
marginLeft: '36.5px',
position: 'relative'
}}>
<div style={{
width: '170px',
height: '128px',
backgroundColor: '#ffffff',
borderRadius: '6px',
padding: '20px'
}}>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '10px'
}}>
<div style={{
fontSize: '18px',
fontFamily: 'Chivo',
fontWeight: 700,
color: '#060c3c',
lineHeight: '120%'
}}>
1200+
</div>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '8px'
}}>
<div style={{
width: '65px',
height: '6px',
backgroundColor: '#b4b6c4',
borderRadius: '6px'
}} />
<div style={{
width: '65px',
height: '6px',
backgroundColor: '#b4b6c4',
borderRadius: '6px'
}} />
<div style={{
width: '130px',
height: '20px',
backgroundColor: '#0aa690',
borderRadius: '6px'
}} />
</div>
</div>
</div>
</div>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '12px',
width: '100%'
}}>
<h3 style={{
fontFamily: 'DM Sans',
fontSize: '20px',
fontWeight: 700,
lineHeight: '130%',
color: '#16274f',
textAlign: 'center',
margin: 0,
padding: '0 8px'
}}>
Gestion<br />de vos formations
</h3>
<p style={{
fontFamily: 'Inter',
fontSize: '14px',
fontWeight: 400,
lineHeight: '160%',
color: '#4b5162',
opacity: 0.8,
textAlign: 'center',
margin: 0
}}>
Organisez vos formations, suivez les progrès de vos apprenants, et automatisez vos tâches administratives.
</p>
</div>
</div>
{/* Divider 2 */}
<div style={{
width: '150px',
height: '20px',
borderTop: '2px solid #3e6ee3',
margin: '108px 0'
}} />
{/* Third illustration */}
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '35px',
width: '256px',
boxSizing: 'border-box',
margin: '10px'
}}>
<div style={{
width: '192px',
height: '156px',
marginLeft: '32px',
position: 'relative'
}}>
<img
src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/group-33.png"
alt="Analytics"
style={{
width: '170px',
height: '128px',
position: 'absolute',
top: '28px',
left: '22px'
}}
/>
<img
src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/group-91.png"
alt="Chart"
style={{
width: '72px',
height: '58px',
position: 'absolute',
top: 0,
left: 0
}}
/>
<div style={{
position: 'absolute',
top: '34px',
right: '8px',
width: '70px',
height: '38px',
backgroundColor: '#0aa690',
borderRadius: '4px',
padding: '6px'
}}>
<div style={{
color: '#ffffff',
fontSize: '14px',
fontFamily: 'Chivo',
lineHeight: '110%'
}}>
40%
</div>
<img
src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/group-87.png"
alt="Icon"
style={{
width: '14px',
height: '14px',
position: 'absolute',
top: '9px',
right: '8px'
}}
/>
</div>
</div>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '12px',
width: '100%'
}}>
<h3 style={{
fontFamily: 'DM Sans',
fontSize: '20px',
fontWeight: 700,
lineHeight: '130%',
color: '#16274f',
textAlign: 'center',
margin: 0,
padding: '0 66px'
}}>
Développez<br />vos activités
</h3>
<p style={{
fontFamily: 'Inter',
fontSize: '14px',
fontWeight: 400,
lineHeight: '160%',
color: '#4b5162',
opacity: 0.8,
textAlign: 'center',
margin: 0
}}>
Exploitez les données et fonctionnalités avancées pour améliorer vos offres.
</p>
</div>
</div>
</div>
</div>
);
};
export default IllustrationSection;

View File

@ -0,0 +1,27 @@
import React from 'react';
import TitleSection from './TitleSection';
import IllustrationSection from './IllustrationSection';
import ButtonSection from './ButtonSection';
const LayoutComponent = () => {
return (
<div style={{
width: '100%',
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f9f9fd',
paddingTop: '80px',
paddingBottom: '80px'
}}>
<TitleSection style={{ flexGrow: 1, width: '100%', maxWidth: '1440px' }} />
<IllustrationSection style={{ flexGrow: 1, width: '100%', maxWidth: '1136px' }} />
<ButtonSection style={{ flexGrow: 1, width: '100%', maxWidth: '287px' }} />
</div>
);
};
export default LayoutComponent;

View File

@ -0,0 +1,50 @@
import React from 'react';
const TitleSection = ({ style }) => {
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '4px',
padding: '20px',
width: '100%',
maxWidth: '1440px',
boxSizing: 'border-box',
...style
}}>
<span style={{
fontFamily: 'DM Sans',
fontSize: '16px',
fontWeight: 700,
lineHeight: '16px',
textAlign: 'center',
color: '#3258b6',
textTransform: 'uppercase',
width: '100%'
}}>
Comment ça marche ?
</span>
<h1 style={{
fontFamily: 'DM Sans',
fontSize: '40px',
fontWeight: 700,
lineHeight: '120%',
textAlign: 'center',
color: '#16274f',
margin: 0,
width: '100%'
}}>
De la complexité à la simplicité.
</h1>
</div>
);
};
TitleSection.defaultProps = {
style: {}
};
export default TitleSection;

View File

@ -3,8 +3,6 @@ import SolutionDescription from './SolutionDescription';
import "./aboutussection.css"; import "./aboutussection.css";
import Stat_Img from "./../img/stat_img.png"
const AboutUsSection = () => { const AboutUsSection = () => {
return ( return (
<div className='aboutussection'> <div className='aboutussection'>
@ -15,7 +13,7 @@ const AboutUsSection = () => {
<div className='AboutUsSection_block3'> <div className='AboutUsSection_block3'>
<div> <div>
<img src={Stat_Img} alt="Background" className='img_section' /> <img src={"/img/home_page_marge_img_aboutus.png"} alt="Background" className='img_section' />
</div> </div>
</div> </div>

View File

@ -2,10 +2,11 @@ import React from 'react';
import "./aboutussection.css"; import "./aboutussection.css";
const SolutionDescription = ({ const SolutionDescription = ({
title = "Votre outil tout-en-un pour la gestion de la formation", title = "Une expertise dédiée à votre réussite",
subtitle = "Notre solution", subtitle = "À PROPOS DE NOUS",
description = "Découvrez nos solutions logicielles adaptées à la gestion administrative, à la communication et au suivi des performances de votre établissement de formation.", description_1 = "Chez MySy Training, nous sommes passionnés par l'éducation et la technologie. Notre mission est de fournir des solutions innovantes pour faciliter la gestion des formations et améliorer l'expérience d'apprentissage.",
buttonText = "Découvrir notre solution" description_2 = "Avec une équipe d'experts dévoués, nous accompagnons les établissements éducatifs dans leur transformation digitale.",
buttonText = "En savoir plus"
}) => { }) => {
return ( return (
<div className='aboutussection' > <div className='aboutussection' >
@ -21,7 +22,10 @@ const SolutionDescription = ({
</h1> </h1>
</div> </div>
<p className='SolutionDescription_block3_p'> <p className='SolutionDescription_block3_p'>
{description} {description_1}
</p>
<p className='SolutionDescription_block3_p'>
{description_2}
</p> </p>
</div> </div>
<button <button
@ -35,7 +39,12 @@ const SolutionDescription = ({
> >
<span className='SolutionDescription_block3_bton_text'> <span className='SolutionDescription_block3_bton_text' onClick={() => {
window.open(
"/fonctionnalites/",
'_self'
);
}}>
{buttonText} {buttonText}
</span> </span>
</button> </button>

View File

@ -69,6 +69,10 @@
cursor: pointer; cursor: pointer;
width: fit-content; width: fit-content;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
} }
.SolutionDescription_block3_bton_text { .SolutionDescription_block3_bton_text {

View File

@ -1,25 +0,0 @@
.home_page_automatic_files {
@media only screen and (max-width: 600px) {}
@media only screen and (min-width: 601px) and (max-width: 991px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 1200px) {
/* Background_hero */
.background_hero {
position: absolute;
width: 100%;
height: 900px;
left: calc(50% - 1440px/2);
top: 0px;
background: #C4C8EE;
opacity: 0.1;
}
}
}

View File

@ -3,7 +3,7 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.fonctionnalite_Background { .fonctionnalite_Background {
width: 100%; width: 100%;
height: 650px; height: 900px;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -26,7 +26,7 @@
gap: 30px; gap: 30px;
height: 280px; height: 600px;
/* left: calc(50% - 1081px/2 + 0.5px);*/ /* left: calc(50% - 1081px/2 + 0.5px);*/
top: 176px; top: 176px;
width: 100%; width: 100%;
@ -46,7 +46,7 @@
gap: 20px; gap: 20px;
width: 100%; width: 100%;
min-height: 420px; min-height: 500px;
/* Inside auto layout */ /* Inside auto layout */
@ -443,7 +443,7 @@
gap: 50px; gap: 50px;
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
mix-blend-mode: luminosity;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -453,7 +453,7 @@
width: 100%; width: 100%;
height: 60px; height: 60px;
flex: none; flex: none;
flex-grow: 0; flex-grow: 0;
order: 0; order: 0;
flex-grow: 0; flex-grow: 0;
@ -759,6 +759,175 @@
} }
.CommentMarche_block1 {
width: 100%;
display: flex;
flex-direction: column;
padding: 50px;
background: #F9F9FD;
padding-left: 10px;
padding-right: 10px;
}
.CommentMarche_block2 {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0px;
justify-content: center;
}
.CommentMarche_Card_Title_block1 {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
min-width: 280px;
align-items: center;
padding: 20px 0;
}
.CommentMarche_Card_Title_block2 {
font-family: DM Sans;
font-size: 16px;
font-weight: 700;
line-height: 16px;
text-align: center;
color: #3e6ee3;
text-transform: uppercase;
}
.CommentMarche_Card_Title_block3 {
font-family: DM Sans;
font-size: 40px;
font-weight: 700;
line-height: 48px;
text-align: center;
color: #16274f;
}
.CommentMarche_ListCard_cardStyle {
width: 100%;
max-width: 350px;
display: flex;
flex-direction: column;
padding: 40px 16px;
gap: 24px;
background: #ecf1fc1a;
border-radius: 12px;
border: none;
box-sizing: border-box;
}
.CommentMarche_ListCard_imageContainerStyle {
display: flex;
justify-content: center;
align-items: center;
}
.CommentMarche_ListCard_imageStyle {
width: 100%;
object-fit: contain;
}
.CommentMarche_ListCard_contentStyle {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.CommentMarche_ListCard_titleStyle {
font-family: DM Sans, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: #16274f;
text-align: center;
}
.CommentMarche_ListCard_buttonStyle {
padding: 12px 20px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
color: #4b5162;
font-family: DM Sans, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 122%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.CommentMarche_ListCard_buttonHoverStyle {
background: #f5f5f5;
}
.CommentMarche_ListCard_description {
color: #4B5162;
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
opacity: 0.8;
text-align: center;
margin: 0;
}
.home_page_img_saas {
width: 100%;
}
.FrenchSolution_block {
position: absolute;
top: 26rem;
}
.FrenchSolution_block_containerStyle {
width: 162px;
background: #FFF;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: DM Sans, sans-serif;
color: #16274f;
}
.FrenchSolution_block_solutionsStyle {
font-size: 12px;
font-weight: 700;
margin-bottom: 4px;
}
.FrenchSolution_block_percentageStyle {
font-size: 30px;
font-weight: 700;
line-height: 120%;
margin: 0px;
}
.FrenchSolution_block_frenchStyle {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
line-height: 120%;
margin: 0px;
}
} }
@ -787,10 +956,10 @@
gap: 30px; gap: 30px;
height: 280px; height: 320px;
/* left: calc(50% - 1081px/2 + 0.5px);*/ /* left: calc(50% - 1081px/2 + 0.5px);*/
top: 176px; top: 176px;
width: 90%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 3rem; margin-bottom: 3rem;
@ -806,7 +975,7 @@
padding: 0px; padding: 0px;
gap: 20px; gap: 20px;
width: 1081px;
min-height: 202px; min-height: 202px;
@ -815,7 +984,7 @@
order: 0; order: 0;
align-self: stretch; align-self: stretch;
flex-grow: 0; flex-grow: 0;
width: 90%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -824,7 +993,7 @@
.title_and_cat_title_text1 { .title_and_cat_title_text1 {
/* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
width: 90%; width: 100%;
min-height: 134px; min-height: 134px;
font-family: 'DM Sans'; font-family: 'DM Sans';
@ -869,7 +1038,7 @@
flex: none; flex: none;
order: 1; order: 1;
flex-grow: 0; flex-grow: 0;
width: 80%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -1153,7 +1322,7 @@
.LogoCloud_block1 { .LogoCloud_block1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 50px; padding: 20px 20px;
gap: 40px; gap: 40px;
background: #FFFFFF; background: #FFFFFF;
width: 100%; width: 100%;
@ -1186,7 +1355,7 @@
order: 1; order: 1;
flex-grow: 0; flex-grow: 0;
overflow: hidden; overflow: hidden;
width: 90%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -1203,8 +1372,9 @@
height: 72px; height: 72px;
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
width: 100%;
/* mix-blend-mode: luminosity;*/ /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {
@ -1469,7 +1639,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
width: 100%; width: 140px;
} }
.Features_cardTitle { .Features_cardTitle {
@ -1507,12 +1677,182 @@
} }
.block_logo_client { .block_logo_client {
width: 90%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.CommentMarche_block1 {
width: 100%;
display: flex;
flex-direction: column;
padding: 50px;
gap: 48px;
background: #F9F9FD;
}
.CommentMarche_block2 {
flex-grow: 1;
display: flex;
flex-direction: row;
gap: 0px;
justify-content: center;
}
.CommentMarche_Card_Title_block1 {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
min-width: 280px;
align-items: center;
padding: 20px 0;
}
.CommentMarche_Card_Title_block2 {
font-family: DM Sans;
font-size: 16px;
font-weight: 700;
line-height: 16px;
text-align: center;
color: #3e6ee3;
text-transform: uppercase;
}
.CommentMarche_Card_Title_block3 {
font-family: DM Sans;
font-size: 40px;
font-weight: 700;
line-height: 48px;
text-align: center;
color: #16274f;
}
.CommentMarche_ListCard_cardStyle {
width: 100%;
max-width: 350px;
min-height: 304px;
display: flex;
flex-direction: column;
padding: 40px 16px;
gap: 24px;
background: #ecf1fc1a;
border-radius: 12px;
border: none;
box-sizing: border-box;
}
.CommentMarche_ListCard_imageContainerStyle {
display: flex;
justify-content: center;
align-items: center;
}
.CommentMarche_ListCard_imageStyle {
width: 100%;
object-fit: contain;
}
.CommentMarche_ListCard_contentStyle {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.CommentMarche_ListCard_titleStyle {
font-family: DM Sans, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: #16274f;
text-align: center;
}
.CommentMarche_ListCard_buttonStyle {
padding: 12px 20px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
color: #4b5162;
font-family: DM Sans, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 122%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.CommentMarche_ListCard_buttonHoverStyle {
background: #f5f5f5;
}
.CommentMarche_ListCard_description {
color: #4B5162;
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
opacity: 0.8;
text-align: center;
margin: 0;
}
.home_page_img_saas {
width: 100%;
}
.FrenchSolution_block {
position: absolute;
right: 5px;
top: 12rem;
display: none;
}
.FrenchSolution_block_containerStyle {
width: 162px;
background: #FFF;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: DM Sans, sans-serif;
color: #16274f;
}
.FrenchSolution_block_solutionsStyle {
font-size: 12px;
font-weight: 700;
margin-bottom: 4px;
}
.FrenchSolution_block_percentageStyle {
font-size: 30px;
font-weight: 700;
line-height: 120%;
margin: 0px;
}
.FrenchSolution_block_frenchStyle {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
line-height: 120%;
margin: 0px;
}
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
@ -1540,7 +1880,7 @@
gap: 30px; gap: 30px;
height: 280px; height: 300px;
/* left: calc(50% - 1081px/2 + 0.5px);*/ /* left: calc(50% - 1081px/2 + 0.5px);*/
top: 176px; top: 176px;
width: 90%; width: 90%;
@ -1583,7 +1923,7 @@
font-family: 'DM Sans'; font-family: 'DM Sans';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 56px; font-size: 50px;
line-height: 120%; line-height: 120%;
/* or 67px */ /* or 67px */
text-align: center; text-align: center;
@ -1817,9 +2157,9 @@
} }
.ListCard_imageStyle { .ListCard_imageStyle {
width: 88px; width: 100%;
height: 88px;
object-fit: contain; object-fit: contain;
max-height: 100px;
} }
.ListCard_contentStyle { .ListCard_contentStyle {
@ -1909,7 +2249,7 @@
.LogoCloud_block1 { .LogoCloud_block1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 50px 112px; padding: 50px 20px;
gap: 40px; gap: 40px;
background: #FFFFFF; background: #FFFFFF;
width: 100%; width: 100%;
@ -1941,7 +2281,7 @@
order: 1; order: 1;
flex-grow: 0; flex-grow: 0;
overflow: hidden; overflow: hidden;
width: 80%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -1953,13 +2293,13 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0px; padding: 0px;
gap: 56px; gap: 30px;
width: 1206px; width: 100%;
height: 72px; height: 72px;
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
/* mix-blend-mode: luminosity;*/ /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {
@ -2146,7 +2486,7 @@
} }
.Features_container { .Features_container {
padding: 100px 80px; padding: 80px 80px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -2258,14 +2598,182 @@
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.block_logo_client { .block_logo_client {
width: 90%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.CommentMarche_block1 {
width: 100%;
display: flex;
flex-direction: column;
padding: 50px;
gap: 48px;
background: #F9F9FD;
}
.CommentMarche_block2 {
flex-grow: 1;
display: flex;
flex-direction: row;
gap: 0px;
justify-content: center;
}
.CommentMarche_Card_Title_block1 {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
min-width: 280px;
align-items: center;
padding: 20px 0;
}
.CommentMarche_Card_Title_block2 {
font-family: DM Sans;
font-size: 16px;
font-weight: 700;
line-height: 16px;
text-align: center;
color: #3e6ee3;
text-transform: uppercase;
}
.CommentMarche_Card_Title_block3 {
font-family: DM Sans;
font-size: 40px;
font-weight: 700;
line-height: 48px;
text-align: center;
color: #16274f;
}
.CommentMarche_ListCard_cardStyle {
width: 100%;
max-width: 350px;
min-height: 304px;
display: flex;
flex-direction: column;
padding: 40px 16px;
gap: 24px;
background: #ecf1fc1a;
border-radius: 12px;
border: none;
box-sizing: border-box;
}
.CommentMarche_ListCard_imageContainerStyle {
display: flex;
justify-content: center;
align-items: center;
}
.CommentMarche_ListCard_imageStyle {
width: 100%;
object-fit: contain;
}
.CommentMarche_ListCard_contentStyle {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.CommentMarche_ListCard_titleStyle {
font-family: DM Sans, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: #16274f;
text-align: center;
}
.CommentMarche_ListCard_buttonStyle {
padding: 12px 20px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
color: #4b5162;
font-family: DM Sans, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 122%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.CommentMarche_ListCard_buttonHoverStyle {
background: #f5f5f5;
}
.CommentMarche_ListCard_description {
color: #4B5162;
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
opacity: 0.8;
text-align: center;
margin: 0;
}
.home_page_img_saas {
width: 100%;
}
.FrenchSolution_block {
position: absolute;
right: 5px;
top: 10rem;
}
.FrenchSolution_block_containerStyle {
width: 162px;
background: #FFF;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: DM Sans, sans-serif;
color: #16274f;
}
.FrenchSolution_block_solutionsStyle {
font-size: 12px;
font-weight: 700;
margin-bottom: 4px;
}
.FrenchSolution_block_percentageStyle {
font-size: 30px;
font-weight: 700;
line-height: 120%;
margin: 0px;
}
.FrenchSolution_block_frenchStyle {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
line-height: 120%;
margin: 0px;
}
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
@ -2570,9 +3078,9 @@
} }
.ListCard_imageStyle { .ListCard_imageStyle {
width: 88px; width: 100%;
height: 88px;
object-fit: contain; object-fit: contain;
max-height: 100px;
} }
.ListCard_contentStyle { .ListCard_contentStyle {
@ -2710,7 +3218,7 @@
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
/* mix-blend-mode: luminosity;*/ /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {
@ -2897,7 +3405,7 @@
} }
.Features_container { .Features_container {
padding: 100px 80px; padding: 80px 80px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -3010,6 +3518,174 @@
} }
.CommentMarche_block1 {
width: 100%;
display: flex;
flex-direction: column;
padding: 50px;
gap: 48px;
background: #F9F9FD;
}
.CommentMarche_block2 {
flex-grow: 1;
display: flex;
flex-direction: row;
gap: 0px;
justify-content: center;
}
.CommentMarche_Card_Title_block1 {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
min-width: 280px;
align-items: center;
padding: 20px 0;
}
.CommentMarche_Card_Title_block2 {
font-family: DM Sans;
font-size: 16px;
font-weight: 700;
line-height: 16px;
text-align: center;
color: #3e6ee3;
text-transform: uppercase;
}
.CommentMarche_Card_Title_block3 {
font-family: DM Sans;
font-size: 40px;
font-weight: 700;
line-height: 48px;
text-align: center;
color: #16274f;
}
.CommentMarche_ListCard_cardStyle {
width: 100%;
max-width: 350px;
min-height: 304px;
display: flex;
flex-direction: column;
padding: 40px 16px;
gap: 24px;
background: #ecf1fc1a;
border-radius: 12px;
border: none;
box-sizing: border-box;
}
.CommentMarche_ListCard_imageContainerStyle {
display: flex;
justify-content: center;
align-items: center;
}
.CommentMarche_ListCard_imageStyle {
width: 100%;
object-fit: contain;
}
.CommentMarche_ListCard_contentStyle {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.CommentMarche_ListCard_titleStyle {
font-family: DM Sans, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: #16274f;
text-align: center;
}
.CommentMarche_ListCard_buttonStyle {
padding: 12px 20px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
color: #4b5162;
font-family: DM Sans, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 122%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.CommentMarche_ListCard_buttonHoverStyle {
background: #f5f5f5;
}
.CommentMarche_ListCard_description {
color: #4B5162;
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
opacity: 0.8;
text-align: center;
margin: 0;
}
.FrenchSolution_block {
position: absolute;
right: 10%;
top: 12rem;
}
.FrenchSolution_block_containerStyle {
width: 162px;
background: #FFF;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: DM Sans, sans-serif;
color: #16274f;
}
.FrenchSolution_block_solutionsStyle {
font-size: 12px;
font-weight: 700;
margin-bottom: 4px;
}
.FrenchSolution_block_percentageStyle {
font-size: 30px;
font-weight: 700;
line-height: 120%;
margin: 0px;
}
.FrenchSolution_block_frenchStyle {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
line-height: 120%;
margin: 0px;
}
} }

View File

@ -8,13 +8,20 @@ import VisionSection from './VisionSection.js';
import KeyMetrics from './KeyMetrics.js'; import KeyMetrics from './KeyMetrics.js';
import Features from './Features.js'; import Features from './Features.js';
import AboutUsSection from './block_stat/AboutUsSection.js'; import AboutUsSection from './block_stat/AboutUsSection.js';
import FrenchSolution from './FrenchSolution.js'; import FrenchSolution from './FrenchSolution.js';
import CommentMarche from './CommentMarche.js';
//import home_page_img_saas from "/img/home_page_img_saas.png"; import New_C_Tatif_Section from "../tarif_section_automatic_files/PricingSection"
const New_C_A_Propos_2025 = (props) => { const New_C_A_Propos_2025 = (props) => {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
return ( return (
<div className="new_homepage_2025"> <div className="new_homepage_2025">
@ -31,7 +38,7 @@ const New_C_A_Propos_2025 = (props) => {
</div> </div>
</div> </div>
<div style={{ position: 'absolute', right: '15%' }}> <div className="FrenchSolution_block">
<FrenchSolution /> <FrenchSolution />
</div> </div>
@ -53,7 +60,7 @@ const New_C_A_Propos_2025 = (props) => {
<div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => { <div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => {
window.open( window.open(
"/new_contact/", "/contact/",
'_self' '_self'
); );
}}> }}>
@ -62,24 +69,21 @@ const New_C_A_Propos_2025 = (props) => {
</div> </div>
</div> </div>
<div> <div>
<img src='/img/home_page_img_saas.png' /> <img src='/img/home_page_img_saas.png' className="home_page_img_saas" />
</div> </div>
</div> </div>
<LogoCloud /> <LogoCloud />
<WhyUsLayout /> <WhyUsLayout />
<CommentMarche />
<AboutUsSection />
<VisionSection />
<KeyMetrics />
<Features /> <Features />
<New_C_Tatif_Section />
<AboutUsSection />
</div> </div>
) )

View File

@ -939,22 +939,6 @@ const New_C_Marketplace_2025 = () => {
useEffect(() => { useEffect(() => {
/*
console.log(" zzzzzzzzzzzzzzzzzz ");
// Verifier s'il y a un sous domaine
var tab_split_sous_domain = window.location.host.split(".");
if (tab_split_sous_domain.length > 2) {
var new_url = process.env.REACT_APP_FRONT_URL_CANONICAL_BASE + tab_split_sous_domain[0] + "." + process.env.REACT_APP_FRONT_URL_CANONICAL + "moncatalog";
window.open(String(new_url),
'_self'
);
}
*/
var ip = ""; var ip = "";
async function fetchData() { async function fetchData() {
@ -1153,7 +1137,10 @@ const New_C_Marketplace_2025 = () => {
//document.getElementById("_1234").checked = true; //document.getElementById("_1234").checked = true;
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, [initAllfiter, categorie]); }, [initAllfiter, categorie]);
@ -3731,7 +3718,7 @@ const New_C_Marketplace_2025 = () => {
{result && myApiResponse == "True" && fin == 0 && !newresult && {result && myApiResponse == "True" && fin == 0 && !newresult &&
result.slice(0, PageSize).map((formation) => ( result.slice(0, PageSize).map((formation) => (
<div className="block_formation" ref={inputEl} id="inputEl_element"> <div className="block_formation" ref={inputEl} id="inputEl_element">
<New_C_Formation_2025 formation={JSON.parse(formation)} key={JSON.parse(formation).title} coeur={JSON.parse(formation).title} /> <New_C_Formation_2025 formation={JSON.parse(formation)} key={JSON.parse(formation).title} coeur={JSON.parse(formation).title} />
</div> </div>

View File

@ -25,7 +25,7 @@ const AdministrativeManagement = ({ style }) => {
<div className="features-container"> <div className="features-container">
{features.map((feature, index) => ( {features.map((feature, index) => (
<div key={index} className="feature-row"> <div key={index} className="feature-row">
<span className="feature-text">{feature}</span> <span className="feature-text">{feature} </span>
<div className="check-icon"> <div className="check-icon">
<img src={`https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-${index + 1}.png`} alt="check" /> <img src={`https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-${index + 1}.png`} alt="check" />
</div> </div>

View File

@ -6,7 +6,7 @@ const ClientRelationManagement = ({ style }) => {
<div className="crm-container" style={style}> <div className="crm-container" style={style}>
<div className="header"> <div className="header">
<h2>Gestion relation client (CRM)</h2> <h2>Gestion relation client (CRM)</h2>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/arrow-do-2.png" alt="arrow down" className="arrow-icon" /> <img src="/img/market_place_img_arrow1.png" alt="arrow down" className="arrow-icon" />
</div> </div>
<div className="content-row"> <div className="content-row">
@ -25,7 +25,7 @@ const ClientRelationManagement = ({ style }) => {
<div className="price-content"> <div className="price-content">
<div className="check-item"> <div className="check-item">
<div className="check-circle"> <div className="check-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-10.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>
@ -38,7 +38,7 @@ const ClientRelationManagement = ({ style }) => {
<div className="price-content"> <div className="price-content">
<div className="check-item"> <div className="check-item">
<div className="check-circle"> <div className="check-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-11.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>
@ -48,14 +48,14 @@ const ClientRelationManagement = ({ style }) => {
<div className="price-header highlight"> <div className="price-header highlight">
<div className="check-item"> <div className="check-item">
<div className="check-circle"> <div className="check-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-12.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>
<div className="price-content"> <div className="price-content">
<div className="check-item"> <div className="check-item">
<div className="check-circle"> <div className="check-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-12.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -6,63 +6,63 @@ const Marketplace = ({ style }) => {
<div className="marketplace" style={style}> <div className="marketplace" style={style}>
<div className="title-section"> <div className="title-section">
<h2>Marketplace</h2> <h2>Marketplace</h2>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/arrow-do-4.png" alt="arrow down" /> <img src="/img/market_place_img_arrow1.png" alt="arrow down" />
</div> </div>
<div className="content-section"> <div className="content-section">
<div className="text-row"> <div className="text-row">
<p>Mise en ligne de votre formation (Description, Objectif, Programme, etc)</p> <p>Mise en ligne de votre formation (Description, Objectif, Programme, etc)</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-17.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Mise en forme des textes selon votre souhait</p> <p>Mise en forme des textes selon votre souhait</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-17.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Définition du pays et la région de publication</p> <p>Définition du pays et la région de publication</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-17.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Import/Export Excel</p> <p>Import/Export Excel</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-3.png" alt="add" className="add-icon" /> <img src="/img/market_place_img_no_check.png" alt="add" className="add-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Gestion des prix : Remise client / Tout public par période.</p> <p>Gestion des prix : Remise client / Tout public par période.</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-3.png" alt="add" className="add-icon" /> <img src="/img/market_place_img_no_check.png" alt="add" className="add-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Ajout de vos propres images pour communiquer sur votre structure et votre marque.</p> <p>Ajout de vos propres images pour communiquer sur votre structure et votre marque.</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-3.png" alt="add" className="add-icon" /> <img src="/img/market_place_img_no_check.png" alt="add" className="add-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Affichage de votre logo à côté de la formation</p> <p>Affichage de votre logo à côté de la formation</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-3.png" alt="add" className="add-icon" /> <img src="/img/market_place_img_no_check.png" alt="add" className="add-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Affichage de votre bannière en grand sur la page détaillée.</p> <p>Affichage de votre bannière en grand sur la page détaillée.</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-3.png" alt="add" className="add-icon" /> <img src="/img/market_place_img_no_check.png" alt="add" className="add-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Génération automatique de leads</p> <p>Génération automatique de leads</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-17.png" alt="check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Consultation des appels d'offre de formation pour manifestation d'intérêt.</p> <p>Consultation des appels d'offre de formation pour manifestation d'intérêt.</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-3.png" alt="add" className="add-icon" /> <img src="/img/market_place_img_no_check.png" alt="add" className="add-icon" />
</div> </div>
<div className="text-row"> <div className="text-row">
<p>Publication d'un appel d'offre de formation et gestion des réponses.</p> <p>Publication d'un appel d'offre de formation et gestion des réponses.</p>
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-3.png" alt="add" className="add-icon" /> <img src="/img/market_place_img_no_check.png" alt="add" className="add-icon" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,19 +1,14 @@
import React from 'react'; import React from 'react';
import AdministrativeManagement from './AdministrativeManagement'; //import AdministrativeManagement from './AdministrativeManagement';
import ClientRelationManagement from './ClientRelationManagement'; //import ClientRelationManagement from './ClientRelationManagement';
import TrainingHosting from './TrainingHosting'; //import TrainingHosting from './TrainingHosting';
import Marketplace from './Marketplace'; import Marketplace from './Marketplace';
const PricingLayout = () => { const PricingLayout = () => {
return ( return (
<div style={styles.container}> <div >
<div style={styles.section}>
<AdministrativeManagement style={styles.component} />
</div>
<div style={styles.section}>
<TrainingHosting style={styles.component} />
</div>
</div> </div>
); );

View File

@ -31,14 +31,14 @@ const TrainingHosting = ({ style }) => {
<div className="price-content"> <div className="price-content">
<div className="circle-container"> <div className="circle-container">
<div className="gray-circle"> <div className="gray-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add.png" alt="Add" className="icon" /> <img src="/img/market_place_img_no_check.png" alt="Add" className="icon" />
</div> </div>
</div> </div>
</div> </div>
<div className="price-content"> <div className="price-content">
<div className="circle-container"> <div className="circle-container">
<div className="green-circle"> <div className="green-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-13.png" alt="Check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>
@ -51,14 +51,14 @@ const TrainingHosting = ({ style }) => {
<div className="price-content"> <div className="price-content">
<div className="circle-container"> <div className="circle-container">
<div className="gray-circle"> <div className="gray-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/add-2.png" alt="Add" className="icon" /> <img src="/img/market_place_img_no_check.png" alt="Add" className="icon" />
</div> </div>
</div> </div>
</div> </div>
<div className="price-content"> <div className="price-content">
<div className="circle-container"> <div className="circle-container">
<div className="green-circle"> <div className="green-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-14.png" alt="Check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>
@ -67,20 +67,20 @@ const TrainingHosting = ({ style }) => {
<div className="price-column"> <div className="price-column">
<div className="price-header"> <div className="price-header">
<span className="dropdown-container"> <span className="dropdown-container">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/arrow-do-3.png" alt="Dropdown" className="dropdown-icon" /> <img src="/img/market_place_img_arrow1.png" alt="Dropdown" className="dropdown-icon" />
</span> </span>
</div> </div>
<div className="price-content"> <div className="price-content">
<div className="circle-container"> <div className="circle-container">
<div className="green-circle"> <div className="green-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-15.png" alt="Check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>
<div className="price-content"> <div className="price-content">
<div className="circle-container"> <div className="circle-container">
<div className="green-circle"> <div className="green-circle">
<img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/check-16.png" alt="Check" className="check-icon" /> <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,17 +1,15 @@
import React from 'react'; import React from 'react';
import PricingPlanCard from './PricingPlanCard'; import PricingPlanCard from './PricingPlanCard';
import PricingDescription from './PricingDescription'; import PricingDescription from './PricingDescription';
import New_C_Tatif_Detail_Section_Head from "../tarif_detail_automatic_files/PricingLayout";
import check_img_check_17 from "../../img_new_design_2025/check_17.png"; import check_img_check_17 from "../../img_new_design_2025/check_17.png";
import check_ko_fond_gris from "../../img_new_design_2025/check_ko_fond_gris.png"; import check_ko_fond_gris from "../../img_new_design_2025/check_ko_fond_gris.png";
import './detail.css';
import WhyUsLayout from './../a_propos_automatic_files/WhyUsLayout.js';
import { Button, FormGroup, Label, Input } from "reactstrap";
const PricingLayout = () => { const PricingLayout = () => {
return ( return (
<div> <div>
<div className='tarif_head_automatic_files' style={{ width: '90%', marginLeft: '5%' }}> <div className='tarif_head_automatic_files' style={{ width: '90%', marginLeft: '5%' }}>
@ -36,7 +34,6 @@ const PricingLayout = () => {
</div> </div>
</div> </div>
<div className='position_detail_price'> <div className='position_detail_price'>
{/*** Gestion admin */} {/*** Gestion admin */}
@ -413,7 +410,9 @@ const PricingLayout = () => {
<div className='coupure_fin_fonctionnalite'> &nbsp;</div> <div className='coupure_fin_fonctionnalite'> &nbsp;</div>
</div> </div>
</div>
<div className='new_a_propos_2025' >
<WhyUsLayout />
</div> </div>
</div> </div>
); );

View File

@ -0,0 +1,81 @@
.marketplace {
display: flex;
flex-direction: column;
width: 100%;
min-width: 320px;
max-width: 1251px;
border: 1px solid #ecf1fc;
box-sizing: border-box;
}
.title-section {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px 32px;
background-color: #ecf1fc;
height: 80px;
}
.title-section h2 {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 20px;
color: #16274f;
margin: 0;
}
.content-section {
display: flex;
flex-direction: column;
}
.text-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px 32px;
min-height: 80px;
border-bottom: 1px solid #ecf1fc;
}
.text-row p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #171717;
margin: 0;
flex-grow: 1;
}
.check-icon, .add-icon {
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #0aa690;
padding: 4px;
box-sizing: border-box;
margin-top: 10px;
}
.add-icon {
background-color: #b7b7b7;
}
@media (max-width: 768px) {
.marketplace {
padding: 10px;
}
.title-section {
padding: 10px 16px;
}
.text-row {
padding: 10px 16px;
}
}

View File

@ -169,6 +169,7 @@
padding-right: 30px; padding-right: 30px;
padding-left: 30px; padding-left: 30px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 64px;
} }
@ -381,6 +382,7 @@
padding-right: 64px; padding-right: 64px;
padding-left: 64px; padding-left: 64px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 64px;
} }
@ -587,6 +589,7 @@
padding-right: 64px; padding-right: 64px;
padding-left: 64px; padding-left: 64px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 64px;
} }
@ -791,6 +794,7 @@
padding-right: 64px; padding-right: 64px;
padding-left: 64px; padding-left: 64px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 64px;
} }
@ -798,7 +802,7 @@
.entete_pricingsection_H1 { .entete_pricingsection_H1 {
font-family: 'DM Sans'; font-family: 'DM Sans';
font-weight: 700; font-weight: 700;
font-size: 48px; font-size: 40px;
letter-spacing: -0.48px; letter-spacing: -0.48px;
line-height: 52px; line-height: 52px;
text-align: center; text-align: center;

View File

@ -1,21 +1,40 @@
import React from 'react'; import React, { useState, useEffect } from "react";
import PriceCard from './PriceCard'; import PriceCard from './PriceCard';
import { Helmet } from "react-helmet";
const PricingSection = () => { const PricingSection = () => {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
return ( return (
<div className='pricecard'> <div className='pricecard'>
<Helmet>
<title>Tarifs des Produits et Services </title>
<meta name="description" content="Tarifs des Produits et Services.Avec nos solutions de E-Learning, gestion administrative et gestion relation client, nos prix sont les moins chers du marché pour gérer votre organisme de formation. Nous automatisons Qualiopi. Lensemble de nos options : signature électronique, Gestion avis participants, Les émargements sécurisés, les contrats des formateurs, la gestion des financeurs sont inclus dans nos tarifs de base." />
<meta name="robots" content="index,follow" />
<meta name="title" content="Tarifs des Produits et Services " />
<link rel="canonical" href={window.location.href} />
</Helmet>
<div class> <div class>
<div className='entete_pricingsection_1'> <div className='entete_pricingsection_1'>
<h1 className='entete_pricingsection_H1'> <h1 className='entete_pricingsection_H1'>
Optimisez votre gestion avec la solution la moin chère du marché.
Toutes les fonctionnalités <strong> <u> incluses sans frais cachés </u> </strong>.
</h1> </h1>
<p className='entete_pricingsection_H1_sous_text'> <p className='entete_pricingsection_H1_sous_text'>
Rapide, intuitif et conçu pour maximiser votre efficacité et votre temps. Choisissez parmi trois abonnements sans aucun coût supplémentaire caché.<br />
MySy Training vous offre la transparence et la meilleure valeur sur le marché.
</p> </p>
</div> </div>
<div className='block_1'> <div className='block_1'>
<div className='block_2'> <div className='block_2'>

View File

@ -1,15 +1,20 @@
import DisplayDetailArticle from "../components/DisplayDetailArticle"; import DisplayDetailArticle from "../components/DisplayDetailArticle";
import Navigation from "../components/Navigation"; import Navigation from "../components/Navigation";
import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
import New_C_Footer_Without_Testimony_2025_V2 from "../components/footer_automatic_files/Layout_Without_Testimony";
import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
import New_Navigation_2025 from "../components/New_Navigation_2025";
export default function displaydetailclass() { export default function displaydetailclass() {
return ( return (
<div> <div>
<div > <New_Navigation_2025 />
<Navigation /> <New_C_Header_2025_V2 />
</div>
<DisplayDetailArticle /> <DisplayDetailArticle />
<New_C_Footer_Without_Testimony_2025_V2 />
</div> </div>
); );

View File

@ -6,7 +6,6 @@ import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
import New_Navigation_2025 from "../components/New_Navigation_2025"; import New_Navigation_2025 from "../components/New_Navigation_2025";
import New_C_A_Propos_2025 from "../components/a_propos_automatic_files/new_a_propos"; import New_C_A_Propos_2025 from "../components/a_propos_automatic_files/new_a_propos";
const new_p_a_propos_2025 = () => { const new_p_a_propos_2025 = () => {
@ -26,5 +25,4 @@ const new_p_a_propos_2025 = () => {
) )
} }
export default new_p_a_propos_2025; export default new_p_a_propos_2025;

Some files were not shown because too many files have changed in this diff Show More