feat: create header for key generation

src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx

@@ -1,7 +1,12 @@
 import { YStack } from 'tamagui'
+import KeyGenerationHeader from './KeyGenerationHeader'
 
 const KeyGeneration = () => {
-  return <YStack space={'$2'}></YStack>
+  return (
+    <YStack space={'$2'}>
+      <KeyGenerationHeader />
+    </YStack>
+  )
 }
 
 export default KeyGeneration

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx

@@ -0,0 +1,19 @@
+import { Text } from '@status-im/components'
+import { XStack } from 'tamagui'
+import SyncCard from './SyncCard'
+
+const KeyGenerationHeader = () => {
+  return (
+    <XStack justifyContent="space-between">
+      <Text size={27} weight={'semibold'}>
+        Key Generation
+      </Text>
+      <XStack space={'$2'}>
+        <SyncCard synced={123.524} total={172.503} />
+        <SyncCard synced={123.524} total={172.503} />
+      </XStack>
+    </XStack>
+  )
+}
+
+export default KeyGenerationHeader