mirror of https://github.com/status-im/consul.git
website - cta section and button updates
This commit is contained in:
RJ Spiker
Jack Pearkes
parent
c9226fec35
commit
7c3dca6225
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -33,7 +33,7 @@
|
|||
@import "_community";
|
||||
@import "_docs";
|
||||
@import "_downloads";
|
||||
@import "_home";
|
||||
// @import "_home";
|
||||
|
||||
// Consul Connect
|
||||
@import 'consul-connect/_index';
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
@import 'components/_button';
|
||||
@import 'components/_container';
|
||||
@import 'components/_cta-section';
|
||||
@import 'components/_hero';
|
||||
@import 'components/_logo-grid';
|
||||
@import 'components/_section';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/* Grid/Layout Settings */
|
||||
$consul-black: #252937;
|
||||
|
||||
$site-gutter-padding: 15px;
|
||||
$site-max-width: 1170px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
.g-btn {
|
||||
align-self: center;
|
||||
background-color: $consul-red;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
line-height: 24px;
|
||||
|
|
@ -15,38 +14,62 @@
|
|||
text-align: center;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
opacity: 0;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: #ce4a86;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
&.white {
|
||||
background: $white;
|
||||
border: 2px solid $white;
|
||||
color: $consul-black;
|
||||
padding: 10px 28px; /* subtracting the border, so sizes are even */
|
||||
|
||||
&:hover {
|
||||
background: $consul-black;
|
||||
border-color: $consul-black;
|
||||
color: $white;
|
||||
|
||||
path {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dark-outline {
|
||||
background: none;
|
||||
border: 2px solid $black;
|
||||
border: 2px solid $consul-black;
|
||||
padding: 10px 28px; /* subtracting the border, so sizes are even */
|
||||
color: $black;
|
||||
color: $consul-black;
|
||||
|
||||
&:hover {
|
||||
background-color: $black;
|
||||
background: $consul-black;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.white-outline {
|
||||
background: none;
|
||||
border: 2px solid $white;
|
||||
padding: 10px 28px; /* subtracting the border, so sizes are even */
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $consul-black;
|
||||
}
|
||||
}
|
||||
|
||||
&.download {
|
||||
svg {
|
||||
margin: 0 4px -4px 0;
|
||||
|
||||
path {
|
||||
transition: fill 0.25s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
.g-cta-section {
|
||||
align-items: center;
|
||||
background: $consul-red;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
color: $white;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.g-btn {
|
||||
width: 144px;
|
||||
padding: 10px 0;
|
||||
|
||||
& + .g-btn {
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,6 +41,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
|
||||
&.shadow {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.code-sample > div {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
color: $white;
|
||||
|
|
@ -92,12 +100,4 @@
|
|||
h3 {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
|
||||
&.shadow {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,38 @@
|
|||
#page-home {
|
||||
.home-cta-section {
|
||||
color: $white;
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
background: $consul-red;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background: $consul-black;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 564px;
|
||||
padding: 96px 0;
|
||||
text-align: center;
|
||||
|
||||
div:first-child {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
flex: 1 0 auto;
|
||||
margin: 24px 0 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -181,4 +181,23 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-carousel-section bg-dark'>
|
||||
<div class="intro">
|
||||
<h3>Case Studies</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-cta-section'>
|
||||
<div>
|
||||
<h2>Ready to get started?</h2>
|
||||
<a href="#" class="g-btn white download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="#" class="g-btn white-outline">Explore docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,12 +41,6 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-carousel-section bg-dark'>
|
||||
<div class="intro">
|
||||
<h3>Case Studies</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
|
|
@ -187,4 +181,23 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-carousel-section bg-dark'>
|
||||
<div class="intro">
|
||||
<h3>Case Studies</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-cta-section'>
|
||||
<div>
|
||||
<h2>Ready to get started?</h2>
|
||||
<a href="#" class="g-btn white download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="#" class="g-btn white-outline">Explore docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,26 +47,32 @@ description: |-
|
|||
<h3>Service Discovery <span>for connectivity</h3>
|
||||
<p>Service Registry enables services to register and discover each other.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href='#' class='g-btn dark-outline'>Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img src='//placehold.it/180x130'>
|
||||
<h3>Service Segmentation <span>for security</h3>
|
||||
<p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href='#' class='g-btn dark-outline'>Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img src='//placehold.it/180x130'>
|
||||
<h3>Service Configuration <span>for runtime configuration</h3>
|
||||
<p>Feature rich Key/Value store lets you easily configure services.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href='#' class='g-btn dark-outline'>Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section bg-light border-top'>
|
||||
|
|
@ -166,4 +172,34 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='home-cta-section'>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/logos/consul.png' alt='Consul'>
|
||||
</div>
|
||||
<p>Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
|
||||
<div>
|
||||
<a href="#" class="g-btn white download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/logos/consul-enterprise.png' alt='Consul Enterprise'>
|
||||
</div>
|
||||
<p>Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.</p>
|
||||
<div>
|
||||
<a href="https://www.hashicorp.com/products/consul" class="g-btn white-outline">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -152,4 +152,17 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-cta-section'>
|
||||
<div>
|
||||
<h2>Ready to get started?</h2>
|
||||
<a href="#" class="g-btn white download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="#" class="g-btn white-outline">Explore docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue