feat: add cards and styling

src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx

@@ -3,7 +3,7 @@ import KeyGenerationHeader from './KeyGenerationHeader'
 
 const KeyGeneration = () => {
   return (
-    <YStack space={'$2'}>
+    <YStack space={'$2'} style={{ width: '100%' }}>
       <KeyGenerationHeader />
     </YStack>
   )

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx

@@ -1,16 +1,16 @@
 import { Text } from '@status-im/components'
 import { XStack } from 'tamagui'
-// import SyncCard from './SyncCard'
+import SyncCard from './SyncCard'
 
 const KeyGenerationHeader = () => {
   return (
-    <XStack justifyContent="space-between">
+    <XStack style={{ width: '100%', alignItems: 'center', 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} /> */}
+        <SyncCard synced={123.524} total={172.503} title="Execution Sync Status" />
+        <SyncCard synced={123.524} total={172.503} title="Consensus Sync Status" />
       </XStack>
     </XStack>
   )