Add quick-lane fast paths to Contact Us; restore Terraform migration option (#20867)

* Add quick-lane fast paths and restore Terraform migration option to Contact Us

* Fix heading outline: keep h1 first in DOM, avoid skipped levels, reorder visually with flex

* Contact Us: link to trial start, sidebar quick-links, progressive form disclosure

- Quick-links change from a full-width banner above the form to a slim
  side column (max-w-5xl 2fr/1fr grid) so self-serve options don't
  compete with the primary contact form for attention or submissions.
- "Start free" -> "Start a trial" pointing at
  /signup?create-organization=1 (the trial-provisioning flow used
  elsewhere on pricing), not the bare /signup used for individual
  accounts.
- Heading changed from "Have a specific question?" to "What can we
  help you with?" to match the broader intent-routing purpose of the
  page.
- pulumi-multi-select-form no longer defaults to the first form option
  and pre-renders its embedded HubSpot form. The select starts on a
  disabled placeholder ("Please select") and the form/CTA area only
  renders after a real choice, unless a ?form= deep link pre-selects
  one. Matches the request-field pattern used on the Contact Sales
  reference and keeps the form from showing every field before a
  visitor has indicated why they're there.
- Updated the component's spec test to the new default (no item
  pre-selected).

* Fix sidebar/form top alignment on Contact Us

The form card sits at md:mt-0 with p-10 internal padding, so its
heading starts 2.5rem below the grid top. The quick-links sidebar sat
at a flat mt-4 (1rem) with no internal padding before its label, so
the two columns' content started ~24px apart instead of lining up.
Bump the sidebar to md:mt-10 to match the card's effective offset;
keep mt-4 for the mobile stacked layout where the two aren't
side-by-side.

* Trim redundant intro copy under Contact Us heading

"Tell us what you need and we'll route you to the right person on our
team." restated what the h1 ("What can we help you with?") already
says. Drop straight to the dropdown.

* Reframe Contact Us heading as "Talk to an expert"

Swap the page H1 from "What can we help you with?" to "Talk to an
expert" (aligned with the front-matter page title, also updated from
"Talk to a human"), following the friendlier expert-framing pattern
Cloudflare uses on their own contact page. Move the more conversational
"What can we help you with?" phrasing down onto the dropdown label,
replacing "Why are you contacting us today?" which read a bit like an
interrogation.

---------

Co-authored-by: workprentice <257153108+workprentice@users.noreply.github.com>

Author: workprentice[bot]

content/contact/_index.md

@@ -1,8 +1,26 @@
 ---
-title: Talk to a human
+title: Talk to an expert
 meta_desc: Contact Pulumi for any general inquiries, including requests for pricing, support, or training.
 type: page
 layout: contact
+quick_links:
+    title: Looking for something quicker?
+    items:
+        - label: Start a trial
+          description: No sales call needed. Create an org and ship infrastructure in minutes.
+          cta_label: Start a trial
+          url: https://app.pulumi.com/signup?create-organization=1
+
+        - label: See it in action
+          description: Get a guided walkthrough from our team before you commit to anything.
+          cta_label: Request a demo
+          url: /request-a-demo/
+
+        - label: Already a customer?
+          description: File a support ticket for a fast response from our team.
+          cta_label: Get support
+          url: https://support.pulumi.com/hc/en-us/requests/new
+
 form:
     - key: general
       label: I have a general question
@@ -11,7 +29,11 @@ form:
     - key: sales
       label: I want to talk to someone in Sales
       hubspot_form_id: 8381e562-5fdf-4736-bb10-86096705e4ee
-    
+
+    - key: tf-migration
+      label: I need help migrating from Terraform
+      hubspot_form_id: 123cfbdb-9ce4-4d33-a9b7-c30302463d7a
+
     - key: support
       label: I need help with Support
       hubspot_form_id: cta1

layouts/partials/contact-us.html

@@ -1,9 +1,8 @@
 <section id="contact" class="py-16 px-4 border-b border-gray-300">
-        <div class="md:max-w-2xl md:mx-auto">
-            <div class="w-full ">
+        <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-8 items-start">
+            <div class="w-full">
                 <div class="card mt-4 mx-auto md:w-full md:mt-0 p-10 bg-white">
-                    <h1 class="heading-1 mb-6">How can we help you?</h1>
-                    <p class="body-sm text-gray-600 mb-6">Want a guided walkthrough instead? <a href="/request-a-demo/" class="underline">Request a demo</a>.</p>
+                    <h1 class="heading-1 mb-6">Talk to an expert</h1>
                     <div class="w-full">
                         <div class="hs-form hs-form-fg-dark font-normal">
                             <pulumi-contact-us-form
@@ -14,15 +13,36 @@ <h1 class="heading-1 mb-6">How can we help you?</h1>
                         </div>
                     </div>
                 </div>
+
+                <div class="mt-16">
+                    <h2 class="font-overline my-6">Our Address</h2>
+                    <p class="m-0">
+                        Pulumi Corporation<br />
+                        601 Union St., Suite 1415<br />
+                        Seattle, WA 98101
+                    </p>
+                </div>
             </div>
 
