6def034b47
* New homepage proposal * regen bundle * Update artwork * More work * More updates to artwork * Adjust bottom ctas * responsive * Update artwork * Feedback
364 lines
20 KiB
HTML
364 lines
20 KiB
HTML
{{ define "hero" }}
|
||
<header class="home-page-hero shadow">
|
||
<div class="home-page-hero-background">
|
||
<div class="flex">
|
||
<div class="w-full lg:w-1/2 p-6 home-page-hero-text">
|
||
<h1 class="flex flex-col items-center">
|
||
<span class="inline-block" data-text="{{ index (.Params.hero.title) 0 }}">{{ index (.Params.hero.title) 0 }}</span>
|
||
<span class="rainbow-text inline-block text-center" data-text="{{ index (.Params.hero.title) 1 }}">{{ index (.Params.hero.title) 1 }}</span>
|
||
</h1>
|
||
|
||
<p class="text-center leading-7">{{ .Params.hero.description | markdownify }}</p>
|
||
|
||
<div class="relative z-10 overlay-middle mt-8 flex text-center justify-center items-center flex-col mx-auto lg:mx-0 md:flex-row">
|
||
<a class="home-hero-btn-primary mr-0 md:mr-4 mb-3 md:mb-0" href="{{ .Params.hero.cta_link }}">{{ .Params.hero.cta_text }}</a>
|
||
<a class="btn-secondary home-hero-btn-secondary rounded-full cursor-pointer" href="{{ .Params.hero.secondary_cta_link }}">{{ .Params.hero.secondary_cta_text }}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hidden lg:block lg:w-1/2 p-6 flex justify-center align-center">
|
||
<img src="/images/home/dancing-music.svg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
{{ end }}
|
||
|
||
{{ define "main" }}
|
||
{{ $pageContext := . }}
|
||
|
||
<!-- Logos carousel -->
|
||
<section class="container mx-auto text-center overflow-hidden px-3 mt-6">
|
||
<h3 class="text-center mb-4">{{ .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>
|
||
|
||
<!-- Code and ship faster -->
|
||
<section class="mb-8 p-6 lg:px-0 relative home-page-section">
|
||
<div class="home-page-build-section-background">
|
||
<div class="home-page-build-section-image"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto z-10 relative">
|
||
<div class="w-full lg:w-2/3 mx-auto">
|
||
<div class="text-center">
|
||
<h3>{{ .Params.code_faster.title }}</h3>
|
||
<p class="text-lg">{{ .Params.code_faster.description | markdownify }}</p>
|
||
{{ range $item := .Params.code_faster.items }}
|
||
<h6>{{ $item.title }}</h6>
|
||
<p>{{ $item.description | markdownify }}</p>
|
||
{{ end }}
|
||
</div>
|
||
<div class="card bg-white shadow-xl p-6 block">
|
||
<div>
|
||
<pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
|
||
<pulumi-choosable type="language" class="highlight" value="typescript">
|
||
<img
|
||
class="mx-auto w-full"
|
||
src="/images/home/typescript.svg"
|
||
alt="Pulumi code being written in TypeScript showing autocomplete for creating a new S3 bucket"
|
||
/>
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="python">
|
||
<img class="mx-auto w-full" src="/images/home/python.svg" alt="Pulumi code being written in Python showing autocomplete for creating a new S3 bucket" />
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="go">
|
||
<img class="mx-auto w-full" src="/images/home/go.svg" alt="Pulumi code being written in GO showing autocomplete for creating a new S3 bucket" />
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="csharp">
|
||
<img class="mx-auto w-full" src="/images/home/c-sharp.svg" alt="Pulumi code being written in C# showing autocomplete for creating a new S3 bucket" />
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="java">
|
||
<img class="mx-auto w-full" src="/images/home/java.svg" alt="Pulumi code being written in Java showing autocomplete for creating a new S3 bucket" />
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="yaml">
|
||
<img class="mx-auto w-full" src="/images/home/yaml.svg" alt="Pulumi code being written in YAML showing autocomplete for creating a new S3 bucket" />
|
||
</pulumi-choosable>
|
||
</pulumi-chooser>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Panther quote -->
|
||
<section class="w-full md:w-2/3 lg:w-1/2 mx-auto mt-16 px-6">
|
||
{{ partial "home/quote.html" (dict "quote" .Params.customer_quotes.panther) }}
|
||
</section>
|
||
|
||
<!-- Tame configuration and secrets sprawl -->
|
||
<section class="py-12 lg:my-12 px-6 lg:px-0 relative home-page-section">
|
||
<div class="home-page-manage-section-background">
|
||
<div class="home-page-manage-section-image"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto z-10 relative">
|
||
<div class="w-full lg:w-2/3 mx-auto">
|
||
<div class="z-10 px-8">
|
||
<h3>{{ .Params.secrets.title }}</h3>
|
||
<p class="text-lg">{{ .Params.secrets.description | markdownify }}</p>
|
||
<div class="mt-8">
|
||
<span class="text-lg">Learn more: </span>
|
||
<a href="/product/esc" class="underline text-lg">Pulumi ESC<i class="fa fa-arrow-right ml-2"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-center mt-8">
|
||
<img src="{{ .Params.secrets.image }}" alt="{{ .Params.secrets.alt }}" class="card shadow-xl" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Starburst quote -->
|
||
<section class="w-full md:w-2/3 lg:w-1/2 mx-auto mt-16 px-6">
|
||
{{ partial "home/quote.html" (dict "quote" .Params.customer_quotes.starburst) }}
|
||
</section>
|
||
|
||
<!-- Embed IaC Anywhere -->
|
||
<section class="py-12 lg:my-12 px-6 lg:px-0 relative home-page-section">
|
||
<div class="home-page-cloud-section-background">
|
||
<div class="home-page-cloud-section-image"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto z-10 relative">
|
||
<div class="w-full lg:w-2/3 mx-auto">
|
||
<div class="z-10 px-8">
|
||
<h3>{{ .Params.embed.title }}</h3>
|
||
<div class="text-lg text-black">{{ .Params.embed.description | markdownify }}</div>
|
||
<div class="mt-8">
|
||
<span class="text-lg">Learn more: </span>
|
||
<a href="/blog/developer-portal-platform-teams/" class="underline text-lg">Pulumi For Platfrom Teams<i class="fa fa-arrow-right ml-2"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-center mt-8 px-8">
|
||
<div class="card bg-white shadow-xl p-6">
|
||
<img src="{{ .Params.embed.image }}" alt="{{ .Params.embed.alt }}" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Snowflake quote -->
|
||
<section class="w-full md:w-2/3 lg:w-1/2 mx-auto mt-16 px-6">
|
||
{{ partial "home/quote.html" (dict "quote" .Params.customer_quotes.snowflake) }}
|
||
</section>
|
||
|
||
<!-- Boost productivity with AI -->
|
||
<section class="py-12 lg:my-12 px-6 lg:px-0 relative home-page-section">
|
||
<div class="home-page-science-section-background">
|
||
<div class="home-page-science-section-image"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto z-10 relative">
|
||
<div class="card bg-white shadow-xl p-6 w-full lg:w-2/3 mx-auto">
|
||
<div class="z-10 px-8">
|
||
<h3>{{ .Params.ai.title }}</h3>
|
||
<p class="text-lg">{{ .Params.ai.description | markdownify }}</p>
|
||
<div class="mt-8">
|
||
<span class="text-lg">Try it out: </span>
|
||
<a href="/ai/" class="underline text-lg">Pulumi AI<i class="fa fa-arrow-right ml-2"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-center mt-8 w-full">
|
||
<div class="w-full">
|
||
<pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
|
||
<pulumi-choosable type="language" class="highlight" value="typescript">
|
||
<img
|
||
class="mx-auto w-full"
|
||
src="/images/home/ai-ts.svg"
|
||
alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in TypeScript"
|
||
/>
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="python">
|
||
<img
|
||
class="mx-auto w-full"
|
||
src="/images/home/ai-python.svg"
|
||
alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in Python"
|
||
/>
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="go">
|
||
<img
|
||
class="mx-auto w-full"
|
||
src="/images/home/ai-go.svg"
|
||
alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in GO"
|
||
/>
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="csharp">
|
||
<img
|
||
class="mx-auto w-full"
|
||
src="/images/home/ai-csharp.svg"
|
||
alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in C#"
|
||
/>
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="java">
|
||
<img
|
||
class="mx-auto w-full"
|
||
src="/images/home/ai-java.svg"
|
||
alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in Java"
|
||
/>
|
||
</pulumi-choosable>
|
||
|
||
<pulumi-choosable type="language" class="highlight" value="yaml">
|
||
<img
|
||
class="mx-auto w-full"
|
||
src="/images/home/ai-yaml.svg"
|
||
alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in YAML"
|
||
/>
|
||
</pulumi-choosable>
|
||
</pulumi-chooser>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Built by engineers + tweets -->
|
||
<section class="mt-16 mb-36 relative flex flex-col">
|
||
<div class="container mx-auto px-3 overflow-hidden lg:overflow-visible">
|
||
<div class="w-full bg-violet-600 rounded-xl shadow p-16 lg:pb-56 align-top">
|
||
<h2 class="text-white text-center">Built by engineers for engineers. Open source.</h2>
|
||
<div class="flex flex-col lg:flex-row items-center justify-center mb-4">
|
||
<a class="text-white text-lg bold underline flex self-start lg:self-auto mt-4 lg:mt-0 mx-auto lg:mx-0 lg:pr-1" href="https://slack.pulumi.com/"
|
||
>Join our community,
|
||
</a>
|
||
<p class="text-white text-lg mx-auto my-0 lg:mx-0 lg:my-auto">and let’s build together.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full order-first lg:hidden">
|
||
<pulumi-swiper slides="1" centered-slides="true" initial-slide="3" loop="true" autoplay="true" autoplay-delay="5000" speed="1000">
|
||
{{ range $tweet := .Params.get_started.tweets }}
|
||
<pulumi-swipeable>
|
||
<div class="w-full px-4">
|
||
<div class="flex flex-col card p-6 bg-white">
|
||
<p class="text-left mt-0 overflow-hidden">{{ $tweet.text }}</p>
|
||
<div class="flex flex-grow items-end">
|
||
<div>
|
||
<img class="rounded-full w-12 h-12" src="{{ $tweet.avatar }}" />
|
||
</div>
|
||
<p class="ml-4 text-gray-600">{{ $tweet.username }}</p>
|
||
<div class="flex-grow flex justify-end my-4">
|
||
<img src="/logos/tech/twitter.svg" alt="Twitter" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pulumi-swipeable>
|
||
{{ end }}
|
||
</pulumi-swiper>
|
||
</div>
|
||
<div class="large-container mx-auto absolute -bottom-12 left-0 pt-12 hidden lg:block">
|
||
<pulumi-swiper slides="3" centered-slides="true" initial-slide="3" loop="true" autoplay="true" autoplay-delay="4000" speed="1000">
|
||
{{ range $tweet := .Params.get_started.tweets }}
|
||
<pulumi-swipeable>
|
||
<div class="w-full px-4 text-left">
|
||
<div class="flex flex-col card p-6 bg-white h-60">
|
||
<p class="flex-grow mt-0">{{ $tweet.text }}</p>
|
||
<div class="flex items-center w-full pb-1">
|
||
<a href="{{ $tweet.link }}" target="_blank" rel="noopener noreferrer">
|
||
<!-- If the browser fails to load the Twitter avatar, just hide it. -->
|
||
<div class="rounded-full border-none w-12 h-12 mr-4 overflow-hidden">
|
||
<img src="{{ $tweet.avatar }}" onerror="$(this).hide();" />
|
||
</div>
|
||
</a>
|
||
<a href="{{ $tweet.link }}" class="flex-grow text-gray-600 hover:text-gray-600 hover:underline" target="_blank" rel="noopener noreferrer">
|
||
{{ $tweet.username }}
|
||
</a>
|
||
|
||
{{ if eq $tweet.source "twitter" }}
|
||
<img class="w-8 h-8" src="/logos/tech/twitter.svg" alt="Twitter" />
|
||
{{ end }}
|
||
|
||
{{ if eq $tweet.source "reddit" }}
|
||
<img class="w-8 h-8" src="/logos/tech/reddit.svg" alt="Reddit" />
|
||
{{ end }}
|
||
|
||
{{ if eq $tweet.source "linkedin" }}
|
||
<img class="w-8 h-8" src="/logos/tech/linkedin.svg" alt="LinkedIn" />
|
||
{{ end }}
|
||
|
||
{{ if eq $tweet.source "blog" }}
|
||
<i class="fas fa-blog text-gray-500 text-2xl"></i>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</pulumi-swipeable>
|
||
{{ end }}
|
||
</pulumi-swiper>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTAs -->
|
||
<section class="container mx-auto my-24 px-6">
|
||
<div class="flex justify-center">
|
||
<div class="card ready-cta w-full rounded-xl p-1 gradient">
|
||
<div class="flex justify-center rounded-xl bg-purple-100">
|
||
<div class="p-8 md:p-16 lg:pt-28 lg:pb-28 inline-flex flex-col items-center">
|
||
<h2 class="mb-12 text-center">Ready to try Pulumi?</h2>
|
||
<div class="flex flex-col lg:flex-row self-stretch items-center lg:justify-between">
|
||
<div class="flex flex-col justify-center align-center text-center lg:ml-14 lg:mr-4 mb-14 lg:mb-0 z-0">
|
||
<a href="/docs/get-started/" class="btn-primary py-3">Get Started</a>
|
||
<p class="text-xs pt-1 my-0">Follow the step-by-step guide</p>
|
||
</div>
|
||
<div class="flex flex-col justify-center align-center text-center lg:mr-14 lg:ml-4">
|
||
<a href="docs/install/" class="btn-secondary py-3 px-6 whitespace-nowrap">Download Open Source</a>
|
||
<p class="text-xs pt-1 my-0">Download our open source SDK</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|