Improve compact feature recommendation panel in onboarding

onboarding/src/Components/FeaturesList.js

@@ -12,37 +12,31 @@ const featuredPluginCollection = [
         id: 'pageBuilder',
         pluginSlug: 'otter-blocks',
         label: __('Site Builder', 'templates-patterns-collection'),
-        description: __('Build beautiful pages with a simple drag-and-drop page builder.', 'templates-patterns-collection')
-    },
-    { 
-        id: 'contactForm',
-        pluginSlug: 'otter-blocks',
-        label: __('Contact Form', 'templates-patterns-collection'),
-        description: __('Create forms to capture leads and feedback.', 'templates-patterns-collection')
+        description: __('Build pages and forms with Otter.', 'templates-patterns-collection')
     },
     {
         id: 'imageOpt',
         pluginSlug: 'optimole-wp',
         label: __('Image Optimization', 'templates-patterns-collection'),
-        description: __('Make your site faster with automatic image optimization.', 'templates-patterns-collection')
+        description: __('Auto-compress images for faster pages.', 'templates-patterns-collection')
     },
     {
         id: 'caching',
         pluginSlug: 'wp-cloudflare-page-cache',
         label: __('Caching', 'templates-patterns-collection'),
-        description: __('Supercharge your site’s speed with powerful caching.', 'templates-patterns-collection')
+        description: __('Speed up your site with smart caching.', 'templates-patterns-collection')
     },
     { 
         id: 'eCommerce',
         pluginSlug: 'wp-full-stripe-free',
         label: __('eCommerce', 'templates-patterns-collection'),
-        description: __('Set up your store and start accepting payments via Stripe.', 'templates-patterns-collection'),
+        description: __('Sell online and accept Stripe payments.', 'templates-patterns-collection'),
     },
     {
         id: 'chatbot',
         pluginSlug: 'hyve-lite',
         label: __('AI ChatBot', 'templates-patterns-collection'),
-        description: __('Keep visitors engaged with an intelligent AI chatbot.', 'templates-patterns-collection'),
+        description: __('Engage visitors with an AI chatbot.', 'templates-patterns-collection'),
     }
 ];
 
