New governance

pages/governance.tsx

@@ -1,7 +1,6 @@
 import Head from 'next/head';
 import { PageLayout } from 'src/components';
 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';
@@ -14,7 +13,6 @@ export default function Governance() {
 			</Head>
 			<PageLayout>
 				<GovernanceHeader />
-				<GovernanceCallout />
 				<GovernanceEcosystem />
 				<GovernanceFeatures />
 				<GovernanceAction />

src/sections/governance/docs.tsx

@@ -0,0 +1,91 @@
+import { Button, Flex, Link, Show, Text, Image } from '@chakra-ui/react';
+import { StakingLooper } from 'src/svg/StakingLooper';
+import { links } from 'src/utils/constants';
+
+export const Docs = () => {
+	return (
+		<Flex
+			w="100%"
+			mt="16px"
+			mb={{ base: '60px', lg: '100px' }}
+			position="relative"
+		>
+			<Flex
+				bg="navy.700"
+				minHeight="300px"
+				maxHeight={{ base: 'unset', lg: '328px' }}
+				borderRadius="5px"
+				border="1px"
+				borderColor="gray.900"
+				position="relative"
+				pl={{ base: '0', lg: '48px' }}
+				w="100%"
+				justifyContent="flex-end"
+				zIndex={1}
+				flexDirection={{ base: 'column', lg: 'row' }}
+			>
+				<Show above="base" below="lg">
+					<Flex maxWidth="100%" height="290px" position="relative" mb={4}>
+						<Image
+							src="/StakingLooper.png"
+							alt="Staking Looper"
+							maxHeight="100%"
+							maxWidth="100%"
+							position="absolute"
+							left="0"
+							top="0"
+							bottom="0"
+							right="0"
+						/>
+					</Flex>
+				</Show>
+				<Flex
+					flexDirection="column"
+					justifyContent="center"
+					maxWidth="100%"
+					ml={{ base: '0px', lg: '300px' }}
+					px={{ base: '16px', sm: '24px', lg: '48px' }}
+					pb={{ base: '16px', sm: '24px', lg: '48px' }}
+					pt={{ base: '0px', lg: '48px' }}
+				>
+					<Text mb="16px" color="gray.50" textStyle="heading-lg">
+						Learn more about Synthetix Governance
+					</Text>
+					<Text
+						fontFamily="heading"
+						fontSize="16px"
+						lineHeight="24px"
+						color="gray.500"
+						mb="24px"
+					>
+						Explore Synthetix&apos;s governance system. Learn how decisions are
+						made through our community-elected councils and proposals (SIPs,
+						SCCPs, STPs and SRs) by visiting our documentation and joining the
+						conversation on Discord.
+					</Text>
+					<Link href={links.governanceDocs} target="_blank">
+						<Button
+							w="fit-content"
+							borderRadius="4px"
+							fontWeight={700}
+							fontSize="14px"
+							padding="10px 16px"
+							size={{ base: 'lg', md: 'md' }}
+						>
+							Governance Docs
+						</Button>
+					</Link>
+				</Flex>
+				<Show above="lg">
+					<StakingLooper
+						height="100%"
+						position="absolute"
+						left="0"
+						top="0"
+						bottom="0"
+					/>
+				</Show>
+			</Flex>
+		</Flex>
+	);
+};

src/sections/governance/features.tsx

@@ -1,45 +1,22 @@
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { Docs } from 'src/sections/governance/docs';
 
 const FEATURES = [
 	{
-		title: 'Voting Power',
+		title: 'Council Composition',
 		description:
-			"By staking SNX tokens, users gain the authority to vote within the Synthetix protocol, directly influencing its future direction. This voting power is crucial in electing representative councils that align with their vision for Synthetix's evolution.",
+			'7 seats: Strategy, Ops, Technical, Treasury, and 3 Advisory roles. Each seat carries equal voting weight of 1.00.',
 	},
 	{
-		title: 'Nomination Process',
+		title: 'Decision Making',
 		description: [
-			'The nomination is open to all; anyone interested can self-nominate for a position on one of the four councils. Candidates must use the',
-			' governance app ',
-			'during the specified election period, providing details about their qualifications and experience.',
+			'4/7 signatures required for approval of SIPs, SCCPs, STPs, and Treasury Transactions, ensuring thorough consideration of all proposals.',
 		],
 	},
 	{
 		title: 'Election Cycle',
 		description:
-			'Elections occur every epoch, a period spanning four months. During this phase, SNX stakers cast their votes, selecting the individuals they believe are best suited to guide each council.',
-	},
-	{
-		title: 'Decision-Making on Proposals',
-		description: [
-			'Once elected, Spartan Councillors have the responsibility to deliberate on',
-			' Synthetix Improvement Proposals ',
-			'(SIPs) and',
-			' Synthetix Configuration Change Proposals ',
-			'(SCCPs). These decisions are made after considering presentations and feedback from the community, gathered through the',
-			' Synthetix Discord',
-			'.',
-		],
-	},
-	{
-		title: 'Initiatives by Non-Governing Bodies ',
-		description:
-			"Apart from the governing councils, non-governing DAOs like the Treasury Council, Ambassadors, and Grants Committee undertake various initiatives within each epoch. These initiatives include allocating new grants, fostering partnerships, and managing the treasury's assets.",
-	},
-	{
-		title: 'Ongoing Cycle',
-		description:
-			'The Synthetix governance cycle is continuous, with each epoch marking the beginning of a new phase. This cycle includes the nomination of candidates, the electoral process, and the ongoing execution of roles, ensuring the constant evolution and management of the Synthetix Protocol.',
+			'6-month terms for elected seats, with elections held in October and April, balancing continuity with fresh perspectives.',
 	},
 ];
 
@@ -132,6 +109,7 @@ export default function GovernanceFeatures() {
 					);
 				})}
 			</Flex>
