Tutorial updates (#489)

* fix: remove headline of Portfolio

* feat: added multiple backgrounds and new intro props

src/components/Borrow/BorrowIntro.tsx

@@ -9,6 +9,7 @@ export default function BorrowIntro() {
           have an eye on your Account Health. Once it reaches zero, you'll be liquidated.
         </>
       }
+      bg='borrow'
     ></Intro>
   )
 }

src/components/Earn/Farm/FarmIntro.tsx

@@ -12,6 +12,7 @@ export default function FarmIntro() {
           farmer. Riches and ruins lie ahead.
         </>
       }
+      bg='farm'
     >
       <Button
         text='Read more about Mars'

src/components/Earn/Lend/LendIntro.tsx

@@ -13,6 +13,7 @@ export default function LendIntro() {
           don't miss out on this easy opportunity to grow your holdings!
         </>
       }
+      bg='lend'
     >
       <ActionButton
         text='Deposit assets'

src/components/Intro.tsx

@@ -10,6 +10,7 @@ import useLocalStorage from 'hooks/useLocalStorage'
 interface Props {
   text: string | ReactNode
   children?: ReactNode
+  bg: 'borrow' | 'lend' | 'farm' | 'portfolio'
 }
 
 export default function Intro(props: Props) {
@@ -18,7 +19,7 @@ export default function Intro(props: Props) {
   if (!tutorial) return null
   return (
     <Card
-      className='relative w-full p-8 mb-6 bg-cover bg-intro h-55'
+      className={`relative w-full p-8 mb-6 bg-cover bg-intro-${props.bg} h-55`}
       contentClassName='flex rjustify-between w-full h-full flex-col justify-between'
     >
       <Tooltip

src/components/Portfolio/Overview/index.tsx

@@ -65,14 +65,12 @@ export default function Content() {
   }
 
   return (
-    <Card title='Credit Accounts' contentClassName='p-6 pt-4'>
-      <div
-        className={classNames('grid w-full grid-cols-1 gap-4', 'md:grid-cols-2', 'lg:grid-cols-3')}
-      >
-        {accountIds.map((accountId: string, index: number) => {
-          return <PortfolioCard key={accountId} accountId={accountId} />
-        })}
-      </div>
-    </Card>
+    <div
+      className={classNames('grid w-full grid-cols-1 gap-4', 'md:grid-cols-2', 'lg:grid-cols-3')}
+    >
+      {accountIds.map((accountId: string, index: number) => {
+        return <PortfolioCard key={accountId} accountId={accountId} />
+      })}
+    </div>
   )
 }

src/components/Portfolio/PortfolioIntro.tsx

@@ -23,6 +23,7 @@ export default function PortfolioIntro() {
           </>
         )
       }
+      bg='portfolio'
     ></Intro>
   )
 }

tailwind.config.js

@@ -34,6 +34,10 @@ module.exports = {
     'fill-violet-500',
     'fill-martian-red',
     'fill-grey',
+    'bg-intro-borrow',
+    'bg-intro-lend',
+    'bg-intro-farm',
+    'bg-intro-portfolio',
     'w-2',
   ],
   theme: {
@@ -51,7 +55,10 @@ module.exports = {
         sticky: '50px',
       },
       backgroundImage: {
-        intro: 'url(/images/intro.webp), url(/images/intro.png)',
+        'intro-borrow': 'url(/images/intro/bg2.webp), url(/images/intro/bg2.png)',
+        'intro-lend': 'url(/images/intro/bg4.webp), url(/images/intro/bg4.png)',
+        'intro-farm': 'url(/images/intro/bg6.webp), url(/images/intro/bg6.png)',
+        'intro-portfolio': 'url(/images/intro/bg8.webp), url(/images/intro/bg8.png)',
       },
       backgroundSize: {
         desktop: '100% auto',