added hero

Author: saminacodes

apps/dashboard/public/assets/showcase/abstract-w.png

@@ -469,4 +469,4 @@ export const PROJECT_SHOWCASE_INDUSTRIES = [
   "Real World Assets",
 ];
 
-export const PROJECT_SHOWCASE_ITEMS_PER_PAGE = 6;
+export const PROJECT_SHOWCASE_ITEMS_PER_PAGE = 12;

apps/dashboard/src/lib/project-showcase-constants.ts

@@ -29,6 +29,7 @@ import {
   PROJECT_SHOWCASE_INDUSTRIES,
   PROJECT_SHOWCASE_ITEMS_PER_PAGE,
 } from "../../lib/project-showcase-constants";
+import { AppFooter } from "@/components/blocks/app-footer";
 
 export function ProjectShowcaseUI() {
   const thirdwebClient = useThirdwebClient();
@@ -52,23 +53,43 @@ export function ProjectShowcaseUI() {
 
   return (
     <div className="min-h-screen bg-background">
-      <header className="px-4 py-12 text-center md:px-6">
-        <h1 className="mb-4 font-bold text-4xl">built on thirdweb</h1>
-        <p className="mx-auto mb-8 max-w-2xl text-muted-foreground text-xl">
-          Discover the latest web3 apps and games built on thirdweb.
-        </p>
-        <div className="flex justify-center gap-4">
-          <Button size="lg" asChild>
-            <Link href="https://portal.thirdweb.com/">
-              Start building
-              <ArrowRight className="ml-2 h-4 w-4" />
-            </Link>
-          </Button>
-          <Button size="lg" variant="outline" asChild>
-            <Link href="https://thirdweb.com/contact-us">Contact Us</Link>
-          </Button>
+         <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="text-3xl font-bold 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 text-sm font-medium text-gray-50 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:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
+              >
+                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 text-sm font-medium 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:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-gray-300"
+              >
+                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>
-      </header>
+      </div>
+    </section>
       <main className="container mx-auto px-4 py-12 md:px-6">
         <section>
           <div className="mb-8">
@@ -112,7 +133,7 @@ export function ProjectShowcaseUI() {
                     className="h-48 w-full object-cover"
                   />
                   <CardHeader>
-                    <CardTitle>{project.title}</CardTitle>
+                    <CardTitle className="mb-3">{project.title}</CardTitle>
                     <CardDescription>{project.description}</CardDescription>
                   </CardHeader>
                   <CardContent className="flex-grow">
@@ -182,10 +203,13 @@ export function ProjectShowcaseUI() {
   );
 }
 
+
+
 export default function ProjectShowcasePage() {
   return (
     <ThirdwebProvider>
       <ProjectShowcaseUI />
+      <AppFooter/>
     </ThirdwebProvider>
   );
 }