fix(website): fix showcase page layout (#13303)

taikoxyz · Mar 13, 2023 · 36560e5 · 36560e5
1 parent 15ffe7b
commit 36560e5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 79 deletions.
diff --git a/packages/website/components/card/index.tsx b/packages/website/components/card/index.tsx
diff --git 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
@@ -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>
diff --git 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();