Pulumi Insights page updates for reinvent 2024 (#13424)

* edit Pulumi Insights page layout * PR feedback * Copy updates * PR feedback updates * More copy updates * update graphics * copy tweaks, aws section, video update --------- Co-authored-by: Aaron Kao <[email protected]>
pulumi · Nov 27, 2024 · 6e9f093 · 6e9f093
1 parent c2a6daa
commit 6e9f093
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 77 deletions.
diff --git a/content/product/pulumi-insights.md b/content/product/pulumi-insights.md
@@ -6,30 +6,62 @@ meta_desc: Pulumi Insights is Intelligent Cloud Management. Gain security, compl
 
 aliases:
 - /insights
+- /product/waitlist/
 
 overview:
-    titleTop: Intelligent Cloud Management
-    titleBottom: 
-    description: |
-        Pulumi Insights is an asset and compliance management service that gives search, compliance remediation, resource visualizations, and AI insights over any infrastructure, including resources not provisioned by Pulumi IaC such as AWS CloudFormation, Microsoft ARM, HashiCorp Terraform, or even manually.
+    header: Intelligent Cloud Management
+    title: Asset management, compliance remediation, and AI insights over the cloud
+    body: |
+      Pulumi Insights is an intelligent infrastructure management service to discover, understand, manage, and improve any cloud infrastructure, including resources not provisioned by Pulumi IaC such as AWS CloudFormation, Microsoft ARM, HashiCorp Terraform, or even manually. Insights improves security, compliance, and efficiency through AI-powered asset and compliance management. 
     items:
-        - title: Gain Unique Insights
-          icon: eye
+        - title: Stay Secure
+          icon: shield
           icon_color: purple
           description: |
-            Analyze and dig into your organization’s cloud usage and trends.
+            Detect security violations and remediate using security best practices.  
 
-        - title: Increase Productivity
-          icon: nodes
+        - title: Enforce Compliance
+          icon: gavel
           icon_color: yellow
           description: |
-            Reduce lead time from ideation to delivery through Pulumi AI and Pulumi Copilot.
+            Gain a comprehensive view of compliance policy violations across your organization and automate remediation. 
 
-        - title: Improve Operations
-          icon: shield
+        - title: Improve Efficiency
+          icon: cycle
           icon_color: blue
           description: |
-            Analyze and update infrastructure to optimize costs, enhance security, and ensure compliance. 
+            Analyze and dig into your organization’s cloud usage and trends to optimize costs and improve productivity. 
+
+workflow:
+  description: |
+      Making sense of the millions of cloud resources and resource updates per month, across hundreds of clouds, regions, and accounts is hard. Pulumi Insights provides you with the tools to to navigate all four phases of infrastructure management
+  items:
+    - header: Discover
+      body: Scan and sync all of your infrastructure to bring it under a single pane of glass, so you can understand the structure and status of your cloud footprint. 
+    - header: Understand
+      body: Find important insights about your cloud infrastructure so you can reach your business objectives faster. 
+    - header: Manage
+      body: Refactor and structure your infrastructure into logical resource groups that map key insights with business needs. 
+    - header: Improve
+      body: Execute improvement plans for each logical resource group to support business priorities. 
+
+features:
+  - header: Resource Search
+    subheader: Find anything in any cloud
+    body: Ask any questions about your infrastructure across more than 100 clouds, using either structured search queries or natural language prompts. Search helps you find that needle in the haystack – locating a single resource across many clouds and environments – as well as running sophisticated queries such as tracking down untagged or expensive resources across the whole organization.
+    graphic: /images/product/insights-resource-search.png
+  - header: Policy Violations
+    subheader: Discover violations and enforce compliance
+    body: Pulumi Insights provides a comprehensive view of all policy violations across your organization, helping you maintain visibility and control over your infrastructure.
+    graphic: /images/product/insights-policy.png
+  - header: AI Copilot
+    subheader: Converse about your infrastructure
+    body: Pulumi Copilot makes discovering cost savings, running compliance checks, and debugging deployments across your Kubernetes resources as easy as typing a question. 
+    graphic: /images/product/insights-copilot.png
+  - header: Scan & Sync AWS Resources
+    subheader: Gain Visibility Across All Your AWS Resources
+    body: Pulumi Insights scans and syncs your entire AWS infrastructure, including resources not managed Pulumi IaC. This brings all the features of Pulumi Insights to all your organization’s cloud infrastructure.
+    graphic: /images/product/insights-scan-sync.png
 
 ai:
     title: AI
@@ -38,13 +70,6 @@ ai:
     description: |
         Automate infrastructure management tasks through AI. You can tap into the Pulumi Copilot's deep understanding of your user and organization context to gain visibility into your team's activity, discover cost saving opportunities, get compliant, and debug cloud failures. 
 
-search:
-    title: Search
-    subtitle: Find anything in any cloud
-    image: https://www.pulumi.com/uploads/pulumi-insights-search.gif
-    description: |
-        Ask any questions about your infrastructure across more than 100 clouds, using either structured search queries or natural language prompts. Search helps you find that needle in the haystack – locating a single resource across many clouds and environments – as well as running sophisticated queries such as tracking down untagged or expensive resources across the whole organization.
-
 customer_quotes:
   alkira:
     text: |

diff --git a/layouts/product/pulumi-insights.html b/layouts/product/pulumi-insights.html
@@ -1,17 +1,33 @@
 {{ define "hero" }}
-    {{ partial "hero" (dict "title" .Params.title) }}
+    {{ partial "hero" (dict "title" .Params.title "subtitle" .Params.overview.header) }}
 {{ end }}
 
 {{ define "main" }}
     {{ $pageContext := . }}
 
-
-    <section id="overview" class="max-w-5xl mx-auto text-center mb-16 mt-2 px-6">
-        {{ with .Params.overview }}
-            <h2>{{ .titleTop }}<br />{{ .titleBottom }}</h2>
-            <p>{{ .description | markdownify }}</p>
-        {{ end }}
-        <div class="flex flex-wrap justify-content items-stretch text-left mt-8">
+    <section id="description" class="container mx-auto my-16 flex flex-col">
+        <h4 class="hidden lg:block xl:hidden text-center mb-8">{{ .Params.overview.title }}</h4>
+        <div class="flex flex-col lg:flex-row px-8">
+            <div class="w-full lg:w-1/2 lg:pr-8 order-last lg:order-first">
+                <h4 class="block lg:hidden xl:block text-2xl">{{ .Params.overview.title }}</h4>
+                <p>{{ .Params.overview.body | markdownify }}</p>
+                <div class="mt-8 flex justify-center">
+                    <a href="/docs/pulumi-cloud/insights/" class="btn-primary">Get Started with Pulumi Insights</a>
+                </div>
+            </div>
+            <div class="w-full lg:w-1/2 mb-8 lg:mb-0">
+                <div class="rounded-xl shadow-2xl relative h-0 overflow-hidden" style="padding-bottom: 50.25%;">
+                    <iframe
+                        src="https://www.youtube.com/embed/hXXRVbURKsQ?rel=0"
+                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
+                        allowfullscreen=""
+                        title="Pulumi Insights Overview"
+                        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href=https://www.youtube.com/embed/hXXRVbURKsQ?autoplay=1><img src='/images/video-cards/insights-thumbnail.png' alt='Pulumi Insights Overview'></a>"
+                    ></iframe>
+                </div>
+            </div>
+        </div>
+        <div class="flex flex-wrap justify-content items-stretch text-left mt-16">
             {{ range $item := .Params.overview.items }}
                 <div class="w-full lg:w-1/3 p-3">
                     <div class="h-full card bg-white p-12">
@@ -30,24 +46,42 @@ <h5>{{ $item.title }}</h5>
         </div>
     </section>
 
-    <section id="announcement" class="max-w-full mx-auto text-center my-8 px-6">
-        <div class="flex justify-center rounded-md bg-violet-100">
-            <p class="text-center">
-                ✨ <span class="font-bold">New - Pulumi Insights 2.0 - Import and Sync All Cloud Infrastructure:</span> <a href="/product/waitlist"> Sign up for the waitlist</a> ✨
-            </p>
+    <section id="workflow" class="my-20 px-4">
+        <div class="container mx-auto">
+            <h2 class="text-center mb-4">Workflow</h2>
+            <div class="max-w-4xl mx-auto text-center my-8">{{ .Params.workflow.description }}</div>
+            <div class="p-0.5 rounded-lg" style="background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%);">
+                <div class="rounded-lg bg-white flex flex-wrap mx-auto p-4">
+                    {{ range $feature := .Params.workflow.items }}
+                        <div class="w-1/2 md:w-1/3 lg:w-1/4 p-4">
+                            <div class="text-center h-full">
+                                <h5>{{ $feature.header }}</h5>
+                                <p>{{ $feature.body }}</p>
+                            </div>
+                        </div>
+                    {{ end }}
+                </div>
+            </div>
         </div>
     </section>
 
     <section id="search " class="container my-20 mx-auto text-center px-6">
-        {{ with .Params.search }}
-            <div class="container mx-auto flex flex-col lg:flex-row">
-                <div class="w-full lg:w-1/2 lg:content-center lg:pl-16">
-                    <h2 class="m-0 p-0">{{ .title }}</h2>
-                    <h4 class="p-0 m-0 text-gray-800">{{ .subtitle }}</h4>
-                    <div class="max-w-4xl mx-auto my-8">{{ .description | markdownify }}</div>
+        <h2 class="text-center">Key Features</h2>
+        {{ range $index, $feature := .Params.features }}
+            {{ $order := "lg:order-first lg:pr-4" }}
+            {{ $padding := "lg:pl-16" }}
+            {{ if eq (mod $index 2) 0 }}
+                {{ $order = "lg:order-last lg:pl-4"}}
+                {{ $padding = "lg:pr-16" }}
+            {{ end }}
+            <div class="container mx-auto flex flex-col text-center lg:flex-row my-16">
+                <div class="w-full lg:w-1/2 lg:content-center {{ $padding }}">
+                    <h3 class="m-0 p-0">{{ $feature.header }}</h3>
+                    <h4 class="p-0 m-0 text-gray-800">{{ $feature.subheader }}</h4>
+                    <div class="max-w-4xl mx-auto my-8">{{ $feature.body | markdownify }}</div>
                 </div>
-                <div class="w-full lg:w-1/2 lg:order-first">
-                    <img class="mx-auto lg:ml-0 rounded shadow-lg" src="{{ .image }}" alt="Pulumi Insights Search" />
+                <div class="w-full lg:w-1/2 {{ $order }}">
+                    <img class="mx-auto" src="{{ $feature.graphic }}" />
                 </div>
             </div>
         {{ end }}
@@ -64,48 +98,19 @@ <h4 class="p-0 m-0 text-gray-800">{{ .subtitle }}</h4>
         </div>
     </section>
 
-    <section id="analytics" class="container my-28 mx-auto text-center px-6">
-        {{ with .Params.analytics }}
-            <div class="card p-6 lg:p-28 bg-white">
+    <section id="pricing" class="container my-20 mx-auto text-center">
+        {{ with .Params.pricing }}
+            <div class="card p-6 lg:p-16 bg-white">
                 <h2 class="m-0 p-0">{{ .title }}</h2>
-                <h4 class="p-0 m-0 text-gray-800">{{ .subtitle }}</h4>
-                <div class="max-w-4xl mx-auto my-8">{{ .description | markdownify }}</div>
-                <img class="mx-auto my-8 rounded shadow-lg" src="{{ .image }}" alt="Pulumi Insights Analytics" />
-            </div>
-        {{ end }}
-    </section>
-
-    <div class="bg-gray-100">
-        <section id="ai" class="container mt-16 mb-20 mx-auto text-center px-6 py-8 flex flex-col lg:flex-row">
-            {{ with .Params.ai }}
-                <div class="w-full lg:w-1/2 lg:content-center lg:pr-16">
-                    <h2 class="m-0 p-0">{{ .title }}</h2>
-                    <h4 class="p-0 m-0 text-gray-800">{{ .subtitle }}</h4>
-                    <div class="max-w-4xl mx-auto my-8">{{ .description | markdownify }}</div>
-                    <div class="w-full flex justify-center items-center">
-                        <div class="h-12">
-                            <a class="btn-primary" href="https://app.pulumi.com">Try it Now</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="w-full lg:w-1/2 content-center">
-                    <img class="mx-auto lg:mr-0 rounded shadow-lg" src="{{ .image }}" alt="Pulumi Insights AI" />
+                <p class="mx-auto">{{ .description | markdownify }}</p>
+                <div class="mt-12">
+                    <a href="/pricing" class="btn-secondary">View Pricing</a>
                 </div>
-            {{ end }}
-        </section>
-    </div>
-
-    <section id="pricing" class="container mx-auto text-center mt-28 px-6">
-        {{ with .Params.pricing }}
-            <h2>{{ .title }}</h2>
-            <p class="max-w-2xl mx-auto">{{ .description | markdownify }}</p>
-            <div class="mt-12">
-                <a href="{{ relref $pageContext "/pricing" }}" class="btn-secondary">View Pricing</a>
             </div>
         {{ end }}
     </section>
 
-    <section id="get-started" class="container px-6 lg:px-0 mx-auto my-28 px-6">
+    <section id="get-started" class="container px-6 lg:px-0 mx-auto my-20 px-6">
         <div class="w-full bg-violet-600 card p-6 lg:p-16 lg:pt-24 text-center">
             <div class="max-w-xl mx-auto">
                 <h2 class="text-white hidden lg:block px-0 lg:px-16">{{ .Params.get_started.title }}</h2>

diff --git a/static/images/product/insights-copilot.png b/static/images/product/insights-copilot.png
diff --git a/static/images/product/insights-policy.png b/static/images/product/insights-policy.png
diff --git a/static/images/product/insights-scan-sync.png b/static/images/product/insights-scan-sync.png
diff --git a/static/images/video-cards/insights-thumbnail.png b/static/images/video-cards/insights-thumbnail.png