Improve homepage hero layout, copy and visuals

src/assets/css/app.scss

@@ -14,6 +14,7 @@
 @use "components/mobile-menu";
 @use "components/logo-list";
 @use "components/color-hero";
+@use "components/home-hero";
 @use "components/social";
 @use "components/footer";
 @use "components/footer-menu";

src/assets/css/components/_home-hero.scss

@@ -0,0 +1,156 @@
+@use "../base/breakpoints" as *;
+
+@property --hero-glow-x {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 30%;
+}
+
+@property --hero-glow-y {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 40%;
+}
+
+@keyframes hero-glow {
+  from {
+    --hero-glow-x: 30%;
+    --hero-glow-y: 40%;
+  }
+
+  to {
+    --hero-glow-x: 35%;
+    --hero-glow-y: 45%;
+  }
+}
+
+.home-hero {
+  position: relative;
+  overflow: clip;
+  display: flex;
+  flex-direction: column;
+  min-height: 90vh;
+  background-color: var(--color-purple);
+  color: var(--color-white);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    animation: hero-glow 10s ease-in-out infinite alternate;
+    background: radial-gradient(
+        1200px circle at var(--hero-glow-x) var(--hero-glow-y),
+        rgba(255, 255, 255, 0.12),
+        transparent 60%
+      ),
+      radial-gradient(
+        ellipse at center,
+        rgba(0, 0, 0, 0.1) 40%,
+        rgba(40, 0, 90, 0.35) 80%,
+        rgba(20, 0, 60, 0.65) 100%
+      );
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    padding: 10rem 0 4rem;
+  }
+
+  &__grid {
+    display: grid;
+    gap: 3rem;
+    align-items: center;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    order: 2;
+  }
+
+  &__eyebrow {
+    margin-bottom: 1rem;
+    color: var(--color-aqua);
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__text {
+    max-width: 42rem;
+  }
+
+  .highlight {
+    color: var(--color-aqua);
+    font-weight: 700;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  &__media {
+    position: relative;
+    min-width: 0;
+    order: 1;
+  }
+
+  &__image {
+    display: block;
+    width: 50%;
+    height: auto;
+    margin-inline: auto;
+    object-fit: cover;
+  }
+
+  &__logos {
+    width: 100%;
+
+    svg {
+      color: var(--color-white);
+      max-height: 4rem;
+      opacity: 0;
+
+      path {
+        fill: currentColor;
+      }
+    }
+  }
+
+  @media (min-width: $breakpoint-m) {
+    &__main {
+      align-items: center;
+    }
+
+    &__grid {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 4rem;
+    }
+
+    &__content {
+      order: 1;
+    }
+
+    &__media {
+      order: 2;
+      transform: translate(-1rem, -5rem);
+    }
+
+    &__image {
+      width: 120%;
+      max-width: none;
+    }
+  }
+}

src/assets/js/app.js

@@ -4,6 +4,7 @@ import { Nav } from "./nav";
 import { ContactForm } from "./contact-form";
 import { LogoList } from "./logo-list";
 import bindSelectDropdowns from "./select";
+import { initHomeHero } from "./home-hero";
 
 if (window.location.host === "mainmatter.com" || window.location.host.includes("deploy-preview")) {
   Sentry.init({
@@ -29,3 +30,4 @@ const logoList = document.getElementById("logo-list");
 if (logoList) new LogoList(logoList);
 
 bindSelectDropdowns();
+initHomeHero();

src/assets/js/home-hero.js

@@ -0,0 +1,113 @@
+import { gsap } from "gsap";
+
+export function initHomeHero() {
+  const hero = document.querySelector(".home-hero");
+
+  if (!hero) return;
+
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+
+  const eyebrow = hero.querySelector(".home-hero__eyebrow");
+  const title = hero.querySelector(".home-hero__title");
+  const text = hero.querySelector(".home-hero__text");
+  const actions = hero.querySelector(".home-hero__actions");
+  const image = hero.querySelector(".home-hero__image");
+  const logos = hero.querySelectorAll(".home-hero__logos svg");
+
+  const tl = gsap.timeline({
+    defaults: {
+      ease: "power3.out",
+    },
+  });
+
+  if (eyebrow) {
+    tl.from(
+      eyebrow,
+      {
+        y: 18,
+        opacity: 0,
+        duration: 0.45,
+      },
+      0
+    );
+  }
+
+  if (title) {
+    tl.from(
+      title,
+      {
+        y: 28,
+        opacity: 0,
+        duration: 0.7,
+      },
+      0.08
+    );
+  }
+
+  if (text) {
+    tl.from(
+      text,
+      {
+        y: 22,
+        opacity: 0,
+        duration: 0.6,
+      },
+      0.2
+    );
+  }
+
+  if (actions) {
+    tl.from(
+      actions,
+      {
+        y: 18,
+        opacity: 0,
+        duration: 0.5,
+      },
+      0.32
+    );
+  }
+
+  if (image) {
+    tl.from(
+      image,
+      {
+        x: 56,
+        opacity: 0,
+        scale: 0.96,
+        duration: 1,
+        ease: "power3.out",
+      },
+      0.12
+    );
+
+    tl.to(
+      image,
+      {
+        y: 5,
+        x: -2,
+        duration: 3.2,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+      },
+      ">-0.1"
+    );
+  }
+
+  if (logos.length) {
+    tl.to(
+      logos,
+      {
+        y: 0,
+        opacity: 1,
+        duration: 0.4,
+        stagger: 0.05,
+        ease: "power2.out",
+      },
+      0.45
+    );
+  }
+}

src/components/home-hero.njk

@@ -0,0 +1,49 @@
+{% from "btn-primary.njk" import btnPrimary %}
+{% from "logo-list.njk" import logoList %}
+
+{%- macro homeHero(content) -%}
+  <section class="home-hero" data-background-color="purple">
+    <div class="home-hero__main">
+      <div class="container container--xl">
+        <div class="home-hero__grid">
+          <div class="home-hero__content">
+            {% if content.eyebrow %}
+              <p class="home-hero__eyebrow h5">{{ content.eyebrow | safe }}</p>
+            {% endif %}
+
+            {% if content.title %}
+              <h1 class="home-hero__title">{{ content.title | safe }}</h1>
+            {% endif %}
+
+            {% if content.text %}
+              <div class="home-hero__text mt-2">{{ content.text | safe }}</div>
+            {% endif %}
+
+            {% if content.linkUrl %}
+              {%
+                set link = {
+                  "label": content.linkText,
+                  "url": content.linkUrl
+                }
+              %}
+
+              <div class="home-hero__actions mt-3">
+                {{ btnPrimary(link, 'aqua', 'home-hero__primary-link') }}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="home-hero__media">
+            {% if content.image %}
+              {% image content.image, content.alt, '(min-width: 64em) 50vw, 100vw', content.loading or 'eager', 'home-hero__image', [760,1200,1440,1920] %}
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    {% if content.logoCompanies %}
+      <div class="home-hero__logos">{{ logoList(content.logoCompanies) }}</div>
+    {% endif %}
+  </section>
+{%- endmacro -%}