Resize and add new links

src/features/search/components/explorer-cards.tsx

@@ -57,10 +57,10 @@ const ExplorerCards = () => {
         {/* Nostr */}
         <Stack
           space={4}
-          className='w-1/2 rounded-xl bg-gradient-to-r from-pink-400 to-purple-500 px-5 pb-8 pt-4'
+          className='w-1/2 rounded-xl bg-gradient-to-r from-pink-400 to-purple-500 px-5 pb-6 pt-4'
           justifyContent='center'
         >
-          <HStack alignItems='center' className='!box-border sm:w-48' space={2} justifyContent='between'>
+          <HStack alignItems='center' justifyContent='between'>
             {/* Title */}
             <Stack space={2}>
               <p className='text-xl font-bold text-white'>
@@ -73,8 +73,8 @@ const ExplorerCards = () => {
               </Text>
             </Stack>
 
-            <div className='rounded-full bg-white p-2 sm:size-16'>
+            <div className='flex min-h-20 min-w-20 items-center justify-center rounded-full bg-white p-1 sm:size-16'>
-              <img className='min-h-14 min-w-14' src={nostrImg} alt='' />
+              <img className='size-16' src={nostrImg} alt='' />
             </div>
           </HStack>
         </Stack>
@@ -82,7 +82,7 @@ const ExplorerCards = () => {
         {/* Bridge */}
         <Stack
           space={4}
-          className='w-1/2 rounded-xl bg-gradient-to-r from-purple-500 to-blue-400 px-5 pb-8 pt-4'
+          className='w-1/2 rounded-xl bg-gradient-to-r from-purple-500 to-blue-400 px-5 pb-6 pt-4'
         >
           <HStack  alignItems='center' className='sm:min-w-48'>
             {/* Title */}
@@ -95,8 +95,8 @@ const ExplorerCards = () => {
               </Text>
             </Stack>
 
-            <div className='w-1/2 rounded-full bg-white p-2 sm:size-16'>
+            <div className='flex min-h-20 min-w-20 items-center justify-center rounded-full bg-white p-1 sm:size-16'>
-              <img className='min-h-14 min-w-14' src={bridgeImg} alt='' />
+              <img className='size-16' src={bridgeImg} alt='' />
             </div>
           </HStack>
         </Stack>

src/features/search/components/people-to-follow-card.tsx

@@ -78,7 +78,7 @@ const AccountsCarousel = () => {
   }
 
   return (
-    <Stack space={4} className='px-4'>
+    <Stack space={4} className={`px-4 ${isOpen && 'pb-4'}`}>
       <HStack alignItems='center' justifyContent='between'>
         <Text size='xl' weight='bold'>
           <FormattedMessage id='column.explorer.popular_accounts' defaultMessage={'Popular Accounts'} />

src/locales/en.json

@@ -368,7 +368,7 @@
   "column.event_map": "Event location",
   "column.event_participants": "Event participants",
   "column.events": "Events",
-  "column.explorer.bridge_card.text": "Curious about Bridges? <link>Click here</link>",
+  "column.explorer.bridge_card.text": "Curious about Bridges? <a>Click here</a>",
   "column.explorer.bridge_card.title": "Bridge",
   "column.explorer.filters": "Filters:",
   "column.explorer.filters.add_filter": "Add Filter",
@@ -384,7 +384,7 @@
   "column.explorer.filters.platforms": "Platforms:",
   "column.explorer.filters.show_replies": "Show replies:",
   "column.explorer.filters.show_text_posts": "Just text posts:",
-  "column.explorer.nostr_card.text": "Wondering about Nostr? Find Out More",
+  "column.explorer.nostr_card.text": "Wondering about Nostr? <a>Click here</a>",
   "column.explorer.nostr_card.title": "Nostr",
   "column.explorer.popular_accounts": "Popular Accounts",
   "column.explorer.welcome_card.text": "Explore the world of <span>decentralized social media</span>, dive into <span>Nostr</span> or cross the bridge to other networks, and connect with a global community. All in one place.",