integration/homepage: better styling on homepagecontent:

- the tagline now has a wrapper in case we want to add other content
inside the white box
- we ditch the 50/50 column logic so that the tagline takes the space it
needs

packages/integration/src/components/Homepage/Email.tsx

@@ -6,7 +6,9 @@ export const Email = (emailFormProps: Props) => {
   const { t } = useTranslate()
   return (
     <>
-      <h2 className="fr-h4 fr-mb-8w lasuite-text-center">{t("email.title")}</h2>
+      <h2 className="fr-h4 fr-mb-8w lasuite-text-center">
+        {t("email.title", { linebreak: <br role="presentation" className="fr-hidden-sm" /> })}
+      </h2>
 
       <div className="lasuite-input-width">
         <EmailForm {...emailFormProps} />

packages/integration/src/components/Homepage/EmailOrProconnect.tsx

@@ -12,7 +12,9 @@ export const EmailOrProconnect = ({ proconnectUrl, emailForm = {} }: Props) => {
 
   return (
     <>
-      <h2 className="fr-h4 fr-mb-4w fr-mb-md-8w lasuite-text-center">{t("email.title")}</h2>
+      <h2 className="fr-h4 fr-mb-4w fr-mb-md-8w lasuite-text-center">
+        {t("email.title", { linebreak: <br role="presentation" className="fr-hidden-sm" /> })}
+      </h2>
       <div className="lasuite-input-width">
         <EmailForm {...emailForm} />
 

packages/integration/src/components/HomepageContent.tsx

@@ -69,10 +69,12 @@ export const HomepageContent = ({ tagline, lasuiteApiUrl, serviceId, children }:
         <div className="lasuite-homepage__content fr-pt-8w fr-pb-6w lasuite-py-lg-16w">
           <div className="fr-container--fluid">
             <div className="fr-grid-row">
-              <div className="fr-col-12 fr-col-xl-6 fr-mb-4w">
-                <h1 className="lasuite-homepage__tagline">{parsedTagline}</h1>
+              <div className="lasuite-homepage__main-col fr-mb-4w">
+                <div className="lasuite-homepage__tagline-container fr-mt-md-4w">
+                  <h1 className="lasuite-homepage__tagline">{parsedTagline}</h1>
+                </div>
               </div>
-              <div className="fr-mt-8w fr-mb-4w lasuite-mt-lg-0 fr-col-12 fr-col-xl-6 lasuite-homepage__form-container">
+              <div className="lasuite-homepage__secondary-col fr-mx-auto fr-ml-md-auto fr-mr-md-3w fr-mt-8w fr-mb-4w lasuite-mt-lg-0 lasuite-homepage__form-container">
                 <div className="lasuite-homepage__form">
                   <div className="lasuite-homepage__form-inner">{children}</div>
                 </div>

packages/integration/src/i18n/fr.json

@@ -3,7 +3,7 @@
     "placeholder": "Entrez votre adresse e-mail",
     "srLabel": "Adresse e-mail",
     "submit": "Suivant",
-    "title": "Connexion avec votre adresse e-mail"
+    "title": "Connexion avec {linebreak}votre adresse e-mail"
   },
   "footer": {
     "homepageLinkTitle": {

packages/integration/src/styles/homepage.css

@@ -25,6 +25,7 @@
 
 .lasuite-text-center {
   text-align: center;
+  text-wrap: balance;
 }
 
 .lasuite-header__brand {
@@ -108,14 +109,22 @@
   z-index: 2;
 }
 
+.lasuite-homepage__tagline-container {
+  background-color: white;
+  color: var(--lasuite-primary);
+  padding: 1rem 1.5rem;
+}
+
 .lasuite-homepage__tagline {
   margin: 0;
   font-weight: 400;
-  background-color: white;
-  color: var(--lasuite-primary);
+  color: inherit;
   margin-bottom: 1rem;
   font-size: 1.375rem;
-  padding: 1rem 1.5rem;
+}
+
+.lasuite-homepage__tagline:only-child {
+  margin-bottom: 0;
 }
 
 .lasuite-homepage__tagline-strong {
@@ -123,14 +132,18 @@
 }
 
 @media screen and (min-width: 36em) {
-  .lasuite-homepage__tagline {
+  .lasuite-homepage__tagline-container {
     width: fit-content;
   }
 }
 
 @media screen and (min-width: 48em) {
+  .lasuite-homepage__tagline-container {
+    padding: 1rem 2rem;
+    padding-left: 4rem;
+  }
+
   .lasuite-homepage__tagline {
-    padding: 2rem;
     font-size: 1.875rem;
   }
   .lasuite-homepage__tagline br {
@@ -138,8 +151,21 @@
   }
 }
 
-.lasuite-homepage__form-container {
+@media screen and (min-width: 90em) {
+  .lasuite-homepage__tagline-container {
+    padding-left: 8rem;
+  }
+}
+
+.lasuite-homepage__secondary-col {
   display: flex;
+  width: 100%;
+}
+
+@media screen and (min-width: 36em) {
+  .lasuite-homepage__secondary-col {
+    width: auto;
+  }
 }
 
 .lasuite-homepage__form {
@@ -151,13 +177,11 @@
   margin: auto;
   max-width: 33rem;
   padding: 4rem 1.5rem 3rem;
-  /* fr-px-4w fr-pt-8w fr-pb-6w fr-px-md-6w */
 }
 
 @media screen and (min-width: 48em) {
   .lasuite-homepage__form-inner {
     margin-left: auto;
-    margin-right: 1.5rem;
     padding-left: 3rem;
     padding-right: 3rem;
   }