Skip to content

Add home-page video #1240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 27, 2019
Merged

Add home-page video #1240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 39 additions & 35 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
{{ define "hero" }}
<header class="bg-purple-500 text-white py-24 px-4">
<div class="container mx-auto text-white md:flex">
<div class="md:w-1/2 md:mr-8">
<div class="container mx-auto text-white lg:flex">
<div class="lg:w-1/2 lg:mr-8">
<h1 class="text-white">Modern Infrastructure as Code</h1>
<p class="text-xl leading-relaxed text-purple-100">
Create, deploy, and manage infrastructure on any cloud using your
favorite language.
</p>
<div class="mt-4">
<a class="inline-block btn btn-lg mr-2" href="{{ relref . "/docs/quickstart" }}">Try Pulumi for Free</a>
<a class="inline-block btn btn-lg btn-orange-translucent mt-4" href="{{ relref . "/why-pulumi" }}">Why Pulumi</a>
<div class="flex md:inline-flex items-center mt-4 md:mt-2 flex-col md:flex-row">
<a class="w-full text-center btn btn-lg mb-4 md:mb-0 md:mr-4" href="{{ relref . "/docs/quickstart" }}">Try Pulumi for Free</a>
<a class="w-full text-center btn btn-lg btn-orange-translucent" href="{{ relref . "/why-pulumi" }}">Why Pulumi</a>
</div>
</div>
<div class="md:w-1/2 md:ml-8 text-white">
[ Carousel ]
<!-- Carousel here. -->
<div class="lg:w-1/2 text-white mt-8 lg:mt-0">
<iframe class="rounded shadow-lg max-w-full"
width="642" height="351"
src="https://www.youtube.com/embed/xgzkbW6LEEg?rel=0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</header>
{{ end }}

{{ define "main" }}
<nav class="bg-purple-700 text-white py-6 px-4 md:px-0">
<nav class="bg-purple-700 text-white py-6 px-4 lg:px-0">
<div class="container mx-auto">
<div class="flex items-center justify-center">
<div class="text-sm text-white mx-8">
<div class="hidden md:block text-sm text-white mx-8 whitespace-no-wrap">
Any Cloud
</div>
<ul class="inline-flex list-none p-0 items-center mx-8">
<ul class="inline-flex list-none p-0 items-center mx-4 md:mx-8">
<li class="mr-2">
<a href="{{ relref . "/partner/aws" }}"><img class="w-8" src="/logos/tech/logo-aws_white.png" alt="aws"></a>
</li>
Expand All @@ -41,7 +45,7 @@ <h1 class="text-white">Modern Infrastructure as Code</h1>
<a href="{{ relref . "/topics/kubernetes" }}"><img class="w-8" src="/logos/tech/logo-kubernetes.png" alt="kubernetes"></a>
</li>
</ul>
<ul class="inline-flex list-none p-0 items-center mx-8">
<ul class="inline-flex list-none p-0 items-center mx-4 md:mx-8">
<li class="mr-2">
<img class="w-8" src="/logos/tech/logo-js.png" alt="js">
</li>
Expand All @@ -55,20 +59,20 @@ <h1 class="text-white">Modern Infrastructure as Code</h1>
<img class="w-8" src="/logos/tech/logo-ts.png" alt="typescript">
</li>
</ul>
<div class="text-sm text-white mx-8">
<div class="hidden md:block text-sm text-white mx-8 whitespace-no-wrap">
Any Language
</div>
</div>
</div>
</nav>

<section class="py-16">
<div class="container mx-auto text-center px-4 md:px-0">
<div class="container mx-auto text-center px-4 lg:px-0">
<h2 class="text-black">Companies Innovating with Pulumi</h2>
<div class="flex justify-center my-12">
<img class="h-12 mx-8" src="/logos/customers/tableau_logo.png" alt="Tableau Software">
<img class="h-12 mx-8" src="/logos/customers/mercedes-benz-RDNA_logo.png" alt="Mercedes-Benz Research and Development">
<img class="h-12 mx-8" src="/logos/customers/mindbody_logo.svg" alt="MindBody">
<div class="lg:flex justify-center my-12">
<img class="mx-auto lg:mx-8 h-12 mx-8" src="/logos/customers/tableau_logo.png" alt="Tableau Software">
<img class="mx-auto lg:mx-8 my-8 lg:my-0 h-12 mx-8" src="/logos/customers/mercedes-benz-RDNA_logo.png" alt="Mercedes-Benz Research and Development">
<img class="mx-auto lg:mx-8 h-12 mx-8" src="/logos/customers/mindbody_logo.svg" alt="MindBody">
</div>
<blockquote class="border-orange-500 italic text-gray-800 mb-8 max-w-5xl mx-auto">
We have hundreds of microservices on-premises, and we are in the process
Expand All @@ -89,16 +93,16 @@ <h2 class="text-black">Companies Innovating with Pulumi</h2>
</div>
</section>

