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 ( + + ); +}; + +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}

+
+
+ ))} +
+ + +
+
+ ); +}; + +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} +
+
+

{title}

+
+ +
+
+
+ ); +}; + +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) => ( +
+ {value.title} +
+ ))} + + +
+ +
+ + +
+ + {/*
+ Partner Logos +
*/} +
+ +
+ ); +}; + +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 */} + +
+
+ ); +}; + +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 ( +
+
+
+ +
+
+ +
+ Background + +
+
+
+
+ + ); +}; + +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} +

+
+ +
+
+ ); +}; + +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' + ); + }}> + +
+ +
{ + + window.open( + "/new_contact/", + '_self' + ); + }}> + +
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + +
+ ) + +} + + +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 = () => { - +