+			<Docs />
 		</Flex>
 	);
 }

src/sections/governance/header.tsx

@@ -31,7 +31,7 @@ export default function GovernanceHeader() {
 				zIndex={10}
 				maxW={{ md: '483px' }}
 			>
-				A Decentralized Governance
+				A New Era of Synthetix Governance
 			</Heading>
 			<Text
 				fontSize={{ base: '16px' }}
@@ -41,9 +41,9 @@ export default function GovernanceHeader() {
 				zIndex={10}
 				maxW={{ md: '483px' }}
 			>
-				Synthetix is a decentralized protocol run by governance, with
-				representative councils elected by the community, ensuring every
-				decision reflects the collective voice of its users.
+				Synthetix is a decentralized protocol governed by a streamlined Spartan
+				Council, combining community-elected members with appointed experts to
+				ensure every decision reflects the collective voice of its users
 			</Text>
 			<Link href="https://governance.synthetix.io/" rel="noopener noreferrer">
 				<Button mt={{ base: 6 }} w="fit-content" h={{ base: 12 }} zIndex={10}>

src/sections/governance/vision.tsx

@@ -0,0 +1,54 @@
+import { Button, Flex, Heading, Link, Text } from '@chakra-ui/react';
+import { InterestedLooper } from 'src/svg/InterestedLooper';
+import { links } from 'src/utils/constants';
+
+export const Vision = () => {
+	return (
+		<Flex
+			flexDir="column"
+			rounded="base"
+			boxShadow="dark-lg"
+			bg="navy.700"
+			border="1px solid"
+			borderColor="gray.900"
+			p={{ base: '6', lg: 12 }}
+			mb={{ base: '4' }}
+			mt={{ base: 4, lg: 6 }}
+			zIndex={10}
+			pos="relative"
+			overflow="hidden"
+			w="100%"
+		>
+			<InterestedLooper
+				position="absolute"
+				top="-100px"
+				right="-50px"
+				bottom="0px"
+				zIndex={0}
+				height="490px"
+				viewBox="0 0 590 488px"
+			/>
+			<Heading
+				mb={{ base: 12, lg: 4 }}
+				mt={{ base: '390px', lg: 0 }}
+				maxW={{ lg: '399px', xl: '700px' }}
+			>
+				Synthetix Vision 2025
+			</Heading>
+
+			<Text
+				display="inline"
+				fontSize={{ base: '16px' }}
+				color="gray.500"
+				maxW={{ lg: '399px', xl: '700px' }}
+			>
+				Our new roadmap and vision realigns our efforts, increases awareness in
+				the crypto community, and sets clear objectives for Synthetix's future.
+			</Text>
+
+			<Link href={links.vision} target="_blank">
+				<Button mt={{ base: '6' }}>Explore Our Vision</Button>
+			</Link>
+		</Flex>
+	);
+};

src/sections/home/collateral.tsx

@@ -33,9 +33,8 @@ export const Collateral = () => {
 					width={{ base: '100%' }}
 				>
 					<GradientText>Depositing Collateral</GradientText> with Synthetix{' '}
-					<GradientText>supports deep liquidity</GradientText>, low
-					slippage, and highly competitive trading fees for our derivatives
-					markets.{' '}
+					<GradientText>supports deep liquidity</GradientText>, low slippage,
+					and highly competitive trading fees for our derivatives markets.{' '}
 					<Box>
 						<Text mt="40px" as="div">
 							Depositors <GradientText>earn</GradientText> fees and incentives.

src/sections/home/interfaces.tsx

@@ -42,8 +42,8 @@ export const Interfaces = () => {
 						lineHeight="24px"
 						color="gray.500"
 					>
-						Stake SNX to provide liquidity to the Synthetix 
-						ecosystem, and earn incentives and fees.
+						Stake SNX to provide liquidity to the Synthetix ecosystem, and earn
+						incentives and fees.
 					</Text>
 					<LinkBox mt="16px">
 						<Flex
@@ -99,8 +99,8 @@ export const Interfaces = () => {
 						lineHeight="24px"
 						color="gray.500"
 					>
-						Deposit popular assets including SNX, USDC, ETH, and choose 
-						your exposure to earn rewards and fees.
+						Deposit popular assets including SNX, USDC, ETH, and choose your
+						exposure to earn rewards and fees.
 					</Text>
 					<LinkBox mt="16px">
 						<Flex