<section class="py-16 bg-purple-700">
<section class="pt-16 pb-4 bg-purple-800">
<div class="container mx-auto text-center px-4 md:px-0">
<h2 class="text-white">Go Multi-Cloud</h2>
<p class="text-xl leading-relaxed text-purple-100 max-w-3xl mx-auto">
Use the best of your chosen cloud &mdash; containers, serverless, and managed
infrastructure &mdash; while also unleashing one consistent approach to
software delivery no matter your cloud provider.
</p>
<div class="md:flex mt-8 mb-4">
<div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
<div class="md:flex flex-wrap justify-center mt-8 mb-12 mb-4">
<div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
<div class="flex flex-col justify-between h-full">
<img class="inline-block w-24 mx-auto" src="/icons/icon-feature-containers.svg">
<h3 class="text-white">Containers</h3>
Expand All @@ -109,7 +113,7 @@ <h3 class="text-white">Containers</h3>
<a class="btn btn-sm btn-orange-translucent mt-8" href="{{ relref . "/topics/containers.md" }}">More Containers</a>
</div>
</div>
<div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
<div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
<div class="flex flex-col justify-between h-full">
<img class="inline-block w-24 mx-auto" src="/icons/icon-feature-serverless.svg">
<h3 class="text-white">Serverless</h3>
Expand All @@ -121,7 +125,7 @@ <h3 class="text-white">Serverless</h3>
<a class="btn btn-sm btn-orange-translucent mt-8" href="{{ relref . "/topics/serverless.md" }}">More Serverless</a>
</div>
</div>
<div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
<div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
<div class="flex flex-col justify-between h-full">
<img class="inline-block w-24 mx-auto" src="/icons/icon-feature-data.svg">
<h3 class="text-white">Infrastructure</h3>
Expand All @@ -133,7 +137,7 @@ <h3 class="text-white">Infrastructure</h3>
<a class="btn btn-sm btn-orange-translucent mt-8" href="{{ relref . "/docs/reference/tutorials/aws/tutorial-ec2-webserver" }}">More Infrastructure</a>
</div>
</div>
<div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
<div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
<div class="flex flex-col justify-between h-full">
<img class="inline-block w-24 mx-auto" src="/icons/icon-feature-kubernetes.svg">
<h3 class="text-white">Kubernetes</h3>
Expand All @@ -153,11 +157,11 @@ <h3 class="text-white">Kubernetes</h3>
<img class="w-full" src="/images/waves.svg">

<section class="py-16">
<div class="container mx-auto px-4 md:px-0">
<div class="container mx-auto px-4 lg:px-0">
<h2 class="text-black text-center mb-8">What They're Saying About Pulumi</h2>
<div class="md:flex max-w-3xl mx-auto">
<div class="lg:flex max-w-3xl mx-auto">
{{ range $.Site.Data.testimonials.testimonial }}
<div class="md:mx-4">
<div class="lg:mx-4 my-8 lg:my-0">
<blockquote class="border-orange-500 italic text-gray-800 mb-4">
{{ .content }}
</blockquote>
Expand All @@ -172,17 +176,17 @@ <h2 class="text-black text-center mb-8">What They're Saying About Pulumi</h2>
</section>

<section class="bg-gray-200 py-16">
<div class="container mx-auto px-4 md:px-0 max-w-4xl">
<div class="container mx-auto px-4 lg:px-0 max-w-4xl">
<h2 class="text-black">Any Code. Any Cloud. Any Team.</h2>

<p class="text-xl">
Unify development and devops practices to define, deploy, and manage cloud
apps and infrastructure.
</p>

<div class="md:flex my-12">
<div class="md:w-1/3">
<img class="h-20 mb-4" src="/icons/icon-audience-dev.svg">
<div class="lg:flex mt-12">
<div class="max-w-sm md:w-auto text-center md:text-left mx-auto md:mx-0 md:w-1/3">
<img class="mx-auto md:mx-0 h-20 mb-4" src="/icons/icon-audience-dev.svg">
<div class="text-xs text-purple-800">FOR DEVELOPERS</div>
<div class="text-2xl text-black">Any Code.</div>
<p class="text-sm">
Expand All @@ -193,8 +197,8 @@ <h2 class="text-black">Any Code. Any Cloud. Any Team.</h2>
Learn More &rarr;
</a>
</div>
<div class="md:w-1/3 md:mx-8 my-12 md:my-0">
<img class="h-20 mb-4" src="/icons/icon-audience-devops.svg">
<div class="max-w-sm md:w-auto text-center md:text-left mx-auto md:mx-0 md:w-1/3 lg:mx-8 my-12 lg:my-0">
<img class="mx-auto md:mx-0 h-20 mb-4" src="/icons/icon-audience-devops.svg">
<div class="text-xs text-purple-800">FOR DEVOPS</div>
<div class="text-2xl text-black">Any Cloud.</div>
<p class="text-sm">
Expand All @@ -205,8 +209,8 @@ <h2 class="text-black">Any Code. Any Cloud. Any Team.</h2>
Learn More &rarr;
</a>
</div>
<div class="md:w-1/3">
<img class="h-20 mb-4" src="/icons/icon-audience-enterprise.svg">
<div class="max-w-sm md:w-auto text-center md:text-left mx-auto md:mx-0 md:w-1/3">
<img class="mx-auto md:mx-0 h-20 mb-4" src="/icons/icon-audience-enterprise.svg">
<div class="text-xs text-purple-800">FOR ENTERPRISES</div>
<div class="text-2xl text-black">Any Team.</div>
<p class="text-sm">
Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
{{ range $.Site.Menus.header }}
<li>
{{ $active := hasPrefix $.RelPermalink .URL }}
<a href="{{ .URL }}" class="block py-2 md:py-0 md:px-4 md:py-2 md:mx-4 border text-sm hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
<a href="{{ .URL }}" class="block py-2 px-4 md:px-0 md:py-0 md:px-4 md:py-2 md:mx-4 border text-sm hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
{{ .Title }}
</a>
</li>
Expand Down