Adds what's new context to welcome

src/webviews/apps/welcome/welcome.html

@@ -37,10 +37,28 @@
 					<h2 class="section__title section__title--primary">
 						Welcome to <span class="highlight">GitLens 12</span>
 					</h2>
-					<div class="center mt-1 mb-1">
-						<a class="button button--flat" title="See What's New" href="https://gitlens.amod.io/#whats-new"
+					<div class="section__whatsnew">
+						<a title="See What's New" href="https://gitkraken.com/blog/gitlens-12"
+							><img src="#{webroot}/media/gitlens-12-card.webp"
+						/></a>
+						<a
+							class="button button--flat"
+							title="See What's New"
+							href="https://gitkraken.com/blog/gitlens-12"
 							>See What's New in GitLens 12</a
 						>
+						<span class="button__subaction"
+							>or read the <a href="https://gitlens.amod.io/#whats-new">release notes</a></span
+						>
+						<a
+							class="button button--flat"
+							title="Open the Get Started with GitLens walkthrough"
+							href="command:gitlens.getStarted"
+							>Get Started Walkthrough</a
+						>
+						<span class="button__subaction"
+							>or <a href="command:gitlens.premium.learn">learn about premium features</a></span
+						>
 					</div>
 
 					<h2 id="quick-setup" class="section__title section__title--break">Quick Setup</h2>

src/webviews/apps/welcome/welcome.scss

@@ -333,6 +333,31 @@ section {
 	}
 }
 
+.section__whatsnew {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	font-weight: 200;
+	margin: 1rem;
+
+	img {
+		width: 100%;
+		max-width: 600px;
+		border-radius: 8px;
+		box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8), 0px 0px 12px 1px rgba(0, 0, 0, 0.5);
+		margin-bottom: 2rem;
+	}
+
+	a {
+		font-weight: 600;
+	}
+}
+
+.button__subaction {
+	color: var(--color-foreground--65);
+	margin-top: -0.5rem;
+}
+
 .setting {
 	flex: 0 1 auto;
 	position: relative;