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_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";
@ -167,37 +167,26 @@ function App() {
<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="/create_account" exact component={CreateAccount} />
<Route path="/user-connexion" exact component={Connexion} />
<Route path="/testurl/:course/:tab" exact component={TestUrl} />
<Route path="/testurl_new/:courseid/:tabid" exact component={TestUrl_New} />
<Route path="/ajout-article" exact component={AddArticleAvis} />
<Route path="/Display-Partner-Catalog-Detail-formation/:classId" exact component={Display_Partner_Catalog_DetailClass_new_v2} />
<Route path="/Display-Partner-Catalog-Detail-formation/:classId/:action" exact component={Display_Partner_Catalog_DetailClass_new_v2} />
<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="/Produits-Services/" exact component={ProduitsService} />*/}
<Route path="/tarifs_produits_services/" exact component={ProduitsService} />
@ -230,22 +219,22 @@ function App() {
<Route path="/intelligence-artificielle-mysy-training/" exact component={MySyIA} />
{/**** New design 2025 */}
<Route path="/new_signin/" exact component={New_Sign_In_2025} />
<Route path="/new_signup/" exact component={New_Sign_Up_2025} />
<Route path="/new_tarif/" exact component={New_Tarif_2025} />
<Route path="/new_contact/" exact component={New_Contact_2025} />
<Route path="/new_display-detail-article/:articleId" exact component={New_Article_Detail_2025} />
<Route path="/signin/" exact component={New_Sign_In_2025} />
<Route path="/signup/" exact component={New_Sign_Up_2025} />
<Route path="/tarif/" exact component={New_Tarif_2025} />
<Route path="/contact/" exact component={New_Contact_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} />
{/* ex : http://localhost:3009/detaile-formation/habilitation-electrique-882*/}
<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="/apropos/" exact component={New_A_Propos_2025} />
<Route path="/" exact component={New_Home_Page_2025} />
<Route path="/new_aporpos/" exact component={New_A_Propos_2025} />
<Route path="/" exact component={New_A_Propos_2025} />
{/* Debut Migration */}
@ -269,6 +258,18 @@ function App() {
<Route path="/PartnerLogin1" exact component={PartnerLogin1} />
<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 */}
@ -276,7 +277,7 @@ function App() {
<Route path="/new_header_footer/" exact component={New_Test_Header_Footer_2025} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>

View File

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

View File

@ -15,7 +15,7 @@ import img_1_old from "../mysy_img/1.jpg";
import gestion_admin_img from "../mysy_img/gestion_admin_img.png";
import e_learning_lms from "../mysy_img/e_learning_lms.png";
import img_2 from "../mysy_img/lms.png";
import img_3_old from "../mysy_img/3.jpg";

View File

@ -41,7 +41,7 @@ const Footer = () => {
<div className='Row_Div'>
<div className='Column_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="/ContactezNous" className='FooterLink_a'>Nous contacter</a>
</div>

View File

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

View File

@ -89,12 +89,12 @@ function New_C_Header_2025() {
<div className="header-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">
<a href="/" className="menu-link">À propos</a>
<a href="/new_fonctionnalite" className="menu-link">Fonctionnalités</a>
<a href="/new_tarif" className="menu-link">Tarifs</a>
<a href="/apropos" className="menu-link">À propos</a>
<a href="/fonctionnalites" className="menu-link">Fonctionnalités</a>
<a href="/tarif" className="menu-link">Tarifs</a>
<a href="/Recherche-Article-formation" className="menu-link">Blog</a>
<div className="separator"></div>
<a href="/marketplace" className="menu-link">Marketplace</a>
@ -108,7 +108,7 @@ function New_C_Header_2025() {
</div>
<div className="separator"></div>
<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>
</div>
</div>

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { useHistory } from "react-router-dom";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { FacebookLoginButton, GoogleLoginButton } from "react-social-login-buttons";
//import { getCookie, setCookie, removeCookie } from 'react-use-cookie';

View File

@ -3,22 +3,22 @@ import './new_a_propos.css'
const Features = () => {
const values = [
{
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons.png",
icon: "/img/feature_innovation.png",
title: "Innovation",
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é",
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",
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",
description: "Nous construisons des relations basées sur la confiance."
}

View File

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

View File

@ -80,18 +80,7 @@ const LogoCloud = () => {
</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>

View File

@ -3,6 +3,8 @@ import Card_Title from './Card_Title';
import ListCard from './ListCard';
import ButtonText from './ButtonText';
import "./new_a_propos.css";
const WhyUsLayout = () => {
return (
<div className='WhyUsLayout_block1' >
@ -10,12 +12,20 @@ const WhyUsLayout = () => {
<Card_Title />
</div>
<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="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/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="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/euro-1.png" title="Solution la moins chère du marché" buttonText="Découvrir" />
<ListCard imageUrl="/img/editeur_fr_drapeau.png" title="Editeur Français" buttonText="Découvrir" />
<ListCard imageUrl="/img/qualiopi.png" title="Accompagnement à la certification" buttonText="Découvrir" />
<ListCard imageUrl="/img/solution_complete.png" title="Solution complète pour gérer votre OF" buttonText="Découvrir" />
<ListCard imageUrl="/img/sol_moins_chere.png" title="Solution la moins chère du marché" buttonText="Découvrir" />
</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" />
</div>
</div>

View File

@ -2,10 +2,10 @@ import React from 'react';
import "./aboutussection.css";
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",
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 (
<div className='aboutussection' >

View File

@ -69,6 +69,10 @@
cursor: pointer;
width: fit-content;
transition: all 0.2s ease-in-out;
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
}
.SolutionDescription_block3_bton_text {
@ -125,7 +129,7 @@
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
.SolutionDescription_block1 {
display: flex;
flex-direction: column;
@ -249,7 +253,7 @@
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.SolutionDescription_block1 {
display: flex;
flex-direction: column;

View File

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

View File

@ -1,4 +1,5 @@
import React, { useRef, useState, useEffect } from "react";
import { Helmet } from "react-helmet";
import moment from "moment";
import "./new_a_propos.css";
@ -7,24 +8,39 @@ import LogoCloud from './LogoCloud.js';
import VisionSection from './VisionSection.js';
import KeyMetrics from './KeyMetrics.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) => {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
return (
<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="title_and_cat">
<div className="title_and_cat_title">
<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 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.
</div>
MySy Training combine innovation et expertise pour transformer la manière dont vous formez et gérez votre établissement. </div>
</div>
<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) => {
window.open(
"/new_contact/",
"/contact/",
'_self'
);
}}>

View File

@ -108,7 +108,7 @@ const ContactInfo = ({ style = {} }) => {
<div>
<div style={labelStyles} >Nos réseaux sociaux :</div>
<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://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 ContactForm from './ContactForm';
import ContactInfo from './ContactInfo';
import Footer from './Footer';
const Contact_Layout = () => {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
return (
<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>
<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>

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 && <li> {props.badge.detail_1} </li>}
{props.badge.detail_1 && <li> {props.badge.detail_2}</li>}
{props.badge.detail_1 && <li> {props.badge.detail_3}</li>}
{props.badge.detail_2 && <li> {props.badge.detail_2}</li>}
{props.badge.detail_3 && <li> {props.badge.detail_3}</li>}
</ul>}
</p>
</div>

View File

@ -5,8 +5,9 @@ const MySy_CRM_Section = () => {
return (
<div className='new_fonctionalites_2025 mysy_crm_section_block1'>
{/* 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 */}
<div className='mysy_crm_section_block_text'>
{/* Title + Description Container */}
@ -37,7 +38,14 @@ const MySy_CRM_Section = () => {
}}
onMouseOut={(e) => {
e.currentTarget.style.background = 'transparent';
}}>
}}
onClick={() => {
window.open(
"/tarif/",
'_self'
);
}}
>
<span className='mysy_crm_section_block_text_tite_desc_bton_span'>
Découvrez nos tarifs
</span>

View File

@ -3,12 +3,16 @@ import React from 'react';
const ContentSection = ({
title = "GESTION ADMNISTRATIVE",
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",
imageSrc = "img/fonctionnalite_img/img_gestion_admin.png"
imageSrc = "/img/fonctionnalite_img/img_gestion_admin.png",
buttonText_link_url = "/tarif/",
}) => {
const styles = {
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>
<h1 className='contentsection_mainheading'>{heading}</h1>
</div>
<p className='contentsection_description'>{description}</p>
<button className='contentsection_button'
<p className='contentsection_description'>{description_1}</p>
<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) => {
e.currentTarget.style.backgroundColor = '#f5f6f7';
}}
onMouseOut={(e) => {
e.currentTarget.style.backgroundColor = 'transparent';
}}
onClick={() => {
window.open(
buttonText_link_url,
'_self'
);
}}
>
<span className='contentsection_buttonText'>{buttonText}</span>
</button>
</div>
<div className='contentsection_contentcontainer_img'>
<img src={imageSrc} alt="Content illustration" className='contentsection_image' />
<div className='contentsection_contentcontainer_img'>
<img src={imageSrc} alt="Content illustration" className='contentsection_image' />
</div>
</div>
);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,8 +1,9 @@
import React, { useRef, useState, useEffect } from "react";
import moment from "moment";
import { Helmet } from "react-helmet";
import "./new_fonctionalites_2025.css";
import FeaturesLayout from './FeaturesLayout.js';
import ContentSection from './ContentSection';
import Badge_Fonctionnalite from './Badge_Fonctionnalite';
@ -26,7 +27,7 @@ const New_C_Fonctionalites_2025 = (props) => {
const gestion_admin_fonctionalite = [
{
'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',
'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',
'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',
'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',
'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',
'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',
'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',
'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',
'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',
'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 = [
{
'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',
'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',
'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',
'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',
'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',
'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',
'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',
'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 = [
{
'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': '',
'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': '',
'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': '',
'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': '',
'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': '',
'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': '',
'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': '',
'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 (
<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="title_and_cat">
@ -222,7 +233,7 @@ const New_C_Fonctionalites_2025 = (props) => {
<div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => {
window.open(
"/new_tarif/",
"/tarif/",
'_self'
);
}}>

View File

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

View File

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

View File

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

View File

@ -4,26 +4,42 @@ import './TestimonialSection.css';
const TestimonialSection = ({ testimonials = [
{
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.',
role: 'Responsable Formation',
avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image.png',
avatar: '/img/testimony_img1.jfif',
rating: 5
},
{
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.',
role: 'Responsable Formation',
avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image-2.png',
avatar: '/img/testimony_img1.jfif',
rating: 4.5
},
{
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.',
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
}
]}) => {
@ -33,7 +49,7 @@ const TestimonialSection = ({ testimonials = [
stars.push(
<img
key={i}
src="https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/star.png"
src="/img/testimony_star.png"
alt="star"
className="star-icon"
/>
@ -75,13 +91,13 @@ const TestimonialSection = ({ testimonials = [
<div className="slider-controls">
<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>
<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>
<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>
</div>
</section>

View File

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

View File

@ -1,6 +1,6 @@
import React from 'react';
import "./new_homepage.css";
const Card_Title = ({
subtitle = "POURQUOI NOUS CHOISIR ?",
title = "Un besoin, une solution personnalisée"

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 values = [
{
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons.png",
title: "Innovation",
description: "Nous anticipons vos besoins pour vous offrir des solutions adaptées."
icon: "/img/home_page_marge_img_gestion.png",
title: "Gestion",
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",
title: "Proximité",
description: "Un accompagnement humain et personnalisé pour chaque client."
icon: "/img/home_page_marge_img_suivi.png",
title: "Suivi",
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",
title: "Excellence",
description: "Des solutions fiables qui font leurs preuves au quotidien."
icon: "/img/home_page_marge_img_automatisation.png",
title: "Automatisation",
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",
title: "Transparence",
description: "Nous construisons des relations basées sur la confiance."
icon: "/img/home_page_marge_img_personalisation.png",
title: "Personnalisation",
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_titleContainer">
<span className="Features_subtitle">NOS VALEURS</span>
<h2 className="Features_title">Des valeurs qui nous guident.</h2>
<span className="Features_subtitle">FONCTIONNALITÉS</span>
<h2 className="Features_title">Des outils puissants pour une gestion efficace</h2>
</div>
<div className="Features_cardContainer">
{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">
<img src={value.icon} alt="" className="Features_icon" />
</div>
@ -47,8 +51,15 @@ const Features = () => {
))}
</div>
<button className="Features_button">
Découvrir notre solution
<button className="Features_button"
onClick={() => {
window.open(
"/fonctionnalites/",
'_self'
);
}}
>
Découvrir nos fonctionnalités
</button>
</div>
</div>

View File

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

View File

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

View File

@ -80,18 +80,7 @@ const LogoCloud = () => {
</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>

View File

@ -10,12 +10,19 @@ const WhyUsLayout = () => {
<Card_Title />
</div>
<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="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/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="https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/euro-1.png" title="Solution la moins chère du marché" buttonText="Découvrir" />
<ListCard imageUrl="/img/editeur_fr_drapeau.png" title="Editeur Français" buttonText="Découvrir" />
<ListCard imageUrl="/img/qualiopi.png" title="Accompagnement à la certification" buttonText="Découvrir" />
<ListCard imageUrl="/img/solution_complete.png" title="Solution complète pour gérer votre OF" buttonText="Découvrir" />
<ListCard imageUrl="/img/sol_moins_chere.png" title="Solution la moins chère du marché" buttonText="Découvrir" />
</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" />
</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 Stat_Img from "./../img/stat_img.png"
const AboutUsSection = () => {
return (
<div className='aboutussection'>
@ -15,7 +13,7 @@ const AboutUsSection = () => {
<div className='AboutUsSection_block3'>
<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>

View File

@ -2,14 +2,15 @@ import React from 'react';
import "./aboutussection.css";
const SolutionDescription = ({
title = "Votre outil tout-en-un pour la gestion de la formation",
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.",
buttonText = "Découvrir notre solution"
title = "Une expertise dédiée à votre réussite",
subtitle = "À PROPOS DE NOUS",
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.",
description_2 = "Avec une équipe d'experts dévoués, nous accompagnons les établissements éducatifs dans leur transformation digitale.",
buttonText = "En savoir plus"
}) => {
return (
<div className='aboutussection' >
<div className='SolutionDescription_block1'>
<div className='SolutionDescription_block2'>
<div className='SolutionDescription_block3'>
@ -21,7 +22,10 @@ const SolutionDescription = ({
</h1>
</div>
<p className='SolutionDescription_block3_p'>
{description}
{description_1}
</p>
<p className='SolutionDescription_block3_p'>
{description_2}
</p>
</div>
<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}
</span>
</button>

View File

@ -69,6 +69,10 @@
cursor: pointer;
width: fit-content;
transition: all 0.2s ease-in-out;
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
}
.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) {
.fonctionnalite_Background {
width: 100%;
height: 650px;
height: 900px;
left: 0px;
top: 0px;
@ -26,7 +26,7 @@
gap: 30px;
height: 280px;
height: 600px;
/* left: calc(50% - 1081px/2 + 0.5px);*/
top: 176px;
width: 100%;
@ -46,7 +46,7 @@
gap: 20px;
width: 100%;
min-height: 420px;
min-height: 500px;
/* Inside auto layout */
@ -443,17 +443,17 @@
gap: 50px;
left: calc(50% - 1206px/2);
top: 0px;
mix-blend-mode: luminosity;
align-items: center;
justify-content: center;
}
.LogoCloud_cb2_logo {
width: 100%;
height: 60px;
flex: none;
flex-grow: 0;
flex-grow: 0;
order: 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;
height: 280px;
height: 320px;
/* left: calc(50% - 1081px/2 + 0.5px);*/
top: 176px;
width: 90%;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
@ -806,7 +975,7 @@
padding: 0px;
gap: 20px;
width: 1081px;
min-height: 202px;
@ -815,7 +984,7 @@
order: 0;
align-self: stretch;
flex-grow: 0;
width: 90%;
width: 100%;
margin-left: auto;
margin-right: auto;
@ -824,7 +993,7 @@
.title_and_cat_title_text1 {
/* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
width: 90%;
width: 100%;
min-height: 134px;
font-family: 'DM Sans';
@ -869,7 +1038,7 @@
flex: none;
order: 1;
flex-grow: 0;
width: 80%;
width: 100%;
margin-left: auto;
margin-right: auto;
@ -1153,7 +1322,7 @@
.LogoCloud_block1 {
display: flex;
flex-direction: column;
padding: 20px 50px;
padding: 20px 20px;
gap: 40px;
background: #FFFFFF;
width: 100%;
@ -1186,7 +1355,7 @@
order: 1;
flex-grow: 0;
overflow: hidden;
width: 90%;
width: 100%;
margin-left: auto;
margin-right: auto;
@ -1203,8 +1372,9 @@
height: 72px;
left: calc(50% - 1206px/2);
top: 0px;
width: 100%;
/* mix-blend-mode: luminosity;*/
/* mix-blend-mode: luminosity;*/
}
.LogoCloud_cb2_logo {
@ -1469,7 +1639,7 @@
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
width: 140px;
}
.Features_cardTitle {
@ -1507,12 +1677,182 @@
}
.block_logo_client {
width: 90%;
width: 100%;
margin-left: 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) {
@ -1540,7 +1880,7 @@
gap: 30px;
height: 280px;
height: 300px;
/* left: calc(50% - 1081px/2 + 0.5px);*/
top: 176px;
width: 90%;
@ -1583,7 +1923,7 @@
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-size: 56px;
font-size: 50px;
line-height: 120%;
/* or 67px */
text-align: center;
@ -1817,9 +2157,9 @@
}
.ListCard_imageStyle {
width: 88px;
height: 88px;
width: 100%;
object-fit: contain;
max-height: 100px;
}
.ListCard_contentStyle {
@ -1909,7 +2249,7 @@
.LogoCloud_block1 {
display: flex;
flex-direction: column;
padding: 50px 112px;
padding: 50px 20px;
gap: 40px;
background: #FFFFFF;
width: 100%;
@ -1941,7 +2281,7 @@
order: 1;
flex-grow: 0;
overflow: hidden;
width: 80%;
width: 100%;
margin-left: auto;
margin-right: auto;
@ -1953,13 +2293,13 @@
flex-direction: row;
align-items: center;
padding: 0px;
gap: 56px;
width: 1206px;
gap: 30px;
width: 100%;
height: 72px;
left: calc(50% - 1206px/2);
top: 0px;
/* mix-blend-mode: luminosity;*/
/* mix-blend-mode: luminosity;*/
}
.LogoCloud_cb2_logo {
@ -2146,7 +2486,7 @@
}
.Features_container {
padding: 100px 80px;
padding: 80px 80px;
display: flex;
flex-direction: column;
align-items: center;
@ -2258,14 +2598,182 @@
transition: all 0.2s ease;
}
.block_logo_client {
width: 90%;
width: 100%;
margin-left: 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) {
@ -2570,9 +3078,9 @@
}
.ListCard_imageStyle {
width: 88px;
height: 88px;
width: 100%;
object-fit: contain;
max-height: 100px;
}
.ListCard_contentStyle {
@ -2710,7 +3218,7 @@
left: calc(50% - 1206px/2);
top: 0px;
/* mix-blend-mode: luminosity;*/
/* mix-blend-mode: luminosity;*/
}
.LogoCloud_cb2_logo {
@ -2897,7 +3405,7 @@
}
.Features_container {
padding: 100px 80px;
padding: 80px 80px;
display: flex;
flex-direction: column;
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 Features from './Features.js';
import AboutUsSection from './block_stat/AboutUsSection.js';
import FrenchSolution from './FrenchSolution.js';
//import home_page_img_saas from "/img/home_page_img_saas.png";
import CommentMarche from './CommentMarche.js';
import New_C_Tatif_Section from "../tarif_section_automatic_files/PricingSection"
const New_C_A_Propos_2025 = (props) => {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
return (
<div className="new_homepage_2025">
@ -31,7 +38,7 @@ const New_C_A_Propos_2025 = (props) => {
</div>
</div>
<div style={{ position: 'absolute', right: '15%' }}>
<div className="FrenchSolution_block">
<FrenchSolution />
</div>
@ -53,7 +60,7 @@ const New_C_A_Propos_2025 = (props) => {
<div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => {
window.open(
"/new_contact/",
"/contact/",
'_self'
);
}}>
@ -62,24 +69,21 @@ const New_C_A_Propos_2025 = (props) => {
</div>
</div>
<div>
<img src='/img/home_page_img_saas.png' />
</div>
<img src='/img/home_page_img_saas.png' className="home_page_img_saas" />
</div>
</div>
<LogoCloud />
<WhyUsLayout />
<CommentMarche />
<VisionSection />
<KeyMetrics />
<AboutUsSection />
<Features />
<AboutUsSection />
<New_C_Tatif_Section />
</div>
)

View File

@ -939,22 +939,6 @@ const New_C_Marketplace_2025 = () => {
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 = "";
async function fetchData() {
@ -1153,7 +1137,10 @@ const New_C_Marketplace_2025 = () => {
//document.getElementById("_1234").checked = true;
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, [initAllfiter, categorie]);
@ -3731,7 +3718,7 @@ const New_C_Marketplace_2025 = () => {
{result && myApiResponse == "True" && fin == 0 && !newresult &&
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} />
</div>

View File

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

View File

@ -6,7 +6,7 @@ const ClientRelationManagement = ({ style }) => {
<div className="crm-container" style={style}>
<div className="header">
<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 className="content-row">
@ -25,7 +25,7 @@ const ClientRelationManagement = ({ style }) => {
<div className="price-content">
<div className="check-item">
<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>
@ -38,7 +38,7 @@ const ClientRelationManagement = ({ style }) => {
<div className="price-content">
<div className="check-item">
<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>
@ -48,14 +48,14 @@ const ClientRelationManagement = ({ style }) => {
<div className="price-header highlight">
<div className="check-item">
<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 className="price-content">
<div className="check-item">
<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>

View File

@ -6,63 +6,63 @@ const Marketplace = ({ style }) => {
<div className="marketplace" style={style}>
<div className="title-section">
<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 className="content-section">
<div className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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 className="text-row">
<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>

View File

@ -1,19 +1,14 @@
import React from 'react';
import AdministrativeManagement from './AdministrativeManagement';
import ClientRelationManagement from './ClientRelationManagement';
import TrainingHosting from './TrainingHosting';
//import AdministrativeManagement from './AdministrativeManagement';
//import ClientRelationManagement from './ClientRelationManagement';
//import TrainingHosting from './TrainingHosting';
import Marketplace from './Marketplace';
const PricingLayout = () => {
return (
<div style={styles.container}>
<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="circle-container">
<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 className="price-content">
<div className="circle-container">
<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>
@ -51,14 +51,14 @@ const TrainingHosting = ({ style }) => {
<div className="price-content">
<div className="circle-container">
<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 className="price-content">
<div className="circle-container">
<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>
@ -67,20 +67,20 @@ const TrainingHosting = ({ style }) => {
<div className="price-column">
<div className="price-header">
<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>
</div>
<div className="price-content">
<div className="circle-container">
<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 className="price-content">
<div className="circle-container">
<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>

View File

@ -1,17 +1,15 @@
import React from 'react';
import PricingPlanCard from './PricingPlanCard';
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_ko_fond_gris from "../../img_new_design_2025/check_ko_fond_gris.png";
import './detail.css';
import { Button, FormGroup, Label, Input } from "reactstrap";
import WhyUsLayout from './../a_propos_automatic_files/WhyUsLayout.js';
const PricingLayout = () => {
return (
<div>
<div className='tarif_head_automatic_files' style={{ width: '90%', marginLeft: '5%' }}>
@ -36,7 +34,6 @@ const PricingLayout = () => {
</div>
</div>
<div className='position_detail_price'>
{/*** Gestion admin */}
@ -413,7 +410,9 @@ const PricingLayout = () => {
<div className='coupure_fin_fonctionnalite'> &nbsp;</div>
</div>
</div>
<div className='new_a_propos_2025' >
<WhyUsLayout />
</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-left: 30px;
box-sizing: border-box;
margin-bottom: 64px;
}
@ -381,6 +382,7 @@
padding-right: 64px;
padding-left: 64px;
box-sizing: border-box;
margin-bottom: 64px;
}
@ -587,6 +589,7 @@
padding-right: 64px;
padding-left: 64px;
box-sizing: border-box;
margin-bottom: 64px;
}
@ -791,6 +794,7 @@
padding-right: 64px;
padding-left: 64px;
box-sizing: border-box;
margin-bottom: 64px;
}
@ -798,7 +802,7 @@
.entete_pricingsection_H1 {
font-family: 'DM Sans';
font-weight: 700;
font-size: 48px;
font-size: 40px;
letter-spacing: -0.48px;
line-height: 52px;
text-align: center;

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