From 1385839f009eb3467f7dcdf5d634e0274a8044be Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Tue, 7 May 2024 18:45:32 +0200
Subject: [PATCH] integration/homepage: use less spacing utility classes for
 clarity

utility classes are great but since these are meant to be reused easily
by copy/pasting the code I feel like having less clutter in the
classnames is better
---
 .../src/components/HomepageContent.tsx        | 12 +++---
 packages/integration/src/styles/homepage.css  | 43 +++++++++++++------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/packages/integration/src/components/HomepageContent.tsx b/packages/integration/src/components/HomepageContent.tsx
index b740c5d..6169cf1 100644
--- a/packages/integration/src/components/HomepageContent.tsx
+++ b/packages/integration/src/components/HomepageContent.tsx
@@ -66,17 +66,17 @@ export const HomepageContent = ({ tagline, lasuiteApiUrl, serviceId, children }:
   return (
     <div className="lasuite-homepage__wrapper">
       <div className="fr-container fr-p-0 lasuite-container">
-        <div className="lasuite-homepage__content fr-pt-8w fr-pb-6w lasuite-py-lg-16w">
+        <div className="lasuite-homepage__content">
           <div className="fr-container--fluid">
             <div className="fr-grid-row">
-              <div className="lasuite-homepage__main-col fr-mb-4w">
-                <div className="lasuite-homepage__tagline-container fr-mt-md-4w">
+              <div className="lasuite-homepage__main-col">
+                <div className="lasuite-homepage__tagline-container">
                   <h1 className="lasuite-homepage__tagline">{parsedTagline}</h1>
                 </div>
               </div>
-              <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 className="lasuite-homepage__secondary-col">
+                <div className="lasuite-homepage__form-container">
+                  <div className="lasuite-homepage__form">{children}</div>
                 </div>
               </div>
             </div>
diff --git a/packages/integration/src/styles/homepage.css b/packages/integration/src/styles/homepage.css
index e30395c..17d938a 100644
--- a/packages/integration/src/styles/homepage.css
+++ b/packages/integration/src/styles/homepage.css
@@ -107,6 +107,19 @@
 .lasuite-homepage__content {
   position: relative;
   z-index: 2;
+  padding-top: 4rem;
+  padding-bottom: 3rem;
+}
+
+@media screen and (min-width: 36em) {
+  .lasuite-homepage__content {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+}
+
+.lasuite-homepage__main-col {
+  margin-bottom: 2rem;
 }
 
 .lasuite-homepage__tagline-container {
@@ -141,6 +154,7 @@
   .lasuite-homepage__tagline-container {
     padding: 1rem 2rem;
     padding-left: 4rem;
+    margin-top: 2rem;
   }
 
   .lasuite-homepage__tagline {
@@ -160,6 +174,7 @@
 .lasuite-homepage__secondary-col {
   display: flex;
   width: 100%;
+  margin: 4rem auto 2rem;
 }
 
 @media screen and (min-width: 36em) {
@@ -168,11 +183,23 @@
   }
 }
 
-.lasuite-homepage__form {
+@media screen and (min-width: 48em) {
+  .lasuite-homepage__secondary-col {
+    margin-left: auto;
+    margin-right: 1.5rem;
+  }
+}
+@media screen and (min-width: 62em) {
+  .lasuite-homepage__secondary-col {
+    margin-top: 0 !important;
+  }
+}
+
+.lasuite-homepage__form-container {
   width: 100%;
 }
 
-.lasuite-homepage__form-inner {
+.lasuite-homepage__form {
   background: white;
   margin: auto;
   max-width: 33rem;
@@ -180,7 +207,7 @@
 }
 
 @media screen and (min-width: 48em) {
-  .lasuite-homepage__form-inner {
+  .lasuite-homepage__form {
     margin-left: auto;
     padding-left: 3rem;
     padding-right: 3rem;
@@ -279,13 +306,3 @@
 .lasuite-link:not(:hover) {
   background-image: none;
 }
-
-@media screen and (min-width: 62em) {
-  .lasuite-py-lg-16w {
-    padding-top: 8rem !important;
-    padding-bottom: 8rem !important;
-  }
-  .lasuite-mt-lg-0 {
-    margin-top: 0 !important;
-  }
-}