Synthetixio · fritzschoff · Mar 4, 2024 · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024
diff --git a/pages/governance.tsx b/pages/governance.tsx
@@ -1,9 +1,10 @@
 import Head from 'next/head';
 import { PageLayout } from 'src/components';
-import FurtherLinking from 'src/sections/governance/furtherLinking';
-import GovernanceMain from 'src/sections/governance/main';
-import Table from 'src/sections/governance/table';
-import { Line } from 'src/styles/common';
+import GovernanceAction from 'src/sections/governance/action';
+import GovernanceCallout from 'src/sections/governance/callout';
+import GovernanceEcosystem from 'src/sections/governance/ecosystem';
+import GovernanceFeatures from 'src/sections/governance/features';
+import GovernanceHeader from 'src/sections/governance/header';
 
 export default function Governance() {
 	return (
@@ -12,10 +13,11 @@ export default function Governance() {
 				<title>Synthetix - Governance</title>
 			</Head>
 			<PageLayout>
-				<GovernanceMain />
-				<Table />
-				<FurtherLinking />
-				<Line showOnMobile />
+				<GovernanceHeader />
+				<GovernanceCallout />
+				<GovernanceEcosystem />
+				<GovernanceFeatures />
+				<GovernanceAction />
 			</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/public/spartan-governance.svg b/public/spartan-governance.svg
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { Logo, Socials } from '../';
-import { Box, Divider, Flex, Link, Show, Text } from '@chakra-ui/react';
+import { Box, Divider, Flex, Hide, Link, Show, Text } from '@chakra-ui/react';
 import {
 	Accordion,
 	AccordionItem,
@@ -129,7 +129,7 @@ export function Footer() {
 					</Flex>
 				</Flex>
 			</Show>
-			<Show below="lg">
+			<Hide above="lg">
 				<Flex
 					as="footer"
 					w="100%"
@@ -194,7 +194,7 @@ export function Footer() {
 						<Socials isFooter />
 					</Flex>
 				</Flex>
-			</Show>
+			</Hide>
 		</>
 	);
 }
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -19,7 +19,7 @@ const data: {
 		label: 'Governance',
 	},
 	{
-		link: 'https://docs.synthetix.io/',
+		externalLink: 'https://docs.synthetix.io/',
 		label: 'Docs',
 	},
 	{
@@ -96,6 +96,7 @@ export const Menu = ({ isOpen, ...rest }: MenuProps) => {
 									color="#828295"
 									_hover={{ color: 'cyan.500' }}
 									key={item.link}
+									target="_blank"
 								>
 									<Text
 										fontFamily="heading"

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/action.tsx b/src/sections/governance/action.tsx
@@ -0,0 +1,95 @@
+import { Button, Flex, Heading, Show, Text } from '@chakra-ui/react';
+import Link from 'next/link';
+import Shield from 'src/svg/Shield';
+
+export default function GovernanceAction() {
+	return (
+		<Flex
+			flexDir="column"
+			w="100%"
+			py={{ base: '60px', lg: '100px' }}
+			pos="relative"
+		>
+			<Text
+				color="gray.500"
+				fontSize={{ base: '16px' }}
+				mb={{ base: 4 }}
+				w={{ base: '100%', md: '360px', lg: '525px' }}
+			>
+				SYNTHETIX GOVERNANCE
+			</Text>
+			<Heading
+				fontSize={{ base: '36px', md: '48px' }}
+				lineHeight={{ base: '120%' }}
+				mb={{ base: 4 }}
+				w={{ base: '100%', md: '360px', lg: '525px' }}
+			>
+				Participate in Governance
+			</Heading>
+			<Text
+				color="gray.500"
+				fontSize={{ base: '14px' }}
+				mb={{ base: 4 }}
+				w={{ base: '100%', md: '360px', lg: '525px' }}
+			>
+				Play a pivotal role in Synthetix Governance. As a staker, your votes in
+				council elections and contributions to proposals are essential, steering
+				the protocol&apos;s direction and evolution.
+			</Text>
+			<Flex gap="6" my={{ base: 6 }}>
+				<Link
+					href="https://sips.synthetix.io/"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<Button>All SIPs & SCCPs</Button>
+				</Link>
+				<Link
+					href="https://pr.synthetix.io/"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<Button variant="outline" colorScheme="gray" color="white">
+						Create a SIP
+					</Button>
+				</Link>
+			</Flex>
+			<Shield
+				width={{ base: '100%', md: '810px', lg: '100%' }}
+				transform={{ base: 'scale(2)', md: 'unset' }}
+				height={{ base: '500px' }}
+				position={{ md: 'absolute' }}
+				top={0}
+				zIndex={1}
+				right={{ md: '-300px' }}
+			/>
+
+			<Flex
+				mt={{ base: '120px', lg: '200px' }}
+				w="100%"
+				p={{ base: '6', md: '12' }}
+				flexDir="column"
+				rounded="base"
+				bg="navy.700"
+				border="1px solid"
+				borderColor="gray.900"
+				boxShadow="dark-lg"
+			>
+				<Heading mb={{ base: 4 }} fontSize="30px">
+					Want to hear all about Governance updates?
+				</Heading>
+				<Text fontSize={{ base: '16px' }} color="gray.500" mb={{ base: 6 }}>
+					Learn more about governance by reading the documentation on each
+					council and how they interact with each other
+				</Text>
+				<Link
+					href="https://discord.com/channels/413890591840272394/937743028095967332"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<Button>Join Discord</Button>
+				</Link>
+			</Flex>
+		</Flex>
+	);
+}
diff --git a/src/sections/governance/callout.tsx b/src/sections/governance/callout.tsx
@@ -0,0 +1,27 @@
+import { Flex, Heading, Text } from '@chakra-ui/react';
+import { GradientText } from 'src/components';
+
+export default function GovernanceCallout() {
+	return (
+		<Flex
+			flexDir="column"
+			w="100%"
+			py={{ base: '60px', lg: '100px' }}
+			maxW="800px"
+			alignSelf="start"
+		>
+			<Text color="gray.500" fontSize={{ base: '16px' }} mb={{ base: 4 }}>
+				SYNTHETIX GOVERNANCE
+			</Text>
+			<Heading
+				fontSize={{ base: '36px', md: '48px' }}
+				lineHeight={{ base: '120%' }}
+			>
+				The Synthetix protocol is governed by a{' '}
+				<GradientText>decentralized</GradientText> set of{' '}
+				<GradientText>representative councils</GradientText> that are{' '}
+				<GradientText>voted on by stakers</GradientText>.
+			</Heading>
+		</Flex>
+	);
+}