gradients

Synthetixio · Jun 27, 2023 · 82ad99f · 82ad99f
1 parent 7278230
commit 82ad99f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/src/sections/home/collateral.tsx b/src/sections/home/collateral.tsx
@@ -1,11 +1,11 @@
-import { Button, Flex, Link, Text } from '@chakra-ui/react';
+import { Box, Flex, Link, Text } from '@chakra-ui/react';
 import { GradientText } from 'src/components';
 import { links } from 'src/utils/constants';
 
 export const Collateral = () => {
 	return (
-		<Flex w="100%" justifyContent="flex-end" my="100px">
-			<Flex flexDirection="column" width="55%">
+		<Flex w="100%" justifyContent="flex-end" my="100px" position="relative">
+			<Flex flexDirection="column" width="55%" zIndex={1}>
 				<Text
 					fontSize="16px"
 					lineHeight="24px"
@@ -48,6 +48,16 @@ export const Collateral = () => {
 					Start Staking
 				</Link>
 			</Flex>
+			<Box
+				position="absolute"
+				bgGradient="linear-gradient(44deg, #34EDB3 0%, #00D1FF 100%)"
+				width="584px"
+				height="536px"
+				zIndex={0}
+				borderRadius="100%"
+				filter="blur(250px)"
+				left="-300"
+			/>
 		</Flex>
 	);
 };
diff --git a/src/sections/home/ecosystem.tsx b/src/sections/home/ecosystem.tsx
@@ -2,7 +2,7 @@ import { Heading, Text, Box } from '@chakra-ui/react';
 
 export const Ecosystem = () => {
 	return (
-		<Box id="ecosystem">
+		<Box id="ecosystem" position="relative">
 			<Box width="100%" position="relative" my="100px">
 				<Box position="relative" zIndex={1}>
 					<Text
@@ -42,6 +42,17 @@ export const Ecosystem = () => {
 					</Box>
 				</Box>
 			</Box>
+			<Box
+				position="absolute"
+				bgGradient="linear-gradient(44deg, #EE2EFF 0%, #5744EA 100%)"
+				width="584px"
+				height="536px"
+				zIndex={0}
+				borderRadius="100%"
+				filter="blur(250px)"
+				top="20px"
+				left="-200px"
+			/>
 		</Box>
 	);
 };

diff --git a/src/sections/home/perps.tsx b/src/sections/home/perps.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
 import { GradientText } from 'src/components';
 
 export const Perps = () => {
@@ -10,8 +10,8 @@ export const Perps = () => {
 	};
 
 	return (
-		<Flex w="100%" my="100px">
-			<Flex flexDirection="column" width="55%">
+		<Flex w="100%" my="100px" position="relative">
+			<Flex flexDirection="column" width="55%" zIndex="1">
 				<Text
 					fontSize="16px"
 					lineHeight="24px"
@@ -38,6 +38,16 @@ export const Perps = () => {
 					Explore all Integrators
 				</Button>
 			</Flex>
+			<Box
+				position="absolute"
+				bgGradient="linear-gradient(44deg, #EE2EFF 0%, #5744EA 100%)"
+				width="584px"
+				height="536px"
+				zIndex={0}
+				borderRadius="100%"
+				filter="blur(250px)"
+				right="0"
+			/>
 		</Flex>
 	);
 };
diff --git a/src/sections/home/staking.tsx b/src/sections/home/staking.tsx
@@ -4,7 +4,7 @@ import { links } from 'src/utils/constants';
 
 export const Staking = () => {
 	return (
-		<Flex w="100%" mt="24px" mb="100px">
+		<Flex w="100%" mt="24px" mb="100px" position="relative">
 			<Flex
 				bg="navy.700"
 				p="48px"
@@ -15,6 +15,7 @@ export const Staking = () => {
 				position="relative"
 				w="100%"
 				justifyContent="flex-end"
+				zIndex={1}
 			>
 				<Flex flexDirection="column" width="72%">
 					<Text