wip

centrifuge · Dec 12, 2024 · 0ee94fa · 0ee94fa
1 parent 881c9dd
commit 0ee94fa
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 20 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/pages/Prime/index.tsx b/centrifuge-app/src/pages/Prime/index.tsx
@@ -1,6 +1,18 @@
 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 {
+  AnchorButton,
+  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 +27,50 @@ 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"
+            padding="10px"
+            borderRadius={28}
+            height={40}
+            width={40}
+            border={`6px solid ${theme.colors.backgroundLight}`}
           >
-            Go to website
-          </AnchorButton>
+            <AnchorTextLink href="https://centrifuge.io/prime/" target="_blank">
+              <IconGlobe size={20} />
+            </AnchorTextLink>
+          </Box>
+          <Text variant="heading1" style={{ marginLeft: 8 }}>
+            Centrifuge Prime
+          </Text>
         </Box>
+        <Grid gridTemplateColumns={['1fr 1fr']}>
+          <Box>
+            <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>
+            <AnchorButton
+              href="https://centrifuge.io/prime/"
+              target="_blank"
+              iconRight={IconExternalLink}
+              variant="tertiary"
+            >
+              Go to website
+            </AnchorButton>
+          </Box>
+          <Box>
+            <Box as="img" src={primePageImage} />
+          </Box>
+        </Grid>
       </LayoutSection>
+      <Box borderBottom={`1px solid ${theme.colors.borderPrimary}`} pb={3} />
       <DaoPortfoliosTable />
     </>
   )

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'}${
       | ''