diff --git a/pages/governance.tsx b/pages/governance.tsx index 716fb5f5..71d9b0f4 100644 --- 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() { Synthetix - Governance - - - - + + + + + ); diff --git a/pages/index.tsx b/pages/index.tsx index 8f177906..67e87716 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -60,7 +60,7 @@ const Home = ({ Synthetix - + {totalStakedValue && tradingVolume && swapsVolumeTotal && ( Synthetix - Decentralized Perps - + diff --git a/public/spartan-governance.svg b/public/spartan-governance.svg new file mode 100644 index 00000000..d6debd4d --- /dev/null +++ b/public/spartan-governance.svg @@ -0,0 +1,1067 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index e7ee7eed..ffaf98ba 100644 --- 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() { - + - + ); } diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index f173b59d..30c6ddec 100644 --- 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" > - -
- {children} - -
- - - ); - } +interface PageLayoutProps extends PropsWithChildren, FlexProps {} +export function PageLayout({ children, ...props }: PageLayoutProps) { return ( - -
- {children} -
+ + +
+ {children} + +
+ ); } diff --git a/src/sections/governance/action.tsx b/src/sections/governance/action.tsx new file mode 100644 index 00000000..62ddbf59 --- /dev/null +++ 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 ( + + + SYNTHETIX GOVERNANCE + + + Participate in Governance + + + Play a pivotal role in Synthetix Governance. As a staker, your votes in + council elections and contributions to proposals are essential, steering + the protocol's direction and evolution. + + + + + + + + + + + + + + Want to hear all about Governance updates? + + + Learn more about governance by reading the documentation on each + council and how they interact with each other + + + + + + + ); +} diff --git a/src/sections/governance/callout.tsx b/src/sections/governance/callout.tsx new file mode 100644 index 00000000..b75fc31f --- /dev/null +++ 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 ( + + + SYNTHETIX GOVERNANCE + + + The Synthetix protocol is governed by a{' '} + decentralized set of{' '} + representative councils that are{' '} + voted on by stakers. + + + ); +} diff --git a/src/sections/governance/ecosystem.tsx b/src/sections/governance/ecosystem.tsx new file mode 100644 index 00000000..3185434a --- /dev/null +++ b/src/sections/governance/ecosystem.tsx @@ -0,0 +1,347 @@ +import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'; +import Link from 'next/link'; +import { InterestedLooper } from 'src/svg/InterestedLooper'; + +const COUNCILS = [ + { + title: 'Spartan Council', + icon: ( + + + + + + + ), + description: [ + 'The Spartan Council (SC), established via ', + { link: 'https://sips.synthetix.io/sips/sip-93/', text: 'SIP-93' }, + ', is the central governing body of the Synthetix protocol. The SC votes on Synthetix Improvement Proposals (SIPs) and Synthetix Configuration Change Proposal (SCCPs). The SC is responsible for conducting SIP/SCCP interviews, debating the implications of proposed changes, coordinating protocol changes with core contributors, and hosting periodic community governance meetings.', + ], + link: 'https://governance.synthetix.io/#/councils/spartan', + }, + { + title: 'Grants Council', + icon: ( + + + + + + + + + ), + description: [ + 'The Grants Council, established via ', + { link: 'https://sips.synthetix.io/sips/sip-39/', text: 'SIP-39' }, + ', is responsible for public goods funding through grants, initiative bounties, or competition prizes. It is a value-based entity, whose ultimate goal in funding projects is to produce publicly accessible, beneficial, high-quality work where profit margins are not the priority. Projects are chosen not based on the value they can extract but instead on the value they can add to the community.', + ], + link: 'https://governance.synthetix.io/#/councils/grants', + }, + { + title: 'Treasury Council', + icon: ( + + + + + + + + ), + description: [ + 'The Treasury Council, established via ', + { link: 'https://sips.synthetix.io/sips/sip-155/', text: 'SIP-155' }, + ", provides resources for the protocol's growth and expansion. This includes managing the treasury in a way that allows continuity of funding for protocol costs (on-chain/off-chain), council and Core Contributor Stipends, ecosystem incentives, including Grants Council funding, and other discretionary incentives. The members of the council manage the treasury through a gnosis-safe multi-sig.", + ], + link: 'https://governance.synthetix.io/#/councils/treasury', + }, + { + title: 'Ambassador Council', + icon: ( + + + + + + + ), + description: [ + 'The Ambassador Council, established via ', + { link: 'https://sips.synthetix.io/sips/sip-157/', text: 'SIP-157' }, + " is responsible for promoting Synthetix's interest in the DeFi ecosystem. This advocation comes through two primary means: governance and partnerships. Governance includes seeking governance power in protocols that may be beneficial for Synthetix, and voting for proposals in the interest of the community. Partnerships include working with Synthetix integrators to help them integrate within the Synthetix Ecosystem.", + ], + link: 'https://governance.synthetix.io/#/councils/ambassador', + }, +]; + +export default function GovernanceEcosystem() { + return ( + + + + SYNTHETIX ECOSYSTEM + + + Governing Councils + + + The Synthetix Protocol is governed by four councils, each responsible + for a core aspect of a DAO. + + + {COUNCILS.map(council => { + return ( + + {council.icon} + {council.title} + + {council.description.map(description => { + if (typeof description === 'object') + return ( + + + {description.text} + + + ); + return ( + + {description} + + ); + })} + + + + + + ); + })} + + + + + + Learn more about Synthetix Governance + + + + Explore Synthetix's governance system. Learn how decisions are + made through our community-elected councils and proposals (SIPs and + SCCPs) by visiting our documentation and joining the conversation on + Discord. + + + + + + + + ); +} diff --git a/src/sections/governance/features.tsx b/src/sections/governance/features.tsx new file mode 100644 index 00000000..97272044 --- /dev/null +++ b/src/sections/governance/features.tsx @@ -0,0 +1,137 @@ +import { Box, Flex, Heading, Text } from '@chakra-ui/react'; + +const FEATURES = [ + { + title: 'Voting Power', + 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.", + }, + { + title: 'Nomination Process', + 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.', + ], + }, + { + 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.', + }, +]; + +export default function GovernanceFeatures() { + return ( + + + + How does Governance work? + + + + {FEATURES.map(feature => { + return ( + + + {feature.title} + + {Array.isArray(feature.description) ? ( + feature.description.map((d, index) => { + if (index % 2 === 1) + return ( + + {d} + + ); + return ( + + {d} + + ); + }) + ) : ( + + {feature.description} + + )} + + ); + })} + + + ); +} diff --git a/src/sections/governance/furtherLinking.tsx b/src/sections/governance/furtherLinking.tsx deleted file mode 100644 index a03b0a7d..00000000 --- a/src/sections/governance/furtherLinking.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { ExternalLink, Section } from 'src/styles/common'; -import SvgArrow from 'src/svg/Arrow'; -import PoweredByGrid from 'src/svg/PoweredByGrid'; -import styled from 'styled-components'; - -export default function FurtherLinking() { - return ( - - - - - - GO TO - Staking - - - - - - GO TO - Governance - - - - - - ); -} - -const StyledFurtherLinkingWrapper = styled(Section)` - position: relative; - width: 100%; - height: 300px; - background-color: ${({ theme }) => theme.colors.bgBlackHighlighted}; -`; - -const StyledGrid = styled(PoweredByGrid)` - width: 100%; - position: absolute; - bottom: 0px; - height: auto; - z-index: -1; -`; - -const StyledButtonWrapper = styled.div` - display: flex; - justify-content: center; - width: 100%; -`; - -export const StyledButtonWrapperLinearGradient = styled.div<{ - last?: boolean; - height?: string; - margin?: string; - width?: string; -}>` - height: ${({ height }) => (height ? height : '84px')}; - width: ${({ width }) => (width ? width : '404px')}; - border-radius: 5px; - background: linear-gradient(90deg, #ea20ff 0%, #00d1ff 100%); - box-shadow: 0px 0px 5px ${({ theme }) => theme.colors.cyan}; - ${({ last }) => (last ? 'margin-left: 32px' : '')}; - display: flex; - justify-content: center; - align-items: center; - ${({ margin }) => margin && `margin: ${margin}`} -`; - -const StyledLinkButtons = styled(ExternalLink)<{ last?: boolean }>` - position: relative; - padding: 0px 40px; - cursor: pointer; - display: flex; - flex-direction: column; - ${({ last }) => (last ? 'align-items: flex-start' : 'align-items: flex-end')}; - justify-content: center; - max-width: 400px; - width: 100%; - background-color: #0b0b22; - height: 80px; - border-radius: 5px; -`; - -const StyledSmallButtonLabel = styled.span` - display: block; - color: white; - font-family: Inter; - font-size: 12px; -`; - -const StyledLargeButtonLabel = styled.span` - display: block; - color: ${({ theme }) => theme.colors.cyan}; - font-family: Inter; - font-size: 18px; - font-weight: bold; -`; - -const StyledLeftArrow = styled(SvgArrow)` - position: absolute; - left: 40px; - transform: rotate(180deg); - bottom: 34%; -`; - -const StyledRightArrow = styled(SvgArrow)` - position: absolute; - right: 40px; - top: 36%; -`; diff --git a/src/sections/governance/header.tsx b/src/sections/governance/header.tsx new file mode 100644 index 00000000..851abcb2 --- /dev/null +++ b/src/sections/governance/header.tsx @@ -0,0 +1,55 @@ +import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'; +import Image from 'next/image'; +import Link from 'next/link'; + +export default function GovernanceHeader() { + return ( + + + + + + A Decentralized Governance + + + 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. + + + + + + ); +} diff --git a/src/sections/governance/main.tsx b/src/sections/governance/main.tsx deleted file mode 100644 index 0b2bd172..00000000 --- a/src/sections/governance/main.tsx +++ /dev/null @@ -1,1531 +0,0 @@ -import { useEffect, useState } from 'react'; -import { - ExternalLink, - FlexDiv, - FlexDivCentered, - FlexDivCol, - PageTitle, - Section, - SectionTitle, - Subline, -} from 'src/styles/common'; -import Ellipse from 'src/svg/Ellipse'; -import LinkOffIcon from 'src/svg/LinkOffIcon'; -import SvgPlus from 'src/svg/Plus'; -import { CyanSpotlight, PinkSpotLight } from 'src/svg/Spotlights'; -import styled from 'styled-components'; -import { StyledButtonWrapperLinearGradient } from './furtherLinking'; -import { ArrowPath, ArrowWrapper } from 'src/components'; - -export default function GovernanceMain() { - const [activeArrowIds, setActiveArrowIds] = useState(['']); - - const setActiveArrows = (ids: string[]) => { - setActiveArrowIds(['']); - // trigger animation from the beginning - setTimeout(() => { - setActiveArrowIds(ids); - }, 1); - }; - - useEffect(() => { - if (window?.innerWidth < 940 && !!document) { - if (document.getElementsByTagName('meta').item(0)?.content) - document.getElementsByTagName('meta').item(0)!.content = 'width=940px'; - } - }, []); - - return ( - - - - - - Governance - - Synthetix protocol is governed, maintained and built by a combination - of community members, core contributors, and several elected - committees and councils that are voted on by SNX stakers. Learn more - about how these governing bodies interact, what they're - responsible for, and how they influence protocol improvements via - SIPs, SCCPs and other work. - - - - - COUNCIL MEMBERS - - View the history of past council elections
and vote in - any currently open elections. - - - - - - - SYNTHETIX SCCP/SIP - - View the current status of all SCCPs
- and SIPs. - - - - - - - - - SYNTHETIX FORUM - - Join the community governance discussion
in realtime. - - - - - - - SCCP / SIP VOTING RECORDS - - View the voting history of all
governance proposals. - - - - - - - Governance Structure - - The Synthetix governance structure is composed of Councils, Committees, - Core Contributors and a DAO. Each governance component is assigned a - specific aspect of protocol governance. Councils are directly elected by - SNX stakers, while other governance bodies are appointed according to - the existing governance procedures. All of the components work together - to ensure that the protocol is governed in a fair, transparent and - legitimate way in accordance with the direction provided by token - holders. - - - {/* FIRST ROW */} - - - - - - setActiveArrows([ - 'sips-author', - 'feasibility-risk', - 'snx-community', - 'spartan-council-plus-sign', - ]) - } - > - Author SIPs / SCCPs - - Stake SNX - - setActiveArrows([ - 'propose-grants', - 'review-grant-submissions', - 'snx-community', - 'grants-dao', - ]) - } - > - Propose Grants - - - - setActiveArrows([ - 'treasury-council-plus-sign', - 'snx-community', - 'spartan-council-plus-sign', - 'ambassadors-council-plus-sign', - 'grants-dao', - 'propose-grants', - 'sips-author', - 'feasibility-risk', - 'review-grant-submissions', - 'snx-community-treasury-council-plus-sign-main-arrow', - 'snx-community-spartan-council-plus-sign-main-arrow', - 'snx-community-ambassadors-council-plus-sign-main-arrow', - 'snx-community-grants-dao-main-arrow', - ]) - } - > - - - - SNX - Community - Elect Members - - - - { - setActiveArrows([ - 'implement-sips', - 'core-contributors', - 'feasibility-risk', - 'vouch-for-cc', - 'execute-sccps', - 'execute-sips', - 'vote-sips', - 'hire-cc', - 'core-contributor-committee', - 'protocol-dao', - 'spartan-council-plus-sign', - 'pay-cc', - 'elect-committee', - ]); - }} - > - - - - CORE - Contributors - - setActiveArrows([ - 'implement-sips', - 'core-contributors', - 'feasibility-risk', - 'vouch-for-cc', - 'execute-sccps', - 'execute-sips', - 'vote-sips', - 'hire-cc', - 'core-contributor-committee', - 'protocol-dao', - 'spartan-council-plus-sign', - 'pay-cc', - 'elect-committee', - ]) - } - > - Elect Committee - - - - Signal Priorities - - setActiveArrows([ - 'implement-sips', - 'vote-sips', - 'execute-sips', - 'execute-sccps', - 'core-contributors', - 'spartan-council-plus-sign', - ]) - } - > - Implements SIPs / SCCPs - - Protocol Work - - setActiveArrows([ - 'vouch-for-cc', - 'hire-cc', - 'core-contributors', - 'core-contributor-committee', - ]) - } - > - Vouch for Potential CC - - - - - - {/* SECOND ROW */} - - - - - - setActiveArrows([ - 'spartan-council-plus-sign', - 'vote-sips', - 'implement-sips', - 'core-contributors', - ]) - } - > - Vote on SIPs / SCCPs - - - setActiveArrows([ - 'core-contributors', - 'feasibility-risk', - 'sips-author', - 'snx-community', - 'spartan-council-plus-sign', - 'reviewing-sips', - 'risk-committee-plus-sign', - ]) - } - > - Feasibility & Risk Assessment
on SIPs / SCCPs - - - - setActiveArrows([ - 'spartan-council-plus-sign', - 'snx-community', - 'treasury-council-plus-sign', - 'vote-sips', - 'implement-sips', - 'feasibility-risk', - 'core-contributors', - 'sips-author', - 'reviewing-sips', - 'risk-committee-plus-sign', - 'budget-funding', - 'snx-community-spartan-council-plus-sign-main-arrow', - 'treasury-council-plus-sign-spartan-council-plus-sign-main-arrow', - 'spartan-council-arrow-label', - 'protocol-dao', - ]) - } - > - - - - Spartan - - COUNCIL - - { - e.stopPropagation(); - setActiveArrows([ - 'spartan-council-plus-sign', - 'snx-community', - 'treasury-council-plus-sign', - 'vote-sips', - 'implement-sips', - 'feasibility-risk', - 'core-contributors', - 'sips-author', - 'reviewing-sips', - 'risk-committee-plus-sign', - 'budget-funding', - 'snx-community-spartan-council-plus-sign-main-arrow', - 'treasury-council-plus-sign-spartan-council-plus-sign-main-arrow', - 'spartan-council-arrow-label', - 'protocol-dao', - ]); - }} - > - Induct Members - - - - - - setActiveArrows([ - 'core-contributor-committee', - 'core-contributors', - 'pay-cc', - 'hire-cc', - 'vouch-for-cc', - 'treasury-council-plus-sign', - 'budget-funding', - 'treasury-council-plus-sign-core-contributor-committee-plus-sign-main-arrow', - 'elect-committee', - ]) - } - > - { - setActiveArrows([ - 'core-contributor-committee-plus-sign', - 'core-contributors', - 'pay-cc', - 'elect-committee', - ]); - }} - > - Pay Contributors - - - - - - CORE - - Contributor - Committee - - - Manage CC Pay Packages - Manage CC Roadmap & Vision - Negotiate Partnerships - - setActiveArrows([ - 'hire-cc', - 'vouch-for-cc', - 'core-contributor-committee', - ]) - } - > - Hire Core Contributors - - - - - - {/* THIRD ROW */} - - - - - Manage Ecosystem Governance - - Ecosystem Governance Participation - - Advocate Ecosystem Partnership - - - setActiveArrows([ - 'ambassadors-council-plus-sign', - 'snx-community', - 'treasury-council-plus-sign', - 'budget-funding', - 'snx-community-ambassadors-council-plus-sign-main-arrow', - 'treasury-council-plus-sign-ambassadors-council-plus-sign-main-arrow', - ]) - } - > - - - - Ambassadors - - COUNCIL - - - - - - setActiveArrows([ - 'protocol-dao', - 'execute-sips', - 'execute-sccps', - 'implement-sips', - 'treasury-council-plus-sign', - 'budget-funding', - 'treasury-council-plus-sign-protocol-dao-plus-sign-main-arrow', - 'spartan-council-arrow-label', - 'spartan-council-plus-sign', - ]) - } - > - - - - protocol - - DAO - - - - - setActiveArrows([ - 'execute-sips', - 'protocol-dao', - 'implement-sips', - ]) - } - > - Execute SIPs - - - setActiveArrows([ - 'execute-sccps', - 'protocol-dao', - 'implement-sips', - ]) - } - > - Execute SCCPs - - - - - - {/* FOURTH ROW */} - - - - - Sponsor Ecosystem Events - Create Initiatives - - setActiveArrows([ - 'review-grant-submissions', - 'work-on-grants', - 'community-propose-grants', - 'propose-grants', - 'grants-dao', - 'community-contributors', - 'pay-contributors', - ]) - } - > - Review Grant Submissions - - - - setActiveArrows([ - 'grants-dao', - 'community-contributors', - 'pay-contributors', - 'review-grant-submissions', - 'propose-grants', - 'work-on-grants', - 'community-propose-grants', - 'snx-community', - 'treasury-council-plus-sign', - 'pay-contributors', - 'budget-funding', - 'snx-community-grants-dao-main-arrow', - 'treasury-council-plus-sign-grants-dao-main-arrow', - ]) - } - > - - - - grants - - COUNCIL - - { - e.stopPropagation(); - setActiveArrows([ - 'grants-dao', - 'community-contributors', - 'pay-contributors', - 'review-grant-submissions', - 'propose-grants', - 'work-on-grants', - 'community-propose-grants', - 'snx-community', - 'treasury-council-plus-sign', - 'pay-contributors', - 'budget-funding', - 'snx-community-grants-dao-main-arrow', - 'treasury-council-plus-sign-grants-dao-main-arrow', - ]); - }} - > - Pay Contributors - - - - - - setActiveArrows([ - 'risk-committee-plus-sign', - 'reviewing-sips', - 'feasibility-risk', - 'treasury-council-plus-sign', - 'budget-funding', - 'treasury-council-plus-sign-risk-committee-plus-sign-main-arrow', - ]) - } - > - - - - Risk - - COMMITTEE - - - - Execute SIPs - - setActiveArrows([ - 'feasibility-risk', - 'reviewing-sips', - 'risk-committee-plus-sign', - ]) - } - > - Reviewing SIPs Risk - - - - - - {/* FIFTH ROW */} - - - - - - setActiveArrows([ - 'work-on-grants', - 'community-contributors', - 'review-grant-submissions', - ]) - } - > - Work on Grants - - - setActiveArrows([ - 'community-propose-grants', - 'review-grant-submissions', - 'community-contributors', - ]) - } - > - Propose Grants - - Work on Initiatives - - - setActiveArrows([ - 'pay-contributors', - 'community-contributors', - 'grants-dao', - 'work-on-grants', - 'review-grant-submissions', - 'community-propose-grants', - ]) - } - > - COMMUNITY - Contributors - - - - - setActiveArrows([ - 'budget-funding', - 'spartan-council-plus-sign', - 'core-contributor-committee', - 'ambassadors-council-plus-sign', - 'protocol-dao', - 'grants-dao', - 'risk-committee-plus-sign', - 'treasury-council-plus-sign', - 'snx-community-treasury-council-plus-sign-main-arrow', - 'snx-community', - 'treasury-council-plus-sign-grants-dao-main-arrow', - 'treasury-council-plus-sign-ambassadors-council-plus-sign-main-arrow', - 'treasury-council-plus-sign-spartan-council-plus-sign-main-arrow', - 'treasury-council-plus-sign-risk-committee-plus-sign-main-arrow', - 'treasury-council-plus-sign-protocol-dao-plus-sign-main-arrow', - 'treasury-council-plus-sign-core-contributor-committee-plus-sign-main-arrow', - ]) - } - > - - - - Treasury - - COUNCIL - - - setActiveArrows([ - 'budget-funding', - 'spartan-council-plus-sign', - 'core-contributor-committee', - 'ambassadors-council-plus-sign', - 'protocol-dao', - 'grants-dao', - 'risk-committee-plus-sign', - 'treasury-council-plus-sign', - 'snx-community-treasury-council-plus-sign-main-arrow', - 'snx-community', - 'treasury-council-plus-sign-grants-dao-main-arrow', - 'treasury-council-plus-sign-ambassadors-council-plus-sign-main-arrow', - 'treasury-council-plus-sign-spartan-council-plus-sign-main-arrow', - 'treasury-council-plus-sign-risk-committee-plus-sign-main-arrow', - 'treasury-council-plus-sign-protocol-dao-plus-sign-main-arrow', - 'treasury-council-plus-sign-core-contributor-committee-plus-sign-main-arrow', - ]) - } - > - Provides Budget & Funding - - - - Manage Treasury - Fund Incentives - Strategy & Deal Making - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* Main Arrows */} - - - - - - - - - - - - - - - - - - - ); -} - -const GovernanceSection = styled(Section)` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding-top: 24px; - background-color: ${({ theme }) => theme.colors.bgBlackHighlighted}; -`; - -const GovernancePageTitle = styled(PageTitle)` - text-align: center; - width: 100%; -`; - -const BackgroundImageWrapper = styled.div` - position: relative; - padding-top: 116px; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; -`; - -const StyledEllipse = styled(Ellipse)` - position: absolute; - top: -50px; - z-index: -1; -`; - -const StyledPinkSpotLight = styled(PinkSpotLight)` - position: absolute; - top: -50px; - left: 0; -`; - -const StyledCyanSpotlight = styled(CyanSpotlight)` - position: absolute; - top: -50px; - right: 0; -`; - -const StyledGovernanceSubline = styled(Subline)` - text-align: center; - max-width: 900px; -`; - -const StyledLinkOffIcon = styled(LinkOffIcon)` - position: absolute; - top: 20px; - right: 20px; -`; - -const StyledLinkButtons = styled(ExternalLink)<{ last?: boolean }>` - position: relative; - padding: 24px; - cursor: pointer; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - max-width: 400px; - width: 100%; - background-color: #0b0b22; - height: 120px; - border-radius: 5px; -`; - -const StyledButtonLabel = styled.h4` - font-family: GT America; - font-style: normal; - font-stretch: expanded; - font-weight: bold; - font-size: 14px; - color: white; -`; - -const StyledButtonText = styled.p` - font-family: Inter; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 150%; -`; - -const GraphContentWrapper = styled.div` - width: 900px; - position: relative; - padding: 32px 24px; -`; - -const Row = styled(FlexDiv)<{ rowNumber: number }>` - margin-bottom: 24px; - ${({ rowNumber }) => { - switch (rowNumber) { - case 1: - return 'justify-content: flex-end;'; - case 2: - case 3: - case 4: - return 'width: 100%;'; - case 5: - return 'justify-content: start; width: 100%; margin-top: 50px;'; - default: - return 'justify-content: start; width: 100%'; - } - }} -`; - -const DAOCircle = styled.div<{ focus?: boolean }>` - position: relative; - border: 5px solid ${({ theme }) => theme.colors.pink}; - width: 110px; - height: 110px; - border-radius: 50%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding-top: 8px; - background-color: #1d1d3d; - cursor: pointer; - transition: all 200ms linear; - ${({ theme, focus }) => - focus ? `box-shadow: 0px 0px 30px ${theme.colors.pink}` : ''}; -`; - -const CommitteeCircle = styled.div<{ - edge: 'left' | 'right' | 'topLeft'; - first?: boolean; - focus?: boolean; -}>` - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - background-color: #1d1d3d; - min-width: 110px; - min-height: 110px; - border: 3px solid ${({ theme }) => theme.colors.cyan}; - cursor: pointer; - transition: all 200ms linear; - ${({ theme, focus }) => - focus ? `box-shadow: 0px 0px 30px ${theme.colors.cyan}` : ''}; - ${({ first }) => (first ? 'margin-right: auto;' : '')} - ${({ edge }) => { - if (edge === 'right') { - return 'border-radius: 50% 50% 0;'; - } else if (edge === 'left') { - return 'border-radius: 50% 50% 50% 0;'; - } else { - return 'border-radius: 0 50% 50% 50%;'; - } - }} -`; - -const DAOActionCircle = styled.div<{ focus?: boolean }>` - height: 20px; - width: fit-content; - border-radius: 10px; - padding: 0px 8px; - white-space: nowrap; - font-size: 12px; - text-align: center; - cursor: pointer; - border: 1px solid ${({ theme }) => theme.colors.green}; - background-color: ${({ theme }) => theme.colors.bgBlack}; - transition: all 200ms linear; - ${({ theme, focus }) => - focus ? `box-shadow: 0px 0px 20px ${theme.colors.green}` : ''}; -`; - -const DAOPlusSignWrapper = styled.div<{ - position?: 'top' | 'bottomRight' | 'bottomLeft' | 'topLeft'; -}>` - display: flex; - justify-content: center; - align-items: center; - position: absolute; - border-radius: 50%; - z-index: 10; - background-color: ${({ theme }) => theme.colors.cyan}; - ${({ position }) => { - if (position === 'top') { - return ` - top: -12px; - right: 36px; - width: 24px; - height: 24px; - `; - } else if (position === 'bottomRight') { - return ` - bottom: -11px; - right: -13px; - width: 24px; - height: 24px; - `; - } else if (position === 'topLeft') { - return ` - top: -12px; - left: -14px; - width: 24px; - height: 24px; - `; - } else { - return ` - bottom: -11px; - left: -13px; - width: 24px; - height: 24px; - `; - } - }} -`; - -const DAODutiesCircle = styled.div<{ - addMarginBottom?: boolean; - addMarginTop?: boolean; - focus?: boolean; -}>` - border: 1px solid ${({ theme }) => theme.colors.lightViolet}; - width: fit-content; - color: ${({ theme }) => theme.colors.lightViolet}; - border-radius: 10px; - padding: 2px 8px; - font-size: 11px; - margin-bottom: ${({ addMarginBottom }) => (addMarginBottom ? '8px' : '0px')}; - margin-top: ${({ addMarginTop }) => (addMarginTop ? '8px' : '0px')}; - cursor: pointer; - transition: all 200ms linear; - ${({ theme, focus }) => - focus ? `box-shadow: 0px 0px 20px ${theme.colors.cyan}` : ''}; -`; - -const DAODescription = styled(FlexDivCol)<{ alignItems?: 'end' | 'start' }>` - align-items: ${({ alignItems }) => - alignItems === 'end' ? 'flex-end' : 'flex-start'}; - min-width: 190px; - font-size: 11px; -`; - -const StyledText = styled.span<{ bold?: boolean; color?: 'pink' | 'white' }>` - color: ${({ theme, color }) => - color === 'white' ? 'white' : theme.colors.pink}; - font-weight: ${({ bold }) => (bold ? 900 : 0)}; -`; - -const DAOWrapper = styled(FlexDiv)<{ first?: boolean; lastRow?: boolean }>` - align-items: center; - height: 110px; - margin-bottom: 20px; - border-radius: 5px; - transition: all 300ms ease-in-out; - width: auto; - ${({ first }) => (first ? 'margin-right: auto;' : '')} - ${({ lastRow }) => (lastRow ? 'margin-right: 110px;' : '')} - > * { - margin-right: 16px; - } -`; - -const ArrowLabel = styled.div<{ - color?: 'cyan' | 'pink' | 'green'; - top?: string; - left?: string; - focus?: boolean; -}>` - position: absolute; - top: ${({ top }) => (top ? top : '0px')}; - left: ${({ left }) => (left ? left : '0px')}; - background-color: ${({ theme }) => theme.colors.bgBlack}; - border-radius: 10px; - width: fit-content; - padding: 0px 8px; - border: 1px solid - ${({ color, theme }) => - color ? theme.colors[color] : theme.colors.lightViolet}; - z-index: 10; - white-space: nowrap; - cursor: pointer; - font-size: 11px; - transition: all 200ms linear; - ${({ theme, focus, color }) => - focus && color ? `box-shadow: 0px 0px 20px ${theme.colors[color]}` : ''}; -`; diff --git a/src/sections/governance/table.tsx b/src/sections/governance/table.tsx deleted file mode 100644 index 9dfde95c..00000000 --- a/src/sections/governance/table.tsx +++ /dev/null @@ -1,263 +0,0 @@ -import { Section } from 'src/styles/common'; -import GradientLine from 'src/svg/GradientLine'; -import styled from 'styled-components'; - -export default function Table() { - return ( - - - - DAOs &
- Councils - - - - - - Community &
Core Contributors - - - - {/* First Row */} - - - Core Contributors
Committee (CCC) - - - - Manage CC Pay Packages - Manage CC Road Map & Vision - Negotiate Partnerships - Hire Core Contributors - Pay Core Contributors - - - Signal Priorities - - Implement SIPs / SCCPs - - Protocol Work - General & Technical - - Vouch for potential CC - - - Elect CC Committee - - - - - Core Contributors
(CCs) - - - {/* Second Row */} - - Treasury Council - - - Manage Treasury - Fund Incentives - Strategy & Deal Making - Provide Budget & Funding to - pDAO, GC, AC, SC, CCC, RC - - - - Work on Initiatives - - - Work on Grants - - - - - Community Contributors - - - {/* Third Row */} - - Protocol DAO - - - Execute SIPs - Execute SCCPs - - - - Author SIPs / SCCPs - - Stake SNX - - Propose Grants - - - Elect GC, AC, SC, & TC, members - - - - SNX Community - - {/* Fourth Row */} - - Spartan Council - - - - Vote on SIPs / SCCPs Feasibility & - - - Risk Assessment on SIPs / SCCPs - - Induct pDAO members - - - {/* Fifth Row */} - - Grants Council - - - Sponsor Ecosystem Events - Create Initiatives - Review Grant Submissions - Pay Community Contributors - - - {/* Sixth Row */} - - Ambassador Council - - - Participate & Manage Ecosystem Governance - Advocate Ecosystem Partnerships - - - {/* Seventh Row */} - - Risk Committee - - - Creating Risk Evaluation Processes - Reviewing SIPs Risk - - - - - ); -} - -const StyledTableSection = styled(Section)` - background-color: ${({ theme }) => theme.colors.bgBlackHighlighted}; - display: flex; - flex-direction: column; - align-items: center; -`; - -const DAOToCommunityGradientWrapper = styled.div` - width: 100%; - max-width: 1000px; - display: flex; - justify-content: space-evenly; - align-items: center; -`; - -const StyledLabel = styled.h3<{ color?: 'cyan' | 'pink' }>` - font-family: Inter; - font-style: normal; - font-weight: bold; - font-size: 18px; - line-height: 23px; - color: ${({ color, theme }) => theme.colors[color ? color : 'cyan']}; - text-align: ${({ color }) => (color === 'cyan' ? 'end' : 'start')}; - margin: 0 18px; - min-width: 190px; -`; - -const StyledCircle = styled.div<{ color?: 'cyan' | 'pink' }>` - border-radius: 50%; - min-width: 21px; - min-height: 21px; - background-color: ${({ color, theme }) => - theme.colors[color ? color : 'cyan']}; -`; - -const DAOAndCommunityDutiesWrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - max-width: 900px; -`; - -const DutiesRow = styled.div` - display: flex; - align-items: center; - width: 100%; - margin-bottom: 48px; -`; - -const StyledDutyEntity = styled.h4<{ color?: 'cyan' | 'pink' }>` - color: ${({ color, theme }) => theme.colors[color ? color : 'cyan']}; - text-align: ${({ color }) => (color === 'cyan' ? 'end' : 'start')}; - font-family: Inter; - font-style: normal; - font-weight: 600; - font-size: 14px; - line-height: 20px; - width: 130px; - margin-right: ${({ color }) => color === 'cyan' && '55px'}; -`; - -const StyledVerticalLineCyan = styled.span` - height: 100px; - width: 1px; - margin-right: 25px; - background-image: linear-gradient( - 0deg, - hsl(253deg 81% 10%) 0%, - hsl(221deg 61% 22%) 10%, - hsl(209deg 69% 31%) 20%, - hsl(201deg 84% 38%) 30%, - hsl(195deg 100% 43%) 40%, - hsl(191deg 100% 50%) 50%, - hsl(195deg 100% 43%) 60%, - hsl(201deg 84% 38%) 70%, - hsl(209deg 69% 31%) 80%, - hsl(221deg 61% 22%) 90%, - hsl(253deg 81% 10%) 100% - ); -`; - -const StyledVerticalLinePink = styled.span` - height: 100px; - width: 1px; - margin-left: 25px; - margin-right: 55px; - background-image: linear-gradient( - 0deg, - hsl(253deg 81% 10%) 0%, - hsl(255deg 58% 22%) 10%, - hsl(266deg 58% 33%) 20%, - hsl(277deg 61% 43%) 30%, - hsl(286deg 70% 51%) 40%, - hsl(295deg 100% 56%) 50%, - hsl(286deg 70% 51%) 60%, - hsl(277deg 61% 43%) 70%, - hsl(266deg 58% 33%) 80%, - hsl(255deg 58% 22%) 90%, - hsl(253deg 81% 10%) 100% - ); -`; - -const StyledDutiesWrapper = styled.div` - display: flex; - flex-direction: column; -`; - -const StyledDuty = styled.span<{ color?: string; isLast?: boolean }>` - color: ${({ color, theme }) => (color ? theme.colors[color] : 'white')}; - font-family: Inter; - font-style: normal; - font-weight: 300; - font-size: 12px; - line-height: 20px; - text-align: ${({ isLast }) => isLast && 'end'}; -`; diff --git a/src/sections/home/interested.tsx b/src/sections/home/interested.tsx index 29d7df62..1d213a71 100644 --- a/src/sections/home/interested.tsx +++ b/src/sections/home/interested.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Link, Show, Text, Image } from '@chakra-ui/react'; +import { Button, Flex, Link, Show, Text, Image, Box } from '@chakra-ui/react'; import { InterestedLooper } from 'src/svg/InterestedLooper'; import { links } from 'src/utils/constants'; @@ -13,6 +13,7 @@ export const Interested = () => { position="relative" w="100%" flexDirection={{ base: 'column', lg: 'row' }} + overflow="hidden" > @@ -76,12 +77,13 @@ export const Interested = () => { diff --git a/src/svg/InterestedLooper.tsx b/src/svg/InterestedLooper.tsx index 36d61ca1..ecf1114b 100644 --- a/src/svg/InterestedLooper.tsx +++ b/src/svg/InterestedLooper.tsx @@ -15,1682 +15,1583 @@ export const InterestedLooper = ({ > diff --git a/src/svg/Shield.tsx b/src/svg/Shield.tsx new file mode 100644 index 00000000..2e29d103 --- /dev/null +++ b/src/svg/Shield.tsx @@ -0,0 +1,1709 @@ +import { Icon, IconProps } from '@chakra-ui/react'; +import React from 'react'; + +const Shield = ({ + width = '1776px', + height = '927px', + ...props +}: IconProps): JSX.Element => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +type Props = {} & React.SVGProps; +export default Shield;