feat: create story for the title and use the title

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx

@@ -1,13 +1,11 @@
-import { Text } from '@status-im/components'
 import { XStack } from 'tamagui'
 import SyncCard from './SyncCard'
+import KeyGenerationTitle from './KeyGenerationTitle'
 
 const KeyGenerationHeader = () => {
   return (
     <XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
-      <Text size={27} weight={'semibold'}>
+      <KeyGenerationTitle />
-        Key Generation
-      </Text>
       <XStack space={'$2'}>
         <SyncCard synced={123.524} total={172.503} title="Execution Sync Status" />
         <SyncCard synced={123.524} total={172.503} title="Consensus Sync Status" />

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import KeyGenerationTitle from './KeyGenerationTitle'
+
+const meta = {
+  title: 'ValidatorOnboarding/KeyGenerationTitle',
+  component: KeyGenerationTitle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof KeyGenerationTitle>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Page: Story = {
+  args: {},
+}