New Alert Banner

apps/landing/src/app/Banner.tsx

@@ -17,21 +17,41 @@ export function Banner(props: BannerProps) {
 			href={href ?? '/'}
 			className={clsx(
 				props.className,
-				'animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit flex-row rounded-full border-[1.5px] border-yellow-700 bg-yellow-600 px-5 py-2.5 text-xs backdrop-blur-md transition sm:w-auto sm:text-base'
+				'animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit flex-row rounded-full px-5 py-2.5 text-xs backdrop-blur-md transition sm:w-auto sm:text-base'
 			)}
 		>
-			<div className="flex items-center gap-2">
-				<Star weight="fill" className="text-white" size={20} />
-				<p className="font-regular truncate text-white">{headline}</p>
+			<div
+				className="inline-flex items-center justify-center gap-[8px] rounded-[20.9px] border-[1.5px] border-solid border-[rgba(255,164,13,0.53)] px-3.5 py-2.5 shadow-[0px_0px_25.4px_0px_rgba(255,203,75,0.50)]"
+				style={{
+					backgroundImage: `
+    linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.16) 0%,
+      rgba(0, 0, 0, 0.16) 100%
+    ),
+    url('images/misc/NoisePattern.png'),
+    linear-gradient(
+      85deg,
+      #be7900 3.85%,
+      #ffdf94 13.34%,
+      #e0a633 30.97%,
+      #dfa431 52.92%,
+      #be7900 84.26%
+    )`,
+					backgroundSize: '100px 100px, cover, cover',
+					backgroundPosition: '0% 0%, center, center',
+					backgroundRepeat: 'repeat, no-repeat, no-repeat',
+					backgroundColor: 'lightgray',
+					backgroundBlendMode: 'darken, overlay, normal'
+				}}
+			>
+				<div className="flex items-center gap-2">
+					<Star weight="fill" className="text-white" size={20} />
+					<p className="text-center text-[16px] font-[700] font-normal leading-[115%] text-white">
+						{headline}
+					</p>
+				</div>
 			</div>
-			{link && (
-				<>
-					<div role="separator" className="h-22 mx-4 w-px bg-zinc-700/70" />
-					<span className="font-regular shrink-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent decoration-primary-600">
-						{link} <span aria-hidden="true">&rarr;</span>
-					</span>
-				</>
-			)}
 		</Link>
 	);
 }