Globalping: About us page

src/assets/js/app-globalping.js

@@ -8,6 +8,7 @@ const cGlobalpingCli = require('../../views/pages/globalping/cli.html');
 const cGlobalpingSlack = require('../../views/pages/globalping/slack.html');
 const cGlobalpingNetworkTools = require('../../views/pages/globalping/network-tools.html');
 const cGlobalpingIntegrations = require('../../views/pages/globalping/integrations.html');
+const cGlobalpingAbout = require('../../views/pages/globalping/about-us.html');
 const { getGlobalpingUser } = require('./utils/http');
 
 Ractive.DEBUG = location.hostname === 'localhost';
@@ -31,6 +32,7 @@ app.router.addRoute('/cli', cGlobalpingCli);
 app.router.addRoute('/slack', cGlobalpingSlack);
 app.router.addRoute('/network-tools/:params?', cGlobalpingNetworkTools);
 app.router.addRoute('/integrations', cGlobalpingIntegrations);
+app.router.addRoute('/about-us', cGlobalpingAbout);
 
 app.router.replaceQueryParam = function (name, newValue) {
 	history.replaceState(history.state, null, location.href.replace(new RegExp(`${name}=[^&]+|$`), `${name}=${encodeURIComponent(newValue)}`));

src/assets/less/app-globalping.less

@@ -23,3 +23,4 @@
 @import "pages/globalping/slack.less";
 @import "pages/globalping/network-tools.less";
 @import "pages/globalping/integrations.less";
+@import "pages/globalping/about-us.less";

src/assets/less/components/gp-jumbotron.less

@@ -190,4 +190,74 @@
 			}
 		}
 	}
+
+	&.about-us {
+		position: absolute;
+		padding: 0;
+		height: 276px;
+
+		@media (min-width: @screen-sm-min) {
+			height: 444px;
+		}
+
+		.grid-type-3 {
+			position: relative;
+			height: 100%;
+			width: 100%;
+			background: linear-gradient(180deg, #13bd95 23.17%, rgba(21, 198, 155, .32) 60.67%, rgba(23, 212, 167, 0) 100%);
+
+			&_under-header {
+				height: 60px;
+				background: #00b88c;
+
+				@media (min-width: @screen-sm-min) {
+					height: 64px;
+				}
+			}
+
+			&_grid-wrapper {
+				position: relative;
+				width: calc(100% - 48px);
+				height: calc(100% - 60px);
+				margin: 0 auto;
+				overflow: visible;
+
+				@media (min-width: @screen-sm-min) {
+					max-width: 808px;
+					height: calc(100% - 64px);
+				}
+
+				.jumbotron_grid {
+					position: absolute;
+					opacity: .64;
+					top: -121px;
+					left: -251px;
+					z-index: 2;
+					mix-blend-mode: overlay;
+					mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
+					mask-size: 100% 50%;
+					mask-repeat: no-repeat;
+
+					@media (min-width: @screen-sm-min) {
+						mask-size: 100% 75%;
+					}
+				}
+			}
+
+			&_gradient {
+				position: absolute;
+				top: 60px;
+				left: 0;
+				width: 100%;
+				height: calc(100% - 60px);
+				background: linear-gradient(180deg, #00b88c 0%, rgba(0, 184, 140, 0) 100%);
+				z-index: 1;
+
+				@media (min-width: @screen-sm-min) {
+					top: 64px;
+					height: calc(100% - 64px);
+				}
+			}
+		}
+	}
 }

src/assets/less/components/header.less

@@ -53,6 +53,49 @@
 		}
 	}
 
+	&.gp-about-us-header {
+		position: absolute;
+		width: 100%;
+
+		.navbar {
+			background-color: transparent;
+			border: none;
+
+			.main-logo_text.globalping {
+				color: #fff;
+				opacity: .8;
+			}
+		}
+
+		.dropdown-menu {
+			width: auto;
+		}
+
+		.dashboard-section {
+			@media (min-width: @screen-md-min) {
+				a.btn {
+					border-color: #fff;
+					transition: background-color 200ms, border-color 200ms;
+
+					&:hover {
+						color: @gp-green;
+						background-color: #fff;
+					}
+				}
+
+				button.btn {
+					border-color: #fff;
+					border-left-color: transparent;
+
+					&:hover {
+						color: @gp-green;
+						background-color: #fff;
+					}
+				}
+			}
+		}
+	}
+
 	&.header-fw-docs {
 		.container-fluid {
 			max-width: 100%;
@@ -425,8 +468,6 @@
 		}
 
 		.btn {
-			color: #fff;
-
 			&:active {
 				box-shadow: none;
 			}
@@ -462,6 +503,7 @@
 			}
 
 			button.btn {
+				color: #fff;
 				border-radius: 0 8px 8px 0;
 				padding: 6px 8px 6px 6px;
 				background-color: transparent;