add useful plugins

Author: kaeizen

plugin.php

@@ -289,9 +289,6 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );
 
-// For cross-marketing
-require_once( plugin_dir_path( __FILE__ ) . 'src/lazy-components/cimo/index.php' );
-
 if ( ! is_admin() ) {
 	require_once( plugin_dir_path( __FILE__ ) . 'src/lightbox/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/accordion/index.php' );
@@ -318,6 +315,7 @@ function is_frontend() {
  */
 require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/getting-started.php' );
 if ( is_admin() ) {
+	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/useful-plugins.php' ); // For cross-marketing
 	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/news.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/freemius.php' );

src/lazy-components/cimo/index.php

@@ -42,6 +42,7 @@ import { GettingStarted } from './getting-started'
 import { BLOCK_STATE } from '~stackable/util/blocks'
 import { BlockToggler, OptimizationSettings } from '~stackable/deprecated/v2/welcome/admin'
 import blockData from '~stackable/deprecated/v2/welcome/blocks'
+import { UsefulPlugins } from './useful-plugins'
 
 const [ FREE_BLOCKS, BLOCK_DEPENDENCIES ] = importBlocks( require.context( '../block', true, /block\.json$/ ) )
 
@@ -1658,4 +1659,12 @@ domReady( () => {
 			<Settings />
 		)
 	}
+
+	if ( document.getElementById( 's-useful-plugins' ) ) {
+		createRoot(
+			document.getElementById( 's-useful-plugins' )
+		).render(
+			<UsefulPlugins />
+		)
+	}
 } )

src/welcome/admin.js

@@ -8,6 +8,15 @@
 	--stk-welcome-light-border: #d0d5dd;
 }
 
+@mixin s-shadow {
+	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+	transition: all 0.3s ease-in-out;
+	&:hover {
+		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+	}
+}
+
+
 // Make scroll smooth with inline navigation.
 html {
 	scroll-behavior: smooth;
@@ -17,6 +26,9 @@ html {
 
 body[class*="page_stackable"],
 body[class*="page_stk-"] {
+	--wp-components-color-accent: var(--stk-welcome-primary);
+	--wp-components-color-accent-darker-20: var(--stk-welcome-secondary);
+	--wp-components-color-accent-inverted: var(--stk-welcome-secondary);
 	#wpcontent {
 		padding-left: 0;
 	}
@@ -154,6 +166,54 @@ body[class*="page_stk-"] {
 	align-items: center;
 }
 
+
+.s-card {
+	padding: 1.5em;
+	display: flex;
+	flex-direction: column;
+	border-radius: 16px;
+	@include s-shadow;
+	background: #fff;
+	overflow: hidden;
+
+	.s-card-title,
+	h3 {
+		margin: 0 0 0.5em;
+	}
+	.s-card-subtitle,
+	p {
+		margin: 0;
+	}
+	> *:last-child {
+		margin-bottom: 0;
+	}
+
+	.s-video-wrapper {
+		align-items: center;
+	}
+
+	.s-icon-wrapper {
+		border: 1px solid #eaecf0;
+		border-radius: 8px;
+		padding: 10px;
+		display: flex;
+		align-items: center;
+		max-width: fit-content;
+		margin-bottom: 20px;
+	}
+
+	.s-bottom-icon-wrapper {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	svg {
+		height: 24px;
+		width: 24px;
+	}
+
+}
+
 .s-admin-notice-marker {
 	display: none !important;
 }
@@ -369,10 +429,8 @@ body.toplevel_page_stackable {
 		padding-bottom: 0;
 	}
 }
-body.stackable_page_stackable-settings,
 body.toplevel_page_stackable,
-body.stackable_page_stk-custom-fields,
-body.stackable_page_stackable-go-premium {
+body[class*="page_stackable"] {
 	img {
 		max-width: 100%;
 	}
@@ -939,3 +997,4 @@ body.stackable_page_stackable-go-premium {
 @import "news";
 @import "getting-started";
 @import "freemius";
+@import "useful-plugins";