added new home layout
This commit is contained in:
Stephan Hadan
parent
509f1a545d
commit
6e5614763d
8 changed files with 2381 additions and 33 deletions
340
overrides/home.html
Normal file
340
overrides/home.html
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
{% extends "overrides/main-styles.html" %}
|
||||
|
||||
<!-- Render hero under tabs -->
|
||||
{% block tabs %}
|
||||
{{ super() }}
|
||||
|
||||
<!-- Hero for landing page -->
|
||||
|
||||
<!--binbash leverage documetation-->
|
||||
<section class="first-gradiant-body w-100">
|
||||
<div class="md-grid conteiner-row pt-1 pt-lg-5 my-4">
|
||||
<div class="px-3 ctx-header-text conteiner">
|
||||
<div class="conteiner-row">
|
||||
<p class="h1 text-xs-center">
|
||||
binbash
|
||||
<img src="assets/images/logos/leverage-title-logo.svg" class="mx-3 leverage-title-logo" height="22%"/>
|
||||
documentation
|
||||
</p>
|
||||
</div>
|
||||
<img src="assets/images/logos/binbash-landing-header.svg" class="laverage-header-img d-lg-none d-xl-none mx-auto mb-5" />
|
||||
<p class="h3 text-xs-center">The leading, easy to deploy, reusable and most automated solution for defining, provisioning and managing your secure and scalable multi-account AWS infrastructure environment.</p>
|
||||
<div class="conteiner-row conteiner-xs">
|
||||
<button
|
||||
type="button"
|
||||
title="{{ page.next_page.title | e }}"
|
||||
onclick="location.href='./concepts/'"
|
||||
class="btn-dark btn-xl-large btn-lg-large mx-3 mt-3 my-md-5 my-lg-5 my-xl-5 box-shadow"
|
||||
>
|
||||
Get Started
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title="{{ page.next_page.title | e }}"
|
||||
onclick="window.open('https://join.slack.com/t/binbashar/shared_invite/zt-fw1692b6-9k4ADsWJ47lKacszphXM1w', '_blank')"
|
||||
class="btn-warning btn-xl-large btn-lg-large mx-3 mt-3 my-md-5 my-lg-5 my-xl-5 box-shadow"
|
||||
>
|
||||
Join Us on Slack
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctx-header-img d-lg">
|
||||
<img src="assets/images/logos/binbash-landing-header.svg" class="laverage-header-img mx-lg-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="second-gradiant-body w-100">
|
||||
<!--We ship it. You own it-->
|
||||
<div class="md-grid conteiner-row pt-4 my-4">
|
||||
<div class="card-white py-3 mx-xs-3 mx-sm-3 mx-4 mx-xl-0 ">
|
||||
<div class="conteiner-row">
|
||||
<div class="conteiner ctx-card-white-1 pt-4">
|
||||
<div class="d-sm text-align-center">
|
||||
<p class="display-3 Telegraf-UltraBold text-dark mx-auto mt-4">We ship it.</p>
|
||||
<p class="display-3 Telegraf-UltraBold text-pink mx-auto my-4">You own it.</p>
|
||||
</div>
|
||||
<div class="d-sm-none d-md-none d-lg-none d-xl-none text-align-center">
|
||||
<p class="display-4 Telegraf-UltraBold text-dark mx-auto mt-4">We ship it.</p>
|
||||
<p class="display-4 Telegraf-UltraBold text-pink mx-auto my-4">You own it.</p>
|
||||
</div>
|
||||
|
||||
<div class="conteiner ctx-card-white-1 text-dark h3 d-lg-none d-xl-none my-xs-5 my-sm-5 my-md-5">
|
||||
<ul class="ul-home mx-xs-auto mx-sm-auto mx-md-auto my-xs-5 my-sm-5 my-md-5">
|
||||
<li>- Own your AWS infrastructure</li>
|
||||
<li>- Implement, reuse and scale faster</li>
|
||||
<li>- Bootstrap your AWS Landing Zone</li>
|
||||
<li>- Proven libraries and modules</li>
|
||||
<li>- Modern Terraform, Ansible, Helm, K8s Stack</li>
|
||||
<li>- Optimize your cloud costs by design</li>
|
||||
<li>- Secure your cloud assets and production workloads</li>
|
||||
<li>- Achieve compliance in AWS</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onclick="window.open('https://github.com/binbashar', '_blank')"
|
||||
title="{{ lang.t('source.link.title') }}"
|
||||
type="button"
|
||||
class="btn-white btn-xl-large btn-lg-large box-shadow mx-auto my-4"
|
||||
>
|
||||
Contribute on GitHub
|
||||
</button>
|
||||
</div>
|
||||
<div class="conteiner ctx-card-white-1 text-dark h3 d-lg">
|
||||
<ul>
|
||||
<li>- Own your AWS infrastructure</li>
|
||||
<li>- Implement, reuse and scale faster</li>
|
||||
<li>- Bootstrap your AWS Landing Zone</li>
|
||||
<li>- Proven libraries and modules</li>
|
||||
<li>- Modern Terraform, Ansible, Helm, K8s Stack</li>
|
||||
<li>- Optimize your cloud costs by design</li>
|
||||
<li>- Secure your cloud assets and production workloads</li>
|
||||
<li>- Achieve compliance in AWS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Whats is leverage-->
|
||||
<div class="conteiner-row-lg conteiner-row-xl conteiner py-5 my-5">
|
||||
<div class="conteiner" style="order:0; flex: 50%;">
|
||||
<div class="conteiner ctx-what-is mx-auto">
|
||||
<span class="display-3 text-dark Telegraf-UltraBold mt-4 text-align-center text-end-xl text-end-lg">What is Leverage?</span>
|
||||
<div class="conteiner text-dark h3 text-align-start text-end-xl text-end-lg my-xs-5 my-sm-5 my-md-5">
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
|
||||
Our focus is on creating reusable, high quality AWS Cloud Infrastructure code, through our core components:
|
||||
</p>
|
||||
<p class="my-3 t-b">
|
||||
• Reference Architecture for AWS<br>
|
||||
• Infrastructure as Code (IaC) Library<br>
|
||||
• Leverage CLI<br>
|
||||
</p>
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
|
||||
Because all the code and modules are already built, we can get your project up and running on AWS <span class="t-b">up to 10x faster</span> than a consulting company.
|
||||
</p>
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
|
||||
On top of code that is thoroughly documented, tested, and has been proven in production at dozens of other project deployments <span class="t-b">our Engineering Support Team.</span>
|
||||
</p>
|
||||
<button
|
||||
onclick="location.href='https://www.binbash.co/leverage'"
|
||||
title="{{ page.next_page.title | e }}"
|
||||
type="button"
|
||||
class="btn-dark btn-xl-large btn-lg-large my-4 box-shadow ml-auto mx-xs-auto mx-sm-auto mx-md-auto"
|
||||
>
|
||||
Product Features
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conteiner" style="order:1; flex: 50%; overflow:hidden;">
|
||||
<img src="assets/images/illustrations/mock-mac-book-16.png" class="laverage-mac-img my-xs-5 my-sm-5 my-md-5" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--Why Leverage-->
|
||||
<section class="third-dark-body w-100">
|
||||
<div class="conteiner py-5 my-5">
|
||||
<img src="assets/images/illustrations/why-leverage.svg" class="why-laverage-img" />
|
||||
<img src="assets/images/illustrations/Ilustracion-Binbash.png" class="laverage-mac2-img" />
|
||||
<div class="conteiner-row">
|
||||
<div style="order:0; flex: 50%;">
|
||||
<div class="conteiner ctx-card-white-1 text-white h3 my-5 d-xl-none d-lg-none mx-auto w-70">
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
|
||||
You will get your entire Cloud Native Application Infra in a few weeks.
|
||||
</p>
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
|
||||
We've built every component based on the best recommended practices.
|
||||
</p>
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
|
||||
Implement, reuse and scale your production workloads faster.
|
||||
</p>
|
||||
</div>
|
||||
<div class="conteiner ctx-card-white-1 text-white h3 my-5 mx-auto w-70">
|
||||
<btn
|
||||
onclick="window.open('https://www.binbash.co/competition','_blank')"
|
||||
title="{{ lang.t('source.link.title') }}"
|
||||
type="button"
|
||||
class="btn-rainbow btn-rainbow-custom btn-xl-large btn-lg-large mx-auto text-align-center cursor-pointer"
|
||||
>
|
||||
Leverage vs. Competition
|
||||
</btn>
|
||||
</div>
|
||||
</div>
|
||||
<div style="order:0; flex: 50%;" class="d-lg">
|
||||
<div class="card-rainbow second-gradiant-body px-5 py-5" style="order:1; flex: 100%;">
|
||||
<div class="conteiner ctx-card-white-1 text-dark h3">
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" width="20px" height="20px"/>
|
||||
If you implement our <span class="t-b">Reference AWS Cloud Solutions Architecture</span> and the <span class="t-b">Infrastructure as Code (IaC) Library</span> via <span class="t-b">Leverage CLI</span>, you will get your entire Cloud Native Application Infra in a few weeks.
|
||||
</p>
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" width="20px" height="20px"/>
|
||||
We've built every component based on the best-recommended practices, mainly following the <span class="t-b">AWS Well-Architected Framework</span>, granting you ownership to implement, reuse and scale your production workloads faster.
|
||||
</p>
|
||||
<p class="my-3">
|
||||
<img src="assets/images/icons/check-ok.svg" width="20px" height="20px"/>
|
||||
Leverage will solve your entire infrastructure and grant you complete control of the source code, and of course, you'll be able to run it without us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--Our tech stack-->
|
||||
<section class="four-gray-body w-100">
|
||||
<div class="md-grid conteiner pt-5 my-0 my-xl-4 my-lg-4">
|
||||
<p class="display-3 text-dark Telegraf-UltraBold mt-4 text-align-center text-start-xl text-start-lg">Our tech stack</p>
|
||||
<img src="assets/images/logos/stack-tecnology.svg" class="mx-auto my-5" width="80%"/>
|
||||
<div class="conteiner conteiner-row-lg conteiner-row-xl my-4">
|
||||
<div class="text-dark h3 mx-4 my-3 mx-lg-0 my-xl-0 mx-lg-0 my-xl-0" style="order:0; flex: 50%;">
|
||||
<p>Opinionated reference <span class="t-b">AWS solutions</span> composable architecture, based on the <span class="t-b">AWS Well-Architected Framework</span>. With over ten years of experience, Infra as code and best practices.</p>
|
||||
</div>
|
||||
<div class="text-dark h3 mx-4 my-3 mx-lg-0 my-xl-0 mx-lg-0 my-xl-0" style="order:0; flex: 50%;">
|
||||
<p>Leverage facilitates a collection of reusable, tested, production-ready E2E IaC solutions. They are leveraged by modules written in <span class="t-b">Terraform, Ansible, Dockerfiles, Helm Charts</span> and <span class="t-b">Python</span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conteiner conteiner-row-lg conteiner-row-xl my-4">
|
||||
<div class="text-dark h3 mx-4 my-3 mx-lg-0 my-xl-0 mx-lg-0 my-xl-0" style="order:0; flex: 50%;">
|
||||
<p>Automated deployment workflow via <span class="t-b">Leverage CLI.</span></p>
|
||||
</div>
|
||||
<div style="order:0; flex: 50%;">
|
||||
<button
|
||||
onclick="location.href='./concepts/our-tech-stack/'"
|
||||
title="{{ page.next_page.title | e }}"
|
||||
type="button"
|
||||
class="btn-dark btn-xl-large btn-lg-large my-4 box-shadow mx-auto"
|
||||
>
|
||||
Why our tech stack???
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <img src="/assets/images/diagrams/AWS-ORGANIZATION.png" class="mx-auto mt-5 mb-3 d-sm" width="100%"/>-->
|
||||
<img src="assets/images/diagrams/ref-architecture-aws.png" class="mx-auto mt-5 mb-3 d-sm" width="100%"/>
|
||||
<img src="assets/images/diagrams/diagrama-organization-binbash.png" class="mx-auto mt-5 d-sm-none d-md-none d-lg-none d-xl-none" width="100%"/>
|
||||
<div class="conteiner-row my-0 my-xl-4 my-lg-4 stack-tenology-gradient">
|
||||
<img src="assets/images/logos/stack-tecnologico-2.svg" class="mx-auto py-3" width="60%"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="bg-dark w-100">
|
||||
<div class="md-grid conteiner-row-xl conteiner-row-lg conteiner pt-5 my-4">
|
||||
<div class="conteiner-row" style="flex:50%">
|
||||
<div class="text-white d-flex" style="flex: 40%;">
|
||||
<img src="assets/images/logos/logo-binbash.png" class="mx-auto" width="30%"/>
|
||||
</div>
|
||||
<div class="text-white h3" style="flex: 30%;">
|
||||
<div class="conteiner text-white h3">
|
||||
<ul>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://www.binbash.co/" target="_blank">Home</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://www.binbash.co/" target="_blank">Solutions</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://www.binbash.co/leverage" target="_blank">Leverage</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://medium.com/binbash-inc" target="_blank">Blog</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://www.binbash.co/contact" target="_blank">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-white h3" style="flex: 30%;">
|
||||
<div class="conteiner text-white h3">
|
||||
<ul>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://github.com/sponsors/binbashar" target="_blank">About Us</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://www.binbash.co/team" target="_blank">Team</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://github.com/binbashar" target="_blank">Resources</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://www.binbash.co/" target="_blank">Testimonials</a>
|
||||
</li>
|
||||
<li class="cursor-pointer item-text-footer">
|
||||
<a href="https://www.binbash.co/pricing" target="_blank">Pricing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conteiner-row mt-5 my-xl-0 mX-lg-0" style="flex:50%">
|
||||
<div class="text-white text-end h3" style="flex: 15%;">
|
||||
<span>Follow us on: </span>
|
||||
</div>
|
||||
<div class="text-white h3" style="flex: 55%;">
|
||||
<a href="https://join.slack.com/t/binbashar/shared_invite/zt-fw1692b6-9k4ADsWJ47lKacszphXM1w" target="_blank">
|
||||
<img
|
||||
src="assets/images/logos/socialmedia/slack.svg"
|
||||
title="Slack"
|
||||
class="mx-3 cursor-pointer item-social-media"
|
||||
width="9%"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/binbash" target="_blank">
|
||||
<img
|
||||
src="assets/images/logos/socialmedia/linkedIn.svg"
|
||||
title="linkedIn"
|
||||
class="mr-3 cursor-pointer item-social-media"
|
||||
width="9%"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://github.com/binbashar" target="_blank">
|
||||
<img
|
||||
src="assets/images/logos/socialmedia/github.svg"
|
||||
title="Github"
|
||||
class="mr-3 cursor-pointer item-social-media"
|
||||
width="9%"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://twitter.com/binbash_devops" target="_blank">
|
||||
<img
|
||||
src="assets/images/logos/socialmedia/twitter.svg"
|
||||
title="Twitter"
|
||||
class="mr-3 cursor-pointer item-social-media"
|
||||
width="9%"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/binbash_devops/" target="_blank">
|
||||
<img
|
||||
src="assets/images/logos/socialmedia/instagram.svg"
|
||||
title="Instagram"
|
||||
class="mr-3 cursor-pointer item-social-media"
|
||||
width="9%"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://medium.com/binbash-inc" target="_blank">
|
||||
<img
|
||||
src="assets/images/logos/socialmedia/medium.svg"
|
||||
title="Medium"
|
||||
class="mr-3 cursor-pointer item-social-media"
|
||||
width="9%"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% endblock %}
|
||||
1962
overrides/main-styles.html
Normal file
1962
overrides/main-styles.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,18 +1,55 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
<!-- Custom front matter -->
|
||||
{% block extrahead %}
|
||||
|
||||
<!-- Determine title -->
|
||||
{% set title = config.site_name %}
|
||||
{% if page and page.title and not page.is_homepage %}
|
||||
{% set title = config.site_name ~ " - " ~ page.title | striptags %}
|
||||
{% endif %}
|
||||
|
||||
<!-- The image needs to have an absolute URL -->
|
||||
{% set image = config.site_url ~ 'assets/images/illustrations/banner.png' %}
|
||||
|
||||
<!-- Open graph meta tags -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="{{ title }}" />
|
||||
<meta property="og:description" content="{{ config.site_description }}" />
|
||||
<meta property="og:url" content="{{ page.canonical_url }}" />
|
||||
<meta property="og:image" content="{{ image }}" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="1080" />
|
||||
<meta property="og:image:height" content="568" />
|
||||
|
||||
<!-- google-site-verification meta-tag -->
|
||||
<meta name="google-site-verification" content="-Rj8YMCn9uu5IwOFdC-WfAzXp4ZOMJtYKxU40ZgcJIU" />
|
||||
|
||||
<!-- Extra stylesheets -->
|
||||
<!-- <link
|
||||
rel="stylesheet"
|
||||
href="{{ 'assets/stylesheets/overrides.css' | url }}"
|
||||
/>-->
|
||||
{% endblock %}
|
||||
|
||||
<!-- Announcement bar -->
|
||||
{% block announce %}
|
||||
Für Updates folge bitte <strong>@stiebke</strong> auf
|
||||
<a rel="me" href="https://freiburg.social/@squidfunk">
|
||||
<span class="twemoji mastodon">
|
||||
{% include ".icons/fontawesome/brands/mastodon.svg" %}
|
||||
<!-- Extra stylesing -->
|
||||
<style>
|
||||
.md-announce a,
|
||||
.md-announce a:focus,
|
||||
.md-announce a:hover{color:currentColor}.md-announce
|
||||
strong{white-space:nowrap}.md-announce
|
||||
</style>
|
||||
|
||||
<a href="https://www.linkedin.com/company/binbash">
|
||||
<p style="color: #D5EE1C">For updates follow <strong style="color: #D5EE1C">@binbash</strong> on
|
||||
<span class="twemoji linkedin" style="color: #0e76a8">
|
||||
{% include ".icons/fontawesome/brands/linkedin-in.svg" %}
|
||||
</span>
|
||||
<strong>freiburg.social</strong>
|
||||
</a>
|
||||
und <strong>stiebke.bsky.social</strong> auf
|
||||
<a href="https://bsky.app/profile/stiebke.bsky.social">
|
||||
<span class="twemoji bluesky">
|
||||
{% include ".icons/fontawesome/brands/bluesky.svg" %}
|
||||
</span>
|
||||
<strong>Bluesky</strong>
|
||||
</a>
|
||||
<strong style="color: white">LinkedIn</strong>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
18
overrides/main.html.bak
Normal file
18
overrides/main.html.bak
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block announce %}
|
||||
Für Updates folge bitte <strong>@stiebke</strong> auf
|
||||
<a rel="me" href="https://freiburg.social/@squidfunk">
|
||||
<span class="twemoji mastodon">
|
||||
{% include ".icons/fontawesome/brands/mastodon.svg" %}
|
||||
</span>
|
||||
<strong>freiburg.social</strong>
|
||||
</a>
|
||||
und <strong>stiebke.bsky.social</strong> auf
|
||||
<a href="https://bsky.app/profile/stiebke.bsky.social">
|
||||
<span class="twemoji bluesky">
|
||||
{% include ".icons/fontawesome/brands/bluesky.svg" %}
|
||||
</span>
|
||||
<strong>Bluesky</strong>
|
||||
</a>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue