diff --git a/apps/website/components/MicaComplianceTable.tsx b/apps/website/components/MicaComplianceTable.tsx
new file mode 100644
index 000000000..8c125b56a
--- /dev/null
+++ b/apps/website/components/MicaComplianceTable.tsx
@@ -0,0 +1,214 @@
+import { Text, Tooltip } from '@siafoundation/design-system'
+import { MicaIndicatorObject } from '../content/mica'
+import {
+ CloudLightning32,
+ CloudUpload32,
+ Earth32,
+ Information16,
+ TrashCan32,
+} from '@carbon/icons-react'
+
+type MicaComplianceTableCellGroupLayoutProps = {
+ title: string
+ description: string
+ displayValue: string
+ last?: boolean
+}
+
+function MicaComplianceTableCellGroupLayout({
+ title,
+ description,
+ displayValue,
+ last,
+}: MicaComplianceTableCellGroupLayoutProps) {
+ return (
+ <>
+
+
+ {title}
+
+ |
+
+
+
+ {displayValue}
+
+
+
+
+
+ |
+ >
+ )
+}
+
+type MicaComplianceTableProps = {
+ micaIndicators: MicaIndicatorObject
+ lastUpdated: string
+}
+
+export function MicaComplianceTable({
+ micaIndicators,
+ lastUpdated,
+}: MicaComplianceTableProps) {
+ return (
+ <>
+
+
+
+
+
+
+ Domain
+
+ |
+
+
+ Sustainability Indicator
+
+ |
+ |
+
+
+
+
+
+
+
+
+ Energy
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ GHG Emissions
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Waste Production
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Natural resources
+
+
+ |
+
+
+
+
+
+
+
+ Last updated {lastUpdated.slice(0, lastUpdated.indexOf('T'))}
+
+
+ >
+ )
+}
diff --git a/apps/website/config/routes.ts b/apps/website/config/routes.ts
index 6f57b6203..024cac1a4 100644
--- a/apps/website/config/routes.ts
+++ b/apps/website/config/routes.ts
@@ -78,4 +78,7 @@ export const routes = {
letter: {
index: '/letter',
},
+ sustainability: {
+ index: '/sustainability',
+ },
}
diff --git a/apps/website/content/mica.ts b/apps/website/content/mica.ts
new file mode 100644
index 000000000..42308ae58
--- /dev/null
+++ b/apps/website/content/mica.ts
@@ -0,0 +1,30 @@
+import { to } from '@siafoundation/request'
+import axios from 'axios'
+import * as dotenv from 'dotenv'
+
+dotenv.config()
+
+export type MicaIndicator = {
+ indicator: number
+ title: string
+ description: string
+ unit: string
+ result: {
+ value: number
+ year: number
+ }
+}
+
+export type MicaIndicatorObject = { [key: string]: MicaIndicator }
+
+export async function getMicaIndicators() {
+ const [indicators, indicatorsError] = await to(
+ axios(
+ `https://ccri.sia.tools/mica/overview/sia?responseType=recent&key=${process.env['CCRI_TOKEN']}`
+ )
+ )
+
+ if (indicatorsError) throw indicatorsError
+
+ return indicators
+}
diff --git a/apps/website/pages/sustainability/index.tsx b/apps/website/pages/sustainability/index.tsx
new file mode 100644
index 000000000..2cd2a1daa
--- /dev/null
+++ b/apps/website/pages/sustainability/index.tsx
@@ -0,0 +1,61 @@
+import { Layout } from '../../components/Layout'
+import { textContent } from '../../lib/utils'
+import { routes } from '../../config/routes'
+import { SectionTransparent } from '../../components/SectionTransparent'
+import { SiteHeading } from '@siafoundation/design-system'
+import { SectionGradient } from '../../components/SectionGradient'
+import { backgrounds, previews } from '../../content/assets'
+import { MicaComplianceTable } from '../../components/MicaComplianceTable'
+import { minutesInSeconds } from '@siafoundation/units'
+import { AsyncReturnType } from '../../lib/types'
+import { getMicaIndicators } from '../../content/mica'
+
+type Props = AsyncReturnType['props']
+
+export default function Mica({ micaIndicators, lastUpdated }: Props) {
+ const title = 'MICA Compliance'
+ const description =
+ 'Mica information about this table goes here Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ratione quaerat esse soluta veritatis error! Odit aperiam hic excepturi doloremque ea?'
+
+ return (
+
+
+
+ }
+ backgroundImage={backgrounds.waterfall}
+ previewImage={previews.waterfall}
+ >
+
+
+
+
+ )
+}
+
+export async function getStaticProps() {
+ const micaIndicators = await getMicaIndicators()
+ const lastUpdated = new Date().toISOString()
+
+ const props = {
+ micaIndicators,
+ lastUpdated,
+ }
+
+ return {
+ props,
+ revalidate: minutesInSeconds(1440),
+ }
+}