From 40a52063177af828e821e98304bf4586d57f1d05 Mon Sep 17 00:00:00 2001
From: fritzschoff <fritzschoff@icloud.com>
Date: Wed, 7 Feb 2024 14:47:06 +0000
Subject: [PATCH] updated other screen sizes

---
 src/sections/governance/ecosystem.tsx | 180 +++++++++++++-------------
 src/sections/governance/features.tsx  |  86 ++++++------
 src/sections/governance/header.tsx    |  12 +-
 3 files changed, 149 insertions(+), 129 deletions(-)

diff --git a/src/sections/governance/ecosystem.tsx b/src/sections/governance/ecosystem.tsx
index 21b446c0..a73af63f 100644
--- a/src/sections/governance/ecosystem.tsx
+++ b/src/sections/governance/ecosystem.tsx
@@ -146,13 +146,7 @@ const COUNCILS = [
 
 export default function GovernanceEcosystem() {
 	return (
-		<Flex
-			flexDir="column"
-			w="100%"
-			my={{ base: 10 }}
-			position="relative"
-			overflow="hidden"
-		>
+		<Flex flexDir="column" w="100%" my={{ base: 10 }} position="relative">
 			<Box
 				position="absolute"
 				bgGradient="linear-gradient(44deg, #EE2EFF 0%, #5744EA 100%)"
@@ -161,8 +155,8 @@ export default function GovernanceEcosystem() {
 				zIndex={0}
 				borderRadius="100%"
 				filter="blur(250px)"
-				top="200px"
-				left="-200px"
+				top="300px"
+				left={{ base: '-200px', md: '-100px' }}
 			/>
 			<Text
 				color="gray.500"
@@ -189,88 +183,99 @@ export default function GovernanceEcosystem() {
 				The Synthetix Protocol is governed by four councils, each responsible
 				for a core aspect of a DAO.
 			</Text>
-			{COUNCILS.map(council => {
-				return (
-					<Flex
-						key={council.title.concat(council.link)}
-						flexDir="column"
-						rounded="base"
-						boxShadow="lg"
-						bg="navy.700"
-						border="1px solid"
-						borderColor="gray.900"
-						p={{ base: '6' }}
-						mb={{ base: '4' }}
-						zIndex={1}
-					>
-						{council.icon}
-						<Heading my={{ base: 4 }}>{council.title}</Heading>
-						<Box>
-							{council.description.map(description => {
-								if (typeof description === 'object')
+			<Flex
+				flexDir={{ base: 'column', md: 'row' }}
+				flexWrap={{ md: 'wrap' }}
+				gap={{ md: 4 }}
+			>
+				{COUNCILS.map(council => {
+					return (
+						<Flex
+							maxW={{ md: '360px', lg: '510px', xl: '638px' }}
+							key={council.title.concat(council.link)}
+							flexDir="column"
+							rounded="base"
+							boxShadow="lg"
+							bg="navy.700"
+							border="1px solid"
+							borderColor="gray.900"
+							p={{ base: '6' }}
+							mb={{ base: '4' }}
+							zIndex={1}
+						>
+							{council.icon}
+							<Heading my={{ base: 4 }}>{council.title}</Heading>
+							<Box>
+								{council.description.map(description => {
+									if (typeof description === 'object')
+										return (
+											<Link
+												href={description.link}
+												key={description.link.concat(description.text)}
+												style={{ display: 'inline' }}
+												target="_blank"
+												rel="noopener noreferrer"
+											>
+												<Text
+													fontSize={{ base: '16px' }}
+													color="cyan.500"
+													display="inline"
+												>
+													{description.text}
+												</Text>
+											</Link>
+										);
 									return (
-										<Link
-											href={description.link}
-											key={description.link.concat(description.text)}
-											style={{ display: 'inline' }}
-											target="_blank"
-											rel="noopener noreferrer"
+										<Text
+											display="inline"
+											fontSize={{ base: '16px' }}
+											color="gray.500"
+											key={description}
 										>
-											<Text
-												fontSize={{ base: '16px' }}
-												color="cyan.500"
-												display="inline"
-											>
-												{description.text}
-											</Text>
-										</Link>
+											{description}
+										</Text>
 									);
-								return (
-									<Text
-										display="inline"
-										fontSize={{ base: '16px' }}
-										color="gray.500"
-										key={description}
-									>
-										{description}
-									</Text>
-								);
-							})}
-						</Box>
-						<Link href={council.link} target="_blank" rel="noopener noreferrer">
-							<Button
-								mt={{ base: '6' }}
-								variant="outline"
-								colorScheme="gray"
-								color="white"
-								rightIcon={
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										width="18"
-										height="18"
-										viewBox="0 0 18 18"
-										fill="none"
-									>
-										<g clip-path="url(#clip0_6845_45)">
-											<path
-												d="M11.6733 5.7487L5.98387 5.7487L5.98387 4.24892L14.2337 4.24892L14.2337 12.4987L12.7339 12.4987L12.7339 6.80936L5.29308 14.5607L4.23242 13.5L11.6733 5.7487Z"
-												fill="white"
-											/>
-										</g>
-										<defs>
-											<clipPath id="clip0_6845_45">
-												<rect width="18" height="18" fill="white" />
-											</clipPath>
-										</defs>
-									</svg>
-								}
+								})}
+							</Box>
+							<Link
+								href={council.link}
+								target="_blank"
+								rel="noopener noreferrer"
 							>
-								View Council
-							</Button>
-						</Link>
-					</Flex>
-				);
-			})}
+								<Button
+									mt={{ base: '6' }}
+									variant="outline"
+									colorScheme="gray"
+									color="white"
+									rightIcon={
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="18"
+											height="18"
+											viewBox="0 0 18 18"
+											fill="none"
+										>
+											<g clip-path="url(#clip0_6845_45)">
+												<path
+													d="M11.6733 5.7487L5.98387 5.7487L5.98387 4.24892L14.2337 4.24892L14.2337 12.4987L12.7339 12.4987L12.7339 6.80936L5.29308 14.5607L4.23242 13.5L11.6733 5.7487Z"
+													fill="white"
+												/>
+											</g>
+											<defs>
+												<clipPath id="clip0_6845_45">
+													<rect width="18" height="18" fill="white" />
+												</clipPath>
+											</defs>
+										</svg>
+									}
+								>
+									View Council
+								</Button>
+							</Link>
+						</Flex>
+					);
+				})}
+			</Flex>
 
 			<Flex
 				flexDir="column"
@@ -283,6 +288,7 @@ export default function GovernanceEcosystem() {
 				mb={{ base: '4' }}
 				zIndex={10}
 				pos="relative"
+				overflow="hidden"
 			>
 				<InterestedLooper
 					position="absolute"
diff --git a/src/sections/governance/features.tsx b/src/sections/governance/features.tsx
index c7ea17a5..cf523b49 100644
--- a/src/sections/governance/features.tsx
+++ b/src/sections/governance/features.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
-import { Fragment } from 'react';
 
 const FEATURES = [
 	{
@@ -60,53 +59,62 @@ export default function GovernanceFeatures() {
 			>
 				Protocol Features
 			</Heading>
-			<Flex flexDir="column" zIndex={10} mt={{ base: 10 }}>
-				<Box display="inline">
-					{FEATURES.map(feature => {
-						return (
-							<Fragment key={feature.title}>
-								<Heading
-									fontSize={{ base: '18px' }}
-									lineHeight={{ base: '28px' }}
-									mt={{ base: 8 }}
-									mb={{ base: 4 }}
-								>
-									{feature.title}
-								</Heading>
-								{Array.isArray(feature.description) ? (
-									feature.description.map((d, index) => {
-										console.log(index % 2, index);
-										if (index % 2 === 1)
-											return (
-												<Text
-													fontSize={{ base: '16px' }}
-													color="cyan.500"
-													key={d.concat(index.toString())}
-													display="inline"
-												>
-													{d}
-												</Text>
-											);
+
+			<Flex
+				flexDir={{ base: 'column', md: 'row' }}
+				mt={{ base: 10 }}
+				zIndex={10}
+				flexWrap={{ md: 'wrap' }}
+				gap={{ md: 4 }}
+			>
+				{FEATURES.map(feature => {
+					return (
+						<Box
+							w={{ base: '100%', md: '312px' }}
+							key={feature.title}
+							p={{ base: 4, md: 6 }}
+						>
+							<Heading
+								fontSize={{ base: '18px' }}
+								lineHeight={{ base: '28px' }}
+								mt={{ base: 8 }}
+								mb={{ base: 4 }}
+							>
+								{feature.title}
+							</Heading>
+							{Array.isArray(feature.description) ? (
+								feature.description.map((d, index) => {
+									console.log(index % 2, index);
+									if (index % 2 === 1)
 										return (
 											<Text
 												fontSize={{ base: '16px' }}
-												color="gray.500"
+												color="cyan.500"
 												key={d.concat(index.toString())}
 												display="inline"
 											>
 												{d}
 											</Text>
 										);
-									})
-								) : (
-									<Text fontSize={{ base: '16px' }} color="gray.500">
-										{feature.description}
-									</Text>
-								)}
-							</Fragment>
-						);
-					})}
-				</Box>
+									return (
+										<Text
+											fontSize={{ base: '16px' }}
+											color="gray.500"
+											key={d.concat(index.toString())}
+											display="inline"
+										>
+											{d}
+										</Text>
+									);
+								})
+							) : (
+								<Text fontSize={{ base: '16px' }} color="gray.500">
+									{feature.description}
+								</Text>
+							)}
+						</Box>
+					);
+				})}
 			</Flex>
 		</Flex>
 	);
diff --git a/src/sections/governance/header.tsx b/src/sections/governance/header.tsx
index b79e36de..bbe17607 100644
--- a/src/sections/governance/header.tsx
+++ b/src/sections/governance/header.tsx
@@ -4,13 +4,13 @@ import Link from 'next/link';
 
 export default function GovernanceHeader() {
 	return (
-		<Flex flexDir="column" position="relative" pb={{ base: '60px' }}>
+		<Flex flexDir="column" position="relative" pb={{ base: '60px' }} w="100%">
 			<Box
 				position="absolute"
 				width={1178}
 				height={608}
 				top={{ base: '50px' }}
-				right={{ base: '-560px' }}
+				right={{ base: '-560px', md: '-440px' }}
 				zIndex={0}
 			>
 				<Image
@@ -20,7 +20,12 @@ export default function GovernanceHeader() {
 					height={608}
 				/>
 			</Box>
-			<Heading fontSize={{ base: '48px' }} mt={{ base: 56 }} zIndex={10}>
+			<Heading
+				fontSize={{ base: '48px' }}
+				mt={{ base: 56 }}
+				zIndex={10}
+				maxW={{ md: '483px' }}
+			>
 				A Decentralized Governance
 			</Heading>
 			<Text
@@ -29,6 +34,7 @@ export default function GovernanceHeader() {
 				color="gray.500"
 				mt={{ base: 4 }}
 				zIndex={10}
+				maxW={{ md: '483px' }}
 			>
 				Synthetix is a decentralized protocol run by governance, with
 				representative councils elected by the community, ensuring every