Skip to content

Commit

Permalink
updated other screen sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@fritzschoff
fritzschoff committed Feb 7, 2024
1 parent 2e4352a commit 40a5206
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 129 deletions.
180 changes: 93 additions & 87 deletions src/sections/governance/ecosystem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%)"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -283,6 +288,7 @@ export default function GovernanceEcosystem() {
mb={{ base: '4' }}
zIndex={10}
pos="relative"
overflow="hidden"
>
<InterestedLooper
position="absolute"
Expand Down
86 changes: 47 additions & 39 deletions src/sections/governance/features.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Box, Flex, Heading, Text } from '@chakra-ui/react';
import { Fragment } from 'react';

const FEATURES = [
{
Expand Down Expand Up @@ -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>
);
Expand Down
12 changes: 9 additions & 3 deletions src/sections/governance/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down

0 comments on commit 40a5206

Please sign in to comment.