mirror of
https://github.com/bigchaindb/site.git
synced 2025-02-14 21:10:28 +01:00
revamp services/enterprise page
This commit is contained in:
parent
ffd96fa150
commit
e0ce4dab3b
GPG Key ID:
606EEEF3C479A91F
@ -3,7 +3,7 @@
|
||||
// ---
|
||||
// bigchaindb.com
|
||||
//
|
||||
.page-enterprise {
|
||||
.page-services {
|
||||
// Different Features unit layout
|
||||
.feature {
|
||||
display: block;
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
.feature__title {
|
||||
margin-bottom: $spacer;
|
||||
display: block;
|
||||
|
||||
// the bottom line
|
||||
&:after {
|
||||
@ -34,53 +35,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.hero--enterprise {
|
||||
.logo-enterprise {
|
||||
margin-bottom: $spacer * 2;
|
||||
.hero--services {
|
||||
.logo-services {
|
||||
margin-bottom: $spacer;
|
||||
|
||||
.logo,
|
||||
.logo-enterprise--text {
|
||||
.logo-services--text {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
}
|
||||
|
||||
.section-description {
|
||||
.hero__subtitle {
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: $font-size-h5;
|
||||
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__action {
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
animation-delay: .6s;
|
||||
@media ($screen-sm) {
|
||||
font-size: $font-size-h4;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
margin-top: $spacer * 6;
|
||||
margin-top: $spacer * 2;
|
||||
margin-bottom: $spacer * 6;
|
||||
}
|
||||
|
||||
@media ($screen-md) {
|
||||
.section-title,
|
||||
.section-description {
|
||||
max-width: 66%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
@extend .btn-secondary;
|
||||
min-width: 220px;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// bigchaindb.com
|
||||
//
|
||||
|
||||
$menu-height-md: 66px;
|
||||
$menu-height-md: 90px;
|
||||
|
||||
.hero {
|
||||
@include background--photo();
|
||||
@ -68,7 +68,7 @@ $menu-height-md: 66px;
|
||||
.hero__title,
|
||||
.hero__subtitle,
|
||||
.hero__action,
|
||||
.logo-enterprise {
|
||||
.logo-services {
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
@include animation-slide-in-from-bottom;
|
||||
|
||||
@ -47,14 +47,14 @@
|
||||
}
|
||||
|
||||
|
||||
.logo-enterprise {
|
||||
.logo-services {
|
||||
.logo {
|
||||
@extend .logo--sm;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-enterprise--text {
|
||||
.logo-services--text {
|
||||
font-size: $font-size-h3 * 1.05;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
|
||||
@ -107,7 +107,7 @@ $component-active-bg: $brand-primary !default;
|
||||
//
|
||||
// Grid
|
||||
//
|
||||
$gutter-space: ($spacer * 2) !default;
|
||||
$gutter-space: ($spacer * 3) !default;
|
||||
|
||||
|
||||
//
|
||||
|
||||
@ -2,20 +2,34 @@
|
||||
layout: base
|
||||
|
||||
title: Services
|
||||
description: "A fast blockchain database for data driven enterprise applications"
|
||||
description: "Hands-on consulting and production support"
|
||||
|
||||
header: hero-enterprise.jpg
|
||||
image: share-image-enterprise.jpg
|
||||
js: page-enterprise.min.js
|
||||
|
||||
hero:
|
||||
title: "A fast blockchain database for data driven enterprise applications"
|
||||
description: "BigchainDB enables industry leaders to build performant enterprise applications, platforms, and networks."
|
||||
title: "Hands-on consulting and production support"
|
||||
description: "From ideation to production, we have the team and technology to help you build enterprise-grade applications and platforms."
|
||||
cta:
|
||||
- name: Get in touch
|
||||
link: "#contact"
|
||||
scroll: true
|
||||
|
||||
support:
|
||||
title: "Hands-on production support"
|
||||
description: "From ideation to production, we have the team and technology to help you build enterprise-grade applications and platforms."
|
||||
features:
|
||||
- title: "Ideation"
|
||||
description: "Have some ideas but don’t know where to start? We run a 1-day workshop to help you better understand blockchain technologies and let you drill-down into the right use cases that bring the biggest benefit."
|
||||
icon: icon-education
|
||||
- title: "Use case development"
|
||||
description: "You have a specific idea for a blockchain application? We help you build a detailed business and technical architecture that lets you move forward with confidence."
|
||||
icon: icon-blueprint
|
||||
- title: "Application engineering"
|
||||
description: "The idea is clear. Now you need help to build a prototype to show your superiors. We can work to your needs, budget and timeline to get a demo into your hands that will impress."
|
||||
icon: icon-engineering
|
||||
|
||||
partners:
|
||||
title: "Trusted by leading global companies"
|
||||
description: "We work with partners who are deploying data-centric blockchain applications for automotive, energy, identity, IoT, intellectual property and supply chain use cases."
|
||||
@ -34,20 +48,6 @@ intro:
|
||||
description: "Interoperability with Ethereum, IPFS, Bitcoin and other protocols such as the Interledger Protocol (ILP), IPLD, COALA IP and COALA SC mean that enterprises can develop their applications knowing that their work is future-proofed."
|
||||
icon: icon-plug
|
||||
|
||||
support:
|
||||
title: "Hands-on production support"
|
||||
description: "From ideation to production, we have the team and technology to help you build enterprise-grade applications and platforms."
|
||||
features:
|
||||
- title: "Ideation"
|
||||
description: "Have some ideas but don’t know where to start? We run a 1-day workshop to help you better understand blockchain technologies and let you drill-down into the right use cases that bring the biggest benefit."
|
||||
icon: icon-education
|
||||
- title: "Use case development"
|
||||
description: "You have a specific idea for a blockchain application? We help you build a detailed business and technical architecture that lets you move forward with confidence."
|
||||
icon: icon-blueprint
|
||||
- title: "Application engineering"
|
||||
description: "The idea is clear. Now you need help to build a prototype to show your superiors. We can work to your needs, budget and timeline to get a demo into your hands that will impress."
|
||||
icon: icon-engineering
|
||||
|
||||
contact:
|
||||
title: "Get in touch"
|
||||
description: "Ready to start building with BigchainDB? Enter your details below and we'll be in touch right away."
|
||||
@ -80,20 +80,20 @@ contact:
|
||||
|
||||
---
|
||||
|
||||
<header class="hero hero--enterprise" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')"{% endif %}>
|
||||
<header class="hero hero--services" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')"{% endif %}>
|
||||
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="hero__content row row--wide">
|
||||
<div class="hero__content row">
|
||||
<hgroup>
|
||||
<div class="logo-enterprise">
|
||||
<div class="logo-services">
|
||||
<svg class="logo logo--white">
|
||||
<use xlink:href="/assets/img/sprite.svg#logo"></use>
|
||||
</svg>
|
||||
<span class="logo-enterprise--text">Enterprise</span>
|
||||
<span class="logo-services--text">Services</span>
|
||||
</div>
|
||||
<h1 class="section-title">{{ page.hero.title }}</h1>
|
||||
<p class="section-description">{{ page.hero.description }}</p>
|
||||
<h1 class="hero__title">{{ page.hero.title }}</h1>
|
||||
<h2 class="hero__subtitle">{{ page.hero.description }}</h2>
|
||||
|
||||
{% for cta in page.hero.cta %}
|
||||
<a class="btn hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
|
||||
@ -103,6 +103,32 @@ contact:
|
||||
|
||||
</header>
|
||||
|
||||
<section class="section section--enterprisesupport background--green">
|
||||
<div class="row row--wide">
|
||||
|
||||
<div class="grid grid--full grid-small--third grid--gutters">
|
||||
{% for feature in page.support.features %}
|
||||
<div class="grid__col">
|
||||
<div class="feature">
|
||||
<svg class="feature__icon icon">
|
||||
<use xlink:href="/assets/img/sprite.svg#{{ feature.icon }}"></use>
|
||||
</svg>
|
||||
<div class="feature__detail">
|
||||
<h1 class="feature__title">{{ feature.title }}</h1>
|
||||
<p class="feature__text">{{ feature.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn btn-blue" href="#contact">Get in touch</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include sections/section-partners.html %}
|
||||
|
||||
<section class="section section--enterpriseintro background--darker">
|
||||
@ -154,41 +180,6 @@ contact:
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--enterprisesupport background--green">
|
||||
<div class="row">
|
||||
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">{{ page.support.title }}</h1>
|
||||
<p class="section-description">{{ page.support.description }}</p>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row row--wide">
|
||||
|
||||
<div class="grid grid--full grid-small--third grid--gutters">
|
||||
{% for feature in page.support.features %}
|
||||
<div class="grid__col">
|
||||
<div class="feature">
|
||||
<svg class="feature__icon icon">
|
||||
<use xlink:href="/assets/img/sprite.svg#{{ feature.icon }}"></use>
|
||||
</svg>
|
||||
<div class="feature__detail">
|
||||
<h1 class="feature__title">{{ feature.title }}</h1>
|
||||
<p class="feature__text">{{ feature.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn btn-blue" href="#contact">Get in touch</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--enterprisecontact background--blue" id="contact">
|
||||
<div class="row">
|
||||
<header class="section-header">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user