Add marketing landing page content and styles

app/assets/stylesheets/marketing_redesign/app.css

@@ -19,9 +19,12 @@
 /* Components */
 /* Import components from the component folder here in ABC order */
 /* For example: @import "marketing_redesign/components/_card.css" */
+@import "marketing_redesign/components/_benefits.css";
+@import "marketing_redesign/components/_outcomes.css";
 @import "marketing_redesign/components/_section.css";
 @import "marketing_redesign/components/_footer.css";
 @import "marketing_redesign/components/_header.css";
+@import "marketing_redesign/components/_testimonial.css";
 
 /* Utilities */
 @import "marketing_redesign/utilities/_hide-visually.css";

app/assets/stylesheets/marketing_redesign/base/_buttons.css

@@ -1,7 +1,7 @@
 .button {
   align-items: center;
   border: var(--border-width--base) solid transparent;
-  border-radius: var(--border-radius--base);
+  border-radius: var(--border-radius--small);
   cursor: pointer;
   display: flex;
   font-size: var(--font-size--ui);

app/assets/stylesheets/marketing_redesign/base/_layout.css

@@ -1,8 +1,9 @@
 body {
   background-color: var(--color--background-base);
+  padding: 0 var(--space--large);
 }
 
 main {
-  max-width: var(--container--base);
   margin: auto;
+  max-width: var(--container--base);
 }

app/assets/stylesheets/marketing_redesign/base/_typography.css

@@ -13,6 +13,7 @@ body {
 
 :where(h1, h2, h3, h4, strong) {
   font-weight: var(--font-weight--extrabold);
+  letter-spacing: -0.05rem;
 }
 
 :where(h1, h2, h3, h4) {
@@ -42,29 +43,28 @@ h4 {
 }
 
 p {
-  margin: var(--space--small) 0 var(--space--xx-small);
   font-size: var(--font-size--body);
+  margin: var(--space--small) 0 var(--space--xx-small);
 }
 
-p.text-xl {
+:is(p, q).text-xl {
   font-size: var(--font-size--500);
   margin: var(--space--base) 0 var(--space--small);
-  font-weight: var(--font-weight--bold);
 }
 
-p.text-lg {
+:is(p, q).text-lg {
   font-size: var(--font-size--subheader);
   margin: var(--space--small) 0 var(--space--xx-small);
-  font-weight: var(--font-weight--bold);
 }
 
-p.text-sm {
+:is(p, q).text-sm {
   font-size: var(--font-size--small);
   margin: var(--space--xx-small) 0 0;
 }
 
 a {
   color: var(--color--link);
+
   transition: var(--transition-duration--base) color
     var(--transition-timing--base);
 

app/assets/stylesheets/marketing_redesign/base/_variables.css

@@ -101,8 +101,8 @@
   --line-height--tight: 1.2;
 
   /* Border */
-  --border-radius--small: 0.25rem;
-  --border-radius--base: 0.5rem;
+  --border-radius--small: 0.5rem;
+  --border-radius--base: 1rem;
   --border-radius--large: 1.5rem;
   --border-radius--pill: 4rem;
   --border-radius--circle: 100%;
@@ -118,6 +118,7 @@
   /* Layout & Misc */
 
   --container--base: 50rem;
+  --container--medium: 72rem;
   --container--large: 85rem;
 
   --space--xx-small: 0.25rem;

app/assets/stylesheets/marketing_redesign/components/_benefits.css

@@ -0,0 +1,18 @@
+.benefit-item {
+  align-items: center;
+  background-color: var(--color--white-500);
+  border-radius: var(--border-radius--large);
+  display: flex;
+  gap: var(--space--medium);
+  max-width: var(--container--base);
+  padding: var(--space--medium);
+  width: 100%;
+
+  svg {
+    color: var(--color--primary-base);
+  }
+
+  :is(h4, p) {
+    margin: 0;
+  }
+}

app/assets/stylesheets/marketing_redesign/components/_outcomes.css

@@ -0,0 +1,34 @@
+.outcome-container {
+  align-items: stretch;
+  background-color: var(--color--background-dark);
+  border-radius: var(--border-radius--base);
+  display: flex;
+  flex-direction: row;
+  gap: var(--space--medium);
+  overflow-x: auto;
+  padding: var(--space--x-large);
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.outcome-item {
+  background-color: var(--color--white-500);
+  border-radius: var(--border-radius--base);
+  flex-shrink: 0;
+  gap: var(--space--x-small);
+  max-width: 22.5rem;
+  padding: var(--space--large);
+  scroll-snap-align: center;
+  width: 90%;
+
+  h4 {
+    line-height: 1.2;
+    margin: 0;
+  }
+}
+
+@media (min-width: 998px) {
+  .outcome-item {
+    flex-shrink: 1;
+  }
+}

app/assets/stylesheets/marketing_redesign/components/_section.css

@@ -1,10 +1,9 @@
-section.section {
+:where(.section) {
   align-items: center;
-  align-self: stretch;
   display: grid;
-  flex-direction: column;
   gap: var(--space--base);
   grid-template-columns: repeat(12, [col-start] 1fr);
+  justify-content: center;
   padding: var(--space--large) 0;
 }
 
@@ -13,17 +12,28 @@ section.section {
   font-weight: var(--font-weight--bold);
 }
 
-.full {
-  grid-column: col-start / span 12;
+.section > .full {
+  grid-column: col-start 1 / span 12;
+}
+
+:where(.section-header) {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+  line-height: 1.2;
+  max-width: var(--container--medium);
+  text-align: center;
 }
 
-.section-header {
+:where(.section-content) {
   align-items: center;
   display: flex;
   flex-direction: column;
+  gap: var(--space--medium);
 }
 
-.section-subheader {
+.section-subtitle {
   font-size: var(--font-size--subheader);
 }
 

app/assets/stylesheets/marketing_redesign/components/_testimonial.css

@@ -0,0 +1,83 @@
+.testimonial {
+  gap: var(--space--medium) var(--space--base);
+}
+
+.quote-container {
+  display: grid;
+  grid-template-columns: subgrid;
+  background-color: var(--color--background-dark);
+  padding: var(--space--small) var(--space--large);
+  border-radius: var(--border-radius--base);
+}
+
+.quote {
+  grid-column: span 12;
+  order: 0;
+  text-indent: -0.65rem;
+}
+
+.author {
+  align-items: center;
+  background-color: var(--color--background-dark);
+  border-radius: var(--border-radius--base);
+  display: flex;
+  gap: var(--space--base);
+  grid-column: span 12;
+  margin: auto;
+  max-width: 26rem;
+  order: 1;
+  padding: var(--space--large) 0;
+
+  p {
+    margin: 0;
+  }
+}
+
+.author-avatar {
+  aspect-ratio: 1;
+  background-color: var(--color--accent-base);
+  border-radius: var(--border-radius--base);
+  overflow: hidden;
+  width: 4.5rem;
+}
+
+.logo-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--space--base);
+  justify-content: center;
+}
+
+.logo {
+  opacity: 0.8;
+  scale: 0.7;
+  width: min-content;
+}
+
+@media (min-width: 998px) {
+  .quote-container {
+    background: none;
+  }
+
+  .quote {
+    grid-column: span 7;
+    order: 1;
+  }
+
+  .author {
+    grid-column: span 5;
+    margin-inline-end: var(--space--large);
+    order: 0;
+    padding: var(--space--large);
+  }
+
+  .logo-container {
+    justify-content: space-between;
+    padding: var(--space--x-large);
+  }
+
+  .logo {
+    scale: 1;
+  }
+}

app/views/layouts/marketing_redesign.html.erb

@@ -11,7 +11,7 @@
     <%= stylesheet_link_tag :marketing_redesign, media: "all" %>
     <%= javascript_include_tag "marketing_redesign" %>
     <%= favicon_link_tag "favicon.ico" %>
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <%= stylesheet_link_tag "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap", media: "all" %>
     <% if content_for?(:link_canonical) %>
       <%= content_for(:link_canonical) %>