[INS-1598] Update onboarding view for v12 (#9305)

* feat: update onboarding version and add new features with corresponding images

* chore: remove outdated onboarding images

* fix: update icon types for features and adjust layout in onboarding

Author: gatzjames

packages/insomnia/src/entry.client.tsx

@@ -43,7 +43,7 @@ try {
   // we need to inject state into localStorage
   const skipOnboarding = getSkipOnboarding();
   if (skipOnboarding) {
-    window.localStorage.setItem('hasSeenOnboardingV11', skipOnboarding.toString());
+    window.localStorage.setItem('hasSeenOnboardingV12', skipOnboarding.toString());
     window.localStorage.setItem('hasUserLoggedInBefore', skipOnboarding.toString());
   }
 } catch (e) {

packages/insomnia/src/routes/onboarding.$.tsx

@@ -1,45 +1,53 @@
-import type { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link, Route, Routes, useLocation } from 'react-router';
 
 import { InsomniaLogo } from '~/ui/components/insomnia-icon';
 import { TrailLinesContainer } from '~/ui/components/trail-lines-container';
-import git_projects from '~/ui/images/onboarding/git_projects.png';
-import multiple_tabs from '~/ui/images/onboarding/multiple_tabs.png';
-import secret_vaults from '~/ui/images/onboarding/secret_vaults.png';
+import generate_mocks from '~/ui/images/onboarding/generate_mocks.png';
+import git_for_all from '~/ui/images/onboarding/git_for_all.png';
+import mcp_client from '~/ui/images/onboarding/mcp_client.png';
+import smart_commits from '~/ui/images/onboarding/smart_commits.png';
 
 const features = [
   {
-    id: 'multiple_tabs',
-    icon: 'window-restore',
-    title: 'Multiple Tabs',
+    id: 'mcp_client',
+    icon: ['fac', 'mcp'] as unknown as IconProp,
+    title: 'MCP Client',
     description:
-      'Finally you can work on multiple collections and design documents with the multiple tabs capability that allows you to easily switch between one and another.',
-    image: multiple_tabs,
+      'Test and debug MCP servers with the same workflow you use for APIs including support for oAuth and Dynamic Client Registration.',
+    image: mcp_client,
   },
   {
-    id: 'git_sync',
-    icon: 'git',
-    title: 'New Git Sync',
+    id: 'auto_generated_mock_servers',
+    icon: 'server',
+    title: 'Auto-generated mock servers',
     description:
-      'An entirely rebuilt Git Sync experience, where your entire project can be connected to a Git repository and we will import multiple Insomnia resources at once.',
-    image: git_projects,
+      'Automatically generate a mock server with executable routes from an OpenAPI spec, URL, or chat-based prompt.',
+    image: generate_mocks,
   },
   {
-    id: 'secret_vaults',
-    icon: 'cloud',
-    title: 'Secret Vaults',
+    id: 'smart_commits',
+    icon: ['fas', 'code-commit'],
+    title: 'Smart Commits',
     description:
-      'With this enterprise capability we now support connecting your secrets with AWS secret Manager, Azure Key Vault, GCP Secret Manager and Hashicorp Vault.',
-    image: secret_vaults,
-    rounded: true,
+      'Spend more time coding and less time cleaning up commits. Automatically create commits and comments from your staged changes using AI.',
+    image: smart_commits,
+  },
+  {
+    id: 'git_sync_essentials',
+    icon: ['fab', 'git-alt'],
+    title: 'Git Sync for all plans',
+    description:
+      'Now Essentials (free)  plan users can get the full benefits of Git Sync projects for up to 3 plan users.',
+    image: git_for_all,
   },
 ] satisfies {
   id: string;
-  icon: IconName;
+  icon: IconProp;
   title: string;
   description: string;
   image: string;
-  rounded?: boolean;
 }[];
 
 const FeatureWizardView = () => {
@@ -48,14 +56,14 @@ const FeatureWizardView = () => {
       <Route
         path="/"
         element={
-          <ul className="grid grid-cols-1 justify-center gap-2 p-4">
+          <ul className="grid grid-cols-2 justify-center gap-2 p-4">
             {features.map(feature => (
               <li key={feature.id}>
                 <Link
-                  className="flex w-full select-none items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--hl-xs] px-8 py-4 transition-colors hover:bg-[--hl-sm] hover:no-underline"
+                  className="flex h-32 w-full select-none flex-col items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--hl-xs] p-4 transition-colors hover:bg-[--hl-sm] hover:no-underline"
                   to={`/onboarding/${feature.id}`}
                 >
-                  <i className={`fa fa-${feature.icon} text-xl`} />
+                  <FontAwesomeIcon icon={feature.icon} className="text-xl" />
                   <span className="text-center text-sm">{feature.title}</span>
                 </Link>
               </li>
@@ -73,26 +81,22 @@ const FeatureWizardView = () => {
               key={feature.id}
               path={feature.id}
               element={
-                <div className="relative flex h-80 flex-col gap-4 bg-[--color-bg] p-4 text-left">
+                <div className="relative flex h-96 flex-col gap-4 bg-[--color-bg] p-4 text-left">
                   <h1 className="flex justify-between text-lg">
                     <span>{feature.title}</span>
                     <span>
                       {index + 1}
                       <span className="text-[--hl-xl]">/{features.length}</span>
                     </span>
                   </h1>
-                  <div className="flex max-h-72 flex-col items-center gap-3 overflow-y-auto">
+                  <div className="flex flex-1 flex-col items-center gap-3 overflow-y-auto">
                     <p className="text-sm text-[--color-font]">
                       <span>{feature.description}</span>
                     </p>
-                    <div className="h-32">
-                      {feature.rounded ? (
-                        <img className="aspect-auto max-h-32 rounded-md" src={feature.image} />
-                      ) : (
-                        <img className="aspect-auto max-h-32" src={feature.image} />
-                      )}
+                    <div className="h-48 flex-1">
+                      <img className="aspect-auto max-h-48" src={feature.image} />
                     </div>
-                    <div className="sticky bottom-0 left-0 flex w-full justify-between bg-gradient-to-t from-[--color-bg] to-[rgba(var(--color-bg-rgb),80%)] p-4 text-sm font-normal">
+                    <div className="flex w-full shrink-0 justify-between bg-gradient-to-t from-[--color-bg] to-[rgba(var(--color-bg-rgb),80%)] p-4 text-sm font-normal">
                       {prevPath ? (
                         <Link className="hover:no-underline" to={prevPath}>
                           <i className="fa fa-arrow-left" /> Previous feature
@@ -128,18 +132,20 @@ const Component = () => {
   return (
     <div className="relative flex h-full w-full bg-[--color-bg] text-left">
       <TrailLinesContainer>
-        <div className="flex h-full min-h-[465px] w-[600px] flex-col items-center justify-center">
-          <div className="relative flex h-[465px] w-full flex-col items-center justify-center gap-[var(--padding-sm)] rounded-[var(--radius-md)] border border-solid border-[--hl-sm] bg-[--hl-xs] p-[--padding-lg] pt-12">
+        <div className="flex h-full min-h-[500px] w-[600px] flex-col items-center justify-center">
+          <div className="relative flex h-[500px] w-full flex-col items-center justify-center gap-[var(--padding-sm)] rounded-[var(--radius-md)] border border-solid border-[--hl-sm] bg-[--hl-xs] p-[--padding-lg] pt-12">
             <InsomniaLogo className="absolute left-1/2 top-0 h-16 w-16 translate-x-[-50%] translate-y-[-50%] transform" />
             <div className="flex h-full flex-col gap-6 text-[--color-font]">
-              <h1 className="text-center text-xl">🚀 Welcome to Insomnia 11!</h1>
+              <h1 className="text-center text-xl">🚀 Welcome to Insomnia 12!</h1>
               <div>
-                <p>We shipped hundreds of improvements including the following notable features:</p>
+                <p>
+                  This new version of Insomnia is the biggest one ever! Notable new features that we have shipped are:
+                </p>
               </div>
               <div className="relative w-full flex-1">
                 <FeatureWizardView />
               </div>
-              <div className="flex items-center justify-between">
+              <div className="flex shrink-0 items-center justify-between">
                 {location.pathname !== '/onboarding' ? (
                   <Link className="flex items-center gap-2 px-4 text-sm hover:no-underline" to="/onboarding">
                     <i className="fa fa-border-all" />
@@ -151,7 +157,7 @@ const Component = () => {
                 <Link
                   className="rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-sm text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
                   to={window.localStorage.getItem('prefers-project-type') ? '/organization' : '/onboarding/migrate'}
-                  onClick={() => window.localStorage.setItem('hasSeenOnboardingV11', 'true')}
+                  onClick={() => window.localStorage.setItem('hasSeenOnboardingV12', 'true')}
                 >
                   Continue
                 </Link>