QA 2 round

Synthetixio · Feb 21, 2024 · 372b5b9 · 372b5b9
1 parent ff8d5f9
commit 372b5b9
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 23 deletions.
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,
@@ -78,7 +78,7 @@ const footerMenu = [
 export function Footer() {
 	return (
 		<>
-			<Show above="md">
+			<Show above="lg">
 				<Flex w="100%" flexDir="column" maxW="100%" as="footer" my={'24px'}>
 					<Flex w="100%" justifyContent="space-between">
 						<Flex gap="14" m="5" w="100%">
@@ -129,7 +129,7 @@ export function Footer() {
 					</Flex>
 				</Flex>
 			</Show>
-			<Show below="md">
+			<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/sections/governance/action.tsx b/src/sections/governance/action.tsx
@@ -4,7 +4,12 @@ import Shield from 'src/svg/Shield';
 
 export default function GovernanceAction() {
 	return (
-		<Flex flexDir="column" w="100%" py={{ base: '60px' }} pos="relative">
+		<Flex
+			flexDir="column"
+			w="100%"
+			py={{ base: '60px', lg: '100px' }}
+			pos="relative"
+		>
 			<Text
 				color="gray.500"
 				fontSize={{ base: '16px' }}
@@ -14,7 +19,7 @@ export default function GovernanceAction() {
 				SYNTHETIX GOVERNANCE
 			</Text>
 			<Heading
-				fontSize={{ base: '36px', lg: '48px' }}
+				fontSize={{ base: '36px', md: '48px' }}
 				lineHeight={{ base: '120%' }}
 				mb={{ base: 4 }}
 				w={{ base: '100%', md: '360px', lg: '525px' }}
@@ -50,12 +55,13 @@ export default function GovernanceAction() {
 				</Link>
 			</Flex>
 			<Shield
-				width={{ md: '810px', lg: '100%' }}
-				height={{ base: '450px', lg: '450px' }}
+				width={{ base: '100%', md: '810px', lg: '100%' }}
+				transform={{ base: 'scale(1.6)', md: 'unset' }}
+				height={{ base: '450px' }}
 				position={{ md: 'absolute' }}
 				top={0}
 				zIndex={1}
-				right={{ md: '-350px', lg: '-300px' }}
+				right={{ md: '-300px' }}
 			/>
 
 			<Flex

diff --git a/src/sections/governance/callout.tsx b/src/sections/governance/callout.tsx
@@ -6,20 +6,21 @@ export default function GovernanceCallout() {
 		<Flex
 			flexDir="column"
 			w="100%"
-			py={{ base: '60px', md: 20 }}
+			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', lg: '48px' }}
+				fontSize={{ base: '36px', md: '48px' }}
 				lineHeight={{ base: '120%' }}
 			>
 				The Synthetix protocol is governed by a{' '}
-				<GradientText>decentralized</GradientText> set of representative
-				councils that are <GradientText>voted on by stakers</GradientText>.
+				<GradientText>decentralized</GradientText> set of{' '}
+				<GradientText>representative councils</GradientText> that are{' '}
+				<GradientText>voted on by stakers</GradientText>.
 			</Heading>
 		</Flex>
 	);

diff --git a/src/sections/governance/ecosystem.tsx b/src/sections/governance/ecosystem.tsx
@@ -149,7 +149,7 @@ export default function GovernanceEcosystem() {
 		<Flex
 			flexDir="column"
 			w="100%"
-			py={{ base: '60px' }}
+			py={{ base: '60px', lg: '100px' }}
 			position="relative"
 			alignItems="center"
 		>
@@ -174,7 +174,7 @@ export default function GovernanceEcosystem() {
 				SYNTHETIX ECOSYSTEM
 			</Text>
 			<Heading
-				fontSize={{ base: '48px' }}
+				fontSize={{ base: '36px', md: '48px' }}
 				lineHeight={{ base: '120%' }}
 				mb={{ base: 1 }}
 				zIndex={10}
@@ -203,7 +203,7 @@ export default function GovernanceEcosystem() {
 					return (
 						<Flex
 							key={council.title.concat(council.link)}
-							maxW={{ md: '360px', lg: '604px', '2xl': '732px' }}
+							maxW={{ md: '360px', lg: '460px', xl: '604px', '2xl': '732px' }}
 							flexDir="column"
 							rounded="base"
 							boxShadow="dark-lg"

diff --git a/src/sections/governance/features.tsx b/src/sections/governance/features.tsx
@@ -48,7 +48,7 @@ export default function GovernanceFeatures() {
 		<Flex
 			position="relative"
 			flexDir="column"
-			py={{ base: '60px' }}
+			py={{ base: '60px', lg: '100px' }}
 			alignItems="center"
 		>
 			<Box
@@ -63,7 +63,7 @@ export default function GovernanceFeatures() {
 			/>
 			<Heading
 				w="100%"
-				fontSize={{ base: '36px', lg: '48px' }}
+				fontSize={{ base: '36px', md: '48px' }}
 				lineHeight={{ base: '120%' }}
 				mb={{ base: 1 }}
 				zIndex={10}
@@ -81,7 +81,7 @@ export default function GovernanceFeatures() {
 				{FEATURES.map(feature => {
 					return (
 						<Box
-							w={{ base: '100%', md: '360px', lg: '396px', '2xl': '480px' }}
+							w={{ base: '100%', md: '360px', lg: '304px', '2xl': '480px' }}
 							key={feature.title}
 							p={{ base: 4, md: 6 }}
 						>

diff --git a/src/sections/governance/header.tsx b/src/sections/governance/header.tsx
@@ -4,13 +4,18 @@ import Link from 'next/link';
 
 export default function GovernanceHeader() {
 	return (
-		<Flex flexDir="column" position="relative" pb={{ base: '60px' }} w="100%">
+		<Flex
+			flexDir="column"
+			position="relative"
+			pb={{ base: '60px', lg: '100px' }}
+			w="100%"
+		>
 			<Box
 				position="absolute"
 				width={1178}
 				height={608}
-				top={{ base: '50px' }}
-				right={{ base: '-580px', md: '-440px' }}
+				top={{ base: '50px', xl: '100px' }}
+				right={{ base: '-580px', md: '-440px', xl: '-300px' }}
 				zIndex={0}
 			>
 				<Image
@@ -21,7 +26,7 @@ export default function GovernanceHeader() {
 				/>
 			</Box>
 			<Heading
-				fontSize={{ base: '48px', lg: '60px' }}
+				fontSize={{ base: '48px', md: '60px' }}
 				mt={{ base: 56 }}
 				zIndex={10}
 				maxW={{ md: '483px' }}