Redesign prime landing page

centrifuge · Jan 8, 2025 · 2f4239c · 2f4239c
1 parent c7c2295
commit 2f4239c
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 49 deletions.
diff --git a/centrifuge-app/src/assets/images/prime_page_image.svg b/centrifuge-app/src/assets/images/prime_page_image.svg
diff --git a/centrifuge-app/src/components/AssetSummary.tsx b/centrifuge-app/src/components/AssetSummary.tsx
@@ -1,4 +1,4 @@
-import { Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useTheme } from 'styled-components'
 
@@ -7,6 +7,7 @@ type Props = {
     label: React.ReactNode
     value: React.ReactNode
     heading: boolean
+    children?: React.ReactNode
   }[]
   children?: React.ReactNode
 }
@@ -22,12 +23,17 @@ export function AssetSummary({ data, children }: Props) {
       mx={[2, 2, 2, 2, 5]}
     >
       <Shelf gap={2}>
-        {data?.map(({ label, value, heading }, index) => (
+        {data?.map(({ label, value, heading, children }, index) => (
           <Stack key={`${value}-${label}-${index}`}>
             <Text variant={heading ? 'body2' : 'body3'} color="textSecondary" style={{ margin: 0, padding: 0 }}>
               {label}
             </Text>
-            <Text variant={heading ? 'heading' : 'heading2'}>{value}</Text>
+            <Box display="flex" alignItems="center">
+              <Text variant={heading ? 'heading' : 'heading1'} style={{ marginRight: 8 }}>
+                {value}
+              </Text>
+              {children && children}
+            </Box>
           </Stack>
         ))}
         {children}

diff --git a/centrifuge-app/src/pages/Prime/index.tsx b/centrifuge-app/src/pages/Prime/index.tsx
@@ -1,6 +1,9 @@
 import { CurrencyBalance, addressToHex } from '@centrifuge/centrifuge-js'
 import { useCentrifugeUtils, useGetNetworkName } from '@centrifuge/centrifuge-react'
-import { AnchorButton, Box, IconExternalLink, Shelf, Text, TextWithPlaceholder } from '@centrifuge/fabric'
+import { Box, Grid, IconExternalLink, IconGlobe, Shelf, Text, TextWithPlaceholder } from '@centrifuge/fabric'
+import { useTheme } from 'styled-components'
+import { AnchorTextLink } from '../../../src/components/TextLink'
+import primePageImage from '../../assets/images/prime_page_image.svg'
 import { Column, DataTable, FilterableTableHeader, SortableTableHeader } from '../../components/DataTable'
 import { LayoutSection } from '../../components/LayoutBase/LayoutSection'
 import { formatDate } from '../../utils/date'
@@ -15,29 +18,60 @@ export default function PrimePage() {
 }
 
 function Prime() {
+  const theme = useTheme()
   return (
     <>
-      <LayoutSection backgroundColor="backgroundSecondary" alignItems="flex-start" pt={5} pb={3}>
-        <Text variant="heading1">Centrifuge Prime</Text>
-        <Box maxWidth={800}>
-          <Text variant="body1">
-            Centrifuge Prime was built to meet the needs of large decentralized organizations and protocols. Through
-            Centrifuge Prime, DeFi native organizations can integrate with the largest financial markets in the world
-            and take advantage of real yields from real economic activity - all onchain. Assets tailored to your needs,
-            processes adapted to your governance, and all through decentralized rails.
-          </Text>
-        </Box>
-        <Box bleedX={2} bleedY={1}>
-          <AnchorButton
-            href="https://centrifuge.io/prime/"
-            target="_blank"
-            iconRight={IconExternalLink}
-            variant="tertiary"
+      <LayoutSection alignItems="flex-start" pt={3} pb={3}>
+        <Box display="flex" alignItems="center">
+          <Box
+            backgroundColor="backgroundSecondary"
+            borderRadius={28}
+            height={40}
+            width={40}
+            border={`6px solid ${theme.colors.backgroundLight}`}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            padding="10px"
           >
-            Go to website
-          </AnchorButton>
+            <IconGlobe size={20} />
+          </Box>
+          <Text variant="heading1" style={{ marginLeft: 8 }}>
+            Centrifuge Prime
+          </Text>
         </Box>
+        <Box borderBottom={`1px solid ${theme.colors.borderPrimary}`} pb={2} mx={2} />
+        <Grid
+          gridTemplateColumns={['1fr', '1fr 1fr']}
+          gap={6}
+          mt={2}
+          padding="0px 50px"
+          style={{ placeItems: 'center' }}
+        >
+          <Box>
+            <Text variant="body1" style={{ lineHeight: '25.6px' }}>
+              Centrifuge Prime was built to meet the needs of large decentralized organizations and protocols. Through
+              Centrifuge Prime, DeFi native organizations can integrate with the largest financial markets in the world
+              and take advantage of real yields from real economic activity - all onchain. Assets tailored to your
+              needs, processes adapted to your governance, and all through decentralized rails.
+            </Text>
+            <Box display="flex" alignItems="center" mt={4}>
+              <AnchorTextLink
+                href="https://centrifuge.io/prime/"
+                target="_blank"
+                style={{ textDecoration: 'none', marginRight: 8 }}
+              >
+                Go to website
+              </AnchorTextLink>
+              <IconExternalLink size={20} />
+            </Box>
+          </Box>
+          <Box>
+            <Box as="img" src={primePageImage} />
+          </Box>
+        </Grid>
       </LayoutSection>
+      <Box borderBottom={`1px solid ${theme.colors.borderPrimary}`} pb={3} mx={3} />
       <DaoPortfoliosTable />
     </>
   )
@@ -134,30 +168,6 @@ function DaoPortfoliosTable() {
         trancheBalances[trancheId] = { balance, tokenPrice }
       }
     })
-    // const trancheBalances = !!account
-    //   ? Object.fromEntries(
-    //       account.trancheBalances.nodes.map((tranche: any) => {
-    //         const pool = pools?.find((p) => p.id === tranche.poolId)
-    //         const decimals = pool?.currency.decimals ?? 18
-    //         const tokenPrice = pool?.tranches.find((t) => tranche.trancheId.endsWith(t.id))?.tokenPrice?.toFloat() ?? 1
-    //         let balance = new CurrencyBalance(
-    //           new BN(tranche.claimableTrancheTokens).add(new BN(tranche.pendingRedeemTrancheTokens)),
-    //           decimals
-    //         ).toFloat()
-
-    //         const subqueryCurrencies = account?.currencyBalances.nodes.filter(
-    //           (b: any) => b.currency.trancheId && b.currency.trancheId === tranche.trancheId
-    //         )
-    //         if (subqueryCurrencies.length) {
-    //           balance += subqueryCurrencies.reduce(
-    //             (acc: number, cur: any) => acc + new CurrencyBalance(cur.amount, decimals).toFloat(),
-    //             0
-    //           )
-    //         }
-    //         return [tranche.trancheId.split('-')[1], { balance, tokenPrice }]
-    //       })
-    //     )
-    //   : {}
     const totalValue = Object.values(trancheBalances)?.reduce(
       (acc, { balance, tokenPrice }) => acc + balance * tokenPrice,
       0
@@ -184,6 +194,7 @@ function DaoPortfoliosTable() {
           <Text>{row.name}</Text>
         </Shelf>
       ),
+      width: '2fr',
     },
     {
       align: 'left',
@@ -196,15 +207,18 @@ function DaoPortfoliosTable() {
         />
       ),
       cell: (row: Row) => <Text>{getNetworkName(row.network)}</Text>,
+      width: '2fr',
     },
     {
+      align: 'left',
       header: <SortableTableHeader label="Portfolio value" />,
       cell: (row: Row) => (
         <TextWithPlaceholder isLoading={isSubqueryLoading}>
           {row.value != null && formatBalance(row.value, 'USD')}
         </TextWithPlaceholder>
       ),
       sortKey: 'value',
+      width: '2fr',
     },
     {
       align: 'left',
@@ -219,14 +233,17 @@ function DaoPortfoliosTable() {
   ]
 
   return (
-    <LayoutSection title="DAO portfolios">
+    <Box mt={2} px={4}>
+      <Text variant="heading4" style={{ marginBottom: 12 }}>
+        Portfolios
+      </Text>
       <DataTable
         columns={columns}
         data={filters.data}
         defaultSortKey="value"
         defaultSortOrder="desc"
         onRowClicked={(row: Row) => `/prime/${row.slug}`}
       />
-    </LayoutSection>
+    </Box>
   )
 }
diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
@@ -30,6 +30,7 @@ const colors = {
   backgroundInput: 'white',
   backgroundThumbnail: grayScale[500],
   backgroundInverted: grayScale[800],
+  backgroundLight: grayScale[10],
 
   borderPrimary: grayScale[100],
   borderSecondary: 'rgba(207, 207, 207, 0.50)',

diff --git a/fabric/src/theme/types.ts b/fabric/src/theme/types.ts
@@ -27,7 +27,8 @@ type BackgroundColorName = `background${
   | 'Thumbnail'
   | 'AccentPrimary'
   | 'AccentSecondary'
-  | 'Inverted'}`
+  | 'Inverted'
+  | 'Light'}`
 type ButtonColorName =
   | `${'background' | 'text' | 'border'}Button${'Primary' | 'Secondary' | 'Tertiary' | 'Inverted'}${
       | ''