12/02/2025 - 20h
|
@ -0,0 +1 @@
|
||||||
|
cache
|
|
@ -0,0 +1 @@
|
||||||
|
{"assetsPath":"src/mysy_img/","componentLibrary":"none","componentsPath":"src/components","defaultConfigPath":"/.anima","framework":"html","language":"typescript","nextRouterType":null,"projectRoot":"c:\\Users\\billa\\Documents\\myclass.com\\Siteweb\\Production\\Ela_Front\\Front_Office","styleguidePath":"","styling":"css","tailwindConfigPath":"","tailwindConfigReuseEnabled":false}
|
|
@ -0,0 +1 @@
|
||||||
|
{"activePackage":"/","subPackages":["/","build/tinymce","public/tinymce"],"workspaceId":"67513b4c-c3fd-4391-aa8c-8f0a03fa7efe"}
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"codeparrot-ai.codeparrot"
|
||||||
|
]
|
||||||
|
}
|
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 458 KiB |
After Width: | Height: | Size: 541 KiB |
After Width: | Height: | Size: 114 KiB |
|
@ -101,7 +101,7 @@
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
|
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
|
||||||
rel="stylesheet">
|
rel="stylesheet">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -1,5 +1,13 @@
|
||||||
# https://www.robotstxt.org/robotstxt.html
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
User-agent: *
|
User-agent: *
|
||||||
Disallow: /google06c10352a49f1dc0
|
Disallow: /
|
||||||
Disallow: /sample
|
|
||||||
Sitemap: https://www.mysy-training.com/sitemap.xml
|
User-agent: *
|
||||||
|
Disallow: /
|
||||||
|
Disallow: /cgi-bin/
|
||||||
|
Sitemap: https://dev.mysy-training.com/sitemap.xml
|
||||||
|
|
||||||
|
User-agent: *
|
||||||
|
Disallow: /
|
||||||
|
Disallow: /cgi-bin/
|
||||||
|
Sitemap: https://demo.mysy-training.com/sitemap.xml
|
||||||
|
|
|
@ -269,6 +269,7 @@ function App() {
|
||||||
|
|
||||||
|
|
||||||
<Route path="/new_header_footer/" exact component={New_Test_Header_Footer_2025} />
|
<Route path="/new_header_footer/" exact component={New_Test_Header_Footer_2025} />
|
||||||
|
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const ButtonText = ({ text = 'Découvrir' }) => {
|
||||||
|
const buttonStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '12px 20px',
|
||||||
|
borderRadius: '200px',
|
||||||
|
border: '1px solid #c7c9ce',
|
||||||
|
backgroundColor: 'inherit',
|
||||||
|
minWidth: '133px',
|
||||||
|
height: '48px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.2s ease-in-out',
|
||||||
|
boxSizing: 'border-box'
|
||||||
|
};
|
||||||
|
|
||||||
|
const textStyle = {
|
||||||
|
color: '#4b5162',
|
||||||
|
fontFamily: 'DM Sans',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 700,
|
||||||
|
lineHeight: '122%',
|
||||||
|
textAlign: 'center'
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleHover = (e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = '#f5f5f5';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLeave = (e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = 'inherit';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button className='ButtonText_buttonStyle'
|
||||||
|
|
||||||
|
onMouseEnter={handleHover}
|
||||||
|
onMouseLeave={handleLeave}
|
||||||
|
>
|
||||||
|
<span className='ButtonText_textStyle'>{text}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ButtonText;
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './new_a_propos.css'
|
||||||
|
|
||||||
|
const Card_Title = ({
|
||||||
|
subtitle = "POURQUOI NOUS CHOISIR ?",
|
||||||
|
title = "Un besoin, une solution personnalisée"
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className='new_a_propos_2025'>
|
||||||
|
<div className='Card_Title_block1'>
|
||||||
|
<div className='Card_Title_block2'>
|
||||||
|
{subtitle}
|
||||||
|
</div>
|
||||||
|
<div className='Card_Title_block3'>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Card_Title;
|
||||||
|
|
|
@ -0,0 +1,162 @@
|
||||||
|
import './new_a_propos.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: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-2.png",
|
||||||
|
title: "Proximité",
|
||||||
|
description: "Un accompagnement humain et personnalisé pour chaque client."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-3.png",
|
||||||
|
title: "Excellence",
|
||||||
|
description: "Des solutions fiables qui font leurs preuves au quotidien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "https://dashboard.codeparrot.ai/api/image/Z6x2GGNxokPE5KUG/icons-4.png",
|
||||||
|
title: "Transparence",
|
||||||
|
description: "Nous construisons des relations basées sur la confiance."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='new_a_propos_2025'>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="Features_cardContainer">
|
||||||
|
{values.map((value, index) => (
|
||||||
|
<div key={index} className="Features_card">
|
||||||
|
<div className="Features_iconWrapper">
|
||||||
|
<img src={value.icon} alt="" className="Features_icon" />
|
||||||
|
</div>
|
||||||
|
<div className="Features_content">
|
||||||
|
<h3 className="Features_cardTitle">{value.title}</h3>
|
||||||
|
<p className="Features_description">{value.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="Features_button">
|
||||||
|
Découvrir notre solution
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
container: {
|
||||||
|
padding: '100px 80px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '48px',
|
||||||
|
background: '#ffffff',
|
||||||
|
},
|
||||||
|
titleContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '4px',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
fontFamily: 'DM Sans',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#ecae49',
|
||||||
|
textAlign: 'center',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
lineHeight: '16px',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontFamily: 'DM Sans',
|
||||||
|
fontSize: '40px',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#16274f',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '120%',
|
||||||
|
margin: '20px 0 0 0',
|
||||||
|
},
|
||||||
|
cardContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '24px',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
width: '270px',
|
||||||
|
padding: '48px 16px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '24px',
|
||||||
|
background: '#fdf6ec1a',
|
||||||
|
borderRadius: '12px',
|
||||||
|
border: '1px solid #ecae49',
|
||||||
|
},
|
||||||
|
iconWrapper: {
|
||||||
|
width: '88px',
|
||||||
|
height: '88px',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
width: '88px',
|
||||||
|
height: '88px',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
cardTitle: {
|
||||||
|
fontFamily: 'DM Sans',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#16274f',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '24px',
|
||||||
|
margin: 0,
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
fontFamily: 'Inter',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 400,
|
||||||
|
color: '#4b5162',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '160%',
|
||||||
|
opacity: 0.8,
|
||||||
|
margin: 0,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
padding: '12px 20px',
|
||||||
|
borderRadius: '200px',
|
||||||
|
border: '1px solid #c7c9ce',
|
||||||
|
background: 'transparent',
|
||||||
|
fontFamily: 'DM Sans',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#4b5162',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.2s ease',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Features;
|
||||||
|
|
|
@ -0,0 +1,116 @@
|
||||||
|
const KeyMetrics = () => {
|
||||||
|
const metrics = [
|
||||||
|
{
|
||||||
|
value: "10 ans",
|
||||||
|
description: "d'expériences."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "98%",
|
||||||
|
description: "de satisfaction\nclient."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "500+",
|
||||||
|
description: "organismes de formation\naccompagnés."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "20+",
|
||||||
|
description: "partenariats avec des\ninstitutions."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const containerStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '100px 0',
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
width: '100%'
|
||||||
|
};
|
||||||
|
|
||||||
|
const headerStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '4px',
|
||||||
|
marginBottom: '40px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const subtitleStyle = {
|
||||||
|
fontFamily: 'DM Sans',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#0aa690',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '16px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const titleStyle = {
|
||||||
|
fontFamily: 'DM Sans',
|
||||||
|
fontSize: '40px',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#16274f',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '120%',
|
||||||
|
maxWidth: '679px',
|
||||||
|
margin: '20px 0 0 0'
|
||||||
|
};
|
||||||
|
|
||||||
|
const metricsContainerStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '20px',
|
||||||
|
justifyContent: 'center',
|
||||||
|
maxWidth: '1116px',
|
||||||
|
width: '100%'
|
||||||
|
};
|
||||||
|
|
||||||
|
const metricStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '8px',
|
||||||
|
width: '260px',
|
||||||
|
alignItems: 'center'
|
||||||
|
};
|
||||||
|
|
||||||
|
const valueStyle = {
|
||||||
|
fontFamily: 'Plus Jakarta Sans',
|
||||||
|
fontSize: '60px',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#0aa690',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '70px',
|
||||||
|
margin: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
const descriptionStyle = {
|
||||||
|
fontFamily: 'Inter',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 400,
|
||||||
|
color: '#16274f',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '160%',
|
||||||
|
margin: 0,
|
||||||
|
whiteSpace: 'pre-line'
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="KeyMetrics_containerStyle">
|
||||||
|
<div className="KeyMetrics_headerStyle">
|
||||||
|
<div className="KeyMetrics_subtitleStyle">Nos chiffres clés</div>
|
||||||
|
<h2 className="KeyMetrics_titleStyle" >Quelques chiffres qui parlent de nous.</h2>
|
||||||
|
</div>
|
||||||
|
<div className="KeyMetrics_metricsContainerStyle">
|
||||||
|
{metrics.map((metric, index) => (
|
||||||
|
<div key={index} className="KeyMetrics_metricStyle">
|
||||||
|
<div className="KeyMetrics_valueStyle">{metric.value}</div>
|
||||||
|
<p className="KeyMetrics_descriptionStyle" >{metric.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default KeyMetrics;
|
||||||
|
|
|
@ -0,0 +1,96 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const ListCard = ({ imageUrl, title, buttonText }) => {
|
||||||
|
const cardStyle = {
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '270px',
|
||||||
|
minHeight: '304px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
padding: '40px 16px',
|
||||||
|
gap: '24px',
|
||||||
|
backgroundColor: '#ecf1fc1a',
|
||||||
|
borderRadius: '12px',
|
||||||
|
border: '1px solid #3e6ee3',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageContainerStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageStyle = {
|
||||||
|
width: '88px',
|
||||||
|
height: '88px',
|
||||||
|
objectFit: 'contain',
|
||||||
|
};
|
||||||
|
|
||||||
|
const contentStyle = {
|
||||||
|
width: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '16px',
|
||||||
|
alignItems: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
const titleStyle = {
|
||||||
|
fontFamily: 'DM Sans, sans-serif',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: 700,
|
||||||
|
lineHeight: '24px',
|
||||||
|
color: '#16274f',
|
||||||
|
textAlign: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
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 className='ListCard_cardStyle'>
|
||||||
|
<div className='ListCard_imageContainerStyle'>
|
||||||
|
<img src={imageUrl} alt={title} className='ListCard_imageStyle' />
|
||||||
|
</div>
|
||||||
|
<div className='ListCard_contentStyle'>
|
||||||
|
<h3 className='ListCard_titleStyle'>{title}</h3>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<button className='ListCard_buttonStyle'
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
Object.assign(e.target.style, buttonHoverStyle);
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
Object.assign(e.target.style, buttonStyle);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{buttonText}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ListCard.defaultProps = {
|
||||||
|
imageUrl: 'https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/france-1.png',
|
||||||
|
title: 'Editeur Français',
|
||||||
|
buttonText: 'Découvrir'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ListCard;
|
||||||
|
|
|
@ -0,0 +1,101 @@
|
||||||
|
import './new_a_propos.css'
|
||||||
|
|
||||||
|
|
||||||
|
const list_img = [
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_1.png",
|
||||||
|
title: "5 Discovery",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_2.png",
|
||||||
|
title: "Potentials",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_3.png",
|
||||||
|
title: "Univ Clermont-Ferrant",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_5.png",
|
||||||
|
title: "Ecole aromathérapie ",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_6.png",
|
||||||
|
title: "Groupe CAPL",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_1.png",
|
||||||
|
title: "5 Discovery",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_2.png",
|
||||||
|
title: "Potentials",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: "./img/client_logo_3.png",
|
||||||
|
title: "Univ Clermont-Ferrant",
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
const LogoCloud = () => {
|
||||||
|
return (
|
||||||
|
<div className='new_a_propos_2025'>
|
||||||
|
<div className="LogoCloud_block1" >
|
||||||
|
<h2 className="LogoCloud_h2">
|
||||||
|
1000+ institutions éducatifs ont confiance en Mysy Training
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div className='LogoCloud_cb1'>
|
||||||
|
<div className='LogoCloud_cb2'>
|
||||||
|
|
||||||
|
{list_img.map((value, index) => (
|
||||||
|
<div className='LogoCloud_cb2_logo'>
|
||||||
|
<img
|
||||||
|
src={value.icon}
|
||||||
|
alt={value.title}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
objectFit: 'contain',
|
||||||
|
filter: 'grayscale(0.6)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/*<div className="LogoCloud_block2" >
|
||||||
|
<img
|
||||||
|
src="https://dashboard.codeparrot.ai/api/image/Z6xwUmNxokPE5KT7/logos.png"
|
||||||
|
alt="Partner Logos"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
objectFit: 'contain',
|
||||||
|
filter: 'grayscale(0.6)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>*/}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LogoCloud;
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
const VisionSection = ({
|
||||||
|
title = "NOTRE VISION",
|
||||||
|
heading = "Nous simplifions la gestion de votre organisme de formation.",
|
||||||
|
description = "Chez MySy Training, nous croyons en une gestion de formation simplifiée pour booster l'efficacité des établissements éducatifs. Notre mission est de fournir des solutions technologiques innovantes pour faciliter la vie des formateurs et enrichir l'expérience des apprenants. Nous nous engageons à rendre la formation accessible, efficace et durable.",
|
||||||
|
buttonText = "Découvrez notre solution",
|
||||||
|
imageSrc = "/img/img_a_propos_main.jpg"
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="VisionSection_block1">
|
||||||
|
{/* Image Section */}
|
||||||
|
<div className="VisionSection_section_img" />
|
||||||
|
|
||||||
|
{/* Content Section */}
|
||||||
|
<div className='VisionSection_content_section' >
|
||||||
|
{/* Title and Heading */}
|
||||||
|
<div className='VisionSection_title'>
|
||||||
|
<span className="VisionSection_title_span" >
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
|
<h2 className="VisionSection_title_h2" >
|
||||||
|
{heading}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="VisionSection_description" >
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Button */}
|
||||||
|
<button
|
||||||
|
className="VisionSection_buton"
|
||||||
|
onMouseOver={(e) => {
|
||||||
|
e.target.style.background = '#f5f5f5';
|
||||||
|
}}
|
||||||
|
onMouseOut={(e) => {
|
||||||
|
e.target.style.background = 'transparent';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{buttonText}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default VisionSection;
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Card_Title from './Card_Title';
|
||||||
|
import ListCard from './ListCard';
|
||||||
|
import ButtonText from './ButtonText';
|
||||||
|
|
||||||
|
const WhyUsLayout = () => {
|
||||||
|
return (
|
||||||
|
<div className='WhyUsLayout_block1' >
|
||||||
|
<div style={{ flexGrow: 1 }}>
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<ButtonText text="Découvrir nos fonctionnalités" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhyUsLayout;
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
import React from 'react';
|
||||||
|
import SolutionDescription from './SolutionDescription';
|
||||||
|
import "./aboutussection.css";
|
||||||
|
|
||||||
|
|
||||||
|
import Stat_Img from "./../img/stat_img.png"
|
||||||
|
|
||||||
|
const AboutUsSection = () => {
|
||||||
|
return (
|
||||||
|
<div className='aboutussection'>
|
||||||
|
<div className='AboutUsSection_block1'>
|
||||||
|
<div className='AboutUsSection_block2'>
|
||||||
|
<SolutionDescription />
|
||||||
|
</div>
|
||||||
|
<div className='AboutUsSection_block3'>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<img src={Stat_Img} alt="Background" style={{
|
||||||
|
|
||||||
|
width: '392px',
|
||||||
|
height: '392px',
|
||||||
|
// opacity: 0.1,
|
||||||
|
zIndex: -1
|
||||||
|
}} />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AboutUsSection;
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
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"
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className='aboutussection' >
|
||||||
|
|
||||||
|
<div className='SolutionDescription_block1'>
|
||||||
|
<div className='SolutionDescription_block2'>
|
||||||
|
<div className='SolutionDescription_block3'>
|
||||||
|
<span className='SolutionDescription_block3_span'>
|
||||||
|
{subtitle}
|
||||||
|
</span>
|
||||||
|
<h1 className='SolutionDescription_block3_h1'>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<p className='SolutionDescription_block3_p'>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className='SolutionDescription_block3_bton_solution'
|
||||||
|
onMouseOver={(e) => {
|
||||||
|
e.currentTarget.style.background = '#F5F5F5';
|
||||||
|
}}
|
||||||
|
onMouseOut={(e) => {
|
||||||
|
e.currentTarget.style.background = 'transparent';
|
||||||
|
}}
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<span className='SolutionDescription_block3_bton_text'>
|
||||||
|
{buttonText}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SolutionDescription;
|
||||||
|
|
|
@ -0,0 +1,128 @@
|
||||||
|
.aboutussection {
|
||||||
|
|
||||||
|
|
||||||
|
@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) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.SolutionDescription_block1 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 32px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 540px;
|
||||||
|
min-width: 320px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SolutionDescription_block2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SolutionDescription_block3 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.SolutionDescription_block3_span {
|
||||||
|
font-family: DM Sans;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #3E6EE3
|
||||||
|
}
|
||||||
|
|
||||||
|
.SolutionDescription_block3_h1 {
|
||||||
|
font-family: DM Sans;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 120%;
|
||||||
|
margin: 0;
|
||||||
|
color: #16274F
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.SolutionDescription_block3_p {
|
||||||
|
font-family: Inter;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 0;
|
||||||
|
color: #4B5162;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SolutionDescription_block3_bton_solution {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #C7C9CE;
|
||||||
|
border-radius: 200px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: fit-content;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SolutionDescription_block3_bton_text {
|
||||||
|
font-family: DM Sans;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 122%;
|
||||||
|
color: #4B5162;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AboutUsSection_block1 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 80%;
|
||||||
|
padding: 80px 48px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FFF;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AboutUsSection_block2 {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.AboutUsSection_block3 {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
max-width: 692px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 541 KiB |
After Width: | Height: | Size: 114 KiB |
|
@ -0,0 +1,77 @@
|
||||||
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
|
import moment from "moment";
|
||||||
|
import "./new_a_propos.css";
|
||||||
|
|
||||||
|
import WhyUsLayout from './WhyUsLayout.js';
|
||||||
|
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';
|
||||||
|
|
||||||
|
const New_C_A_Propos_2025 = (props) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className="new_a_propos_2025">
|
||||||
|
<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.
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="title_and_cat_title_cat">
|
||||||
|
|
||||||
|
<div className="title_and_cat_title_cat_bton_demo" onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
var date2 = new Date();
|
||||||
|
const format2 = "YYYY-MM";
|
||||||
|
var dateTime2 = moment(date2).format(format2);
|
||||||
|
window.open(
|
||||||
|
"https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2),
|
||||||
|
'_blank'
|
||||||
|
);
|
||||||
|
}}>
|
||||||
|
<nav className="title_and_cat_title_cat_bton_demo_txt"> Réserver une démo </nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => {
|
||||||
|
|
||||||
|
window.open(
|
||||||
|
"/new_contact/",
|
||||||
|
'_self'
|
||||||
|
);
|
||||||
|
}}>
|
||||||
|
<nav className="title_and_cat_title_cat_bton_tarif_txt"> Nous contacter </nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<WhyUsLayout />
|
||||||
|
|
||||||
|
<LogoCloud />
|
||||||
|
|
||||||
|
<VisionSection />
|
||||||
|
|
||||||
|
<KeyMetrics />
|
||||||
|
|
||||||
|
<Features />
|
||||||
|
|
||||||
|
|
||||||
|
<AboutUsSection />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default New_C_A_Propos_2025;
|
|
@ -1,11 +1,8 @@
|
||||||
import React, { useRef, useState, useEffect } from "react";
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import "./new_fonctionalites_2025.css";
|
import "./new_fonctionalites_2025.css";
|
||||||
import "./ContentSection.js";
|
|
||||||
import "./ELearningSection.js";
|
|
||||||
import "./ContentSection.js";
|
|
||||||
import "./ContentSection.js";
|
|
||||||
|
|
||||||
|
|
||||||
import FeaturesLayout from './FeaturesLayout.js';
|
import FeaturesLayout from './FeaturesLayout.js';
|
||||||
import ContentSection from './ContentSection';
|
import ContentSection from './ContentSection';
|
||||||
import Badge_Fonctionnalite from './Badge_Fonctionnalite';
|
import Badge_Fonctionnalite from './Badge_Fonctionnalite';
|
||||||
|
|
|
@ -6,7 +6,7 @@ body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
font-family: 'DM Sans', 'Inter';
|
font-family: 'DM Sans', 'Inter', 'Plus Jakarta Sans';
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,22 +6,11 @@ import New_C_Footer_2025 from "../components/New_C_Footer_2025";
|
||||||
import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
|
import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
|
||||||
import New_C_Footer_Without_Testimony_2025_V2 from "../components/footer_automatic_files/Layout_Without_Testimony";
|
import New_C_Footer_Without_Testimony_2025_V2 from "../components/footer_automatic_files/Layout_Without_Testimony";
|
||||||
import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
|
import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
|
||||||
import New_C_Tatif_Section from "../components/tarif_section_automatic_files/PricingSection";
|
|
||||||
|
|
||||||
import New_C_Detail_Formation_Automatic_Files from "../components/detail_formation_automatic_files/new_detail_formation_2025"
|
|
||||||
|
|
||||||
import New_C_Article_Detail_2025 from "../components/New_C_Article_Detail_2025";
|
|
||||||
|
|
||||||
import New_Navigation_2025 from "../components/New_Navigation_2025";
|
import New_Navigation_2025 from "../components/New_Navigation_2025";
|
||||||
|
|
||||||
import New_C_Tarif_Section_Head from "../components/tarif_head_automatic_files/PricingLayout"
|
|
||||||
|
|
||||||
import New_C_Contact_2025 from "../components/contact_automatic_files/Contact_Layout";
|
import New_C_A_Propos_2025 from "../components/a_propos_automatic_files/new_a_propos";
|
||||||
|
|
||||||
import New_C_Marketplace_2025 from "../components/marketplace_automatic_files/new_marketplace_2025";
|
|
||||||
|
|
||||||
|
|
||||||
import New_C_Fonctionnalites_2025 from "../components/fonctionalites_automatic_files/new_fonctionnalites_2025";
|
|
||||||
|
|
||||||
const new_p_test_header_footer_2025 = () => {
|
const new_p_test_header_footer_2025 = () => {
|
||||||
|
|
||||||
|
@ -31,7 +20,7 @@ const new_p_test_header_footer_2025 = () => {
|
||||||
<New_Navigation_2025 />
|
<New_Navigation_2025 />
|
||||||
<New_C_Header_2025_V2 />
|
<New_C_Header_2025_V2 />
|
||||||
|
|
||||||
<New_C_Fonctionnalites_2025 />
|
<New_C_A_Propos_2025 />
|
||||||
|
|
||||||
<New_C_Footer_Without_Testimony_2025_V2 />
|
<New_C_Footer_Without_Testimony_2025_V2 />
|
||||||
|
|
||||||
|
|