Add merch card to resources menu (#1060)

lgtm!

Author: Gargron

components/Header.tsx

@@ -2,7 +2,9 @@ import Link from "next/link"
 import { FormattedMessage, useIntl } from "react-intl"
 
 import mastodonLogo from "../public/logos/wordmark-white-text.svg"
+import merch from "../public/merch.jpg"
 import Image from "next/legacy/image"
+import NewImage from "next/image"
 import { useState, useEffect, useRef, useId } from "react"
 import classNames from "classnames"
 import { locales } from "../data/locales"
@@ -111,18 +113,6 @@ const Header = ({ transparent = true }: HeaderProps) => {
             />
           ),
         },
-        {
-          value: "https://shop.joinmastodon.org/",
-          label: (
-            <FormattedMessage id="nav.merch.title" defaultMessage="Merch" />
-          ),
-          description: (
-            <FormattedMessage
-              id="nav.merch.description"
-              defaultMessage="Support your friends building Mastodon (and look cool while doing it)."
-            />
-          ),
-        },
         {
           value: "/verification",
           label: (
@@ -139,6 +129,20 @@ const Header = ({ transparent = true }: HeaderProps) => {
           ),
         },
       ],
+      banner: <div className="md:px-3">
+        <a href="https://shop.joinmastodon.org/" className="block relative overflow-hidden rounded-md inset-ring">
+          <NewImage src={merch} fill={true} className='absolute z-0 object-cover' alt='' />
+
+          <div className="relative pt-32 text-white py-3 px-5 md:px-4 bg-overlay-gradient">
+            <span className="block font-extrabold"><FormattedMessage id="nav.merch.title" defaultMessage="Merch" /></span>
+
+            <span className="mt-1 block font-extranormal"><FormattedMessage
+              id="nav.merch.description"
+              defaultMessage="Support your friends building Mastodon."
+            /></span>
+          </div>
+        </a>
+      </div>,
       footer: {
         value: "https://github.com/mastodon/mastodon",
         label: (
@@ -292,6 +296,8 @@ const Header = ({ transparent = true }: HeaderProps) => {
                         ))}
                       </ul>
 
+                      {item.banner}
+
                       {item.footer && (
                         <div className="md:bg-gray-4 md:p-4">
                           <a

locales/en.json

@@ -134,7 +134,7 @@
   "nav.docs.title": "Documentation",
   "nav.hosting.title": "For Institutions",
   "nav.impressum.title": "Impressum",
-  "nav.merch.description": "Support your friends building Mastodon (and look cool while doing it).",
+  "nav.merch.description": "Support your friends building Mastodon.",
   "nav.merch.title": "Merch",
   "nav.privacy_policy.title": "Privacy Policy",
   "nav.product.title": "Product",

public/merch.jpg

@@ -105,6 +105,7 @@ const config = {
       },
       backgroundImage: {
         "blurple-gradient": `linear-gradient(0deg, #563acc 12.87%, #6364ff 88.62%)`,
+        "overlay-gradient": `linear-gradient(180deg, rgba(29,0,35, 0) 12.87%, rgba(29,0,35, 1) 100%)`,
       },
       gap: {
         gutter: "var(--gutter-width)",