Layout of the header of the welcome page

(#4769, #4773, PLG-138)

Author: sergeibbb

src/webviews/apps/welcome/welcome.css.ts

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+
+export const welcomeStyles = css`
+	.welcome::before {
+		content: ' ';
+		position: absolute;
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%) translateY(-40%);
+		z-index: -1;
+
+		width: 620px;
+		height: 517px;
+
+		border-radius: 100%;
+		background: radial-gradient(76.32% 76.32% at 50% 7.24%, #7b00ff 29.72%, rgba(255, 0, 242, 0) 100%);
+		opacity: 0.25;
+		mix-blend-mode: color;
+		filter: blur(53px);
+	}
+	.welcome__section {
+		display: flex;
+		flex-flow: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
+	.welcome__section p {
+		font-size: larger;
+		max-width: calc(620px * 0.75);
+	}
+
+	.welcome__header {
+		margin-top: 5rem;
+		margin-bottom: 2rem;
+		max-width: 620px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.welcome__header gitlens-logo {
+		transform: translateX(-0.75rem);
+	}
+	.welcome__header h1 {
+		margin-bottom: 0;
+	}
+
+	.welcome__accent {
+		color: #cb64ff;
+	}
+`;

src/webviews/apps/welcome/welcome.ts

@@ -9,10 +9,11 @@ import type { LoggerContext } from '../shared/contexts/logger';
 import type { HostIpc } from '../shared/ipc';
 import { WelcomeStateProvider } from './stateProvider';
 import '../shared/components/gitlens-logo';
+import { welcomeStyles } from './welcome.css';
 
 @customElement('gl-welcome-app')
 export class GlWelcomeApp extends GlAppHost<State> {
-	static override styles = [scrollableBase];
+	static override styles = [scrollableBase, welcomeStyles];
 
 	protected override createStateProvider(
 		bootstrap: string,
@@ -25,18 +26,17 @@ export class GlWelcomeApp extends GlAppHost<State> {
 	override render(): unknown {
 		return html`
 			<div class="welcome scrollable">
-				<div>
-					<h1><gitlens-logo></gitlens-logo></h1>
-					<p>Supercharge Git in Cursor with GitLens</p>
-				</div>
-
-				<div>
-					<h2>🚀 Getting Started</h2>
+				<div class="welcome__section welcome__header">
+					<gitlens-logo></gitlens-logo>
+					<h1>GitLens is now installed in Cursor</h1>
 					<p>
-						GitLens is now installed and ready to help you visualize code authorship, navigate Git history,
-						and collaborate more effectively.
+						Understand every line of code — instantly. GitLens reveals authorship, activity, and history
+						inside the editor
 					</p>
 				</div>
+				<div class="welcome__section">
+					<p>With <span class="welcome__accent">PRO</span> subscription you get more</p>
+				</div>
 
 				<div>
 					<h2>✨ Key Features</h2>