mirror of https://github.com/status-im/consul.git
website - add case studies components with content
This commit is contained in:
RJ Spiker
Jack Pearkes
parent
04804a12d3
commit
c6ce69c519
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 626 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10">
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(-6 -3)">
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/>
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 450 B |
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="0%" y1="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#1563FF"/>
|
||||
<stop offset="100%" stop-color="#6F41F2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="20" height="20" fill="url(#a)" rx="1"/>
|
||||
<path fill="#FFF" d="M14 10l-7 4V6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 386 B |
|
|
@ -6,3 +6,4 @@
|
|||
//= require hashicorp/analytics
|
||||
|
||||
//= require analytics
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
var dots = document.querySelectorAll('.g-carousel .pagination li');
|
||||
var carousel = new Siema({
|
||||
selector: '.siema',
|
||||
duration: 200,
|
||||
easing: 'ease-out',
|
||||
perPage: 1,
|
||||
startIndex: 0,
|
||||
draggable: true,
|
||||
multipleDrag: true,
|
||||
threshold: 20,
|
||||
loop: true,
|
||||
rtl: false,
|
||||
onChange: () => {
|
||||
for (var i = 0; i < dots.length; i++) {
|
||||
dots[i].classList.remove('active');
|
||||
}
|
||||
dots[carousel.currentSlide].classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector('.g-carousel .prev')
|
||||
.addEventListener('click', function() {
|
||||
carousel.prev();
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector('.g-carousel .next')
|
||||
.addEventListener('click', function() {
|
||||
carousel.next();
|
||||
});
|
||||
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
dots[i].addEventListener('click', function() {
|
||||
carousel.goTo(i);
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -3,6 +3,7 @@
|
|||
@import '_typography';
|
||||
|
||||
@import 'components/_button';
|
||||
@import 'components/_carousel';
|
||||
@import 'components/_container';
|
||||
@import 'components/_cta-section';
|
||||
@import 'components/_header';
|
||||
|
|
|
|||
|
|
@ -81,7 +81,8 @@
|
|||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 1.5em;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h5,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,215 @@
|
|||
.g-carousel {
|
||||
position: relative;
|
||||
padding-bottom: 60px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding-left: 88px;
|
||||
padding-right: 88px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-left: 146px;
|
||||
padding-right: 146px;
|
||||
}
|
||||
|
||||
.siema {
|
||||
margin: 0 auto;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
height: 56px;
|
||||
justify-content: center;
|
||||
margin-top: -58px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 56px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.prev {
|
||||
transform: rotate(180deg);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
left: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
.next {
|
||||
@media (min-width: 768px) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
right: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
bottom: 24px;
|
||||
display: block;
|
||||
left: 0;
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
background: #545a6e;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
margin: 0 6px;
|
||||
width: 12px;
|
||||
transition: background 0.2s ease-out;
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
color: $consul-black;
|
||||
display: block;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
|
||||
@media (min-width: 650px) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
@media (min-width: 650px) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@media (min-width: 650px) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-height: 380px;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 240px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 450px) {
|
||||
max-height: 350px;
|
||||
}
|
||||
|
||||
@media (min-width: 650px) {
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 16px;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 650px) {
|
||||
padding: 32px 24px 62px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding: 32px 32px 110px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
background: url("/assets/images/consul-connect/icons/video.svg")
|
||||
no-repeat center center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $consul-black;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
|
||||
@media (min-width: 650px) {
|
||||
bottom: 32px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
bottom: 62px;
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: url("/assets/images/consul-connect/icons/carat.svg")
|
||||
no-repeat center center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 24px 0 15px;
|
||||
|
||||
@media (min-width: 650px) {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
.g-use-cases {
|
||||
margin: 48px 0 8px;
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: flex;
|
||||
|
|
@ -9,11 +8,12 @@
|
|||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 800;
|
||||
margin: 40px 0 0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-weight: 300; //TODO: font weight doesn't exist currently
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -188,9 +188,47 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-carousel-section bg-dark'>
|
||||
<div class="intro">
|
||||
<h3>Case Studies</h3>
|
||||
<section class='g-section bg-dark'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Case Studies</h2>
|
||||
</div>
|
||||
<div class='g-carousel'>
|
||||
<div class="siema">
|
||||
<div class='card' href='#'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/case-studies/case-study_03.jpg' alt=''>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<span class='tag video'>Video</span>
|
||||
<h4>How Groupon Orchestrates Databases as a Service with HashiCorp Consul</h4>
|
||||
<p>Groupon provides centrally managed, containerized database instances to its engineering teams. To make this process faster, more robust, and operationally safe, they deliver Databases-as-a-Service via an orchestration layer backed by HashiCorp Consul. In this talk, Sean Chittenden discusses the constraints of providing persistent containerized services, how DaaS has been built, and how Groupon uses HashiCorp tools to power database services.</p>
|
||||
<a href='https://www.hashicorp.com/resources/groupon-orchestrates-daas-consul'>Watch</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='card' href='#'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/case-studies/case-study_04.jpg' alt=''>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<span class='tag video'>Video</span>
|
||||
<h4>Citadel - Extreme Scaling with HashiCorp Nomad and Consul</h4>
|
||||
<p>In this talk from HashiConf 2016, Caius Howcroft covers Citadel's use of HashiCorp Nomad and Consul to gain rapid scaling of its compute resources, for immediate market insights.</p>
|
||||
<a href='https://www.hashicorp.com/resources/citadel-scaling-hashicorp-nomad-consul'>Watch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class='pagination'>
|
||||
<li class='active'></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<span class='prev'>
|
||||
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
|
||||
</span>
|
||||
<span class='next'>
|
||||
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -188,9 +188,47 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-carousel-section bg-dark'>
|
||||
<div class="intro">
|
||||
<h3>Case Studies</h3>
|
||||
<section class='g-section bg-dark'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Case Studies</h2>
|
||||
</div>
|
||||
<div class='g-carousel'>
|
||||
<div class="siema">
|
||||
<div class='card' href='#'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/case-studies/case-study_01.jpg' alt=''>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<span class='tag video'>Video</span>
|
||||
<h4>Twitch - Driving Towards a Modern Infrastructure</h4>
|
||||
<p>In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.</p>
|
||||
<a href='https://www.hashicorp.com/resources/twitch-driving-towards-a-modern-infrastructure'>Watch</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='card' href='#'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/case-studies/case-study_02.jpg' alt=''>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<span class='tag video'>Video</span>
|
||||
<h4>Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX</h4>
|
||||
<p>Justen Walker explains how Jet.com uses HashiCorp Consul and Nomad to allow hundreds of developers to have self-service access, despite relying on NGINX static configs—and with a remarkably small DevOps team.</p>
|
||||
<a href='https://www.hashicorp.com/resources/jet-com-nomad-auto-proxy-consul-template-nginx'>Watch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class='pagination'>
|
||||
<li class='active'></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<span class='prev'>
|
||||
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
|
||||
</span>
|
||||
<span class='next'>
|
||||
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,11 +27,13 @@
|
|||
<title><%= title_for(current_page) %></title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="https://use.typekit.net/wxf7mfi.css">
|
||||
<link rel="stylesheet" href="https://use.typekit.net/ypp5bnp.css">
|
||||
<%= stylesheet_link_tag "application" %>
|
||||
|
||||
<!-- Site scripts -->
|
||||
<!--[if lt IE 9]><%= javascript_include_tag "ie-compat", defer: true %><![endif]-->
|
||||
<%= javascript_include_tag "consul-connect/vendor/siema.min", defer: true %>
|
||||
<%= javascript_include_tag "consul-connect/application", defer: true %>
|
||||
<%= javascript_include_tag "application", defer: true %>
|
||||
|
||||
<!-- Analytics scrpts -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue