195 lines
9.4 KiB
HTML
195 lines
9.4 KiB
HTML
{{ define "hero" }}
|
|
<header class="home-page-hero">
|
|
<div class="dot-background-container pointer-events-none">
|
|
<div class="dot-background"></div>
|
|
</div>
|
|
<div class="dot-overlay"></div>
|
|
<div class="home-page-hero-content p-20">
|
|
<div class="w-full flex flex-col items-center justify-center">
|
|
<h1 class="relative">
|
|
<span class="rainbow-text" data-text="{{ .Params.heading }}">{{ .Params.heading }}</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{{ end }}
|
|
|
|
{{ define "main" }}
|
|
<section id="overview" class="sm:mt-24 mb-16 relative">
|
|
<div class="shape-background product-overview-section">
|
|
<div class="shape-container">
|
|
<div class="circle-right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto text-center">
|
|
<div class="w-full p-4">
|
|
<h2>{{ .Params.overview.title | markdownify }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="container mx-auto">
|
|
<p class="mx-auto text-center text-gray-600 w-6/12">
|
|
{{ .Params.overview.description | markdownify }}
|
|
</p>
|
|
</div>
|
|
<div class="container mx-auto text-center pt-16 w-9/12">
|
|
<a href="/get-started/" class="btn-primary">Get Started</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="info-graphic" class="relative p-4 mb-16">
|
|
<div class="container mx-auto rounded-xl bg-white">
|
|
<img class="block z-10" src="/images/product/pulumi_marketecture.png" alt="Pulumi Cloud Engineering Platform" />
|
|
</div>
|
|
</section>
|
|
|
|
<section id="key-features-above">
|
|
{{ range $index, $feature := .Params.key_features_above.items }}
|
|
<div class="mb-16 pt-8 relative">
|
|
{{ if eq $index 0 }}
|
|
<div class="shape-background home-background-yellow-left pt-24">
|
|
<div class="shape-container flex">
|
|
<div class="circle-left"></div>
|
|
<div class="circle-right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto mt-16 text-center w-11/12 sm:w-9/12">
|
|
<h3>{{ $feature.title }}</h3>
|
|
<div class="flex flex-col lg:flex-row">
|
|
<div class="w-full my-auto lg:w-1/2 lg:mr-32 z-10 p-8 text-left">
|
|
<h4>{{ $feature.sub_title}}</h4>
|
|
<p class="text-lg">{{ $feature.description | markdownify }}</p>
|
|
</div>
|
|
<div class="w-full lg:w-1/2 block lg:flex lg:justify-center lg:align-center">
|
|
<img src="/images/product/pulumi-iac-code.png" alt="Pulumi infrastructure as code example" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<div class="shape-background home-background-salmon-right pt-24">
|
|
<div class="shape-container">
|
|
<div class="circle-left"></div>
|
|
<div class="circle-right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto mt-16 text-center w-11/12 sm:w-9/12">
|
|
<h3>{{ $feature.title }}</h3>
|
|
<div class="flex flex-col lg:flex-row">
|
|
<div class="w-full lg:w-1/2 block lg:flex lg:justify-center p-6 md:pl-24 xl:pl-0">
|
|
<img src="/images/product/pulumi-iac-code.png" alt="Pulumi infrastructure as code example" />
|
|
</div>
|
|
<div class="w-full my-auto lg:w-1/2 lg:ml-32 z-10 p-8 text-left">
|
|
<h4>{{ $feature.sub_title}}</h4>
|
|
<p class="text-lg">{{ $feature.description | markdownify }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end}}
|
|
|
|
<div class="max-w-7xl mx-auto flex flex-wrap justify-content items-stretch text-left my-4">
|
|
{{ range $item := $feature.features }}
|
|
<div class="w-full lg:w-1/3 p-3">
|
|
<div class="h-full card bg-white p-8">
|
|
<div class="icon-section mb-8">
|
|
{{ 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>
|
|
<div class="pt-8 text-center">
|
|
<a href="{{ $feature.button.link }}" class="btn-secondary block sm:inline">{{ $feature.button.text }}</a>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</section>
|
|
|
|
<section id="key-features">
|
|
<div class="shape-background product-features-section">
|
|
<div class="shape-container">
|
|
<div class="circle-left"></div>
|
|
<div class="circle-right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ range $item := .Params.key_features.items }}
|
|
<div class="container mx-auto text-center pt-20 w-11/12 sm:w-9/12">
|
|
<h3>{{ $item.title }}</h3>
|
|
<h4>{{ $item.sub_title }}</h4>
|
|
<p class="mx-auto w-9/12 xl:w-7/12 my-12 text-center text-gray-600">
|
|
{{ $item.description | markdownify }}
|
|
</p>
|
|
<!-- <img class="w-full hidden lg:block z-10" src="{{ $item.image }}" alt="Pulumi Cloud Engineering Platform" /> -->
|
|
{{ if not (eq $item.image nil) }}
|
|
<div class="max-w-4xl container flex flex-col items-center mx-auto">
|
|
<img src="{{ $item.image }}" alt="Pulumi infrastructure as code example" />
|
|
</div>
|
|
{{ end }}
|
|
{{ if not (eq $item.ide nil) }}
|
|
<div class="max-w-4xl container text-left card bg-white p-6 mx-auto">
|
|
<pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
|
|
{{ range $lang := $item.ide }}
|
|
<pulumi-choosable type="language" class="highlight" value="{{ $lang.language }}">
|
|
{{ partial "code" (dict "lang" $lang.language "code" $lang.code "mode" "light") }}
|
|
</pulumi-choosable>
|
|
{{ end }}
|
|
</pulumi-chooser>
|
|
</div>
|
|
{{ end }}
|
|
<div class="mb-8 my-24">
|
|
<div class="flex flex-wrap lg:flex-row">
|
|
{{ range $feature := $item.features }}
|
|
<div class="w-full lg:w-1/3 px-8 lg:mb-4">
|
|
<h5>{{ $feature.title }}</h5>
|
|
<p class="key-feature-description">{{ $feature.description | markdownify }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<div class="pt-8">
|
|
<a href="{{ $item.button.link }}" class="btn-secondary block sm:inline">{{ $item.button.text }}</a>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</section>
|
|
|
|
<section id="get-started" class="my-32 relative">
|
|
<div class="shape-background product-get-started-section">
|
|
<div class="shape-container">
|
|
<div class="circle-center"></div>
|
|
<div class="circle-right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto">
|
|
<h2 class="mb-8 text-center">{{ .Params.get_started.title }}</h2>
|
|
|
|
<div class="lg:flex items-stretch">
|
|
<div class="w-full lg:w-1/2 px-4 py-2 lg:p-8 lg:px-4">
|
|
<div class="lg:shadow-2xl bg-violet-600 p-8 lg:px-24 lg:pt-4 g:pb-12 rounded-xl">
|
|
<h4 class="text-white">{{ .Params.get_started.get_started.title }}</h4>
|
|
<p class="mb-24 text-white">{{ .Params.get_started.get_started.description }}</p>
|
|
<a href="{{ relref . "/docs/get-started" }}" class="btn-secondary">{{ .Params.get_started.get_started.cta_text }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full lg:w-1/2 px-4 py-2 lg:p-8 lg:px-4">
|
|
<div class="border lg:border-none lg:shadow-2xl p-8 lg:px-24 lg:pt-4 g:pb-12 rounded-xl bg-white">
|
|
<h4>{{ .Params.get_started.migrate.title }}</h4>
|
|
<p class="mb-16 pb-1">{{ .Params.get_started.migrate.description }}</p>
|
|
<a href="{{ relref . "/docs/using-pulumi/adopting-pulumi/converters" }}" class="btn-secondary">{{ .Params.get_started.migrate.cta_text }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|