Update homepage hero (#594)

Author: kydecker

src/pages/home/_hero-form.png

@@ -1,12 +1,11 @@
 ---
-
 import { Image } from "astro:assets";
 import { RiArrowRightLine } from "@remixicon/react";
 import Sponsors from "../components/Sponsors.astro";
 import SupportMap from "../components/SupportMap.astro";
 import { siteInfo } from "../constants/site-info";
 import BaseLayout from "../layouts/BaseLayout.astro";
-import heroIllustration from "./home/_hero-form.png";
+import passport from "./home/passport.png";
 ---
 
 <BaseLayout
@@ -15,51 +14,32 @@ import heroIllustration from "./home/_hero-form.png";
   ogImage={siteInfo.image.src}
   ogAlt={siteInfo.image.alt}
 >
-  <div class="home">
-    <h1>
-      <span>Your name is</span>
-      <span class="hero-highlight">yours to change</span>
-    </h1>
-    <div class="hero">
-      <Image
-        src={heroIllustration}
-        alt="Some snails and flowers on top of a court order document"
-        class="illustration"
-        widths={[800, 1200, 1800]}
-        sizes={`(max-width: 400px) 800px, (max-width: 600px) 1200px, 1800px`}
-      />
-    </div>
-    <section class="content">
-      <p>
-        <strong
-          >Changing your legal name and gender marker can feel daunting.</strong
-        >
-        {" "}How long will the process take? How much will it cost? Do I need to
-        find a notary (and if so, where)? Is the court system kind to trans
-        people? Will I need to publish my name change in a newspaper?
-      </p>
-      <p>It can all feel overwhelming, but it doesn't have to be.</p>
-      <p>
-        We're trans, and after going through this process ourselves, we built
-        Namesake to make it easier for others. Namesake helps you fill out
-        forms, track your progress, access financial resources, and receive
-        community support. It's free, <a href={siteInfo.socialLinks.github.href}
-          >open source</a
+  <div class="hero">
+    <div class="hero-content">
+      <h1>Your name is <span class="hero-highlight">yours</span> to change</h1>
+      <p class="subtitle">
+        Namesake publishes name change guides and tools for trans people in the
+        U.S. It's free, <a href={siteInfo.socialLinks.github.href}
+          >open&nbsp;source</a
         >, and always will be.
       </p>
-      <p>
-        Rigid systems weren't built for us, but we'll figure them out together.
-      </p>
       <div class="buttons">
         <a href={siteInfo.urls.guides} class="button primary"
           >Browse guides <RiArrowRightLine className="icon" /></a
         >
         <a href={siteInfo.urls.chat}>Join us on Discord</a>
       </div>
-    </section>
-    <SupportMap />
-    <Sponsors />
+    </div>
+    <Image
+      class="hero-image"
+      src={passport}
+      alt=""
+      width={440}
+      densities={[1, 2]}
+    />
   </div>
+  <SupportMap />
+  <Sponsors />
 </BaseLayout>
 
 <script>
@@ -68,102 +48,85 @@ import heroIllustration from "./home/_hero-form.png";
   const heroHighlight: HTMLElement | null =
     document.querySelector(".hero-highlight");
 
-  const isForcedColors = window.matchMedia("(forced-colors: active)").matches;
-  if (heroHighlight && !isForcedColors) {
-    heroHighlight.style.color = "var(--background-color)";
+  if (heroHighlight) {
     const highlight = annotate(heroHighlight, {
-      type: "highlight",
-      iterations: 1,
+      type: "circle",
+      iterations: 2,
+      padding: 4,
+      strokeWidth: 3,
     });
     highlight.show();
   }
 </script>
 
 <style lang="scss">
-  .home {
+  .hero {
+    width: min(100vw, 1200px);
+    padding-inline: var(--space-l);
+    margin-inline: calc(var(--space-l) * -1);
+    overflow: hidden;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    padding-block: var(--space-2xl);
+    gap: var(--space-xs);
   }
 
-  @keyframes slideInUp {
-    from {
-      transform: translateY(var(--space-m));
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  .hero {
-    padding-inline: var(--space-2xs);
-    padding-block-start: var(--space-3xl);
-    margin-inline: calc(-1 * var(--space-m));
-    position: relative;
-    overflow: hidden;
-    max-width: 100vw;
+  .hero-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-l);
+    padding-block: var(--space-2xl);
   }
 
-  .illustration {
-    width: 900px;
-    max-width: 100%;
-    user-select: none;
-    pointer-events: none;
+  .hero-image {
+    flex-shrink: 0;
     mix-blend-mode: multiply;
-    animation: slideInUp 0.6s ease-out 0.3s both;
 
-    @media (forced-colors: active) {
-      filter: invert(1);
-      mix-blend-mode: screen;
+    @media (width < 1200px) {
+      margin-inline-end: -48px;
     }
-  }
-
-  h1 {
-    text-align: center;
-    font-size: var(--step-5);
 
-    @media (width >= 420px) {
-      font-size: var(--step-6);
+    @media (width < 1060px) {
+      width: 400px;
+      margin-inline-end: -80px;
     }
 
-    @media (width >= 600px) {
-      font-size: var(--step-7);
+    @media (width < 920px) {
+      width: 360px;
     }
 
-    span {
-      white-space: nowrap;
+    @media (width < 860px) {
+      width: 320px;
+      margin-block-start: var(--space-3xl);
+      align-self: flex-start;
     }
-  }
 
-  .hero-highlight {
-    color: var(--background-color);
+    @media (width < 580px) {
+      display: none;
+    }
   }
 
-  .content {
-    padding-block-start: var(--space-xl);
-    max-width: 860px;
-    font-size: var(--step-1);
-    animation: slideInUp 0.6s ease-out 0.6s both;
-    text-wrap: pretty;
+  h1 {
+    font-size: var(--step-5);
+    text-wrap: balance;
 
-    :global(p) + :global(p) {
-      margin-top: var(--space-l);
+    @media (width >= 600px) {
+      font-size: var(--step-6);
     }
+  }
 
-    @media (width < 540px) {
-      font-size: var(--step-0);
-    }
+  .subtitle {
+    font-size: var(--step-1);
+    max-width: 58ch;
+    text-wrap: balance;
   }
 
   .buttons {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
+    flex-wrap: wrap;
     gap: var(--space-l);
-    margin-block-start: var(--space-3xl);
   }
 
   .icon {