From 3600849cb966cbb75447f10c08d55930f6945709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20G=C3=A1bor?=
 <49348865+gabros20@users.noreply.github.com>
Date: Mon, 25 Mar 2024 17:58:52 +0100
Subject: [PATCH] Feature/banner subtile variant (#387)

* banner (#385)

* Update layout.js

* Update banner.js

* Update banner.js

* Update banner.js

* Update banner.js

* updated banner

* updated hero content position

* update: text size, backgroud, position, button size

---------

Co-authored-by: Alex Beckett <75361908+alex-beckett@users.noreply.github.com>
---
 src/components/modules/banner.js |  5 +++--
 src/scss/modules/header.scss     | 32 +++++++++++++-------------------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/components/modules/banner.js b/src/components/modules/banner.js
index 26de2157..c0eabf64 100644
--- a/src/components/modules/banner.js
+++ b/src/components/modules/banner.js
@@ -30,9 +30,10 @@ export default class Banner extends React.Component {
 					<i className={"icon-close"}></i>
 				</div>
 				<div className={"container"}>
-					<div className={"gap-3 justify-content-center align-items-center d-flex flex-column flex-lg-row"}>
+					<div className={"gap-2 gap-lg-4 justify-content-center align-items-center d-flex flex-column flex-lg-row"}>
 						<div className={"banner-text col-auto"}>
-							Get ready for the first Celestia hackathon! Infinite Space Bazaar begins on April 2 <div className={`emoji`}>☄️</div>
+							Get ready for the first Celestia hackathon! Infinite Space Bazaar begins on April 2
+							{/* <div className={`emoji`}>☄️</div> */}
 						</div>
 
 						<a className={"col-auto"} href='https://bazaar.celestia.org' target={"_blank"} rel={"noreferrer"}>
diff --git a/src/scss/modules/header.scss b/src/scss/modules/header.scss
index 0e592cb1..07afe4df 100644
--- a/src/scss/modules/header.scss
+++ b/src/scss/modules/header.scss
@@ -426,10 +426,10 @@ header {
 }
 
 .banner {
-	background-color: rgba(255, 255, 255, 0.3);
-	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
-	backdrop-filter: blur(50px);
-	padding: 25px 0;
+	background-color: rgba(255, 255, 255, 0.2);
+	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
+	backdrop-filter: blur(30px);
+	padding: 12px 0;
 	color: #000000;
 	font-family: $ruberoid;
 	font-size: 18px;
@@ -438,22 +438,13 @@ header {
 	line-height: 26px;
 	z-index: 100;
 	position: relative;
-	top: 8px;
-	left: 10px;
+	top: 0px;
+	left: 0px;
 	width: 100%;
 	text-align: center;
 	overflow: hidden;
-	border-radius: 10px;
-	width: calc(100% - 20px);
-	background: linear-gradient(
-		90deg,
-		rgba(150, 50, 238, 0.5) 0%,
-		rgba(241, 177, 123, 0.5) 35.42%,
-		rgba(135, 204, 233, 0.5) 66.15%,
-		rgba(172, 124, 209, 0.6) 99.48%
-	);
+	width: 100%;
 	background-size: 300% 300%;
-	animation: gradient 10s ease infinite;
 	filter: brightness(1.3);
 	@include transition(500ms all ease-in-out);
 
@@ -496,7 +487,7 @@ header {
 
 	.close-banner {
 		position: absolute;
-		top: 14px;
+		top: 18px;
 		right: 18px !important;
 		font-size: 12px;
 		right: 0;
@@ -509,6 +500,7 @@ header {
 
 	.banner-text {
 		text-wrap: pretty;
+		font-size: 16px;
 		@include media-breakpoint-down(sm) {
 			font-size: 14px;
 			line-height: 1.35em;
@@ -523,9 +515,11 @@ header {
 		}
 	}
 	.button-simple {
+		font-size: 14px;
+		padding: 10px 20px;
 		@include media-breakpoint-down(sm) {
-			font-size: 14px;
-			padding: 10px 20px;
+			font-size: 12px;
+			padding: 8px 16px;
 		}
 	}
 }