diff --git a/.anima/components.json b/.anima/components.json
index 7644ac5..4d8df7a 100644
--- a/.anima/components.json
+++ b/.anima/components.json
@@ -1 +1 @@
-{"matches":{"300d333c87b001735a110c92e16fcf2461f30314":{"id":"react-social-icons#SocialIcon","source":{"type":"auto"}},"f6a3444ff0257194140ad88540b784f6fa08705d":{"id":"src/components/Fotter#Footer","source":{"type":"auto"}}}}
\ No newline at end of file
+{"matches":{"7d6fc278159343d2acb4c094a71ce026fb8b1973":{"id":"src/components/a_propos_automatic_files/ButtonText#ButtonText","source":{"type":"auto"}}}}
\ No newline at end of file
diff --git a/.anima/workspace.json b/.anima/workspace.json
index 7aca172..e90f7d1 100644
--- a/.anima/workspace.json
+++ b/.anima/workspace.json
@@ -1 +1 @@
-{"activePackage":"/","subPackages":["/","public/tinymce","build/tinymce"],"workspaceId":"67513b4c-c3fd-4391-aa8c-8f0a03fa7efe"}
\ No newline at end of file
+{"activePackage":"/","subPackages":["/","build/tinymce","public/tinymce"],"workspaceId":"67513b4c-c3fd-4391-aa8c-8f0a03fa7efe"}
\ No newline at end of file
diff --git a/public/img/home_page_img_saas.png b/public/img/home_page_img_saas.png
new file mode 100644
index 0000000..f26afa8
Binary files /dev/null and b/public/img/home_page_img_saas.png differ
diff --git a/public/img/img_flag_fr.png b/public/img/img_flag_fr.png
new file mode 100644
index 0000000..6a2ea18
Binary files /dev/null and b/public/img/img_flag_fr.png differ
diff --git a/src/components/a_propos_automatic_files/new_a_propos.css b/src/components/a_propos_automatic_files/new_a_propos.css
index f76bd32..f058e14 100644
--- a/src/components/a_propos_automatic_files/new_a_propos.css
+++ b/src/components/a_propos_automatic_files/new_a_propos.css
@@ -1200,7 +1200,7 @@
left: calc(50% - 1206px/2);
top: 0px;
- mix-blend-mode: luminosity;
+ /* mix-blend-mode: luminosity;*/
}
.LogoCloud_cb2_logo {
@@ -1952,7 +1952,7 @@
left: calc(50% - 1206px/2);
top: 0px;
- mix-blend-mode: luminosity;
+ /* mix-blend-mode: luminosity;*/
}
.LogoCloud_cb2_logo {
@@ -2700,7 +2700,7 @@
left: calc(50% - 1206px/2);
top: 0px;
- mix-blend-mode: luminosity;
+ /* mix-blend-mode: luminosity;*/
}
.LogoCloud_cb2_logo {
diff --git a/src/components/homepage_automatic_files/ButtonText.js b/src/components/homepage_automatic_files/ButtonText.js
new file mode 100644
index 0000000..9789d3f
--- /dev/null
+++ b/src/components/homepage_automatic_files/ButtonText.js
@@ -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 (
+
+ {text}
+
+ );
+};
+
+export default ButtonText;
+
diff --git a/src/components/homepage_automatic_files/Card_Title.js b/src/components/homepage_automatic_files/Card_Title.js
new file mode 100644
index 0000000..3a7004e
--- /dev/null
+++ b/src/components/homepage_automatic_files/Card_Title.js
@@ -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 (
+
+
+
+ {subtitle}
+
+
+ {title}
+
+
+
+ );
+};
+
+export default Card_Title;
+
diff --git a/src/components/homepage_automatic_files/Features.js b/src/components/homepage_automatic_files/Features.js
new file mode 100644
index 0000000..d0af0ed
--- /dev/null
+++ b/src/components/homepage_automatic_files/Features.js
@@ -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 (
+
+
+
+
+ NOS VALEURS
+
Des valeurs qui nous guident.
+
+
+
+ {values.map((value, index) => (
+
+
+
+
+
+
{value.title}
+
{value.description}
+
+
+ ))}
+
+
+
+ Découvrir notre solution
+
+
+
+ );
+};
+
+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;
+
diff --git a/src/components/homepage_automatic_files/FrenchSolution.js b/src/components/homepage_automatic_files/FrenchSolution.js
new file mode 100644
index 0000000..3daafce
--- /dev/null
+++ b/src/components/homepage_automatic_files/FrenchSolution.js
@@ -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 (
+
+
Solutions
+
100%
+
française 🇫🇷
+
+ );
+};
+
+export default FrenchSolution;
+
diff --git a/src/components/homepage_automatic_files/KeyMetrics.js b/src/components/homepage_automatic_files/KeyMetrics.js
new file mode 100644
index 0000000..6142ef1
--- /dev/null
+++ b/src/components/homepage_automatic_files/KeyMetrics.js
@@ -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 (
+
+
+
Nos chiffres clés
+
Quelques chiffres qui parlent de nous.
+
+
+ {metrics.map((metric, index) => (
+
+
{metric.value}
+
{metric.description}
+
+ ))}
+
+
+ );
+};
+
+export default KeyMetrics;
+
diff --git a/src/components/homepage_automatic_files/ListCard.js b/src/components/homepage_automatic_files/ListCard.js
new file mode 100644
index 0000000..bd1aa08
--- /dev/null
+++ b/src/components/homepage_automatic_files/ListCard.js
@@ -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 (
+
+
+
+
+
+
{title}
+
+ {
+ Object.assign(e.target.style, buttonHoverStyle);
+ }}
+ onMouseLeave={(e) => {
+ Object.assign(e.target.style, buttonStyle);
+ }}
+ >
+ {buttonText}
+
+
+
+
+ );
+};
+
+ListCard.defaultProps = {
+ imageUrl: 'https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/france-1.png',
+ title: 'Editeur Français',
+ buttonText: 'Découvrir'
+};
+
+export default ListCard;
+
diff --git a/src/components/homepage_automatic_files/LogoCloud.js b/src/components/homepage_automatic_files/LogoCloud.js
new file mode 100644
index 0000000..c0b35e6
--- /dev/null
+++ b/src/components/homepage_automatic_files/LogoCloud.js
@@ -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 (
+
+
+
+ 1000+ institutions éducatifs ont confiance en Mysy Training
+
+
+
+
+
+
+
+ {list_img.map((value, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {/*
+
+
*/}
+
+
+
+ );
+};
+
+export default LogoCloud;
+
diff --git a/src/components/homepage_automatic_files/VisionSection.js b/src/components/homepage_automatic_files/VisionSection.js
new file mode 100644
index 0000000..53b1428
--- /dev/null
+++ b/src/components/homepage_automatic_files/VisionSection.js
@@ -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 (
+
+ {/* Image Section */}
+
+
+ {/* Content Section */}
+
+ {/* Title and Heading */}
+
+
+ {title}
+
+
+ {heading}
+
+
+
+ {/* Description */}
+
+ {description}
+
+
+ {/* Button */}
+
{
+ e.target.style.background = '#f5f5f5';
+ }}
+ onMouseOut={(e) => {
+ e.target.style.background = 'transparent';
+ }}
+ >
+ {buttonText}
+
+
+
+ );
+};
+
+export default VisionSection;
+
diff --git a/src/components/homepage_automatic_files/WhyUsLayout.js b/src/components/homepage_automatic_files/WhyUsLayout.js
new file mode 100644
index 0000000..9225634
--- /dev/null
+++ b/src/components/homepage_automatic_files/WhyUsLayout.js
@@ -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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default WhyUsLayout;
+
diff --git a/src/components/homepage_automatic_files/block_stat/AboutUsSection.js b/src/components/homepage_automatic_files/block_stat/AboutUsSection.js
new file mode 100644
index 0000000..c6d9994
--- /dev/null
+++ b/src/components/homepage_automatic_files/block_stat/AboutUsSection.js
@@ -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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AboutUsSection;
+
diff --git a/src/components/homepage_automatic_files/block_stat/SolutionDescription.js b/src/components/homepage_automatic_files/block_stat/SolutionDescription.js
new file mode 100644
index 0000000..6747833
--- /dev/null
+++ b/src/components/homepage_automatic_files/block_stat/SolutionDescription.js
@@ -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 (
+
+
+
+
+
+
+ {subtitle}
+
+
+ {title}
+
+
+
+ {description}
+
+
+
{
+ e.currentTarget.style.background = '#F5F5F5';
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.background = 'transparent';
+ }}
+
+
+ >
+
+ {buttonText}
+
+
+
+
+ );
+};
+
+export default SolutionDescription;
+
diff --git a/src/components/homepage_automatic_files/block_stat/aboutussection.css b/src/components/homepage_automatic_files/block_stat/aboutussection.css
new file mode 100644
index 0000000..793f8ff
--- /dev/null
+++ b/src/components/homepage_automatic_files/block_stat/aboutussection.css
@@ -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;
+
+ }
+
+
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/home_page_automatic_files/home_page_automatic_files.css b/src/components/homepage_automatic_files/home_page_automatic_files.css
similarity index 100%
rename from src/components/home_page_automatic_files/home_page_automatic_files.css
rename to src/components/homepage_automatic_files/home_page_automatic_files.css
diff --git a/src/components/home_page_automatic_files/home_page_automatic_files.js b/src/components/homepage_automatic_files/home_page_automatic_files.js
similarity index 100%
rename from src/components/home_page_automatic_files/home_page_automatic_files.js
rename to src/components/homepage_automatic_files/home_page_automatic_files.js
diff --git a/src/components/homepage_automatic_files/img/img_a_propos_main.jpg b/src/components/homepage_automatic_files/img/img_a_propos_main.jpg
new file mode 100644
index 0000000..6b44b8a
Binary files /dev/null and b/src/components/homepage_automatic_files/img/img_a_propos_main.jpg differ
diff --git a/src/components/homepage_automatic_files/img/img_a_propos_main_old.jpg b/src/components/homepage_automatic_files/img/img_a_propos_main_old.jpg
new file mode 100644
index 0000000..e0b5dea
Binary files /dev/null and b/src/components/homepage_automatic_files/img/img_a_propos_main_old.jpg differ
diff --git a/src/components/homepage_automatic_files/img/stat_img.png b/src/components/homepage_automatic_files/img/stat_img.png
new file mode 100644
index 0000000..350d35c
Binary files /dev/null and b/src/components/homepage_automatic_files/img/stat_img.png differ
diff --git a/src/components/homepage_automatic_files/new_homepage.css b/src/components/homepage_automatic_files/new_homepage.css
new file mode 100644
index 0000000..032e312
--- /dev/null
+++ b/src/components/homepage_automatic_files/new_homepage.css
@@ -0,0 +1,3018 @@
+.new_homepage_2025 {
+
+ @media only screen and (max-width: 600px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 650px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 20px;
+ padding-top: 5rem;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+ top: 176px;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 3rem;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ width: 100%;
+ min-height: 420px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 100%;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ /* Mobile/Hn/H1 - Mobile */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ /* or 48px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+
+
+ }
+
+ .title_and_cat_title_text2 {
+
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .Card_Title_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ min-width: 280px;
+ align-items: center;
+ padding: 20px 0;
+ }
+
+ .Card_Title_block2 {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-align: center;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+
+ .Card_Title_block3 {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 48px;
+ text-align: center;
+ color: #16274f;
+ }
+
+ .ListCard_cardStyle {
+ width: 100%;
+ max-width: 270px;
+ min-height: 304px;
+ display: flex;
+ flex-direction: column;
+ padding: 20px 8px;
+ gap: 10px;
+ background: #ecf1fc1a;
+ border-radius: 12px;
+ border: 1px solid #3e6ee3;
+ box-sizing: border-box;
+ }
+
+ .ListCard_imageContainerStyle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ }
+
+ .ListCard_imageStyle {
+ height: 88px;
+ object-fit: contain;
+ }
+
+ .ListCard_contentStyle {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ }
+
+ .ListCard_titleStyle {
+ font-family: DM Sans, sans-serif;
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ text-align: center;
+ height: 50px;
+ }
+
+
+ .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;
+
+ }
+
+ .ListCard_buttonHoverStyle {
+ background: #f5f5f5;
+
+ }
+
+
+ .ButtonText_buttonStyle {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: inherit;
+ min-width: 133px;
+ height: 48px;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ box-sizing: border-box;
+ }
+
+
+
+ .ButtonText_textStyle {
+ color: #4b5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700, ;
+ line-height: '122%';
+ text-align: 'center';
+ }
+
+
+ .WhyUsLayout_block1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ gap: 48px;
+
+ }
+
+ .WhyUsLayout_block2 {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .LogoCloud_block1 {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 10px;
+ gap: 40px;
+ background: #FFFFFF;
+ width: 100%;
+ align-items: center;
+ }
+
+ .LogoCloud_h2 {
+ font-family: DM Sans;
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ text-align: center;
+ margin: 0;
+ width: 100%;
+ }
+
+
+ .LogoCloud_cb1 {
+ /* Slider logos */
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ overflow: hidden;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .LogoCloud_cb2 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ 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;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .LogoCloud_block2 {
+ width: 1206px;
+ height: 72px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .VisionSection_block1 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 40px;
+ padding: 40px 0 80px;
+ width: 100%;
+ }
+
+ .VisionSection_section_img {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1116px;
+ height: 500px;
+ background-size: cover;
+ background: #d9d9d9;
+ background-image: url("./img/img_a_propos_main.jpg");
+ }
+
+ .VisionSection_content_section {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ align-items: center;
+ }
+
+
+ .VisionSection_title {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ text-align: center;
+
+ }
+
+
+ .VisionSection_title_span {
+ color: #3E6EE3;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-transform: uppercase;
+ }
+
+ .VisionSection_title_h2 {
+ color: #16274F;
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+
+ .VisionSection_description {
+ color: #4B5162;
+ font-family: Inter;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ opacity: 0.8;
+ text-align: center;
+ margin: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+
+ .VisionSection_buton {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #C7C9CE;
+ background: transparent;
+ color: #4B5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .KeyMetrics_containerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 0;
+ width: 100%;
+ background: linear-gradient(0deg, rgba(196, 200, 238, 0.1), rgba(196, 200, 238, 0.1)), #FFFFFF;
+ }
+
+ .KeyMetrics_headerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 40px;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+
+ .KeyMetrics_subtitleStyle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #0aa690;
+ text-transform: uppercase;
+ text-align: center;
+ line-height: 16px;
+
+ }
+
+ .KeyMetrics_titleStyle {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ max-width: 679px;
+ margin: 20px 0 0 0;
+ }
+
+ .KeyMetrics_metricsContainerStyle {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ max-width: 1116px;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .KeyMetrics_metricStyle {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 260px;
+ align-items: center;
+
+ }
+
+ .KeyMetrics_valueStyle {
+ font-family: Plus Jakarta Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #0aa690;
+ text-align: center;
+ line-height: 70px;
+ margin: 0;
+ }
+
+ .KeyMetrics_descriptionStyle {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #16274f;
+ text-align: center;
+ line-height: 160%;
+ margin: 0;
+ white-space: 'pre-line';
+ }
+
+ .Features_container {
+ padding: 80px 50px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 48px;
+ background: #FFFFFF;
+ }
+
+ .Features_titleContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .Features_subtitle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #ecae49;
+ text-align: center;
+ text-transform: uppercase;
+ line-height: 16px;
+ }
+
+ .Features_title {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+ .Features_cardContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ justify-content: center;
+ }
+
+
+ .Features_card {
+ width: 270px;
+ padding: 10px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #ecae49,
+ }
+
+ .Features_iconWrapper {
+ width: 88px;
+ height: 88px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .Features_icon {
+ width: 88px;
+ height: 88px;
+ }
+
+ .Features_content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ }
+
+ .Features_cardTitle {
+ font-family: DM Sans;
+ font-size: 20px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 24px;
+ margin: 0;
+ }
+
+ .Features_description {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #4b5162;
+ text-align: center;
+ line-height: 160%;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+ .Features_button {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ }
+
+ .block_logo_client {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+
+
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 800px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 20px;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+ top: 176px;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 3rem;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ width: 1081px;
+ min-height: 202px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 90%;
+ min-height: 134px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 46px;
+ line-height: 120%;
+ /* or 67px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text2 {
+
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 80px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ width: 40%;
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .Card_Title_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ min-width: 280px;
+ align-items: center;
+ padding: 20px 0;
+ }
+
+ .Card_Title_block2 {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-align: center;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+
+ .Card_Title_block3 {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 48px;
+ text-align: center;
+ color: #16274f;
+ }
+
+ .ListCard_cardStyle {
+ width: 100%;
+ max-width: 270px;
+ min-height: 304px;
+ display: flex;
+ flex-direction: column;
+ padding: 20px 8px;
+ gap: 10px;
+ background: #ecf1fc1a;
+ border-radius: 12px;
+ border: 1px solid #3e6ee3;
+ box-sizing: border-box;
+ }
+
+ .ListCard_imageContainerStyle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ }
+
+ .ListCard_imageStyle {
+ height: 88px;
+ object-fit: contain;
+ }
+
+ .ListCard_contentStyle {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ }
+
+ .ListCard_titleStyle {
+ font-family: DM Sans, sans-serif;
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ text-align: center;
+ height: 50px;
+ }
+
+
+ .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;
+
+ }
+
+ .ListCard_buttonHoverStyle {
+ background: #f5f5f5;
+
+ }
+
+
+ .ButtonText_buttonStyle {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: inherit;
+ min-width: 133px;
+ height: 48px;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ box-sizing: border-box;
+ }
+
+
+
+ .ButtonText_textStyle {
+ color: #4b5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700, ;
+ line-height: '122%';
+ text-align: 'center';
+ }
+
+
+ .WhyUsLayout_block1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ gap: 48px;
+
+ }
+
+ .WhyUsLayout_block2 {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ justify-content: center;
+ }
+
+ .LogoCloud_block1 {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 50px;
+ gap: 40px;
+ background: #FFFFFF;
+ width: 100%;
+ align-items: center;
+
+ margin-top: 5rem;
+ }
+
+ .LogoCloud_h2 {
+ font-family: DM Sans;
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ text-align: center;
+ margin: 0;
+ width: 100%;
+ }
+
+
+ .LogoCloud_cb1 {
+ /* Slider logos */
+
+
+ height: 72px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ overflow: hidden;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .LogoCloud_cb2 {
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ height: 72px;
+ left: calc(50% - 1206px/2);
+ top: 0px;
+
+ /* mix-blend-mode: luminosity;*/
+ }
+
+ .LogoCloud_cb2_logo {
+ width: 120px;
+ height: 57.66px;
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .LogoCloud_block2 {
+ width: 1206px;
+ height: 72px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .VisionSection_block1 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 40px;
+ padding: 40px 0 80px;
+ width: 100%;
+ }
+
+ .VisionSection_section_img {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1116px;
+ height: 500px;
+ background-size: cover;
+ background: #d9d9d9;
+ background-image: url("./img/img_a_propos_main.jpg");
+ }
+
+ .VisionSection_content_section {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ align-items: center;
+ }
+
+
+ .VisionSection_title {
+ width: 655px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ text-align: center;
+
+ }
+
+
+ .VisionSection_title_span {
+ color: #3E6EE3;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-transform: uppercase;
+ }
+
+ .VisionSection_title_h2 {
+ color: #16274F;
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+
+ .VisionSection_description {
+ color: #4B5162;
+ font-family: Inter;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ opacity: 0.8;
+ text-align: center;
+ margin: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+
+ .VisionSection_buton {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #C7C9CE;
+ background: transparent;
+ color: #4B5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .KeyMetrics_containerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 0;
+ width: 100%;
+ background: linear-gradient(0deg, rgba(196, 200, 238, 0.1), rgba(196, 200, 238, 0.1)), #FFFFFF;
+ }
+
+ .KeyMetrics_headerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 40px;
+
+ }
+
+
+ .KeyMetrics_subtitleStyle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #0aa690;
+ text-transform: uppercase;
+ text-align: center;
+ line-height: 16px;
+
+ }
+
+ .KeyMetrics_titleStyle {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ max-width: 679px;
+ margin: 20px 0 0 0;
+ }
+
+ .KeyMetrics_metricsContainerStyle {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ justify-content: center;
+ max-width: 1116px;
+ width: 100%;
+
+ }
+
+ .KeyMetrics_metricStyle {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 260px;
+ align-items: center;
+
+ }
+
+ .KeyMetrics_valueStyle {
+ font-family: Plus Jakarta Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #0aa690;
+ text-align: center;
+ line-height: 70px;
+ margin: 0;
+ }
+
+ .KeyMetrics_descriptionStyle {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #16274f;
+ text-align: center;
+ line-height: 160%;
+ margin: 0;
+ white-space: 'pre-line';
+ }
+
+ .Features_container {
+ padding: 80px 50px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 48px;
+ background: #FFFFFF;
+ }
+
+ .Features_titleContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .Features_subtitle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #ecae49;
+ text-align: center;
+ text-transform: uppercase;
+ line-height: 16px;
+ }
+
+ .Features_title {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+ .Features_cardContainer {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ justify-content: center;
+ }
+
+
+ .Features_card {
+ width: 270px;
+ padding: 48px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #ecae49,
+ }
+
+ .Features_iconWrapper {
+ width: 88px;
+ height: 88px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .Features_icon {
+ width: 88px;
+ height: 88px;
+ }
+
+ .Features_content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ }
+
+ .Features_cardTitle {
+ font-family: DM Sans;
+ font-size: 20px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 24px;
+ margin: 0;
+ }
+
+ .Features_description {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #4b5162;
+ text-align: center;
+ line-height: 160%;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+ .Features_button {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ }
+
+ .block_logo_client {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 800px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 50px;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+ top: 176px;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 3rem;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ width: 1081px;
+ min-height: 202px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 90%;
+ min-height: 134px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 56px;
+ line-height: 120%;
+ /* or 67px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .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. */
+
+
+ height: 48px;
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 80px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ width: 40%;
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .Card_Title_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ min-width: 280px;
+ align-items: center;
+ padding: 20px 0;
+ }
+
+ .Card_Title_block2 {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-align: center;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+
+ .Card_Title_block3 {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 48px;
+ text-align: center;
+ color: #16274f;
+ }
+
+ .ListCard_cardStyle {
+ width: 100%;
+ max-width: 270px;
+ min-height: 304px;
+ display: flex;
+ flex-direction: column;
+ padding: 40px 16px;
+ gap: 24px;
+ background: #ecf1fc1a;
+ border-radius: 12px;
+ border: 1px solid #3e6ee3;
+ box-sizing: border-box;
+ }
+
+ .ListCard_imageContainerStyle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ }
+
+ .ListCard_imageStyle {
+ width: 88px;
+ height: 88px;
+ object-fit: contain;
+ }
+
+ .ListCard_contentStyle {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ }
+
+ .ListCard_titleStyle {
+ font-family: DM Sans, sans-serif;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ text-align: center;
+ }
+
+
+ .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;
+
+ }
+
+ .ListCard_buttonHoverStyle {
+ background: #f5f5f5;
+
+ }
+
+
+ .ButtonText_buttonStyle {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: inherit;
+ min-width: 133px;
+ height: 48px;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ box-sizing: border-box;
+ }
+
+
+
+ .ButtonText_textStyle {
+ color: #4b5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700, ;
+ line-height: '122%';
+ text-align: 'center';
+ }
+
+
+ .WhyUsLayout_block1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 50px;
+ gap: 48px;
+
+ }
+
+ .WhyUsLayout_block2 {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ justify-content: center;
+ }
+
+ .LogoCloud_block1 {
+ display: flex;
+ flex-direction: column;
+ padding: 50px 112px;
+ gap: 40px;
+ background: #FFFFFF;
+ width: 100%;
+ align-items: center;
+
+ margin-top: 5rem;
+ }
+
+ .LogoCloud_h2 {
+ font-family: DM Sans;
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ text-align: center;
+ margin: 0;
+ width: 100%;
+ }
+
+
+ .LogoCloud_cb1 {
+ /* Slider logos */
+
+ height: 72px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ overflow: hidden;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .LogoCloud_cb2 {
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 56px;
+ width: 1206px;
+ height: 72px;
+ left: calc(50% - 1206px/2);
+ top: 0px;
+
+ /* mix-blend-mode: luminosity;*/
+ }
+
+ .LogoCloud_cb2_logo {
+ width: 130px;
+ height: 57.66px;
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .LogoCloud_block2 {
+ width: 1206px;
+ height: 72px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .VisionSection_block1 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 40px;
+ padding: 40px 0 80px;
+ width: 100%;
+ }
+
+ .VisionSection_section_img {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1116px;
+ height: 500px;
+ background-size: cover;
+ background: #d9d9d9;
+ background-image: url("./img/img_a_propos_main.jpg");
+ }
+
+ .VisionSection_content_section {
+ width: 888px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ align-items: center;
+ }
+
+
+ .VisionSection_title {
+ width: 655px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ text-align: center;
+
+ }
+
+
+ .VisionSection_title_span {
+ color: #3E6EE3;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-transform: uppercase;
+ }
+
+ .VisionSection_title_h2 {
+ color: #16274F;
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+
+ .VisionSection_description {
+ color: #4B5162;
+ font-family: Inter;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ opacity: 0.8;
+ text-align: center;
+ margin: 0;
+ }
+
+
+ .VisionSection_buton {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #C7C9CE;
+ background: transparent;
+ color: #4B5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .KeyMetrics_containerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 0;
+ width: 100%;
+ background: linear-gradient(0deg, rgba(196, 200, 238, 0.1), rgba(196, 200, 238, 0.1)), #FFFFFF;
+ }
+
+ .KeyMetrics_headerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 40px;
+
+ }
+
+
+ .KeyMetrics_subtitleStyle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #0aa690;
+ text-transform: uppercase;
+ text-align: center;
+ line-height: 16px;
+
+ }
+
+ .KeyMetrics_titleStyle {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ max-width: 679px;
+ margin: 20px 0 0 0;
+ }
+
+ .KeyMetrics_metricsContainerStyle {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ justify-content: center;
+ max-width: 1116px;
+ width: 100%;
+
+ }
+
+ .KeyMetrics_metricStyle {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 260px;
+ align-items: center;
+
+ }
+
+ .KeyMetrics_valueStyle {
+ font-family: Plus Jakarta Sans;
+ font-size: 50px;
+ font-weight: 700;
+ color: #0aa690;
+ text-align: center;
+ line-height: 70px;
+ margin: 0;
+ }
+
+ .KeyMetrics_descriptionStyle {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #16274f;
+ text-align: center;
+ line-height: 160%;
+ margin: 0;
+ white-space: 'pre-line';
+ }
+
+ .Features_container {
+ padding: 100px 80px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 48px;
+ background: #FFFFFF;
+ }
+
+ .Features_titleContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .Features_subtitle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #ecae49;
+ text-align: center;
+ text-transform: uppercase;
+ line-height: 16px;
+ }
+
+ .Features_title {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+ .Features_cardContainer {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ justify-content: center;
+ }
+
+
+ .Features_card {
+ width: 270px;
+ padding: 48px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #ecae49,
+ }
+
+ .Features_iconWrapper {
+ width: 88px;
+ height: 88px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .Features_icon {
+ width: 88px;
+ height: 88px;
+ }
+
+ .Features_content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ }
+
+ .Features_cardTitle {
+ font-family: DM Sans;
+ font-size: 20px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 24px;
+ margin: 0;
+ }
+
+ .Features_description {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #4b5162;
+ text-align: center;
+ line-height: 160%;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+ .Features_button {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ }
+
+
+
+
+ .block_logo_client {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 800px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 50px;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+ top: 176px;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 3rem;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ width: 1081px;
+ min-height: 202px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 90%;
+ min-height: 134px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 56px;
+ line-height: 120%;
+ /* or 67px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .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. */
+
+
+ height: 48px;
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 80px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ width: 40%;
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .Card_Title_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ min-width: 280px;
+ align-items: center;
+ padding: 20px 0;
+ }
+
+ .Card_Title_block2 {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-align: center;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+
+ .Card_Title_block3 {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 48px;
+ text-align: center;
+ color: #16274f;
+ }
+
+ .ListCard_cardStyle {
+ width: 100%;
+ max-width: 270px;
+ min-height: 304px;
+ display: flex;
+ flex-direction: column;
+ padding: 40px 16px;
+ gap: 24px;
+ background: #ecf1fc1a;
+ border-radius: 12px;
+ border: 1px solid #3e6ee3;
+ box-sizing: border-box;
+ }
+
+ .ListCard_imageContainerStyle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ }
+
+ .ListCard_imageStyle {
+ width: 88px;
+ height: 88px;
+ object-fit: contain;
+ }
+
+ .ListCard_contentStyle {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ }
+
+ .ListCard_titleStyle {
+ font-family: DM Sans, sans-serif;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ text-align: center;
+ }
+
+
+ .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;
+
+ }
+
+ .ListCard_buttonHoverStyle {
+ background: #f5f5f5;
+
+ }
+
+
+ .ButtonText_buttonStyle {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: inherit;
+ min-width: 133px;
+ height: 48px;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ box-sizing: border-box;
+ }
+
+
+
+ .ButtonText_textStyle {
+ color: #4b5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700, ;
+ line-height: '122%';
+ text-align: 'center';
+ }
+
+
+ .WhyUsLayout_block1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 50px;
+ gap: 48px;
+
+ }
+
+ .WhyUsLayout_block2 {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ justify-content: center;
+ }
+
+ .LogoCloud_block1 {
+ display: flex;
+ flex-direction: column;
+ padding: 50px 112px;
+ gap: 40px;
+ background: #FFFFFF;
+ width: 100%;
+ align-items: center;
+
+ margin-top: 5rem;
+ }
+
+ .LogoCloud_h2 {
+ font-family: DM Sans;
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ text-align: center;
+ margin: 0;
+ width: 100%;
+ }
+
+
+ .LogoCloud_cb1 {
+ /* Slider logos */
+
+ width: 1206px;
+ height: 72px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ overflow: hidden;
+
+ }
+
+ .LogoCloud_cb2 {
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 56px;
+ width: 1206px;
+ height: 72px;
+ left: calc(50% - 1206px/2);
+ top: 0px;
+
+ /* mix-blend-mode: luminosity;*/
+ }
+
+ .LogoCloud_cb2_logo {
+ width: 162.16px;
+ height: 57.66px;
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .LogoCloud_block2 {
+ width: 1206px;
+ height: 72px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .VisionSection_block1 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 40px;
+ padding: 40px 0 80px;
+ width: 100%;
+ }
+
+ .VisionSection_section_img {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1116px;
+ height: 500px;
+ background-size: cover;
+ background: #d9d9d9;
+ background-image: url("./img/img_a_propos_main.jpg");
+ }
+
+ .VisionSection_content_section {
+ width: 888px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ align-items: center;
+ }
+
+
+ .VisionSection_title {
+ width: 655px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ text-align: center;
+
+ }
+
+
+ .VisionSection_title_span {
+ color: #3E6EE3;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 16px;
+ text-transform: uppercase;
+ }
+
+ .VisionSection_title_h2 {
+ color: #16274F;
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+
+ .VisionSection_description {
+ color: #4B5162;
+ font-family: Inter;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ opacity: 0.8;
+ text-align: center;
+ margin: 0;
+ }
+
+
+ .VisionSection_buton {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #C7C9CE;
+ background: transparent;
+ color: #4B5162;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .KeyMetrics_containerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 0;
+ width: 100%;
+ background: linear-gradient(0deg, rgba(196, 200, 238, 0.1), rgba(196, 200, 238, 0.1)), #FFFFFF;
+ }
+
+ .KeyMetrics_headerStyle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 40px;
+
+ }
+
+
+ .KeyMetrics_subtitleStyle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #0aa690;
+ text-transform: uppercase;
+ text-align: center;
+ line-height: 16px;
+
+ }
+
+ .KeyMetrics_titleStyle {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ max-width: 679px;
+ margin: 20px 0 0 0;
+ }
+
+ .KeyMetrics_metricsContainerStyle {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ justify-content: center;
+ max-width: 1116px;
+ width: 100%;
+
+ }
+
+ .KeyMetrics_metricStyle {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 260px;
+ align-items: center;
+
+ }
+
+ .KeyMetrics_valueStyle {
+ font-family: Plus Jakarta Sans;
+ font-size: 60px;
+ font-weight: 700;
+ color: #0aa690;
+ text-align: center;
+ line-height: 70px;
+ margin: 0;
+ }
+
+ .KeyMetrics_descriptionStyle {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #16274f;
+ text-align: center;
+ line-height: 160%;
+ margin: 0;
+ white-space: 'pre-line';
+ }
+
+ .Features_container {
+ padding: 100px 80px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 48px;
+ background: #FFFFFF;
+ }
+
+ .Features_titleContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .Features_subtitle {
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #ecae49;
+ text-align: center;
+ text-transform: uppercase;
+ line-height: 16px;
+ }
+
+ .Features_title {
+ font-family: DM Sans;
+ font-size: 40px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 120%;
+ margin: 20px 0 0 0;
+ }
+
+ .Features_cardContainer {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ justify-content: center;
+ }
+
+
+ .Features_card {
+ width: 270px;
+ padding: 48px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #ecae49,
+ }
+
+ .Features_iconWrapper {
+ width: 88px;
+ height: 88px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .Features_icon {
+ width: 88px;
+ height: 88px;
+ }
+
+ .Features_content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ }
+
+ .Features_cardTitle {
+ font-family: DM Sans;
+ font-size: 20px;
+ font-weight: 700;
+ color: #16274f;
+ text-align: center;
+ line-height: 24px;
+ margin: 0;
+ }
+
+ .Features_description {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ color: #4b5162;
+ text-align: center;
+ line-height: 160%;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+ .Features_button {
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ font-family: DM Sans;
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ }
+
+
+
+ }
+
+
+ /* End media */
+}
\ No newline at end of file
diff --git a/src/components/homepage_automatic_files/new_homepage.js b/src/components/homepage_automatic_files/new_homepage.js
new file mode 100644
index 0000000..e2b8583
--- /dev/null
+++ b/src/components/homepage_automatic_files/new_homepage.js
@@ -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 (
+
+
+
+
+
+
+
+ L'Offre Tout-en-Un pour gérer votre Organisme de formation
+
+
+
+ Toutes les fonctionnalités dont vous avez besoin, au meilleur prix 🇫🇷
+
+
+
+
+
+
+
+
+
+
{
+ 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'
+ );
+ }}>
+ Réserver une démo
+
+
+
{
+
+ window.open(
+ "/new_contact/",
+ '_self'
+ );
+ }}>
+ Nous contacter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+
+export default New_C_A_Propos_2025;
\ No newline at end of file
diff --git a/src/pages/new_p_test_header_footer_2025.js b/src/pages/new_p_test_header_footer_2025.js
index 95feb8d..9d3a2d7 100644
--- a/src/pages/new_p_test_header_footer_2025.js
+++ b/src/pages/new_p_test_header_footer_2025.js
@@ -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_Homepage_2025 from "../components/homepage_automatic_files/new_homepage";
+
const new_p_test_header_footer_2025 = () => {
@@ -20,7 +22,7 @@ const new_p_test_header_footer_2025 = () => {
-
+