fix various issues (#4956)

- various mobile style issues
- use `<img>` for shields since `Image` causes icon issues
- scroll marquee to right to workaround safari bug

website/next.config.mjs

@@ -51,9 +51,6 @@ const nextConfig = {
   images: {
     dangerouslyAllowSVG: true,
     remotePatterns: [
-      {
-        hostname: "img.shields.io",
-      },
       {
         hostname: "github.com",
       },

website/src/app/pricing/_page.tsx

@@ -16,10 +16,10 @@ export default function _Page() {
       <section className="bg-neutral-100">
         <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
           <div className="mx-auto max-w-screen-md sm:text-center">
-            <h1 className="justify-center mb-4 text-2xl font-extrabold leading-none tracking-tight text-neutral-900 sm:text-6xl">
+            <h1 className="text-center justify-center mb-4 text-3xl font-extrabold leading-none tracking-tight text-neutral-900 sm:text-6xl">
               Plans & Pricing
             </h1>
-            <h2 className="justify-center mb-8 tracking-tight text-neutral-900 md:mb-12 text-xl">
+            <h2 className="text-center justify-center mb-8 tracking-tight text-neutral-900 md:mb-12 sm:text-2xl text-xl">
               Pick a plan that best suits your needs. No credit card required to
               sign up.
             </h2>
@@ -51,7 +51,7 @@ export default function _Page() {
           </span>
         </div>
         <div className="mx-auto max-w-screen-2xl md:grid md:grid-cols-3 pt-14 md:gap-4 px-4">
-          <div className="p-8 bg-neutral-50 border-2 border-neutral-200">
+          <div className="p-8 bg-neutral-50 border-2 border-neutral-200 mb-4">
             <h3 className="mb-4 text-2xl tracking-tight font-semibold text-primary-450">
               Starter
             </h3>
@@ -116,7 +116,7 @@ export default function _Page() {
               </li>
             </ul>
           </div>
-          <div className="p-8 bg-neutral-50 border-2 border-neutral-200">
+          <div className="p-8 bg-neutral-50 border-2 border-neutral-200 mb-4">
             <h3 className="mb-4 text-2xl tracking-tight font-semibold text-primary-450">
               Team
             </h3>
@@ -191,7 +191,7 @@ export default function _Page() {
               </li>
             </ul>
           </div>
-          <div className="p-8 bg-neutral-50 border-2 border-neutral-200">
+          <div className="p-8 bg-neutral-50 border-2 border-neutral-200 mb-4">
             <h3 className="mb-4 text-2xl tracking-tight font-semibold text-primary-450">
               Enterprise
             </h3>

website/src/app/pricing/plan_table.tsx

@@ -811,7 +811,7 @@ export default function PlanTable() {
             <Link href="https://app.firezone.dev/sign_up">
               <button
                 type="button"
-                className="md:text-lg md:py-2.5 text-sm px-5 py-1.5 text-white font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform shadow-lg bg-accent-450 hover:bg-accent-700"
+                className="md:text-lg md:py-2.5 text-sm sm:px-5 px-2.5 py-1.5 text-white font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform shadow-lg bg-accent-450 hover:bg-accent-700"
               >
                 Sign up
               </button>
@@ -821,7 +821,7 @@ export default function PlanTable() {
             <Link href="https://billing.firezone.dev/p/login/5kA9DHeZ8cSI2mQcMM">
               <button
                 type="button"
-                className="md:text-lg md:py-2.5 text-sm px-5 py-1.5 text-white font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform shadow-lg bg-accent-450 hover:bg-accent-700"
+                className="md:text-lg md:py-2.5 text-sm sm:px-5 px-2.5 py-1.5 text-white font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform shadow-lg bg-accent-450 hover:bg-accent-700"
               >
                 Subscribe
               </button>
@@ -831,7 +831,7 @@ export default function PlanTable() {
             <Link href="/contact/sales">
               <button
                 type="button"
-                className="md:text-lg md:py-2.5 text-sm px-5 py-1.5 text-white font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform shadow-lg bg-accent-450 hover:bg-accent-700"
+                className="md:text-lg md:py-2.5 text-sm sm:px-5 px-2.5 py-1.5 text-white font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform shadow-lg bg-accent-450 hover:bg-accent-700"
               >
                 Contact us
               </button>

website/src/components/CustomerLogos/index.tsx

@@ -6,11 +6,12 @@ export default function CustomerLogos() {
   return (
     <>
       <div className="flex justify-center items-center p-8 mb-8">
-        <h3 className="text-2xl sm:text-3xl tracking-tight font-bold uppercase text-neutral-800">
+        <h3 className="text-xl sm:text-3xl tracking-tight font-bold uppercase text-neutral-800">
           Trusted by organizations like
         </h3>
       </div>
-      <Marquee>
+      {/* Strangely, Safari has animation bugs with the default left direction */}
+      <Marquee autoFill pauseOnHover direction="right">
         <Link href="https://bunq.com" className="mx-12 flex items-center">
           <Image
             alt="bunq logo"

website/src/components/RootNavbar/index.tsx

@@ -183,12 +183,12 @@ export default function RootNavbar() {
               href="https://github.com/firezone/firezone"
               aria-label="GitHub Repository"
             >
-              <Image
+              {/* NextJS's image component has issues with shields images */}
+              <img
                 alt="Github Repo stars"
                 height={50}
                 width={100}
-                className=""
-                src="https://img.shields.io/github/stars/firezone/firezone?label=Stars&amp;style=social"
+                src="https://img.shields.io/github/stars/firezone/firezone"
               />
             </Link>
             <RequestDemoButton />