add standard ruleset docs

src/app/_components/joker-card.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import type { ElementType } from 'react'
+import slugify from 'slugify'
+
+type JokerCardProps = {
+  name: string
+  img: string
+  h?: number
+}
+
+export function JokerCard({ name, img, h = 3 }: JokerCardProps) {
+  const Heading = `h${h}` as ElementType
+  return (
+    <div
+      className={'flex scroll-mt-36 flex-col items-center gap-2'}
+      id={`${slugify(name, { lower: true, strict: true })}-toc`}
+    >
+      <img src={img} alt={name} className={'!m-0 max-w-24 rounded-md'} />
+      <div className={'flex flex-col gap-1'}>
+        <Heading className={'!m-0 text-nowrap font-medium text-sm'}>
+          {name}
+        </Heading>
+      </div>
+    </div>
+  )
+}