feat: add creators stake sub banner

src/components/spaces/ViewSpace.tsx

@@ -22,6 +22,7 @@ import MyEntityLabel from '../utils/MyEntityLabel'
 import Section from '../utils/Section'
 import { BareProps } from '../utils/types'
 import ViewTags from '../utils/ViewTags'
+import StakeSubBanner from './creators/StakeSubBanner'
 import {
   HiddenSpaceAlert,
   OfficialSpaceStatus,
@@ -276,6 +277,9 @@ export const InnerViewSpace = (props: Props) => {
       <PendingSpaceOwnershipPanel space={space} />
       <HiddenSpaceAlert space={space} />
       <Section className='pt-2'>{renderPreview()}</Section>
+      <Section className='mt-4'>
+        <StakeSubBanner />
+      </Section>
       <Section className='DfContentPage mt-4'>
         <PostPreviewsOnSpace spaceData={spaceData} posts={posts} postIds={postIds} />
       </Section>

src/components/spaces/creators/StakeSubBanner.module.sass

@@ -0,0 +1,42 @@
+@import 'src/styles/subsocial-vars.scss'
+
+.StakeSubBanner
+  position: relative
+  display: flex
+  border: 1px solid #6366F1
+  background: #EDF4FF
+  border-radius: $border_radius_huge
+  padding: $space_large
+  justify-content: space-between
+
+  .Content
+    position: relative
+    z-index: 1
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+
+    .Title
+      font-size: $font_large
+      font-weight: $font_weight_medium
+
+    .Subtitle
+      font-size: $font_small
+      opacity: 0.8
+
+    .Button
+      border: 1px solid $color_primary
+      font-weight: $font_weight_medium
+      padding-left: $space_huge
+      padding-right: $space_huge
+
+  .Image
+    position: absolute
+    right: $space_normal
+    top: 0
+    height: 100%
+
+    :global(.ant-image), :global(.ant-image-img)
+      // width: 100%
+      height: 100%
+      object-fit: contain

src/components/spaces/creators/StakeSubBanner.tsx

@@ -0,0 +1,29 @@
+import { Button } from 'antd'
+import clsx from 'clsx'
+import { ComponentProps } from 'react'
+import { DfImage } from 'src/components/utils/DfImage'
+import styles from './StakeSubBanner.module.sass'
+
+export type StakeSubBannerProps = ComponentProps<'div'>
+
+export default function StakeSubBanner({ ...props }: StakeSubBannerProps) {
+  return (
+    <div {...props} className={clsx(props.className, styles.StakeSubBanner)}>
+      <div className={styles.Content}>
+        <p className={clsx(styles.Title, 'mb-2')}>Stake SUB to this creator and earn more</p>
+        <p className={clsx(styles.Subtitle, 'mb-4')}>
+          Generate rewards for both you and this creator by staking towards them
+        </p>
+        <Button
+          href='https://sub.id/creators'
+          target='_blank'
+          size='large'
+          className={styles.Button}
+        >
+          Stake
+        </Button>
+      </div>
+      <DfImage src='/images/subsocial-tokens.png' className={styles.Image} />
+    </div>
+  )
+}