add image

src/vs/workbench/contrib/void/browser/media/void.css

@@ -3,7 +3,7 @@
  *  Licensed under the Apache License, Version 2.0. See LICENSE.txt for more information.
  *--------------------------------------------------------------------------------------*/
 
- .monaco-editor .void-sweepIdxBG {
+.monaco-editor .void-sweepIdxBG {
 	background-color: var(--vscode-void-sweepIdxBG);
 }
 
@@ -24,47 +24,65 @@
 }
 
 .void-watermark-button {
-    margin: 8px 0;
+	margin: 8px 0;
-    padding: 8px 20px;
+	padding: 8px 20px;
-    background-color: #3b82f6;
+	background-color: #3b82f6;
-    color: white;
+	color: white;
-    border: none;
+	border: none;
-    border-radius: 4px;
+	border-radius: 4px;
-    outline: none !important;
+	outline: none !important;
 	box-shadow: none !important;
-    cursor: pointer;
+	cursor: pointer;
-    transition: background-color 0.2s ease;
+	transition: background-color 0.2s ease;
 }
+
 .void-watermark-button:hover {
-    background-color: #2563eb;
+	background-color: #2563eb;
 }
+
 .void-watermark-button:active {
-    background-color: #2563eb;
+	background-color: #2563eb;
 }
 
 
 
 
 .void-settings-watermark-button {
-    margin: 8px 0;
+	margin: 8px 0;
-    padding: 8px 20px;
+	padding: 8px 20px;
-    background-color: var(--vscode-input-background);
+	background-color: var(--vscode-input-background);
 	color: var(--vscode-input-foreground);
-    border: none;
+	border: none;
-    border-radius: 4px;
+	border-radius: 4px;
-    outline: none !important;
+	outline: none !important;
 	box-shadow: none !important;
-    cursor: pointer;
+	cursor: pointer;
-    transition: all 0.2s ease;
+	transition: all 0.2s ease;
 }
+
 .void-settings-watermark-button:hover {
 	filter: brightness(1.1);
 }
+
 .void-settings-watermark-button:active {
 	filter: brightness(1.1);
 }
 
-
+.void-slice-of-void-image {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	object-position: center;
+	max-width: 100%;
+	max-height: 100%;
+	/* Has no shadow */
+	background-image: url('../../../../../../../scripts/appimage/void.png');
+	/* Has shadow */
+	/* background-image: url('../../../../browser/parts/editor/media/slice_of_void.png'); */
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+}
 
 
 .void-link {
@@ -72,6 +90,7 @@
 	cursor: pointer;
 	transition: all 0.2s ease;
 }
+
 .void-link:hover {
 	opacity: 80%;
 }
@@ -86,7 +105,8 @@
 .void-scope,
 .void-scope * {
 	scrollbar-width: thin !important;
-	scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important; /* For Firefox */
+	scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important;
+	/* For Firefox */
 }
 
 .void-scope::-webkit-scrollbar,
@@ -133,13 +153,16 @@
 	background-color: var(--vscode-editor-background);
 	--scrollbar-vertical-width: 14px;
 	--scrollbar-horizontal-height: 6px;
-	overflow: auto; /* Ensure scrollbars are shown when needed */
+	overflow: auto;
+	/* Ensure scrollbars are shown when needed */
 }
 
 .void-scrollable-element,
 .void-scrollable-element * {
-	scrollbar-width: thin !important; /* For Firefox */
+	scrollbar-width: thin !important;
-	scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important; /* For Firefox */
+	/* For Firefox */
+	scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important;
+	/* For Firefox */
 }
 
 .void-scrollable-element::-webkit-scrollbar,

src/vs/workbench/contrib/void/browser/react/src/void-onboarding/VoidOnboarding.tsx

@@ -109,7 +109,7 @@ const NextButton = ({ onClick, ...props }: { onClick: () => void } & React.Butto
 			className="px-6 py-2 bg-zinc-100 enabled:hover:bg-zinc-100 disabled:bg-zinc-100/40 disabled:cursor-not-allowed rounded text-black duration-600 transition-all"
 			{...props.disabled && {
 				'data-tooltip-id': 'void-tooltip',
-				'data-tooltip-content': 'Disabled (Please enter all required fields or choose another provider)',
+				'data-tooltip-content': 'Please enter all required fields or choose another provider',
 				'data-tooltip-place': 'top',
 			}}
 			{...props}
@@ -389,10 +389,9 @@ const PrimaryActionButton = ({ children, className, ...props }: { children: Reac
 				hover:ring-2 hover:ring-black/90 dark:hover:ring-white/90
 				active:ring-2 active:ring-black/90 dark:active:ring-white/90
 
-				transition-all duration-300
+				transition-all duration-300 ease-in-out
 
 				rounded-lg
-				shadow-md hover:shadow-lg
 				group
 			"
 			{...props}
@@ -400,7 +399,7 @@ const PrimaryActionButton = ({ children, className, ...props }: { children: Reac
 			{children}
 			<ChevronRight
 				className="
-					transition-all duration-300
+					transition-all duration-300 ease-in-out
 
 					transform
 					group-hover:translate-x-1
@@ -526,18 +525,26 @@ const VoidOnboardingContent = () => {
 	const contentOfIdx: { [pageIndex: number]: React.ReactNode } = {
 		0: <OnboardingPageShell
 			content={
-				<>
+				<div className='flex flex-col items-center gap-8'>
 					<div className="text-5xl font-light text-center">Welcome to Void</div>
+
+					{/* Slice of Void image */}
+					<div className='max-w-md w-full h-64 mx-auto'>
+						<div className="slice-of-void-image" />
+					</div>
+
+
 					<FadeIn
-						delayMs={1500}
+						delayMs={2000}
-						className='flex justify-center'
 					>
 						<PrimaryActionButton
 							onClick={() => { setPageIndex(pageIndex + 1) }}
-						>Get Started</PrimaryActionButton>
+						>
+							Get Started
+						</PrimaryActionButton>
 					</FadeIn>
 
-				</>
+				</div>
 			}
 		/>,
 		1: <OnboardingPageShell
@@ -794,7 +801,7 @@ const VoidOnboardingContent = () => {
 	}
 
 
-	return <div key={pageIndex} className="w-full h-full text-left mx-auto overflow-y-auto flex flex-col items-center justify-around">
+	return <div key={pageIndex} className="w-full h-full text-left mx-auto overflow-y-scroll flex flex-col items-center justify-around">
 		{contentOfIdx[pageIndex]}
 	</div>