Neo landing page & event tile

content/events/neo-launch/index.md

@@ -0,0 +1,61 @@
+---
+# Name of the event, <= 60 characters
+title: Meet Neo, Your Newest Platform Engineer
+meta_desc: "You're Invited: Meet Neo, Your Newest Platform Engineer"
+meta_image: /images/product/neo-meta.png
+
+# A featured webinar will display first in the list.
+featured: false
+
+# Webinars with unlisted as true will not be shown on the webinar list
+unlisted: false
+
+# Gated webinars will have a registration form and the user will need
+# to fill out the form before viewing.
+gated: false
+
+# The layout of the landing page.
+type: webinars
+
+# External webinars will link to an external page instead of a webinar
+# landing/registration page. If the webinar is external you will need
+# set the 'block_external_search_index' flag to true so Google does not index
+# the webinar page created.
+external: true
+block_external_search_index: false
+
+# The url slug for the webinar landing page. If this is an external
+# webinar, use the external URL as the value here.
+url_slug: https://pulumi.com/product/neo
+
+# Content for the left hand side section of the page.
+main:
+    # Webinar title.
+    title: Meet Neo, Your Newest Platform Engineer
+
+    event_type: event # workshop | event
+
+    # Sortable date. The datetime Hugo will use to sort the webinars in date order.
+    sortable_date: 2025-09-16T09:00:00-00:00
+
+    # Duration of the webinar.
+    duration: 1 hour
+
+    # "virtual" will be shown under "show virtual events only", otherwise shown as City, State (seattle, wa)
+    location: virtual
+
+    # Description of the webinar.
+    description: Join the livestream on September 16th to see infrastructure that keeps pace with innovation.
+
+    # case-sensitive
+    tags:
+        level: # Beginner, Intermediate, Advanced
+        topics: ["Pulumi Features"]
+        languages: []
+
+# The right hand side form section.
+form:
+    # HubSpot form id.
+    hubspot_form_id:
+    salesforce_campaign_id:
+---

content/product/neo.md

@@ -0,0 +1,20 @@
+---
+title: "Pulumi Neo"
+layout: neo
+
+meta_title: "Pulumi Neo"
+meta_desc: "You're Invited: Meet Neo, Your Newest Platform Engineer"
+meta_image: /images/product/neo-meta.png
+
+overview:
+  title: Pulumi Neo
+  description: Join us September 16th at 10:00 AM PT for the exclusive introduction to Neo.
+  cta: Add the livestream to your calendar
+  link: https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=MGd1b3RzdWlkOHMwZmcydGxkbjluMjI3aHYgY183YmU5ZmU1MDBkNGZhZTg1OTE4Yzc3ODQ5ZDA0YzA4ZGZlN2FiYWQ3Mzc0NjE4NzU4YmRkMTkwMjcxMjI1ZTFmQGc&tmsrc=c_7be9fe500d4fae85918c77849d04c08dfe7abad7374618758bdd190271225e1f%40group.calendar.google.com
+
+demo_video:
+    title: Unveiling Neo – Your Newest Platform Engineer
+    subtitle: Breaking news from Pulumi – platform engineering is about to change.
+    videoID: 9GB9M2l1OgY
+
+---

layouts/product/neo.html

