Update home view

socreatory · Nov 24, 2023 · 5c81c96 · 5c81c96
1 parent 56b6c64
commit 5c81c96
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 151 deletions.
diff --git a/lib/assets/stylesheets/application.scss b/lib/assets/stylesheets/application.scss
@@ -47,6 +47,7 @@ Application specific code
 @import "../../components/rating/rating";
 @import "../../components/table/table";
 @import "../../components/status/status";
+@import "../../components/stripe/stripe";
 @import "../../components/teaser/teaser";
 @import "../../components/text/text";
 

diff --git a/lib/blueprints/container-layouts/container/_container.scss b/lib/blueprints/container-layouts/container/_container.scss
@@ -1,6 +1,7 @@
 .container,
 %container {
   @include for-tablet-landscape-up {
+    align-items: baseline;
     padding: 0 $spacer-base;
   }
 
@@ -34,6 +35,41 @@
   align-items: center;
 }
 
+// Vertical Spacing
+.container-vertical-spacing-2xl,
+%container-vertical-spacing-2xl {
+  @include for-tablet-landscape-up {
+    padding-top: $spacer-2xl;
+    padding-bottom: $spacer-2xl;
+  }
+
+  padding-top: $spacer-xl;
+  padding-bottom: $spacer-xl;
+}
+
+.container-vertical-spacing-xl,
+%container-vertical-spacing-xl {
+  @include for-tablet-landscape-up {
+    padding-top: $spacer-xl;
+    padding-bottom: $spacer-xl;
+  }
+
+  padding-top: $spacer-lg;
+  padding-bottom: $spacer-lg;
+}
+
+.container-vertical-spacing-lg,
+%container-vertical-spacing-lg {
+  @include for-tablet-landscape-up {
+    padding-top: $spacer-lg;
+    padding-bottom: $spacer-lg;
+  }
+
+  padding-top: $spacer-base;
+  padding-bottom: $spacer-base;
+}
+
+// Deprecated Class TODO Replace everywhere
 .container__fullwidth {
   @include for-tablet-landscape-up {
     padding: 0 $spacer-base;

diff --git a/lib/components/buttons/_buttons.scss b/lib/components/buttons/_buttons.scss
@@ -47,7 +47,7 @@
   &:hover,
   &:focus {
     color: $brand-text;
-    background-color: $brand-primary-light;
+    background-color: $brand-primary;
   }
 }
 
@@ -58,7 +58,7 @@
 
   &:hover,
   &:focus {
-    background-color: $brand-secondary-light;
+    background-color: $brand-secondary;
   }
 }
 

diff --git a/lib/components/hero/_hero.scss b/lib/components/hero/_hero.scss
@@ -1,8 +1,8 @@
 .hero {
   @include for-tablet-landscape-up {
-    grid-template-columns: 1fr 1fr;
-    gap: $spacer-xl;
-    padding: $spacer-xl $spacer-base $spacer-xl $spacer-base;
+    grid-template-columns: 1.3fr 1fr;
+    gap: $spacer-sm;
+    padding: $spacer-2xl $spacer-base 0 $spacer-base;
   }
 
   display: grid;
@@ -11,7 +11,7 @@
   width: 100%;
   max-width: $desktop-xl;
   margin: 0 auto;
-  padding: $spacer-lg $spacer-xs $spacer-lg $spacer-xs;
+  padding: $spacer-lg $spacer-xs 0 $spacer-xs;
 }
 
 .hero_grid-wrapper {
@@ -50,15 +50,16 @@
 .hero__image {
   @include for-tablet-landscape-up {
     display: block;
-    align-self: flex-start;
-    width: 70%;
+    align-self: flex-end;
+    width: 75%;
   }
 
   display: none;
 }
 
 .hero__logos {
   @include for-tablet-landscape-up {
+    align-self: flex-end;
     margin-top: $spacer-md;
   }
 

diff --git a/lib/components/stripe/_stripe.scss b/lib/components/stripe/_stripe.scss
@@ -0,0 +1,28 @@
+.stripe {
+  overflow: hidden;
+  width: 100%;
+}
+
+.stripe--primary {
+  background-color: $brand-primary;
+}
+
+.stripe--primary-light {
+  background-color: $brand-primary-light;
+}
+
+.stripe--secondary {
+  background-color: $brand-secondary;
+}
+
+.stripe--secondary-light {
+  background-color: $brand-secondary-light;
+}
+
+.stripe--white-1 {
+  background-color: $brand-white-1;
+}
+
+.stripe--black {
+  background-color: $brand-gray;
+}