recette2
cherif 2025-02-14 17:01:48 +01:00
parent 358a3645f8
commit 533c99ecb5
25 changed files with 4362 additions and 6 deletions

View File

@ -1 +1 @@
{"matches":{"300d333c87b001735a110c92e16fcf2461f30314":{"id":"react-social-icons#SocialIcon","source":{"type":"auto"}},"f6a3444ff0257194140ad88540b784f6fa08705d":{"id":"src/components/Fotter#Footer","source":{"type":"auto"}}}} {"matches":{"7d6fc278159343d2acb4c094a71ce026fb8b1973":{"id":"src/components/a_propos_automatic_files/ButtonText#ButtonText","source":{"type":"auto"}}}}

View File

@ -1 +1 @@
{"activePackage":"/","subPackages":["/","public/tinymce","build/tinymce"],"workspaceId":"67513b4c-c3fd-4391-aa8c-8f0a03fa7efe"} {"activePackage":"/","subPackages":["/","build/tinymce","public/tinymce"],"workspaceId":"67513b4c-c3fd-4391-aa8c-8f0a03fa7efe"}

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

BIN
public/img/img_flag_fr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 467 B

View File

@ -1200,7 +1200,7 @@
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
mix-blend-mode: luminosity; /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {
@ -1952,7 +1952,7 @@
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
mix-blend-mode: luminosity; /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {
@ -2700,7 +2700,7 @@
left: calc(50% - 1206px/2); left: calc(50% - 1206px/2);
top: 0px; top: 0px;
mix-blend-mode: luminosity; /* mix-blend-mode: luminosity;*/
} }
.LogoCloud_cb2_logo { .LogoCloud_cb2_logo {

View File

@ -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;

View File

@ -0,0 +1,23 @@
import React from 'react';
import "./new_homepage.css";
const Card_Title = ({
subtitle = "POURQUOI NOUS CHOISIR ?",
title = "Un besoin, une solution personnalisée"
}) => {
return (
<div className='new_homepage_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;

View File

@ -0,0 +1,162 @@
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: "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_homepage_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;

View File

@ -0,0 +1,47 @@
const FrenchSolution = ({ width = 162, height = 120 }) => {
const containerStyle = {
width: width,
height: height,
backgroundColor: '#ffffff',
borderRadius: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
boxSizing: 'border-box',
fontFamily: 'DM Sans, sans-serif',
color: '#16274f',
};
const solutionsStyle = {
fontSize: '12px',
fontWeight: 700,
marginBottom: '4px',
};
const percentageStyle = {
fontSize: '40px',
fontWeight: 700,
lineHeight: '1.2',
margin: '0',
};
const frenchStyle = {
fontSize: '18px',
fontWeight: 700,
textTransform: 'uppercase',
lineHeight: '120%',
margin: '0',
};
return (
<div style={containerStyle}>
<div style={solutionsStyle}>Solutions</div>
<div style={percentageStyle}>100%</div>
<div style={frenchStyle}>française 🇫🇷</div>
</div>
);
};
export default FrenchSolution;

View File

@ -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;

View File

@ -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;

View File

@ -0,0 +1,102 @@
import "./new_homepage.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_homepage_2025'>
<div className="LogoCloud_block1" >
<h2 className="LogoCloud_h2">
1000+ institutions éducatifs ont confiance en Mysy Training
</h2>
<div className='block_logo_client'>
<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;

View File

@ -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;

View File

@ -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;

View File

@ -0,0 +1,29 @@
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" className='img_section' />
</div>
</div>
</div>
</div>
);
};
export default AboutUsSection;

View File

@ -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;

View File

@ -0,0 +1,500 @@
.aboutussection {
@media only screen and (max-width: 600px) {
.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;
padding-top: 15%;
}
.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: 30px;
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 {
padding: 50px 20px;
background: #FFFFFF;
align-items: center;
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
justify-content: center;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
}
.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;
}
.img_section {
height: 300px;
z-index: -1;
}
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
.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;
padding-top: 15%;
}
.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: 30px;
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 {
padding: 100px 80px;
background: #FFFFFF;
align-items: center;
display: flex;
flex-direction: row;
gap: 24px;
width: 100%;
justify-content: center;
box-sizing: border-box;
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;
}
.img_section {
height: 300px;
z-index: -1;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.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;
padding-top: 15%;
}
.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: 35px;
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 {
padding: 100px 80px;
background: #FFFFFF;
align-items: center;
display: flex;
flex-direction: row;
gap: 24px;
width: 100%;
justify-content: center;
box-sizing: border-box;
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;
}
.img_section {
height: 300px;
z-index: -1;
}
}
@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;
padding-top: 15%;
}
.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 {
padding: 100px 80px;
background: #FFFFFF;
align-items: center;
display: flex;
flex-direction: row;
gap: 24px;
width: 100%;
justify-content: center;
box-sizing: border-box;
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;
}
.img_section {
height: 500px;
z-index: -1;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 541 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,90 @@
import React, { useRef, useState, useEffect } from "react";
import moment from "moment";
import "./new_homepage.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';
import FrenchSolution from './FrenchSolution.js';
//import home_page_img_saas from "/img/home_page_img_saas.png";
const New_C_A_Propos_2025 = (props) => {
return (
<div className="new_homepage_2025">
<div className="fonctionnalite_Background">
<div className="title_and_cat">
<div className="title_and_cat_title">
<div className="title_and_cat_title_text1">
L'Offre Tout-en-Un pour gérer votre <br /> Organisme de formation
</div>
<div className="title_and_cat_title_text2">
Toutes les fonctionnalités dont vous avez besoin, au meilleur prix &nbsp; 🇫🇷 &nbsp;
</div>
</div>
<div style={{ position: 'absolute', right: '15%' }}>
<FrenchSolution />
</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>
<img src='/img/home_page_img_saas.png' />
</div>
</div>
<LogoCloud />
<WhyUsLayout />
<VisionSection />
<KeyMetrics />
<Features />
<AboutUsSection />
</div>
)
}
export default New_C_A_Propos_2025;

View File

@ -12,6 +12,8 @@ import New_Navigation_2025 from "../components/New_Navigation_2025";
import New_C_A_Propos_2025 from "../components/a_propos_automatic_files/new_a_propos"; import New_C_A_Propos_2025 from "../components/a_propos_automatic_files/new_a_propos";
import New_Homepage_2025 from "../components/homepage_automatic_files/new_homepage";
const new_p_test_header_footer_2025 = () => { const new_p_test_header_footer_2025 = () => {
@ -20,7 +22,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_A_Propos_2025 /> <New_Homepage_2025 />
<New_C_Footer_2025_V2 /> <New_C_Footer_2025_V2 />