fix(app-home): minor tweaks per design request

Author: PaulPaulDevelops

src/pages/app-home/app-home.scss

@@ -2,10 +2,14 @@
   font-family: 'Muli', sans-serif;
   width: auto;
 
+  @include media-breakpoint-down(sm) {
+    overflow-x: hidden;
+  }
+
   .hero {
     background-color: white;
     height: auto;
-    margin-top: 75px;
+    margin-top: 115px;
 
     .svg-header-desktop {
       display: initial;
@@ -60,15 +64,14 @@
       font-weight: 600;
       font-style: normal;
       font-stretch: normal;
-      height: 60px;
       line-height: normal;
       letter-spacing: 1.5px;
       text-align: center;
       text-transform: uppercase;
 
       @include media-breakpoint-down(sm) {
         height: 0;
-        margin-top: 20px;
+        margin-bottom: 50px;
       }
     }
   }
@@ -134,7 +137,7 @@
       align-items: center;
       background-color: $gray-100;
       display: flex;
-      height: 65vh;
+      height: 75vh;
       justify-content: center;
 
       .panel-inner-text {
@@ -151,6 +154,10 @@
           font-size: 42px;
           font-weight: bold;
           line-height: 1.19;
+
+          @include media-breakpoint-down(sm) {
+            font-size: 30px;
+          }
         }
 
         h3 {
@@ -165,6 +172,10 @@
           line-height: 1.78;
         }
       }
+
+      @include media-breakpoint-down(sm) {
+        height: 95vh;
+      }
     }
 
     .content-panel-image {
@@ -190,6 +201,10 @@
           margin-left: auto;
           margin-right: auto;
         }
+
+        @include media-breakpoint-down(xs) {
+          display: none;
+        }
       }
 
       .behind-right {
@@ -203,6 +218,10 @@
           margin-left: auto;
           margin-right: auto;
         }
+
+        @include media-breakpoint-down(xs) {
+          display: none;
+        }
       }
 
       .front-center {
@@ -213,6 +232,10 @@
         margin-left: auto;
         margin-right: auto;
         z-index: 1;
+
+        @include media-breakpoint-down(xs) {
+          position: relative;
+        }
       }
 
       .store-buttons {

src/pages/app-home/app-home.tsx

@@ -123,16 +123,16 @@ export class AppHome {
         <header class="hero">
           <div class="container">
             <div class="row align-items-center">
-              <div class="hero-content col-12">
-              <object data="/assets/svg/home-graphic-header.svg" class="svg-header-desktop" aria-label="header" />
-              <object data="/assets/svg/home-graphic-header-mobile.svg" class="svg-header-mobile" aria-label="header" />
-              <h1>
-                <app-translate key="home.hero.title" />
-              </h1>
-              <h2>
-                <app-translate key="home.hero.subTitle" />
-              </h2>
-              </div>
+              <div class="col-12 flex-column">
+                <h1>
+                  <app-translate key="home.hero.title" />
+                </h1>
+                <h2>
+                  <app-translate key="home.hero.subTitle" />
+                </h2>
+                <object data="/assets/svg/home-graphic-header.svg" class="svg-header-desktop" aria-label="header" />
+                <object data="/assets/svg/home-graphic-header-mobile.svg" class="svg-header-mobile" aria-label="header" />
+                </div>
             </div>
           </div>
         </header>