diff --git a/centrifuge-app/src/assets/images/prime_page_image.svg b/centrifuge-app/src/assets/images/prime_page_image.svg
new file mode 100644
index 0000000000..a64d1f53e1
--- /dev/null
+++ b/centrifuge-app/src/assets/images/prime_page_image.svg
@@ -0,0 +1,9 @@
+
diff --git a/centrifuge-app/src/pages/Prime/index.tsx b/centrifuge-app/src/pages/Prime/index.tsx
index 7ffbccba0d..59ced37404 100644
--- 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 (
<>
-
- Centrifuge Prime
-
-
- 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.
-
-
-
-
+
+
- Go to website
-
+
+
+
+
+
+ Centrifuge Prime
+
+
+
+
+ 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.
+
+
+ Go to website
+
+
+
+
+
+
+
)
diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
index 73f8be47db..51071ea433 100644
--- 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
index 52d0023606..9a2623b3ca 100644
--- 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'}${
| ''