Adds workshop banner to welcome page

Author: cmgriffing

src/webviews/apps/welcome/welcome.html

@@ -49,6 +49,20 @@ <h1 class="welcome__brand"><gitlens-logo></gitlens-logo> <small>Git Supercharged
 			</p>
 		</header>
 		<main class="welcome__main">
+			<div class="workshop-banner" id="workshop-banner">
+				<p class="workshop-banner__date"><strong>April 30th 1PM ET</strong></p>
+
+				<p class="workshop-banner__content">
+					<span>Discover faster, easier onboarding with GitLens</span>
+					<span><strong>Free Workshop</strong></span>
+				</p>
+				<gl-button
+					href="https://event.sessions.us/gitkraken/fast-easy-onboarding-with-gitlens-in-vs-code?utm_campaign=GitKraken%20Workshops&utm_source=twitter&utm_medium=social&utm_term=GitLens%20Workshop"
+					class="workshop-banner__register-button"
+				>
+					Register Now
+				</gl-button>
+			</div>
 			<section class="welcome__section">
 				<p class="t-feature">
 					Supercharge Git and unlock <strong>untapped knowledge</strong> within your repository to better

src/webviews/apps/welcome/welcome.scss

@@ -278,6 +278,48 @@ gk-card p {
 		grid-template-columns: 1fr;
 		grid-template-rows: min-content;
 		gap: 1.6rem 3rem;
+
+		.workshop-banner {
+			border: thin solid #c64eff;
+			border-radius: 3px;
+			display: flex;
+			flex-direction: row;
+			margin: 1rem;
+			align-items: center;
+			justify-content: space-between;
+			padding: 1rem 2rem;
+			gap: 1rem;
+			margin-right: 6rem;
+
+			&__date {
+				margin-bottom: 0;
+			}
+
+			&__content {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				gap: 0.5rem;
+				margin-bottom: 0;
+			}
+
+			&__register-button {
+				--button-foreground: white;
+				--button-background: #c64eff;
+				--button-hover-background: #d98ffb;
+				font-weight: bold;
+				border-radius: 2px;
+				padding: 0.5rem 2rem;
+			}
+
+			@media screen and (width < 1000px) {
+				flex-direction: column;
+				margin-right: 0;
+				text-align: center;
+				padding: 1rem 1rem;
+			}
+		}
 	}
 
 	&__section {

src/webviews/apps/welcome/welcome.ts

@@ -106,6 +106,7 @@ export class WelcomeApp extends App<State> {
 		this.updateAccountState();
 		this.updatePromo();
 		this.updateOrgSettings();
+		this.updateWorkshopBanner();
 	}
 
 	private updateOrgSettings() {
@@ -149,6 +150,17 @@ export class WelcomeApp extends App<State> {
 		const { isTrialOrPaid } = this.state;
 		document.getElementById('try-pro')!.hidden = isTrialOrPaid ?? false;
 	}
+
+	private updateWorkshopBanner() {
+		const today = Date.now();
+		const cutoffDate = Date.parse('30 Apr 2024 10:00:00 PDT');
+
+		const bannerElement = document.getElementById('workshop-banner');
+
+		if (bannerElement && today > cutoffDate) {
+			bannerElement.hidden = true;
+		}
+	}
 }
 
 new WelcomeApp();