-            <div class="mt-16">
-                <h2 class="font-overline my-6">Our Address</h2>
-                <p class="m-0">
-                    Pulumi Corporation<br />
-                    601 Union St., Suite 1415<br />
-                    Seattle, WA 98101
-                </p>
+            {{/*
+                Narrow sidebar of self-serve options for visitors who don't need
+                a sales conversation. Keep this visually secondary to the form
+                (a slim side column, never a full-width block above it) so it
+                doesn't pull volume away from Contact Us submissions.
+            */}}
+            {{ with .Params.quick_links }}
+            <div class="w-full mt-4 md:mt-10">
+                <p class="font-overline mb-4">{{ .title }}</p>
+                <div class="grid grid-cols-1 gap-4">
+                    {{ range .items }}
+                        <a href="{{ .url }}" class="card block p-6 bg-white hover:shadow-lg transition-shadow">
+                            <h2 class="heading-4 mb-1">{{ .label }}</h2>
+                            <p class="body-sm text-gray-600 mb-4">{{ .description }}</p>
+                            <span class="btn btn-secondary btn-sm">{{ .cta_label }}</span>
+                        </a>
+                    {{ end }}
+                </div>
             </div>
+            {{ end }}
         </div>
 </section>

theme/stencil/src/components/contact-us-form/contact-us-form.tsx

@@ -66,7 +66,7 @@ export class ContactUsForm {
                 items={this.parsedItems}
                 selectClass={this.selectClass}
                 labelClass={this.labelClass}
-                labelText="Why are you contacting us today?"
+                labelText="What can we help you with?"
                 defaultFormId={this.defaultFormId}
                 linkedinConversionId={24927132}
             />

theme/stencil/src/components/pulumi-multi-select-form/pulumi-multi-select-form.tsx

@@ -46,9 +46,11 @@ export class PulumiMultiSelectForm {
     @Prop()
     linkedinConversionId?: number;
 
-    // The currently selected item.
+    // The currently selected item. Left undefined until the visitor makes a
+    // choice (or arrives via a ?form= deep link that pre-selects one), so the
+    // embedded HubSpot form's extra fields stay hidden until they're relevant.
     @State()
-    selectedItem: MultiSelectFormItem;
+    selectedItem: MultiSelectFormItem | undefined;
 
     @State()
     formSubmitted = false;
@@ -60,13 +62,7 @@ export class PulumiMultiSelectForm {
     componentWillLoad() {
         if (this.defaultFormId !== "") {
             this.selectedItem = this.items.find(item => item.hubspotFormId === this.defaultFormId);
-
-            if (this.selectedItem) {
-                return;
-            }
         }
-
-        this.selectedItem = this.items[0];
     }
 
     // After the form submits we should hide the session selector.
@@ -98,19 +94,25 @@ export class PulumiMultiSelectForm {
     }
 
     // When the select input changes we need to update the state accordingly.
+    // An empty value means the visitor is back on the unselected placeholder,
+    // so collapse back to the not-yet-chosen state rather than crashing on a
+    // missing item.
     private handleSelectChange(hubspotFormId: string) {
-        this.selectedItem = this.items.find(item => item.hubspotFormId === hubspotFormId);
+        this.selectedItem = hubspotFormId ? this.items.find(item => item.hubspotFormId === hubspotFormId) : undefined;
     }
 
     render() {
-        const selectedFormId = this.selectedItem?.hubspotFormId;
+        const selectedFormId = this.selectedItem?.hubspotFormId || "";
 
         return (
             <div>
                 {this.formSubmitted ? null : (
                     <span>
                         <span class={this.labelClass || ""}>{this.labelText}</span>
                         <select class={this.selectClass || ""} onInput={(event: any) => this.handleSelectChange(event.target.value)}>
+                            <option value="" selected={!selectedFormId} disabled hidden>
+                                Please select
+                            </option>
                             {this.items.map(item => {
                                 const isSelected = item.hubspotFormId === selectedFormId;
                                 return (
@@ -122,7 +124,7 @@ export class PulumiMultiSelectForm {
                         </select>
                     </span>
                 )}
-                {this.selectedItem.cta ? (
+                {!this.selectedItem ? null : this.selectedItem.cta ? (
                     <div class="mt-8"><a class="btn btn-secondary" href={this.selectedItem.cta.url}>{this.selectedItem.cta.label}</a></div>
                 ) : (
                     <pulumi-hubspot-form key={selectedFormId} form-id={selectedFormId}></pulumi-hubspot-form>

theme/stencil/src/components/pulumi-multi-select-form/test/pulumi-multi-select-form.spec.tsx

@@ -12,9 +12,10 @@ describe("pulumi-multi-select-form", () => {
         <div>
            <span>
              <span></span>
-             <select></select>
+             <select>
+               <option disabled hidden selected value="">Please select</option>
+             </select>
            </span>
-           <pulumi-hubspot-form></pulumi-hubspot-form>
         </div>
       </pulumi-multi-select-form>
     `);