partners: Add Clerk

Author: tannerlinsley

app/components/DocsLayout.tsx

@@ -613,7 +613,7 @@ export function DocsLayout({
                       <a
                         href={partner.href}
                         target="_blank"
-                        className="px-4 flex items-center justify-center"
+                        className="px-4 flex items-center justify-center cursor-pointer"
                       >
                         <div className="mx-auto max-w-[150px]">
                           <img
@@ -650,20 +650,17 @@ export function DocsLayout({
               <DocsCalloutBytes />
             )}
           </div>
-          {partners.some((d) => d.libraries?.includes(libraryId as any)) ? (
-            <div className="h-[200px]" />
-          ) : (
-            <div className="bg-white dark:bg-gray-900 border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
-              <Carbon />
-              <div
-                className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
-                dark:bg-opacity-20 self-center"
-              >
-                Guess what? This ad helps to keep us from burning out and
-                rage-quitting OSS just *that* much more. 😉
-              </div>
+
+          <div className="bg-white dark:bg-gray-900 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
+            <Carbon />
+            <div
+              className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
+                dark:bg-opacity-20 self-center opacity-50 hover:opacity-100 transition-opacity"
+            >
+              This ad helps to keep us from burning out and rage-quitting OSS
+              just *that* much more, so chill. 😉
             </div>
-          )}
+          </div>
         </div>
       </div>
       {showBytes ? (

app/images/clerk-logo-dark.svg

@@ -11,6 +11,8 @@ import vercelLightSvg from '~/images/vercel-light.svg'
 import vercelDarkSvg from '~/images/vercel-dark.svg'
 import convexWhiteSvg from '~/images/convex-white.svg'
 import convexColorSvg from '~/images/convex-color.svg'
+import clerkLightSvg from '~/images/clerk-logo-light.svg'
+import clerkDarkSvg from '~/images/clerk-logo-dark.svg'
 import sentryWordMarkLightSvg from '~/images/sentry-wordmark-light.svg'
 import sentryWordMarkDarkSvg from '~/images/sentry-wordmark-dark.svg'
 import { Library } from '~/libraries'
@@ -78,6 +80,55 @@ export const partners: Partner[] = [
       ),
     }
   })(),
+  (() => {
+    const href = 'https://go.clerk.com/wOwHtuJ'
+
+    return {
+      name: 'Clerk',
+      href,
+      libraries: ['start', 'router'],
+      sidebarImgLight: clerkLightSvg,
+      sidebarImgDark: clerkDarkSvg,
+      sidebarImgClass: 'py-4',
+      homepageImg: (
+        <a
+          href={href}
+          target="_blank"
+          className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-12"
+        >
+          <img
+            src={clerkLightSvg}
+            alt="Clerk"
+            className="w-[200px] max-w-full dark:hidden"
+          />
+          <img
+            src={clerkDarkSvg}
+            alt="Clerk"
+            className="w-[200px] max-w-full hidden dark:block"
+          />
+        </a>
+      ),
+      content: (
+        <>
+          <div>
+            Clerk and TanStack are partnering to elevate your application's
+            <strong>security and user experience</strong> with industry-leading{' '}
+            <strong>authentication and identity solutions</strong>. Paired with
+            TanStack's non-nonsense routing and tooling, you'll be equipped to
+            effortlessly deliver top-notch experiences that are your users can
+            trust and your developers can rely on.
+          </div>
+          <a
+            href={href}
+            target="_blank"
+            className="text-blue-500 uppercase font-black text-sm"
+          >
+            Learn More
+          </a>
+        </>
+      ),
+    }
+  })(),
   (() => {
     const href =
       'https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable'