Merge pull request #748 from centrifuge/add_rwa_page

rwa page

config/links.ts

@@ -1,22 +1,23 @@
 export const links = {
-  twitter: 'https://twitter.com/centrifuge',
-  telegram: 'https://t.me/centrifuge_chat',
-  medium: 'https://medium.com/centrifuge',
+  announcements: 'https://fixing.finance',
+  app: 'https://app.centrifuge.io/',
+  audits: 'https://github.com/centrifuge/security/tree/main/audits',
+  bis: 'https://www.bis.org/publ/work1116.htm',
   blog: 'https://centrifuge.mirror.xyz',
   discord: 'https://discord.com/invite/yEzyUq5gxF',
-  youtube: 'https://www.youtube.com/channel/UCfNkoq7YLrr8MeSJ3a6jVcA',
-  github: 'https://github.com/centrifuge/',
-  linkedin: 'https://www.linkedin.com/company/centrifugehq/',
   docs: 'https://docs.centrifuge.io/',
-  app: 'https://app.centrifuge.io/',
-  audits: 'https://github.com/centrifuge/security/tree/main/audits',
   forum: 'https://gov.centrifuge.io/',
-  prime: 'https://forms.gle/kt1GShLcWapMGzjs7',
-  primeBlogPost: 'https://centrifuge.mirror.xyz/KyrMWLKMccFCNfSlvjxe7uyhba7oLrUzlBuZ7GQTn6s',
-  fundManagement: 'https://docs.google.com/forms/d/e/1FAIpQLSdoKKJkb8RDKJrSnWTnsb3VLkK-zDWWgXTX9q65qF8wcO9Aew/viewform',
+  fundManagement: 'https://www.coindesk.com/business/2024/08/27/tokenization-pioneer-centrifuge-unveils-lending-market-with-morpho-coinbase/',
   fundManagementBlogPost: 'https://centrifuge.mirror.xyz/pn5NlZ5UY5pdtOy_FFZ1cNWr0Dn1QBk2yCeJ6ZXQQoc',
+  github: 'https://github.com/centrifuge/',
+  hkma: 'https://www.hkma.gov.hk/media/eng/publication-and-research/research/research-memorandums/2023/RM04-2023.pdf',
+  linkedin: 'https://www.linkedin.com/company/centrifugehq/',
+  medium: 'https://medium.com/centrifuge',
+  morpho: 'https://app.morpho.org/market?id=0x83262d91702f90d9edf6c737ceb46e59a2bcfc7ba856e1e8448b7824f83a07e3&network=base&morphoPrice=1.0',
   podcast: 'https://open.spotify.com/show/3mcy2eIFO9qUFlxhZeYMV4',
-  announcements: 'https://fixing.finance',
-  bis: 'https://www.bis.org/publ/work1116.htm',
-  hkma: 'https://www.hkma.gov.hk/media/eng/publication-and-research/research/research-memorandums/2023/RM04-2023.pdf'
+  prime: 'https://forms.gle/kt1GShLcWapMGzjs7',
+  primeBlogPost: 'https://centrifuge.mirror.xyz/KyrMWLKMccFCNfSlvjxe7uyhba7oLrUzlBuZ7GQTn6s',
+  telegram: 'https://t.me/centrifuge_chat',
+  twitter: 'https://twitter.com/centrifuge',
+  youtube: 'https://www.youtube.com/channel/UCfNkoq7YLrr8MeSJ3a6jVcA',
 }

config/menu.ts

@@ -12,6 +12,10 @@ const menu = [
       {
         label: 'Centrifuge Prime',
         href: '/prime',
+      }, 
+      {
+        label: 'RWA Market',
+        href: '/rwa-market',
       },
     ]
   },

data/fund.json

@@ -8,7 +8,8 @@
     "pretitle": "ONCHAIN FUND MANAGEMENT",
     "title": "Asset Management, \nOnchain",
     "body": "Centrifuge's fund management platform brings the full power of onchain finance to asset managers and investment funds. Capture your entire fund's onchain and offchain portfolio positions, transactions, and operations data in a secure, immutable, and reportable manner.",
-    "image": "./images/fund-management/fund-hero.png"
+    "image": "./images/fund-management/fund-hero.png",
+    "items": [{ "title": "Join Beta", "links": "fundManagement" }]
   },
   "prime_partners": {
     "title": "Built from years of experience bringing RWAs to DeFi",
@@ -73,11 +74,7 @@
   "rwa_usp": {
     "title": "Why build onchain?",
     "body": "Save costs and create efficiencies with real-time, accurate access to holdings, fully integrated with the necessary service providers for operating an institutional-grade offering. ",
-    "items": [
-      "Reduce yield spreads by 25 bps",
-      "Improve liquidity by 5.3%",
-      "Save up to 150 bps running the fund"
-    ],
+    "items": ["Reduce yield spreads by 25 bps", "Improve liquidity by 5.3%", "Save up to 150 bps running the fund"],
     "image": "./images/fund-management/fund2.png"
   },
   "prime_integration": {
@@ -105,6 +102,7 @@
     "title": "Ready to launch \nyour fund onchain?",
     "items": [
       "Centrifuge's fund management platform is available now for funds and asset managers looking to launch tokenized investment products and strategies."
-    ]
+    ],
+    "morpho": false
   }
-}
+}

data/posts/posts.json

@@ -1,12 +1,12 @@
 [
   {
-    "date": "2024/07/16",
-    "outlet": "Centrifuge Blog",
-    "title": "Centrifuge Q2 2024 Recap",
-    "body": "Q2 saw Centrifuge continuing to drive the real-world asset narrative forward. This quarter has been packed with the closing of our Series A, two Real-World Asset Summits, exciting product updates, and even more.",
-    "image": "../images/posts/q22024.png",
+    "date": "2024/08/27",
+    "outlet": "Coindesk",
+    "title": "Tokenization Pioneer Centrifuge Unveils Lending Market With Morpho, Coinbase",
+    "body": "The institutional real-world asset lending market combines Coinbase’s layer-2 network, Base, and Morpho Vaults using three varieties of tokenized Treasury bills.",
+    "image": "../images/posts/coindeskmorpho.png",
     "alt": "",
-    "href": "https://centrifuge.mirror.xyz/sG-gDrGNFsQOyx1VrAf1XdzKockW4v24ogFy9dIwgf4"
+    "href": "https://www.coindesk.com/business/2024/08/27/tokenization-pioneer-centrifuge-unveils-lending-market-with-morpho-coinbase/"
   },
   {
     "date": "2024/07/16",

data/rwa-market.json

@@ -0,0 +1,54 @@
+{
+  "slug": "/rwa-market",
+  "seo": {
+    "title": "RWA Market\n",
+    "description": "The RWA Market gives users the ability to lend and borrow against eligible pool tokens."
+  },
+  "hero_fund": {
+    "pretitle": "INSTITUTIONAL DEFI",
+    "title": "Creating composability \nfor a thriving RWA \necosystem",
+    "body": "The RWA Market gives users the ability to lend and borrow against eligible pool tokens. This brings additional utility to RWAs and is a critical step towards bringing financial markets onchain.",
+    "image": "./images/rwa/header.png",
+    "items": [
+      { "title": "Open Morpho", "url": "morpho" },
+      { "title": "Read News", "url": "fundManagement" }
+    ]
+  },
+  "fund_features": {
+    "title": "Increasing RWA token utility",
+    "body": "Financial products thrive with robust market infrastructure, enhancing their utility through shorting, leveraging, and immediate liquidity access. To attract institutional participation, DeFi must replicate these essential TradFi infrastructure benefits.",
+    "items": [
+      {
+        "title": "Enhanced Utility",
+        "body": "Ability to short, leverage, and gain immediate liquidity from assets."
+      },
+      {
+        "title": "Comprehensive \nFunctionality",
+        "body": "Enable programmable borrowing against assets and hedging to RWAs."
+      },
+      {
+        "title": "Market \nMaturity",
+        "body": "Development of a sophisticated DeFi ecosystem for real-world assets."
+      },
+      {
+        "title": "Institutional \nAttraction",
+        "body": "Creating infrastructure to meet institutional needs and drive adoption."
+      }
+    ]
+  },
+  "rwa_yields": {
+    "title": "Seamless Onboarding",
+    "body": "This is the first permissioned RWA market integrated with Coinbase Verifications, reducing the need for tedious and manual KYC processes. This streamlined verification process opens the market to 125 million Coinbase users, allowing them to onboard seamlessly through a single click.",
+    "image": "./images/rwa/onboarding.png"
+  },
+  "morpho": {
+    "title": "Live with \nMorpho on Base",
+    "body": "<p>Morpho is battle tested, has an active user base and the nature of isolated markets allow for easy segregation of permissioned tokens.</p> <p>\"Institutions need to justify transitioning their assets onchain, either by using these assets as collateral for refinancing or earning yield\",<strong> said Paul Frambot, Co-founder of Morpho Labs</strong>. \"Our goal with Morpho was to build the most trusted and reliable lending infrastructure, and we're excited to see RWA issuers like Centrifuge choose it to launch new lending markets.\"</p>",
+    "image": "./images/rwa/morpho.png"
+  },
+  "fund_cta": {
+    "title": "Participate in \nthe RWA Market",
+    "items": ["Open the RWA Market on Morpho to supply liquidity or borrow against Centrifuge tokens."],
+    "morpho": true
+  }
+}

src/components/FundCta.tsx

@@ -8,15 +8,17 @@ export const query = graphql`
   fragment FundCtaFragment on DataJsonFund_cta {
     title
     items
+    morpho
   }
 `
 
 export type FundCtaProps = {
   title: string
   items: string[]
+  morpho: string
 }
 
-export function FundCta({ title, items }: FundCtaProps) {
+export function FundCta({ title, items, morpho }: FundCtaProps) {
   return (
     <RevealWrapper>
       <Box as="section" mb="1px" px={2} py={[10, 10, '150px']} backgroundColor="textPrimary">
@@ -44,8 +46,12 @@ export function FundCta({ title, items }: FundCtaProps) {
               </Grid>
 
               <Reveal justifySelf={['start', 'start', 'end']} staggerIndex={4}>
-                <AnchorButton href={links.fundManagement} rel="noopener noreferrer" target="_blank">
-                  Join Beta
+                <AnchorButton
+                  href={morpho ? links.morpho : links.fundManagement}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  {morpho ? 'Open Morpho' : 'Join Beta'}
                 </AnchorButton>
               </Reveal>
             </Grid>

src/components/FundFeatures.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import {graphql} from 'gatsby'
-import {AnchorButton, Container, Shelf, Stack, Text, Grid} from '@centrifuge/fabric'
-import {links} from '../../config/links'
-import {Reveal, RevealWrapper} from './Reveal'
+import { graphql } from 'gatsby'
+import { AnchorButton, Container, Shelf, Stack, Text, Grid } from '@centrifuge/fabric'
+import { links } from '../../config/links'
+import { Reveal, RevealWrapper } from './Reveal'
 
 export const query = graphql`
   fragment FundFeaturesFragment on DataJsonFund_features {
@@ -22,9 +22,11 @@ export type FundFeaturesProps = {
     title: string
     body: string
   }[]
+  showButton?: boolean
+  columns?: number[]
 }
 
-export function FundFeatures({title, body, items}: FundFeaturesProps) {
+export function FundFeatures({ title, body, items, showButton = true, columns }: FundFeaturesProps) {
   return (
     <RevealWrapper>
       <Stack as="section" px={2} gap={[4, 4, 6, 10]}>
@@ -35,16 +37,18 @@ export function FundFeatures({title, body, items}: FundFeaturesProps) {
                 {title}
               </Text>
 
-              <AnchorButton
-                href={links.fundManagement}
-                rel="noopener noreferrer"
-                target="_blank"
-                variant="secondary"
-                style={{whiteSpace: 'nowrap'}}
-                small
-              >
-                Join Beta
-              </AnchorButton>
+              {showButton && (
+                <AnchorButton
+                  href={links.fundManagement}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  variant="secondary"
+                  style={{ whiteSpace: 'nowrap' }}
+                  small
+                >
+                  Join Beta
+                </AnchorButton>
+              )}
             </Reveal>
 
             <Reveal staggerIndex={1}>
@@ -54,10 +58,10 @@ export function FundFeatures({title, body, items}: FundFeaturesProps) {
             </Reveal>
           </Stack>
 
-          <Grid as="ul" columns={[1, 2, 2]} gap={4} mt={[6, 6, 8, 10]}>
+          <Grid as="ul" columns={columns || [1, 2, 2]} gap={4} mt={[6, 6, 8, 10]}>
             {items.map((entry, index) => (
               <Reveal as="li" staggerIndex={index + 2} key={index}>
-                <Item {...entry} />
+                <Item {...entry} breakLines={!showButton} />
               </Reveal>
             ))}
           </Grid>
@@ -67,12 +71,20 @@ export function FundFeatures({title, body, items}: FundFeaturesProps) {
   )
 }
 
-type ItemProps = FundFeaturesProps['items'][number]
+type ItemProps = {
+  title: string
+  body: string
+  breakLines?: boolean
+}
 
-function Item({title, body}: ItemProps) {
+function Item({ title, body, breakLines }: ItemProps) {
   return (
     <Stack gap={1}>
-      <Text as="h3" variant="heading4b">
+      <Text
+        as="h3"
+        variant="heading4b"
+        style={{ whiteSpace: breakLines ? 'pre-wrap' : 'inherit', width: breakLines ? 80 : 'auto' }}
+      >
         {title}
       </Text>
       <Text as="p">{body}</Text>

src/components/Morpho.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { graphql } from 'gatsby'
+import { AnchorButton, Box, Shelf } from '@centrifuge/fabric'
+import { ImageProps, Image } from './Image'
+import { TextImage } from './text-image'
+import { links } from '../../config/links'
+
+export const query = graphql`
+  fragment MorphoFragment on DataJsonMorpho {
+    title
+    body
+    image {
+      childImageSharp {
+        gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
+      }
+      publicURL
+      extension
+    }
+  }
+`
+
+export type MorphoProps = {
+  title: string
+  body: string
+  image: ImageProps
+}
+
+export function Morpho({ title, body, image }: MorphoProps) {
+  return (
+    <TextImage
+      isBodyHtml={true}
+      title={title}
+      body={body}
+      media={
+        <Box maxWidth={[500, 500, '100%']} mx="auto">
+          <Image data={image} alt="" />
+        </Box>
+      }
+      titleAddition={
+        <Box ml={2}>
+          <AnchorButton
+            href={links.morpho}
+            rel="noopener noreferrer"
+            target="_blank"
+            small
+            variant="secondary"
+            style={{ whiteSpace: 'nowrap' }}
+          >
+            Open Morpho
+          </AnchorButton>
+        </Box>
+      }
+    />
+  )
+}