Add CrossCode page (#25)

themes/default/content/crosscode/_index.md

@@ -0,0 +1,57 @@
+---
+title: Pulumi CrossCode
+type: page
+layout: crosscode
+meta_title: Pulumi CrossCode
+meta_desc: |
+    Pulumi CrossCode is the underlying technology of Pulumi, providing universal infrastructure and policy as code to cloud developers and infrastructure experts.
+
+description: |
+    Pulumi CrossCode is the underlying technology of Pulumi that provides universal infrastructure and policy as code to all cloud builders, developers and infrastructure experts. CrossCode provides the universal translation layer to the Pulumi infrastructure as code engine.
+
+    CrossCode is composed of Pulumi's open source code generation, program generation, schema, and packages software. [View on GitHub](https://github.com/pulumi/pulumi/tree/master/pkg/codegen).
+
+capabilities:
+    title: Capabilities of Pulumi CrossCode
+    items:
+        - title: Build infrastructure in all popular programming languages
+          icon: rocketship
+          icon_color: salmon
+          description: |
+            CrossCode enables a polyglot world where one team can write infrastructure as code components in one language and another team can consume them from another language. CrossCode supports any JVM language (Java, Scala, Kotlin, Clojure), .NET (C#, F#, PowerShell), Node.js (JavaScript, TypeScript), Go, Python, and markup languages (YAML, JSON, CUE). CrossCode components enable the sharing and reuse of well-architected building blocks that can be consumed across the organization.
+          more:
+            label: Read more
+            href: "/docs/intro/languages"
+
+        - title: Convert from any infrastructure as code format
+          icon: gear
+          icon_color: violet
+          description: |
+            CrossCode can translate existing infrastructure as code, such as Terraform HCL, AWS CloudFormation templates, Azure Resource Manager templates, and Kubernetes YAML, to Pulumi. This helps organizations preserve existing infrastructure as code assets but carry them forward into the future.
+          more:
+            label: Read more
+            href: "/docs/converters"
+
+        - title: Import infrastructure directly from any cloud
+          icon: abstract-shapes
+          icon_color: blue
+          description: |
+            CrossCode can import existing infrastructure and generate the infrastructure as code in any supported Pulumi language. This works for any infrastructure no matter if it was provisioned manually or by another infrastructure as code system.
+          more:
+            label: Read more
+            href: "/docs/guides/adopting/import"
+
+        - title: Enforce policy in all popular programming languages
+          icon: shield
+          icon_color: yellow
+          description: |
+            CrossCode enables Pulumi CrossGuard policy as code to be written in all popular programming languages (Java, .NET, TypeScript, Go, Python) and markup languages (YAML, JSON, CUE). Policy as code empowers organizations to enforce resource compliance through programmable guardrails.
+          more:
+            label: Read more
+            href: "/docs/guides/crossguard"
+
+questions:
+    title: Questions?
+    description: |
+        Questions about Pulumi CrossCode? We're happy to help.
+---

themes/default/layouts/page/crosscode.html

@@ -0,0 +1,69 @@
+{{ define "hero" }}
+    {{ partial "hero" (dict "title" .Params.title) }}
+{{ end }}
+
+{{ define "main" }}
+    {{ $pageContext := . }}
+
+    <section id="crosscode-overview" class="relative">
+        <div class="shape-background crosscode-overview">
+            <div class="relative w-full h-full">
+                <div class="circle-right"></div>
+            </div>
+        </div>
+        <div class="max-w-6xl mx-auto flex flex-col items-center px-6 text-lg text-gray-800">
+            <div class="max-w-3xl my-12">
+                <p>{{ .Params.description | markdownify }}</p>
+            </div>
+            <div>
+                <img src="/images/product/cloud-engineering-platform.png" alt="Pulumi Cloud Engineering Platform">
+            </div>
+        </div>
+    </section>
+
+    <section id="crosscode-capabilities" class="relative">
+        <div class="shape-background">
+            <div class="relative w-full h-full">
+                <div class="circle-left"></div>
+                <div class="circle-right"></div>
+            </div>
+        </div>
+        <div class="max-w-7xl mx-auto flex flex-col items-center my-28 px-6">
+            {{ with .Params.capabilities }}
+                <h2 class="text-center">{{ .title }}</h2>
+                <div class="flex flex-col sm:flex-row flex-wrap mt-16 justify-between sm:ml-8">
+                    {{ range $item := .items }}
+                        <div class="w-full sm:w-1/2 ">
+                            <div class="flex flex-col card xl:h-128 sm:mr-8 mb-9 p-12 items-start bg-white">
+                                <div class="icon-section">
+                                    {{ partial "color-icon.html" (dict "icon" $item.icon "icon_color" $item.icon_color) }}
+                                </div>
+                                <h5 class="mt-9 mb-6">{{ $item.title }}</h5>
+                                <p>
+                                    {{ $item.description | markdownify }}
+                                    {{ if $item.more }}
+                                        <p><a href="{{ $item.more.href }}">{{ $item.more.label }} &rarr;</a></p>
+                                    {{ end }}
+                                </p>
+                            </div>
+                        </div>
+                    {{ end }}
+                </div>
+            {{ end}}
+        </div>
+    </section>
+
+    <section id="crosscode-questions" class="container px-6 lg:px-0 mx-auto my-28 px-6 flex justify-center">
+        {{ with .Params.questions }}
+            <div class="w-full sm:w-10/12 bg-violet-600 card px-12 sm:px-20 py-16 text-center rounded-xl">
+                <div class="max-w-lg mx-auto">
+                    <h2 class="text-white mt-16">{{ .title }}</h2>
+                    <p class="text-white">{{ .description }}</p>
+                    <div class="flex flex-col sm:flex-row mt-16 justify-center">
+                        <a class="btn-secondary w-56" href="{{ relref $pageContext "/contact" }}">Contact Us</a>
+                    </div>
+                </div>
+            </div>
+        {{end}}
+    </section>
+{{ end }}