Add self-serve trial lane to /request-a-demo/

content/request-a-demo/_index.md

@@ -1,6 +1,6 @@
 ---
 title: Request a demo
-meta_desc: Request a demo with an infrastructure as code expert to see how Pulumi can help you ship infrastructure faster.
+meta_desc: See Pulumi in action with a guided walkthrough, or skip the wait and start building today with a free trial.
 
 type: page
 layout: demo
@@ -12,6 +12,13 @@ overview:
         - See how you can employ software engineering to test and ship infrastructure faster.
         - Discover how to build automated workflows for infrastructure as code.
 
+self_serve:
+    title: Don't want to wait for a call?
+    description: Most teams don't need a demo to get started. Create an org and start shipping infrastructure, on the house.
+    cta_label: Start a free trial
+    cta_url: https://app.pulumi.com/signup?create-organization=1
+    qualifier: Best if you're ready to try Pulumi with your own code today.
+
 customer_logos:
   title: Leading engineering organizations are building with Pulumi
   logos:
@@ -31,5 +38,7 @@ customer_logos:
       link: /case-studies/panther-labs
 
 form:
+    title: Request a demo
+    subtitle: Best if you want a guided walkthrough before your team commits.
     form_id: "32b46b45-6717-4d11-ae15-4b9a21afeacd"
 ---

layouts/page/demo.html

@@ -13,6 +13,18 @@ <h1 class="heading-xl mb-6 max-w-lg">{{ .Params.overview.title }}</h1>
                         {{ end }}
                     </ul>
 
+                    {{ with .Params.self_serve }}
+                        <div class="mt-8 p-6 card bg-gray-50 max-w-lg">
+                            <h3 class="heading-5 m-0">{{ .title }}</h3>
+                            <p class="body-sm text-gray-600 my-2">{{ .description }}</p>
+                            <a href="{{ .cta_url }}"{{ partial "external-link-attrs.html" .cta_url | safeHTMLAttr }} class="btn btn-primary">
+                                {{ .cta_label }}
+                                {{ partial "icon.html" (dict "name" "arrow-right" "weight" "bold" "class" "size-4") }}
+                            </a>
+                            <p class="body-sm text-gray-500 mt-3 mb-0">{{ .qualifier }}</p>
+                        </div>
+                    {{ end }}
+
                     <div class="flex flex-wrap justify-center items-center mt-12 max-w-lg">
                         {{ range $logo := .Params.customer_logos.logos }}
                             <div class="w-1/4 p-3">
@@ -30,7 +42,8 @@ <h1 class="heading-xl mb-6 max-w-lg">{{ .Params.overview.title }}</h1>
 
                 <div class="p-6 flex items-center">
                     <div class="card mt-10 md:mt-0 p-12 mx-auto">
-                        <h4>Request a demo</h4>
+                        <h4 class="mb-1">{{ .Params.form.title }}</h4>
+                        <p class="body-sm text-gray-600 mb-6">{{ .Params.form.subtitle }}</p>
                         <pulumi-hubspot-form form-id="{{ .Params.form.form_id }}"></pulumi-hubspot-form>
                         <p class="body-sm text-gray-600 mt-4">Have a quick question instead? <a href="/contact/" class="underline">Contact us</a>.</p>
                     </div>