@@ -54,7 +48,7 @@ const pluginCollection = [
         id: 'visualizer',
         pluginSlug: 'visualizer',
         label: __('Tables and Chart', 'templates-patterns-collection'),
-        description: __('A powerful and easy to use plugin for responsive charts & tables.', 'templates-patterns-collection')
+        description: __('Responsive charts and tables.', 'templates-patterns-collection')
     },
     {
         id: 'woocommerce',
@@ -102,13 +96,13 @@ const pluginCollection = [
         id: 'pods',
         pluginSlug: 'pods',
         label: __('Pods', 'templates-patterns-collection'),
-        description: __('A framework for creating, managing, and deploying customized content types and fields for any project.', 'templates-patterns-collection')
+        description: __('Custom content types and fields made easy.', 'templates-patterns-collection')
     },
     {
         id: 'restrict-content',
         pluginSlug: 'restrict-content',
         label: __('Membership Plugin', 'templates-patterns-collection'),
-        description: __('Membership plugin that allows you to monetize content access.', 'templates-patterns-collection')
+        description: __('Monetize members-only content.', 'templates-patterns-collection')
     },
     {
         id: 'learning-management-system',
@@ -123,7 +117,6 @@ const FeaturesList = ({ requiredPlugins, onToggle }) => {
 
     const [selectedFeatures, setSelectedFeatures] = useState({
         pageBuilder: false,
-        contactForm: false,
         eCommerce: false,
         donations: false,
         automation: false,

onboarding/src/Components/SiteSettings.js

@@ -146,7 +146,8 @@ export const SiteSettings = ( {
 		<div
 			className={ classnames(
 				'ob-site-settings',
-				fetching ? 'fetching' : ''
+				fetching ? 'fetching' : '',
+				step === 4 && canImport ? 'is-step-4-features' : ''
 			) }
 		>
 			{ ! fetching ? (

onboarding/src/scss/_features_list.scss

@@ -1,47 +1,76 @@
 .ob-select-features {
     display: flex;
     flex-direction: column;
+    width: 100%;
 
     .ob-features-grid {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+        gap: 10px;
         width: 100%;
+        min-width: 0;
     }
 
     .ob-feature-card {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-        padding: 1rem;
+        width: 100%;
+        min-width: 0;
+        box-sizing: border-box;
+        padding: 12px 14px;
         background-color: #ffffff;
-        border: 1px solid #e0e0e0;
-        border-radius: 6px;
+        border: 1px solid #e3e8ef;
+        border-radius: 10px;
         cursor: pointer;
         transition: box-shadow 0.3s ease, border 0.3s ease;
+        text-align: left;
 
         &:hover:not(.ob-disabled) {
-            border-color: #007cba;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-color: #9ec3ef;
+            box-shadow: 0 2px 8px rgba(3, 102, 213, 0.08);
         }
 
         &:focus {
             outline: none;
-            border-color: #007cba;
-            box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.2);
+            border-color: #0366d5;
+            box-shadow: 0 0 0 3px rgba(3, 102, 213, 0.18);
         }
 
         &.selected {
-            border-color: #007cba;
-            background-color: #e8f4fa;
+            border-color: #8bb6f3;
+            background-color: #eaf3ff;
+
+            .ob-feature-title {
+                color: #0f4fbf;
+            }
+
+            .ob-feature-description {
+                color: #5d6f87;
+            }
         }
 
         &.ob-disabled {
             cursor: not-allowed;
-            opacity: 0.6;
+            opacity: 1;
+            border-color: #dce3ee;
+            background-color: #f7f9fc;
+
+            .ob-feature-title {
+                color: #7b8697;
+            }
+
+            .ob-feature-description {
+                color: #95a0b1;
+            }
+
+            input[type='checkbox'] {
+                cursor: not-allowed;
+                opacity: 0.7;
+            }
 
             &:hover {
-                border-color: #e0e0e0;
+                border-color: #dce3ee;
                 box-shadow: none;
             }
         }
@@ -50,28 +79,42 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
+            gap: 10px;
             width: 100%;
 
             .ob-feature-title {
-                font-size: 1rem;
-                font-weight: bold;
-                color: #333333;
+                font-size: 16px;
+                line-height: 1.2;
+                font-weight: 700;
+                color: #1f2937;
                 margin: 0;
                 text-align: left;
+                min-width: 0;
             }
 
             input[type='checkbox'] {
                 cursor: pointer;
-                accent-color: #007cba;
-                transform: scale(1.2);
+                accent-color: #2b62de;
+                margin: 0;
+                width: 18px;
+                height: 18px;
+                flex-shrink: 0;
             }
         }
 
         .ob-feature-description {
-            font-size: 0.875rem;
+            font-size: 14px;
+            line-height: 1.35;
             color: #666666;
-            margin-top: 0.5rem;
+            margin-top: 4px;
             text-align: left;
+            overflow-wrap: anywhere;
+
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            overflow: hidden;
         }
     }
 }

onboarding/src/scss/_site-settings.scss

@@ -96,4 +96,32 @@
   padding: 20px;
   background: #fff;
   box-shadow: 4px 4px 40px 0 rgba(0, 0, 0, 0.10);
-}
+}
+
+.ob-site-settings.is-step-4-features {
+  .ob-settings-description {
+    padding-top: 16px;
+    gap: 8px;
+    margin-bottom: 20px;
+
+    p {
+      margin: 0;
+      font-size: 15px;
+      line-height: 1.45;
+    }
+  }
+
+  .ob-settings-top {
+    gap: 16px;
+  }
+
+  .ob-settings-bottom {
+    padding: 14px 20px 16px;
+  }
+
+  .ob-feature-card {
+    .ob-feature-description {
+      white-space: normal;
+    }
+  }
+}