@@ -0,0 +1,124 @@
+{{ define "hero" }}
+    <header class="page-hero hidden xl:block">
+        <div class="flex justify-center h-72" style='background-image: url("/images/product/neo-hero.png"); background-position:center; background-repeat: no-repeat;' alt="Meet Neo, Your Newest Platform Engineer">
+            <div class="page-hero-title">
+            </div>
+        </div>
+        <div class="container mx-auto mt-8 text-center w-11/12 sm:w-9/12">
+            <h3>{{ .Params.overview.subtitle }}</h3>
+        </div>
+    </header>
+
+    <div class="xl:hidden">
+        {{ partial "hero.html" (dict "title" "Meet Neo" "subtitle" "Your Newest Platform Engineer") }}
+    </div>"
+{{ end }}
+
+{{ define "main" }}
+    {{ $pageContext := . }}
+
+    {{ if .Params.demo_video }}
+    <section id="demo-video" class="container mx-auto my-16 flex flex-col">
+        <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 flex flex-col justify-center">
+                <h5 class="text-gray-600 text-xl">{{ .Params.overview.description | markdownify }}</h5>
+                <div class="flex-col gap-y-6">
+                    <div class="flex justify-center my-3">
+                        <pulumi-hubspot-form form-id="61226f00-68f3-4a68-b11f-c2ba38189a2b"class="newsletter newsletter-dark-border"></pulumi-hubspot-form>
+                    </div>
+                </div>
+            </div>
+            <div class="w-full lg:w-1/2 mb-8 lg:mb-0">
+                <div id="video" style="position: relative; top: -100px;"></div>
+                <div class="responsive-video-container video-16-9 rounded-xl shadow-2xl relative h-0 overflow-hidden">
+                    <iframe
+                        src="https://www.youtube.com/embed/{{ .Params.demo_video.videoID }}?rel=0"
+                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
+                        allowfullscreen=""
+                        title="{{ .Params.demo_video.title }}"
+                        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.3s;box-shadow:0 8px 25px rgba(0,0,0,0.3)}.play-button:hover{background:rgba(255,255,255,1);transform:translate(-50%,-50%) scale(1.1);box-shadow:0 12px 35px rgba(0,0,0,0.4)}.play-button::after{content:'';border-left:36px solid #ff6b35;border-top:22px solid transparent;border-bottom:22px solid transparent;margin-left:8px}</style><a href=https://www.youtube.com/embed/{{ .Params.demo_video.videoID }}?autoplay=1><img src='https://img.youtube.com/vi/{{ .Params.demo_video.videoID }}/maxresdefault.jpg' alt='{{ .Params.demo_video.title }}'><div class='play-button'></div></a>"
+                    ></iframe>
+                </div>
+            </div>
+        </div>
+    </section>
+    {{ end }}
+
+    <section id="benefits" class="container mx-auto my-16">
+        {{ with .Params.why_idp }}
+            <h2 class="text-center">{{ .title }}</h2>
+            <p class="mx-auto max-w-5xl">
+                {{ .description }}
+            </p>
+            <div class="max-w-7xl mx-auto flex flex-wrap justify-content items-stretch text-left my-4">
+                {{ range $item := .benefits }}
+                    <div class="w-full sm:w-1/2 lg:w-1/4 p-3">
+                        <div class="h-full card bg-white p-8">
+                            <div class="icon-section mb-8 flex">
+                                {{ partial "color-icon.html" (dict "icon" $item.icon "icon_color" $item.color) }}
+                            </div>
+                            <div>
+                                <h5>{{ $item.title }}</h5>
+                            </div>
+                            <div class="mt-6">
+                                <p>{{ $item.description | markdownify }}</p>
+                            </div>
+                        </div>
+                    </div>
+                {{ end }}
+            </div>
+        {{ end }}
+    </section>
+
+    <section id="building-blocks " class="container my-20 mx-auto text-center px-6">
+        <h2 class="text-center">{{ .Params.building_blocks.title  }}</h2>
+        {{ range $index, $block := .Params.building_blocks.items }}
+            {{ $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-24">
+                <div class="w-full lg:w-1/2 lg:content-center {{ $padding }}">
+                    <h3 class="m-0 p-0 text-3xl">{{ $block.header }}</h3>
+                    <h4 class="p-0 my-4 text-left text-gray-700 text-xl">{{ $block.subheader }}</h4>
+                    <ul>
+                        {{ range $item := $block.body }}
+                            <li class="text-left">{{ $item | markdownify }}</li>
+                        {{ end }}
+                    </ul>
+                </div>
+                <div class="w-full lg:w-1/2 {{ $order }}">
+                    <img class="mx-auto" src="{{ $block.graphic }}" />
+                </div>
+            </div>
+        {{ end }}
+    </section>
+
+    <section id="learn" class="container mx-auto text-center mt-20 px-6">
+        <div class="max-w-5xl mx-auto text-center px-6">
+            <h2>{{ .Params.learn.title }}</h2>
+            <div class="text-left">{{ .Params.learn.description }}</div>
+        </div>
+        <div class="flex flex-wrap justify-content items-stretch text-left my-4">
+            {{ range $item := .Params.learn.items }}
+                <div class="w-full lg:w-1/2 p-3">
+                    <div class=" card h-full bg-white p-12">
+                        <div>
+                            <h5>{{ $item.title }}</h5>
+                        </div>
+                        <div class="mt-6">
+                            <p>{{ $item.description | markdownify }}</p>
+                        </div>
+                        {{ range $button := $item.buttons }}
+                            <div class="my-2 py-4 z-10 relative">
+                                <a href="{{ $button.link }}" class="z-10 btn-{{ $button.type }}">{{ $button.action }}</a>
+                            </div>
+                        {{ end }}
+                    </div>
+                </div>
+            {{ end }}
+        </div>
+    </section>
+{{ end }}