Project showcase patches (#5178)

Author: edwardysun

apps/dashboard/src/app/(dashboard)/project-showcase/[slug]/page.tsx renamed to apps/dashboard/src/app/project-showcase/[slug]/page.tsx

@@ -1,18 +1,17 @@
 import { ExternalLink, FileText } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
-import { Badge } from "../../../../@/components/ui/badge";
-import { Button } from "../../../../@/components/ui/button";
+import { Badge } from "../../../@/components/ui/badge";
+import { Button } from "../../../@/components/ui/button";
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "../../../../@/components/ui/card";
-import { getThirdwebClient } from "../../../../@/constants/thirdweb.server";
-import { resolveSchemeWithErrorHandler } from "../../../../@/lib/resolveSchemeWithErrorHandler";
-import { PROJECT_SHOWCASE_DATA } from "../../../../lib/project-showcase-constants";
+} from "../../../@/components/ui/card";
+import { getThirdwebClient } from "../../../@/constants/thirdweb.server";
+import { resolveSchemeWithErrorHandler } from "../../../@/lib/resolveSchemeWithErrorHandler";
+import { PROJECT_SHOWCASE_DATA } from "../../../lib/project-showcase-constants";
 
 export default async function DetailPage({
   params,
@@ -72,7 +71,8 @@ export default async function DetailPage({
           </div>
           <div className="md:w-1/2">
             <div className="relative aspect-video h-full w-full md:aspect-square">
-              <Image
+              {/* eslint-disable @next/next/no-img-element */}
+              <img
                 src={
                   project.image?.startsWith("ipfs://")
                     ? (resolveSchemeWithErrorHandler({

apps/dashboard/src/app/(dashboard)/project-showcase/page.tsx renamed to apps/dashboard/src/app/project-showcase/page.tsx

@@ -1,30 +1,30 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import { Badge } from "../../../@/components/ui/badge";
+import { Badge } from "../../@/components/ui/badge";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "../../../@/components/ui/card";
+} from "../../@/components/ui/card";
 import {
   Pagination,
   PaginationContent,
   PaginationItem,
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "../../../@/components/ui/pagination";
-import { getThirdwebClient } from "../../../@/constants/thirdweb.server";
-import { resolveSchemeWithErrorHandler } from "../../../@/lib/resolveSchemeWithErrorHandler";
+} from "../../@/components/ui/pagination";
+import { getThirdwebClient } from "../../@/constants/thirdweb.server";
+import { resolveSchemeWithErrorHandler } from "../../@/lib/resolveSchemeWithErrorHandler";
 import {
   PROJECT_SHOWCASE_DATA,
   PROJECT_SHOWCASE_INDUSTRIES,
   PROJECT_SHOWCASE_ITEMS_PER_PAGE,
-} from "../../../lib/project-showcase-constants";
-import { getAbsoluteUrl } from "../../../lib/vercel-utils";
+} from "../../lib/project-showcase-constants";
+import { getAbsoluteUrl } from "../../lib/vercel-utils";
 
 export const metadata: Metadata = {
   title: "Project Showcase | Built on thirdweb",
@@ -69,7 +69,43 @@ export default function ProjectShowcasePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <section className="w-full">{/* Hero section content */}</section>
+      <section className="w-full">
+        <div className="container px-4 md:px-6">
+          <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+            <div className="flex flex-col justify-center space-y-4">
+              <div className="space-y-2">
+                <h1 className="font-bold text-3xl tracking-tighter sm:text-5xl xl:text-6xl/none">
+                  Built on thirdweb
+                </h1>
+                <p className="max-w-[600px] md:text-3xl">
+                  Discover the latest web3 apps and games built on thirdweb.
+                </p>
+              </div>
+              <div className="flex flex-col gap-2 min-[400px]:flex-row">
+                <Link
+                  href="https://thirdweb.com/login"
+                  className="inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-8 font-medium text-gray-50 text-sm shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:focus-visible:ring-gray-300 dark:hover:bg-gray-50/90"
+                >
+                  Get Started
+                </Link>
+                <Link
+                  href="https://blog.thirdweb.com/case-studies/"
+                  className="inline-flex h-10 items-center justify-center rounded-md border border-gray-200 bg-white px-8 font-medium text-sm shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-800 dark:bg-gray-950 dark:focus-visible:ring-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+                >
+                  View all case studies
+                </Link>
+              </div>
+            </div>
+            <Image
+              alt="Hero"
+              className="mx-auto overflow-hidden object-cover object-center sm:w-full lg:order-last"
+              height="550"
+              src="/assets/showcase/abstract-w.png"
+              width="550"
+            />
+          </div>
+        </div>
+      </section>
       <main className="container mx-auto px-4 py-12 md:px-6">
         <section>
           <div className="mb-8">
@@ -97,7 +133,8 @@ export default function ProjectShowcasePage({
                 className="block"
               >
                 <Card className="flex h-full cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-lg">
-                  <Image
+                  {/* eslint-disable @next/next/no-img-element */}
+                  <img
                     src={
                       project.image?.startsWith("ipfs://")
                         ? (resolveSchemeWithErrorHandler({