fix: add logo option to onboarding

Author: HardeepAsrani

assets/css/src/welcome-notice.scss

@@ -5,6 +5,11 @@
 	position: relative;
 	padding-bottom: 0;
 	border-left: 1px solid #c3c4c7;
+	padding-left: 0;
+
+	@media (--tablet) {
+		padding-left: 10px;
+	}
 
 	.notice-content {
 		display: flex;
@@ -33,22 +38,25 @@
 	.notice-title {
 		line-height: 1.5;
 		max-width: 700px;
+		font-weight: 600;
+	}
 
-		span {
-			font-weight: 600;
-			color: #e57451;
-		}
+	.notice-subtitle {
+		color: #3b5de6;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px;
 	}
 
 	.actions {
 		display: flex;
-		margin-top: 40px;
+		margin-top: 20px;
 		gap: 20px;
 		align-items: center;
 
 
 		@media (--desktop) {
-			margin-top: 20px;
 			gap: 10px;
 			justify-content: center;
 		}
@@ -85,7 +93,6 @@
 		display: block;
 		max-height: 300px;
 		max-width: 60%;
-		padding: 30px 0;
 
 		@media (--desktop) {
 			max-width: 80%;

assets/img/logo.svg

@@ -89,17 +89,23 @@ public function render_welcome_notice() {
 		$notice_html .= '<button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button>';
 		$notice_html .= '<div class="notice-content">';
 
-		$notice_html .= '<img class="otter-preview" src="' . esc_url( Assets_Manager::get_image_url( 'welcome-notice.png' ) ) . '" alt="' . __( 'Otter Blocks preview', 'raft' ) . '"/>';
+		$notice_html .= '<img class="otter-preview" src="' . esc_url( Assets_Manager::get_image_url( 'welcome-notice.png?1' ) ) . '" alt="' . __( 'Otter Blocks preview', 'raft' ) . '"/>';
 
 		$notice_html .= '<div class="notice-copy">';
 
+		$notice_html .= '<h1 class="notice-subtitle">';
+		/* translators: %s: Otter Blocks */
+		$notice_html .= __( 'Thanks for installing Raft theme 🎉', 'raft' );
+
+		$notice_html .= '</h1>';
+
 		$notice_html .= '<h1 class="notice-title">';
 		/* translators: %s: Otter Blocks */
-		$notice_html .= sprintf( __( 'Power-up your website building experience with %s: Seamless theme setup, advanced blocks and extra functionality for your site.', 'raft' ), '<strong>Otter Blocks</strong>' );
+		$notice_html .= sprintf( __( 'Please install our builder', 'raft' ), '<strong>Otter Blocks</strong>' );
 
 		$notice_html .= '</h1>';
 
-		$notice_html .= '<p class="description">' . __( 'Otter is a Gutenberg Blocks page builder plugin that adds new blocks and functionality to your theme, while optimising your page building experience. Now with Otter\'s new theme onboarding wizard, you can experience a streamlined and intuitive setup of your Raft theme in minutes.', 'raft' ) . '</p>';
+		$notice_html .= '<p class="description">' . __( 'Install Otter and start building stunning, super-fast websites. Discover new blocks, enhanced functionality and seamless theme setup.', 'raft' ) . '</p>';
 
 		$notice_html .= '<div class="actions">';
 
@@ -113,10 +119,10 @@ public function render_welcome_notice() {
 			$notice_html .= __( 'Try it out!', 'raft' );
 		} elseif ( 'installed' === $otter_status ) {
 			/* translators: %s: Otter Blocks */
-			$notice_html .= sprintf( __( 'Activate %s', 'raft' ), 'Otter Blocks' );
+			$notice_html .= sprintf( __( 'Activate %s', 'raft' ), 'Otter' );
 		} else {
 			/* translators: %s: Otter Blocks */
-			$notice_html .= sprintf( __( 'Install & Activate %s', 'raft' ), 'Otter Blocks' );
+			$notice_html .= sprintf( __( 'Install & Activate %s', 'raft' ), 'Otter' );
 		}
 
 		$notice_html .= '</span>';

assets/img/welcome-notice.png

@@ -90,6 +90,7 @@ public function setup() {
 		add_theme_support(
 			'otter-onboarding',
 			array(
+				'logo'           => RAFT_URL . 'assets/img/logo.svg',
 				'templates'      => array(
 					'archive'    => array(
 						'archive-boxed' => array(