cta & utm links

Create new CTA Header for Engine, add utm links and images

Author: DustinTurska

apps/playground-web/src/app/engine/airdrop/page.tsx

@@ -1,12 +1,12 @@
 import { AirdropERC20 } from "@/components/engine/airdrop/airdrop-erc20";
 import ThirdwebProvider from "@/components/thirdweb-provider";
-import { APIHeader } from "../../../components/blocks/APIHeader";
+import { EngineAPIHeader } from "../../../components/blocks/EngineAPIHeader";
 // TODO: Get updated banner image and description.
 export default function Page() {
   return (
     <ThirdwebProvider>
       <main className="container px-0 pb-20">
-        <APIHeader
+        <EngineAPIHeader
           title="Airdrop"
           description={
             <>
@@ -15,7 +15,7 @@ export default function Page() {
               address!
             </>
           }
-          docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc20/POST/contract/{chain}/{contractAddress}/erc20/mint-batch-to"
+          docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc20/POST/contract/{chain}/{contractAddress}/erc20/mint-batch-to?utm_source=playground"
           heroLink="/airdrop.avif"
         />
 

apps/playground-web/src/app/engine/minting/page.tsx

@@ -1,20 +1,20 @@
 import { ERC1155MintTo } from "@/components/engine/minting/erc1155-mint-to";
 import ThirdwebProvider from "@/components/thirdweb-provider";
-import { APIHeader } from "../../../components/blocks/APIHeader";
+import { EngineAPIHeader } from "../../../components/blocks/EngineAPIHeader";
 // TODO: Get updated banner image and description.
 export default function Page() {
   return (
     <ThirdwebProvider>
       <main className="container px-0 pb-20">
-        <APIHeader
+        <EngineAPIHeader
           title="Minting"
           description={
             <>
               Allow your users to mint new tokens into any given contract. You
               sponsor the gas so your users only need a wallet address!
             </>
           }
-          docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc1155/POST/contract/{chain}/{contractAddress}/erc1155/mint-to"
+          docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc1155/POST/contract/{chain}/{contractAddress}/erc1155/mint-to?utm_source=playground"
           heroLink="/minting.avif"
         />
 

apps/playground-web/src/app/engine/webhooks/page.tsx

@@ -1,20 +1,20 @@
 import { Sponsorship } from "@/components/engine/gasless/Sponsorship";
 import ThirdwebProvider from "@/components/thirdweb-provider";
-import { APIHeader } from "../../../components/blocks/APIHeader";
+import { EngineAPIHeader } from "../../../components/blocks/EngineAPIHeader";
 // TODO: Get updated banner image and description.
 export default function Page() {
   return (
     <ThirdwebProvider>
       <main className="container px-0 pb-20">
-        <APIHeader
+        <EngineAPIHeader
           title="Webhooks"
           description={
             <>
               Configure webhooks in Engine to notify your backend server of
               transaction or backend wallet events.
             </>
           }
-          docsLink="https://portal.thirdweb.com/engine/features/webhooks"
+          docsLink="https://portal.thirdweb.com/engine/features/webhooks?utm_source=playground"
           heroLink="/webhooks.avif"
         />
 

apps/playground-web/src/components/blocks/EngineAPIHeader.tsx

@@ -0,0 +1,64 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "../ui/button";
+
+export function EngineAPIHeader(props: {
+  title: string;
+  description: React.ReactNode;
+  docsLink: string;
+  heroLink: string;
+}) {
+  return (
+    <div
+      className="mb-12 flex flex-col-reverse items-center justify-between gap-6 rounded-3xl px-6 py-8 lg:flex-row lg:px-14 lg:py-14"
+      style={{
+        background:
+          "linear-gradient(to top, hsl(var(--secondary)/80%), transparent)",
+      }}
+    >
+      {/* Left */}
+      <div>
+        <h1 className="mb-2 font-bold text-4xl tracking-tighter md:text-5xl">
+          {props.title}
+        </h1>
+        <p className="mb-5 max-w-[700px] text-balance text-muted-foreground">
+          {props.description}
+        </p>
+
+        <div className="flex flex-col gap-3 md:flex-row">
+          <Button asChild size="lg">
+            <Link target="_blank" href={props.docsLink}>
+              View docs
+            </Link>
+          </Button>
+          <Button asChild variant="outline" size="lg">
+            <Link
+              target="_blank"
+              href="https://thirdweb.com/contact-us?utm_source=playground"
+            >
+              Book a Demo
+            </Link>
+          </Button>
+          <Button asChild variant="outline" size="lg">
+            <Link
+              target="_blank"
+              href="https://thirdweb.com/team/~/~/engine/create?utm_source=playground"
+            >
+              Deploy an Instance
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      {/* Right */}
+      <Image
+        src={props.heroLink}
+        width={600}
+        height={400}
+        className="max-h-[300px] rounded-2xl object-contain lg:max-w-[500px]"
+        alt=""
+        priority={true}
+      />
+    </div>
+  );
+}