feat(website): head the sponsors band with a heart and one Sponsors title (#6988)

packages/website/e2e/sponsors.spec.ts

@@ -6,7 +6,7 @@ for (const path of PAGES) {
   test(`${path} shows the sponsors and invites the next one`, async ({ page }) => {
     await page.goto(path);
 
-    const sponsors = page.getByRole("region", { name: /^(Sponsors|Sponsored by)$/ });
+    const sponsors = page.getByRole("region", { name: "Sponsors", exact: true });
     await expect(sponsors.getByRole("link", { name: "Hoplite" })).toHaveAttribute(
       "href",
       "https://hoplite.sh/?utm_source=paseo&utm_medium=website&utm_campaign=sponsor",

packages/website/src/components/sponsorship.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Check, ExternalLink } from "lucide-react";
+import { ArrowRight, Check, ExternalLink, Heart } from "lucide-react";
 import { BuyMeACoffeeIcon, GitHubIcon, OpenCollectiveIcon } from "~/components/brand-icons";
 import {
   BUY_ME_A_COFFEE_URL,
@@ -243,18 +243,20 @@ export function SponsorSection() {
 
 const SPONSORS_PLACEMENTS = {
   page: {
-    title: "Sponsors",
     section: "space-y-10",
-    heading: "text-3xl font-medium tracking-tight",
+    heading: "gap-2.5 text-3xl font-medium tracking-tight",
+    heart: "size-6",
     link: "",
     logo: "h-14",
     description: "mt-2 text-sm text-white/55",
     button: "h-12 px-5 text-sm",
   },
   footer: {
-    title: "Sponsored by",
     section: "space-y-5 border-t border-white/10 py-8",
-    heading: "text-sm text-extra-muted-foreground",
+    // From sm up the heart hangs in the margin so the word lines up with the
+    // logos below. Phones have too little margin to hang it.
+    heading: "gap-1.5 text-sm text-extra-muted-foreground sm:-ml-[18px]",
+    heart: "size-3",
     link: "opacity-85 transition-opacity hover:opacity-100",
     logo: "h-10",
     description: "mt-1.5 text-xs text-white/45",
@@ -276,8 +278,13 @@ export function SponsorsSection({ placement }: SponsorsSectionProps) {
   const open = openSpotCount();
   return (
     <section aria-labelledby="sponsors-heading" className={style.section}>
-      <h2 id="sponsors-heading" className={style.heading}>
-        {style.title}
+      <h2 id="sponsors-heading" className={`flex items-center ${style.heading}`}>
+        <Heart
+          aria-hidden="true"
+          className={`fill-rose-300/80 text-rose-300/80 ${style.heart}`}
+          strokeWidth={1.5}
+        />
+        Sponsors
       </h2>
       <ul className="flex flex-wrap items-center gap-x-14 gap-y-8">
         {SPONSORS.map((sponsor) => (