From 7d578f92826f4f933978bba25505d18aaf618887 Mon Sep 17 00:00:00 2001
From: Nazareno Oviedo <nazareno@basement.studio>
Date: Mon, 4 Apr 2022 16:24:01 -0300
Subject: [PATCH] feat: refine UI

---
 src/components/common/footer/footer.module.scss             | 6 +++++-
 src/components/common/footer/index.tsx                      | 2 +-
 .../sections/homepage/benefits/benefits.module.scss         | 6 ++++--
 src/components/sections/homepage/hero/hero.module.scss      | 4 ++++
 .../sections/homepage/latest-news/latest-news.module.scss   | 2 +-
 .../homepage/what-others-say/what-others-say.module.scss    | 2 +-
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index f36307a..9887fb0 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -117,11 +117,15 @@
 
 .line {
   position: absolute;
-  left: 50%;
   top: 0;
+  left: calc(50% - (tovw(3px, 'default', 2px) / 2));
   width: tovw(3px, 'default', 2px);
   height: tovw(276px, 'default', 270px);
   margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
+
+  @media screen and (max-width: 800px) {
+    display: none;
+  }
 }
 
 .footer {
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 4da7954..d8d9f3a 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -40,7 +40,7 @@ export const Footer = () => {
             centered
             style={{ textTransform: 'capitalize' }}
           >
-            Sign-up to our newsletter to stay in touch with <br /> the latest.
+            Sign-up to our <br /> Newsletter
           </Heading>
           <form action="">
             <input
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index a074e48..389cb87 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -2,8 +2,8 @@
 
 .section {
   position: relative;
-  padding-top: tovw(280px, 'default', 80px);
-  padding-bottom: tovw(246px, 'default', 200px);
+  padding-top: tovw(170px, 'default', 122px);
+  padding-bottom: tovw(100px, 'default', 90px);
 
   .grid {
     display: grid;
@@ -31,6 +31,8 @@
   }
 
   @media screen and (max-width: 800px) {
+    padding-bottom: tovw(135px, 'mobile');
+
     .grid {
       display: flex;
 
diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss
index bb65e1b..72e90a4 100644
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@@ -92,6 +92,10 @@
       grid-template-columns: 1fr;
     }
 
+    @media screen and (max-width: 480px) {
+      bottom: 0;
+    }
+
     ul {
       margin: 0;
       padding: 0;
diff --git a/src/components/sections/homepage/latest-news/latest-news.module.scss b/src/components/sections/homepage/latest-news/latest-news.module.scss
index 35cfd3a..329013e 100644
--- a/src/components/sections/homepage/latest-news/latest-news.module.scss
+++ b/src/components/sections/homepage/latest-news/latest-news.module.scss
@@ -5,7 +5,7 @@
   align-items: center;
   flex-direction: column;
   margin-top: tovw(55px, 'default', 20px);
-  padding: tovw(220px, 'default', 72px) 0;
+  padding: 0 0 tovw(185px, 'default', 90px) 0;
 
   .slider__container {
     width: calc(100% - tovw(205px, 'default', 16px));
diff --git a/src/components/sections/homepage/what-others-say/what-others-say.module.scss b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
index f162aa9..95a8161 100644
--- a/src/components/sections/homepage/what-others-say/what-others-say.module.scss
+++ b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
@@ -3,7 +3,7 @@
 .section {
   position: relative;
   margin-top: tovw(24px, 'default', 16px);
-  padding: tovw(104px, 'default', 72px) 0;
+  padding: tovw(104px, 'default', 72px) 0 0 0;
 }
 
 .header {