add scaffolding for wizard

www/src/components/create-cluster/CreateCluster.tsx

@@ -1,3 +1,78 @@
+import {
+  Button,
+  Flex,
+  ReturnIcon,
+  SendMessageIcon,
+  Stepper,
+} from '@pluralsh/design-system'
+import { useNavigate } from 'react-router-dom'
+import { useTheme } from 'styled-components'
+
+import { useState } from 'react'
+
+import {
+  CreateClusterStepKey,
+  cloudSteps,
+  localSteps,
+} from './CreateClusterWizard'
+
 export function CreateCluster() {
-  return <div>Create Cluster</div>
+  const theme = useTheme()
+  const navigate = useNavigate()
+  const [curStep, setCurStep] = useState<CreateClusterStepKey>(
+    CreateClusterStepKey.HostingOptions
+  )
+  const [hostingOption, setHostingOption] = useState<'local' | 'cloud'>('local')
+  const steps = hostingOption === 'local' ? localSteps : cloudSteps
+  const curStepIndex = steps.findIndex((step) => step.key === curStep)
+
+  return (
+    <Flex
+      gap="xlarge"
+      padding={theme.spacing.large}
+    >
+      <Flex
+        width={256}
+        flexDirection="column"
+        gap="large"
+      >
+        <Button
+          css={{ width: '100%' }}
+          secondary
+          startIcon={<ReturnIcon />}
+          onClick={() => navigate('/overview')}
+        >
+          Back home
+        </Button>
+        <Stepper
+          vertical
+          steps={steps}
+          stepIndex={curStepIndex}
+        />
+      </Flex>
+      <Flex
+        width={600}
+        flexDirection="column"
+        gap="large"
+      >
+        <Flex
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <span css={theme.partials.text.title2}>Create Cluster</span>
+          <Button
+            secondary
+            startIcon={<SendMessageIcon />}
+            as="a"
+            href="mailto:sales@plural.sh"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Contact sales
+          </Button>
+        </Flex>
+        {steps[curStepIndex]?.component}
+      </Flex>
+    </Flex>
+  )
 }

www/src/components/create-cluster/CreateClusterWizard.tsx

@@ -0,0 +1,63 @@
+import { CliIcon, CloudIcon, StepperSteps } from '@pluralsh/design-system'
+
+import { HostingOptionsStep } from './steps/HostingOptionsStep'
+
+export enum CreateClusterStepKey {
+  HostingOptions = 'hosting-options',
+  ConfigureCloudInstance = 'configure-cloud-instance',
+  InstallCli = 'install-cli',
+  Authentication = 'authentication',
+  DeployLocally = 'deploy-locally',
+}
+
+export type CreateClusterStep = StepperSteps[number] & {
+  component: React.ReactNode
+}
+
+export const localSteps: CreateClusterStep[] = [
+  {
+    key: CreateClusterStepKey.HostingOptions,
+    stepTitle: 'Hosting options',
+    IconComponent: CloudIcon,
+    component: <HostingOptionsStep />,
+  },
+  {
+    key: CreateClusterStepKey.InstallCli,
+    stepTitle: 'Install Plural CLI',
+    IconComponent: CliIcon,
+    component: <div>TODO</div>,
+  },
+  {
+    key: CreateClusterStepKey.DeployLocally,
+    stepTitle: 'Deploy locally',
+    IconComponent: CloudIcon,
+    component: <div>TODO</div>,
+  },
+]
+
+export const cloudSteps: CreateClusterStep[] = [
+  {
+    key: CreateClusterStepKey.HostingOptions,
+    stepTitle: 'Hosting options',
+    IconComponent: CloudIcon,
+    component: <HostingOptionsStep />,
+  },
+  {
+    key: CreateClusterStepKey.ConfigureCloudInstance,
+    stepTitle: 'Configure cloud instance',
+    IconComponent: CloudIcon,
+    component: <HostingOptionsStep />,
+  },
+  {
+    key: CreateClusterStepKey.InstallCli,
+    stepTitle: 'Install Plural CLI',
+    IconComponent: CloudIcon,
+    component: <HostingOptionsStep />,
+  },
+  {
+    key: CreateClusterStepKey.Authentication,
+    stepTitle: 'Authentication',
+    IconComponent: CloudIcon,
+    component: <HostingOptionsStep />,
+  },
+]

www/src/components/create-cluster/steps/HostingOptionsStep.tsx

@@ -0,0 +1,9 @@
+import OnboardingCard from 'components/shell/onboarding/OnboardingCard'
+
+export function HostingOptionsStep() {
+  return (
+    <OnboardingCard title="Hosting Options">
+      <div>TODO</div>
+    </OnboardingCard>
+  )
+}

www/src/components/shell/onboarding/OnboardingCard.tsx

@@ -2,7 +2,7 @@ import { Flex, H2 } from 'honorable'
 
 interface OnboardingCardProps {
   title?: string
-  mode: 'Compact' | 'Default'
+  mode?: 'Compact' | 'Default'
   children: JSX.Element | Array<JSX.Element> | unknown
 }