added ecosystem

Synthetixio · Feb 6, 2024 · 761cc1f · 761cc1f
1 parent fd38292
commit 761cc1f
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 42 deletions.
diff --git a/pages/governance.tsx b/pages/governance.tsx
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import { PageLayout } from 'src/components';
 import GovernanceCallout from 'src/sections/governance/callout';
+import GovernanceEcosystem from 'src/sections/governance/ecosystem';
 import GovernanceHeader from 'src/sections/governance/header';
 
 export default function Governance() {
@@ -12,6 +13,7 @@ export default function Governance() {
 			<PageLayout>
 				<GovernanceHeader />
 				<GovernanceCallout />
+				<GovernanceEcosystem />
 			</PageLayout>
 		</>
 	);

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -60,7 +60,7 @@ const Home = ({
 			<Head>
 				<title>Synthetix</title>
 			</Head>
-			<PageLayout useChakra>
+			<PageLayout>
 				<Hero />
 				{totalStakedValue && tradingVolume && swapsVolumeTotal && (
 					<Volume

diff --git a/pages/perps.tsx b/pages/perps.tsx
@@ -13,7 +13,7 @@ export default function DecentralizedPerpetualFutures() {
 			<Head>
 				<title>Synthetix - Decentralized Perps</title>
 			</Head>
-			<PageLayout useChakra>
+			<PageLayout>
 				<FuturesMain />
 				<Callout />
 				<USP />

diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -2,48 +2,30 @@ import { Divider, Flex, FlexProps } from '@chakra-ui/react';
 import { PropsWithChildren } from 'react';
 import { Footer, Header } from '..';
 
-interface PageLayoutProps extends PropsWithChildren, FlexProps {
-	useChakra?: boolean;
-}
-
-export function PageLayout({ children, useChakra, ...props }: PageLayoutProps) {
-	if (useChakra) {
-		return (
-			<Flex minW="100vw" bg="navy.900" justifyContent="center">
-				<Flex
-					direction="column"
-					alignItems="center"
-					w="100%"
-					maxW={{
-						base: '100vw',
-						md: '48rem',
-						lg: '62rem',
-						xl: '80rem',
-						'2xl': '96rem',
-					}}
-					px={{ base: '16px', lg: '24px' }}
-					{...props}
-				>
-					<Header />
-					{children}
-					<Divider minW="100vw" borderColor="gray.900" />
-					<Footer />
-				</Flex>
-			</Flex>
-		);
-	}
+interface PageLayoutProps extends PropsWithChildren, FlexProps {}
 
+export function PageLayout({ children, ...props }: PageLayoutProps) {
 	return (
-		<Flex
-			direction="column"
-			alignItems="center"
-			bg="navy.900"
-			px="2"
-			{...props}
-		>
-			<Header />
-			{children}
-			<Footer />
+		<Flex minW="100vw" bg="navy.900" justifyContent="center">
+			<Flex
+				direction="column"
+				alignItems="center"
+				w="100%"
+				maxW={{
+					base: '100vw',
+					md: '48rem',
+					lg: '62rem',
+					xl: '80rem',
+					'2xl': '96rem',
+				}}
+				px={{ base: '16px', lg: '24px' }}
+				{...props}
+			>
+				<Header />
+				{children}
+				<Divider minW="100vw" borderColor="gray.900" />
+				<Footer />
+			</Flex>
 		</Flex>
 	);
 }
diff --git a/src/sections/governance/ecosystem.tsx b/src/sections/governance/ecosystem.tsx
@@ -0,0 +1,41 @@
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+
+export default function GovernanceEcosystem() {
+	return (
+		<Flex flexDir="column" w="100%" my={{ base: 10 }}>
+			<Box
+				position="absolute"
+				top="0px"
+				right="0px"
+				bottom="0px"
+				left="0px"
+				bgGradient="radial-gradient(to-tr, pink.500, cyan.500)"
+			></Box>
+			<Text
+				color="gray.500"
+				fontSize={{ base: '16px' }}
+				mb={{ base: 1 }}
+				zIndex={10}
+			>
+				SYNTHETIX ECOSYSTEM
+			</Text>
+			<Heading
+				fontSize={{ base: '48px' }}
+				lineHeight={{ base: '120%' }}
+				mb={{ base: 1 }}
+				zIndex={10}
+			>
+				Governing Councils
+			</Heading>
+			<Text
+				color="gray.500"
+				fontSize={{ base: '14px' }}
+				mb={{ base: 4 }}
+				zIndex={10}
+			>
+				The Synthetix Protocol is governed by four councils, each responsible
+				for a core aspect of a DAO.
+			</Text>
+		</Flex>
+	);
+}