Create card with logo

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx

@@ -0,0 +1,31 @@
+import { Stack, YStack } from 'tamagui'
+import Icon from '../../../components/General/Icon'
+import { Text } from '@status-im/components'
+
+ 
+type ConsensusClientCardProps = {
+  name: string
+  icon: string
+}
+const ConsensusClientCard = ({ name, icon }: ConsensusClientCardProps) => {
+  return (
+    <YStack
+      style={{
+        backgroundColor: '#2A4AF50D',
+        border: '1px solid #2A4AF5', 
+        borderRadius: '16px',
+        padding: '12px 16px',
+        width: '29%',
+      }}
+      space={'$10'}
+    >
+      <Stack>
+        <Text size={27} weight={'semibold'}>
+          {name}
+        </Text>
+      </Stack>
+      <Icon src={icon} width={100} height={100} />
+    </YStack>
+  )
+}
+export default ConsensusClientCard

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx

@@ -1,12 +1,18 @@
 import { XStack, Stack, Text as TextTam, YStack } from 'tamagui'
 import PairedDeviceCard from './PairedDeviceCard'
 import { Text } from '@status-im/components'
-import { Link } from 'react-router-dom'
+import ConsensusGaugeCard from './ConsensusGaugeCard'
-import ConsensusGaugeCard from './ConsensusSelectionCard'
+import ConsensusClientCard from './ConsensusClientCard'
-
+ 
 const ConsensusSelection = () => {
+  const a = [
+    {
+      name: 'Nimbus',
+      icon: '/icons/Nimbus-black.png',
+    },
+  ]
   return (
-    <YStack style={{ width: '100%', padding: '16px 32px' }}>
+    <YStack style={{ width: '100%', padding: '32px' }}>
       <XStack justifyContent={'space-between'}>
         <Text size={27} weight={'semibold'}>
           Validator Setup
@@ -41,12 +47,9 @@ const ConsensusSelection = () => {
         Install Consensus client
       </TextTam>
 
-      <Stack marginTop={'10%'}>
+      <XStack>
-        <Text size={15} weight={'semibold'} color="#2A4CF4">
+        <ConsensusClientCard name={a[0].name} icon={a[0].icon} />
-          <Link to={'https://launchpad.ethereum.org/en/faq'}></Link>
+      </XStack>
-          View Execution client comparison chart
-        </Text>
-      </Stack>
     </YStack>
   )
 }