split onboarding flow

dashboard/src/main/home/cluster-dashboard/DashboardHeader.tsx

@@ -68,9 +68,9 @@ const TopRow = styled.div`
 `;
 
 const Description = styled.div`
-  color: #8b949f;
+  color: #aaaabb;
   margin-top: 13px;
-  margin-left: 2px;
+  margin-left: 1px;
   font-size: 13px;
 `;
 
@@ -79,10 +79,10 @@ const InfoLabel = styled.div`
   height: 20px;
   display: flex;
   align-items: center;
-  color: #8b949f;
+  color: #aaaabb;
   font-size: 13px;
   > i {
-    color: #8b949f;
+    color: #aaaabb;
     font-size: 18px;
     margin-right: 5px;
   }

dashboard/src/main/home/onboarding/Onboarding.tsx

@@ -1,4 +1,5 @@
 import Loading from "components/Loading";
+import ProvisionerFlow from "components/ProvisionerFlow";
 import React, { useContext, useEffect, useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -9,6 +10,10 @@ import { OFState } from "./state";
 import { useSteps } from "./state/StepHandler";
 import { Onboarding as OnboardingSaveType } from "./types";
 
+import lightning from "assets/lightning.png";
+
+import DashboardHeader from "../cluster-dashboard/DashboardHeader";
+
 const Onboarding = () => {
   const context = useContext(Context);
   const [isLoading, setIsLoading] = useState(true);
@@ -147,13 +152,47 @@ const Onboarding = () => {
     checkIfUserHasClusters();
   }, [context?.currentProject?.id]);
 
+  const renderOnboarding = () => {
+    if (context?.currentProject?.capi_provisioner_enabled) {
+      return (
+        <Wrapper>
+          <DashboardHeader
+            image={lightning}
+            title="Getting started"
+            description="Create a new cluster in your own cloud provider to get started with Porter."
+            disableLineBreak
+            capitalize={false}
+          />
+          <Br />
+          <ProvisionerFlow />
+        </Wrapper>
+      )
+    } else {
+      return (
+        <StyledOnboarding>
+          {isLoading ? <Loading /> : <Routes />}
+        </StyledOnboarding>
+      )
+    }
+  };
+
   return (
-    <StyledOnboarding>{isLoading ? <Loading /> : <Routes />}</StyledOnboarding>
+    <>{renderOnboarding()}</>
   );
 };
 
 export default Onboarding;
 
+const Br = styled.div`
+  width: 100%;
+  height: 1px;
+  margin-top: -1px;
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
 const ViewWrapper = styled.div`
   width: 100%;
   overflow-y: auto;

dashboard/src/shared/types.tsx

@@ -261,6 +261,7 @@ export interface ProjectType {
   preview_envs_enabled: boolean;
   enable_rds_databases: boolean;
   managed_infra_enabled: boolean;
+  capi_provisioner_enabled: boolean;
   api_tokens_enabled: boolean;
   stacks_enabled: boolean;
   roles: {