diff --git a/packages/website/e2e/sponsors.spec.ts b/packages/website/e2e/sponsors.spec.ts index 5dc9aae92d..7b42316d54 100644 --- a/packages/website/e2e/sponsors.spec.ts +++ b/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", diff --git a/packages/website/src/components/sponsorship.tsx b/packages/website/src/components/sponsorship.tsx index 9d42b1e95d..8eb09df4c9 100644 --- a/packages/website/src/components/sponsorship.tsx +++ b/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 (
-

- {style.title} +

+