feat(website): create a showcase page (#13162)

packages/website/components/card/index.tsx

@@ -0,0 +1,53 @@
+type Props = {
+  title: string;
+  description: string;
+  href: string;
+  imageSrc: string;
+};
+
+export function Card(props: Props): JSX.Element {
+  return (
+    <div className="max-w-sm bg-white border border-neutral-200 rounded-lg shadow dark:bg-neutral-800 dark:border-neutral-700">
+      <a href={props.href} target="_blank" rel="noopener noreferrer">
+        <img
+          className="rounded-t-lg w-full h-40 sm:h-64 lg:h-36 xl:h-48 object-cover object-top"
+          src={props.imageSrc}
+          alt=""
+        />
+      </a>
+      <div className="p-5">
+        <a href={props.href} target="_blank" rel="noopener noreferrer">
+          <h5 className="mb-2 text-2xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            {props.title}
+          </h5>
+        </a>
+        <p className="mb-3 font-normal text-neutral-700 dark:text-neutral-400">
+          {props.description}
+        </p>
+        <div className="inline-flex rounded-md shadow">
+          <a
+            href={props.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center rounded-md border border-transparent bg-[#e30ead] px-3 py-2 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#bd0b90] hover:no-underline hover:text-white"
+          >
+            View
+            <svg
+              aria-hidden="true"
+              className="w-4 h-4 ml-2 -mr-1"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/website/pages/_meta.json

@@ -11,6 +11,13 @@
     "title": "Docs",
     "type": "page"
   },
+  "showcase": {
+    "title": "Showcase",
+    "type": "page",
+    "theme": {
+      "layout": "raw"
+    }
+  },
   "blog": {
     "title": "Blog",
     "type": "page",

packages/website/pages/showcase.mdx

@@ -0,0 +1,27 @@
+<div className="text-center pt-6">
+  <h2 className="font-oxanium text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-100">
+    Showcase
+  </h2>
+  <div className="mx-auto mt-3 max-w-2xl text-xl text-neutral-500 sm:mt-4 dark:text-neutral-300">
+    Dapps integrated with Taiko ✨
+  </div>
+</div>
+
+import { Card } from "../components/card";
+
+<div className="mx-auto max-w-[90rem] mb-6 mt-6">
+  <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <Card
+      title="Taiko Bridge"
+      description="Taiko's official bridge."
+      href="https://bridge.a1.taiko.xyz"
+      imageSrc="/images/showcase/bridge-showcase.png"
+    />
+    <Card
+      title="Orbiter"
+      description="A decentralized cross-rollup bridge."
+      href="https://orbiter.finance"
+      imageSrc="/images/showcase/orbiter-showcase.png"
+    />
+  </div>
+</div>