From 6f6d4ebf6539a83fce29d300a3383c7afd723ee3 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Tue, 7 May 2024 18:27:38 +0200
Subject: [PATCH] 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
---
 .../src/components/Homepage/Email.tsx         |  4 +-
 .../components/Homepage/EmailOrProconnect.tsx |  4 +-
 .../src/components/HomepageContent.tsx        |  8 ++--
 packages/integration/src/i18n/fr.json         |  2 +-
 packages/integration/src/styles/homepage.css  | 40 +++++++++++++++----
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/integration/src/components/Homepage/Email.tsx b/packages/integration/src/components/Homepage/Email.tsx
index 9d5e7bb..96631a8 100644
--- a/packages/integration/src/components/Homepage/Email.tsx
+++ b/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} />
diff --git a/packages/integration/src/components/Homepage/EmailOrProconnect.tsx b/packages/integration/src/components/Homepage/EmailOrProconnect.tsx
index d50d294..946982a 100644
--- a/packages/integration/src/components/Homepage/EmailOrProconnect.tsx
+++ b/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} />
 
diff --git a/packages/integration/src/components/HomepageContent.tsx b/packages/integration/src/components/HomepageContent.tsx
index a9de7eb..1fb55e6 100644
--- a/packages/integration/src/components/HomepageContent.tsx
+++ b/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>
diff --git a/packages/integration/src/i18n/fr.json b/packages/integration/src/i18n/fr.json
index 40b0d03..c78de58 100644
--- a/packages/integration/src/i18n/fr.json
+++ b/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": {
diff --git a/packages/integration/src/styles/homepage.css b/packages/integration/src/styles/homepage.css
index 28e36a8..e30395c 100644
--- a/packages/integration/src/styles/homepage.css
+++ b/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;
   }