feat: switch the homepage background to a spinning globe

Author: PavelKopecky

src/assets/json/globe-dots.json

@@ -32,6 +32,7 @@
 @import "components/test-examples.less";
 @import "components/probe-filters.less";
 @import "components/probe-loading-state.less";
+@import "components/globe.less";
 
 @import "pages/globalping.less";
 @import "pages/network-tools.less";

src/assets/less/app.less

@@ -1183,6 +1183,12 @@ body.noscroll {
 	}
 }
 
+.mobile-only {
+	@media (min-width: @screen-sm-min) {
+		display: none;
+	}
+}
+
 .btn-outline-danger {
 	color: #eb3333;
 	background: #fff;

src/assets/less/common.less

@@ -0,0 +1,30 @@
+.c-gp-globe {
+	position: absolute;
+	z-index: -1;
+	pointer-events: none;
+
+	svg {
+		display: block;
+		width: 100%;
+		height: auto;
+		overflow: visible;
+	}
+
+	&_outline {
+		fill: none;
+		stroke: #365590;
+		stroke-width: 1.5;
+	}
+
+	&_shell {
+		fill: #17233a;
+	}
+
+	&_dot {
+		fill: #5074b8;
+	}
+
+	&_pulse-dot {
+		fill: #17d4a7;
+	}
+}

src/assets/less/components/globe.less

@@ -56,15 +56,15 @@
 	// styles for a specific GP pages
 	&.main {
 		overflow: clip visible;
-		height: 532px;
-		background: linear-gradient(180deg, #17233a 0, #17233a 50%, #0a206f 70%, #fff 100%);
+		height: 800px;
+		background: linear-gradient(180deg, #17233a 0%, #17233a 44%, #24345a 58%, #4d659f 73%, #97a7d8 84%, #d7ddef 92%, #f3f5fb 97%, #fff 100%);
 
 		@media (min-width: @screen-sm-min) {
 			height: 680px;
 		}
 
 		.jumbotron_blur {
-			top: 380px;
+			top: 320px;
 			height: 360px;
 			overflow: visible;
 			z-index: -1;
@@ -92,6 +92,27 @@
 				transform: translate(-50%, -55%) rotate(-180deg);
 				background: radial-gradient(50% 52% at 50% 50%, rgba(48, 90, 171, .28) 0%, rgba(48, 90, 171, .75) 64%, rgba(48, 90, 171, .5) 82%, rgba(48, 90, 171, 0) 100%);
 			}
+
+			@media (min-width: @screen-sm-min) {
+				display: none;
+			}
+		}
+
+		.jumbotron_globe {
+			display: none;
+			--globe-size: min(900px, calc(100vw - 64px));
+			left: 50%;
+			bottom: calc(var(--globe-size) * -.35);
+			width: var(--globe-size);
+			transform: translateX(-50%);
+
+			@media (min-width: @screen-sm-min) {
+				display: block;
+			}
+
+			@media (min-width: @screen-md-min) {
+				bottom: calc(var(--globe-size) * -.5);
+			}
 		}
 	}
 

src/assets/less/components/jumbotron.less

@@ -34,12 +34,6 @@
 		font-weight: 600;
 	}
 
-	.mobile-only {
-		@media (min-width: @screen-sm-min) {
-			display: none;
-		}
-	}
-
 	.prevent-select {
 		-webkit-user-select: none;
 		-ms-user-select: none;

src/assets/less/components/sponsorship.less

@@ -29,12 +29,17 @@ html.gp-video-modal-scroll-stable {
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
-			row-gap: 32px;
+			text-align: start;
+			row-gap: 24px;
 			margin: 40px 24px;
-			max-width: 808px;
+			max-width: 880px;
+
+			@media (min-width: @screen-sm-min) {
+				text-align: center;
+			}
 
 			@media (min-width: @screen-md-min) {
-				margin: 82px 24px 100px;
+				margin: 82px 24px 48px;
 			}
 
 			&_descr {
@@ -62,9 +67,10 @@ html.gp-video-modal-scroll-stable {
 				justify-content: space-between;
 				row-gap: 32px;
 
-				@media (min-width: @screen-md-min) {
-					flex-direction: row;
-					align-items: flex-end;
+				@media (min-width: @screen-sm-min) {
+					flex-direction: column;
+					align-items: center;
+					row-gap: 48px;
 				}
 			}
 
@@ -89,6 +95,7 @@ html.gp-video-modal-scroll-stable {
 					@media (min-width: @screen-sm-min) {
 						row-gap: 0;
 						flex-grow: 0;
+						align-items: center;
 					}
 
 					&:hover {
@@ -183,6 +190,7 @@ html.gp-video-modal-scroll-stable {
 						line-height: 20px;
 
 						@media (min-width: @screen-sm-min) {
+							margin-left: 5px;
 							white-space: nowrap;
 						}
 					}
@@ -191,48 +199,30 @@ html.gp-video-modal-scroll-stable {
 
 			&_video {
 				display: flex;
-				flex-direction: column;
 				align-items: center;
-				row-gap: 8px;
+				gap: 10px;
 				color: #fff;
 				flex-shrink: 0;
+				border: none;
+				border-radius: 8px;
+				background: #17d4a7;
+				padding: 10px 16px;
+				font-weight: 400;
+				font-size: 16px;
+				line-height: 20px;
+				white-space: nowrap;
+				transition: background .15s ease-out;
 
-				&_button {
-					display: inline-flex;
-					align-items: center;
-					column-gap: 10px;
-					border: none;
-					border-radius: 8px;
-					background: #17d4a7;
-					padding: 10px 16px;
-					font-weight: 400;
-					font-size: 16px;
-					line-height: 20px;
-					color: #fff;
-					white-space: nowrap;
-					transition: background .15s ease-out;
-
-					&:hover {
-						background: #46e1bc;
-					}
-
-					&:focus {
-						outline: none;
-					}
-
-					&:focus-visible {
-						box-shadow: 0 0 0 3px rgba(23, 212, 167, .8);
-					}
+				&:hover {
+					background: #46e1bc;
 				}
 
-				&_text {
-					font-size: 14px;
-					line-height: 20px;
-					text-align: center;
+				&:focus {
+					outline: none;
+				}
 
-					@media (max-width: @screen-sm-max) {
-						display: none;
-					}
+				&:focus-visible {
+					box-shadow: 0 0 0 3px rgba(23, 212, 167, .8);
 				}
 			}