create startup offer page (#2971)

* create startup offer page

* feedback updates: fix customer logos, adjust sizing, text changes

* update styles for left side text

* update copy

themes/default/assets/css/bundle.css

@@ -13213,6 +13213,77 @@ ul.glossary{
   stroke:#4d5bd9
 }
 
+.icon-clock{
+  display: inline-block;
+  height: 5rem;
+  width: 5rem;
+  border-radius: 9999px;
+  padding: 1rem
+}
+
+.icon-clock-black{
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
+}
+
+.icon-clock-black svg *{
+  stroke:#000
+}
+
+.icon-clock-yellow{
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 249, 234, var(--tw-bg-opacity))
+}
+
+.icon-clock-yellow svg *{
+  stroke:#f7bf2a
+}
+
+.icon-clock-salmon{
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 241, 242, var(--tw-bg-opacity))
+}
+
+.icon-clock-salmon svg *{
+  stroke:#f26e7e
+}
+
+.icon-clock-fuchsia{
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 237, 243, var(--tw-bg-opacity))
+}
+
+.icon-clock-fuchsia svg *{
+  stroke:#bd4c85
+}
+
+.icon-clock-purple{
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 235, 244, var(--tw-bg-opacity))
+}
+
+.icon-clock-purple svg *{
+  stroke:#8a3391
+}
+
+.icon-clock-violet{
+  --tw-bg-opacity: 1;
+  background-color: rgba(242, 239, 249, var(--tw-bg-opacity))
+}
+
+.icon-clock-violet svg *{
+  stroke:#805ac3
+}
+
+.icon-clock-blue{
+  --tw-bg-opacity: 1;
+  background-color: rgba(237, 239, 251, var(--tw-bg-opacity))
+}
+
+.icon-clock-blue svg *{
+  stroke:#4d5bd9
+}
+
 .icon-clode-with-nodes{
   display: inline-block;
   height: 5rem;

themes/default/content/pulumi-for-startups/_index.md

@@ -0,0 +1,7 @@
+---
+title: Pulumi Startup Discount Offer
+meta_desc: Pulumi is here to help your startup scale. Leverage familiar languages to spin up and scale out your cloud infrastructure quickly and efficiently.
+
+type: page
+layout: pulumi-for-startups
+---

themes/default/layouts/page/pulumi-for-startups.html

@@ -0,0 +1,83 @@
+{{ define "hero" }}
+    <header class="page-hero">
+        <div class="dot-background-container">
+            <div class="dot-background"></div>
+        </div>
+        <div class="dot-overlay"></div>
+        <div class="page-hero-title">
+            <h1 class="rainbow-text mb-0">Pulumi for Startups</h1>
+        </div>
+    </header>
+{{ end }}
+
+{{ define "main" }}
+    <h2 class="mt-8 text-center">Get <b>$10,000</b> in Pulumi credits and exclusive help for your projects</h2>
+
+    <section id="success-stories" class="text-center p-8">
+        <div class="card mx-auto w-full lg:w-1/2 p-8">
+            <h3 class="text-gray-700 text-3xl font-medium">Pulumi Startup Success Stories</h3>
+            <div class="flex lg:flex-row flex-wrap justify-center space-x-4 spacy-y-4">
+                <a href="/case-studies/sourcegraph/"><img src="/logos/customers/sourcegraph-logo-cropped.svg" class="h-6 lg:h-8 my-2" alt="Sourcegraph" /></a>
+                <a href="/case-studies/panther-labs/"><img src="/logos/customers/panther-labs-wordmark.svg" class="h-6 lg:h-8 my-2" alt="Panther" /></a>
+                <img src="/logos/customers/cockroach-labs-logo.svg" class="h-6 lg:h-8 my-2" alt="CockroachDB" />
+                <a href="/case-studies/lemonade/"><img src="/logos/customers/lemonade-cropped.svg" class="h-6 lg:h-8 my-2" alt="Lemonade" /></a>
+            </div>
+        </div>
+    </section>
+
+    <section id="details" class="container mx-auto py-8 justify-center flex flex-col lg:flex-row">
+        <div class="w-full lg:w-1/2 pr-8">
+            <h3 class="flex align-middle text-black ml-8 lg:ml-0">
+                {{ partial "color-icon.html" (dict "icon" "rocketship" "icon_color" "black") }}<span class="hidden lg:block" style="line-height: 80px;"
+                    >Why Pulumi for Startups?</span
+                ><span class="block lg:hidden">Why Pulumi for Startups?</span>
+            </h3>
+            <h4 class="flex align-middle text-2xl ml-12 lg:ml-5 mt-2">
+                <span class="mr-7 w-8 h-8 text-center bg-orange-200 rounded-full hidden lg:block">1</span><span>Help your small, nimble team scale up infrastructure</span>
+            </h4>
+            <p class="text-gray-600 pl-12 lg:pl-20">
+                Pulumi for Startups is the easiest way for early-stage companies to build and deploy their cloud apps, using our Infrastructure as Code (IaC) platform. Your team
+                can manage and automate cloud infrastructure, using their favorite programming languages like JavaScript, TypeScript, Python, .NET, Java, and Go. Adopt the best of
+                the cloud without having to learn new DSL dialects and remove the need to dedicate entire teams to just manage and scale your infrastructure.
+            </p>
+            <h4 class="flex align-middle text-2xl ml-12 lg:ml-5">
+                <span class="mr-7 w-8 h-8 text-center bg-salmon-200 rounded-full hidden lg:block">2</span><span>Get $10,000 in Pulumi credits</span>
+            </h4>
+            <p class="text-gray-600 pl-12 lg:pl-20">
+                You’ll get the best of Pulumi with $10,000 in free Pulumi Credits and access to Pulumi Enterprise edition features for your whole team.
+            </p>
+            <h4 class="flex align-middle text-2xl ml-12 lg:ml-5">
+                <span class="mr-7 w-8 h-8 text-center bg-violet-200 rounded-full hidden lg:block">3</span><span>Access to exclusive office hours and events</span>
+            </h4>
+            <p class="text-gray-600 pl-12 lg:pl-20">You will get access to exclusive office hours and workshops to help you ship your product quickly.</p>
+            <h3 class="flex align-middle text-black ml-8 lg:ml-0">
+                {{ partial "color-icon.html" (dict "icon" "team" "icon_color" "black") }}<span style="line-height: 80px;">Who can join?</span>
+            </h3>
+            <p class="text-gray-600 pl-12 lg:pl-20 mt-0">Pulumi for Startups is designed for pre-series A companies with less than $1M in annual revenue.</p>
+            <h3 class="flex align-middle text-black ml-8 lg:ml-0">
+                {{ partial "color-icon.html" (dict "icon" "clock" "icon_color" "black") }}<span class="hidden xl:block" style="line-height: 80px;"
+                    >How long does the program last?</span
+                ><span class="block xl:hidden">How long is the program?</span>
+            </h3>
+            <p class="text-gray-600 pl-12 lg:pl-20 mt-0">Pulumi for Startups lasts for up to 2 years.</p>
+        </div>
+        <div class="w-full lg:w-1/2 pl-8">
+            <div class="mt-10 md:mt-0 md:mx-8 bg-gray-200 rounded p-6">
+                <pulumi-hubspot-form form-id="a325e554-3483-416c-901a-c64ed34da3bc"></pulumi-hubspot-form>
+            </div>
+        </div>
+    </section>
+
+    <section id="lemonade-testimonial" class="container mx-auto px-4 my-16 flex justify-center text-center">
+        <div class="w-full lg:w-1/2">
+            <p>
+                <i
+                    >"Pulumi supercharged our whole organization and empowered our developer teams to self-provision resources and ship new capabilities faster without having to
+                    wait for the infrastructure team to deploy new resources on their behalf."</i
+                >
+            </p>
+            <p class="mb-0 font-semibold">- Igor Shapiro, Principal Engineer</p>
+            <span class="flex justify-center">{{ partial "customer-logos/lemonade" }}</span>
+        </div>
+    </section>
+{{ end }}

themes/default/layouts/partials/icons/clock.html

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12.9875 0.25C6.0875 0.25 0.5 5.85 0.5 12.75C0.5 19.65 6.0875 25.25 12.9875 25.25C19.9 25.25 25.5 19.65 25.5 12.75C25.5 5.85 19.9 0.25 12.9875 0.25ZM13.625 6.5H11.75V14L18.3125 17.9375L19.25 16.4L13.625 13.0625V6.5Z"
+    />
+</svg>

themes/default/theme/src/scss/_hero.scss

@@ -143,4 +143,4 @@
     &::after {
         @apply top-0;
     }
-}
+}

themes/default/theme/src/scss/_icons.scss

@@ -13,6 +13,7 @@ $fa-font-path: "/fonts/fontawesome";
     "alert"
     "buildings"
     "clipboard"
+    "clock"
     "clode-with-nodes"
     "cloud-with-nodes"
     "cloud"