From 01cb5558571d5a27c92149420482dd15ff634313 Mon Sep 17 00:00:00 2001
From: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Date: Mon, 13 Mar 2023 08:20:37 -0400
Subject: [PATCH] fix(website): fix showcase page layout

---
 packages/website/components/card/index.tsx | 53 ---------------------
 packages/website/pages/_meta.json          |  3 +-
 packages/website/pages/showcase.mdx        | 54 ++++++++++++----------
 packages/website/theme.config.tsx          |  1 +
 4 files changed, 32 insertions(+), 79 deletions(-)
 delete mode 100644 packages/website/components/card/index.tsx

diff --git a/packages/website/components/card/index.tsx b/packages/website/components/card/index.tsx
deleted file mode 100644
index f7be342c19..0000000000
--- a/packages/website/components/card/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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>
-  );
-}
diff --git a/packages/website/pages/_meta.json b/packages/website/pages/_meta.json
index 595b041658..8e2e86e9c1 100644
--- a/packages/website/pages/_meta.json
+++ b/packages/website/pages/_meta.json
@@ -15,7 +15,8 @@
     "title": "Showcase",
     "type": "page",
     "theme": {
-      "layout": "raw"
+      "typesetting": "article",
+      "layout": "full"
     }
   },
   "blog": {
diff --git a/packages/website/pages/showcase.mdx b/packages/website/pages/showcase.mdx
index 0a7d3f0e04..3eecdd2191 100644
--- a/packages/website/pages/showcase.mdx
+++ b/packages/website/pages/showcase.mdx
@@ -1,27 +1,31 @@
-<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, Cards } from 'nextra-theme-docs';
+import Image from 'next/image';
+import taikoBridge from '../public/images/showcase/bridge-showcase.png';
+import orbiter from '../public/images/showcase/orbiter-showcase.png';
 
-import { Card } from "../components/card";
+{<h1 className="font-oxanium text-3xl mt-10 mb-4 text-center text-[2.5rem] font-bold tracking-tight">Showcase</h1>}
 
-<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>
+{<p className="mb-16 text-center text-xl text-neutral-500 dark:text-neutral-400">Dapps integrated with Taiko ✨</p>}
+
+<Cards>
+  {[
+    {
+      name: 'Taiko Bridge',
+      url: 'https://bridge.a2.taiko.xyz',
+      image: taikoBridge
+    },
+    {
+      name: 'Orbiter',
+      url: 'https://orbiter.finance',
+      image: orbiter
+    },
+  ].map(({ name, url, image }) => (
+    <Card key={name} image arrow target="_blank" title={name} href={url}>
+      <Image
+        src={image}
+        alt={`${name} preview`}
+        className="object-cover [aspect-ratio:12/6.3]"
+      />
+    </Card>
+  ))}
+</Cards>
\ No newline at end of file
diff --git a/packages/website/theme.config.tsx b/packages/website/theme.config.tsx
index 3a32943f33..cf31a286d3 100644
--- a/packages/website/theme.config.tsx
+++ b/packages/website/theme.config.tsx
@@ -28,6 +28,7 @@ export default {
   footer: {
     component: Footer,
   },
+  gitTimestamp: false,
   head: () => {
     const { asPath } = useRouter();
     const { frontMatter } = useConfig();