94 lines
4.3 KiB
HTML
94 lines
4.3 KiB
HTML
|
{{ define "hero" }}
|
||
|
|
{{ partial "hero.html" (dict "title" .Params.title) }}
|
||
|
|
{{ end }}
|
||
|
|
|
||
|
|
{{ define "main" }}
|
||
|
|
<!-- Overview -->
|
||
|
|
<section class="container mx-auto my-16">
|
||
|
|
<div class="flex flex-wrap">
|
||
|
|
<div class="max-w-5xl mx-auto text-center my-16 px-6">
|
||
|
|
<h2>{{ .Params.overview.title }}</h2>
|
||
|
|
<p>{{ .Params.overview.description | markdownify }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Logos carousel -->
|
||
|
|
<section class="container mx-auto text-center overflow-hidden px-3 mt-24">
|
||
|
|
<h3 class="text-center mb-10">{{ .Params.customer_logos.title }}</h3>
|
||
|
|
|
||
|
|
<div class="w-full order-first pb-16 items-center justify-center hidden lg:block">
|
||
|
|
<pulumi-swiper slides="6" centered-slides="true" loop="true" autoplay="true" autoplay-delay="500" speed="2000">
|
||
|
|
{{ range $logo := .Params.customer_logos.logos }}
|
||
|
|
<pulumi-swipeable>
|
||
|
|
<div class="p-6 flex flex-col flex-grow items-end h-24 justify-center">
|
||
|
|
{{ if $logo.link }}
|
||
|
|
<a class="w-full h-full" href="{{ $logo.link }}" target="_blank">
|
||
|
|
{{ partial "customer-logo.html" (dict "logo" $logo.name) }}
|
||
|
|
</a>
|
||
|
|
{{ else }}
|
||
|
|
{{ partial "customer-logo.html" (dict "logo" $logo.name) }}
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</pulumi-swipeable>
|
||
|
|
{{ end }}
|
||
|
|
</pulumi-swiper>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w-full order-first pb-16 items-center justify-center block lg:hidden">
|
||
|
|
<pulumi-swiper slides="3" centered-slides="true" loop="true" autoplay="true" autoplay-delay="500" speed="2000">
|
||
|
|
{{ range $logo := .Params.customer_logos.logos }}
|
||
|
|
<pulumi-swipeable>
|
||
|
|
<div class="p-6 flex flex-col flex-grow items-end h-24 justify-center">
|
||
|
|
{{ if $logo.link }}
|
||
|
|
<a class="w-full h-full" href="{{ $logo.link }}" target="_blank">
|
||
|
|
{{ partial "customer-logo.html" (dict "logo" $logo.name) }}
|
||
|
|
</a>
|
||
|
|
{{ else }}
|
||
|
|
{{ partial "customer-logo.html" (dict "logo" $logo.name) }}
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</pulumi-swipeable>
|
||
|
|
{{ end }}
|
||
|
|
</pulumi-swiper>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Benefits -->
|
||
|
|
<section class="container mx-auto my-16 text-center">
|
||
|
|
<h2>{{ .Params.benefits.title }}</h2>
|
||
|
|
<div class="flex flex-wrap items-stretch justify-center">
|
||
|
|
{{ range $benefit := .Params.benefits.benefits.items }}
|
||
|
|
<div class="w-full h-full lg:w-1/3 px-8 mt-8 lg:mb-0">
|
||
|
|
<div class="lg:max-w-xs lg:mx-auto">
|
||
|
|
{{ partial "color-icon.html" (dict "icon" $benefit.icon "icon_color" $benefit.icon_color) }}
|
||
|
|
<h5>{{ $benefit.title }}</h5>
|
||
|
|
<p class="key-feature-description">{{ $benefit.description | markdownify }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Getting Started -->
|
||
|
|
|
||
|
|
<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">
|
||
|
|
<div class="w-full lg:w-2/3 px-4 py-2 lg:p-8 lg:px-4 mx-auto text-center">
|
||
|
|
<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-12 text-white">{{ .Params.get_started.get_started.description }}</p>
|
||
|
|
<a href="{{ relref . "/contact?form=sales" }}" class="btn-secondary">{{ .Params.get_started.get_started.cta_text }}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{{ end }}
|