Change homepage roadmap items interaction

components/roadmap/home-roadmap-item.tsx

@@ -21,11 +21,18 @@ const bgColorList = [
   'teal.200',
   'yellow.100',
   'green.200',
-  'red.200'
+  'red.200',
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity, colorIndex = 0, url, isUpcoming } = props;
+  const {
+    title,
+    subtitle,
+    isCommunity,
+    colorIndex = 0,
+    url,
+    isUpcoming,
+  } = props;
 
   return (
     <Box
@@ -33,49 +40,73 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
       href={url}
       _hover={{
         textDecoration: 'none',
-        transform: 'scale(1.02)',
+        bg: 'rgba(255,255,255,.10)'
-        opacity: '1 !important'
       }}
       sx={{
         // On mobile devices, don't change the scale
         '@media (hover: none)': {
           '&:hover': {
-            transform: 'scale(1)'
+            transform: 'scale(1)',
-          }
+          },
-        }
+        },
       }}
       flex={1}
-      shadow='2xl'
+      shadow="2xl"
       className={'home-roadmap-item'}
       bg={'rgba(255,255,255,.05)'}
-      color='white'
+      color="white"
-      p='15px'
+      p="15px"
-      rounded='10px'
+      rounded="10px"
-      pos='relative'
+      pos="relative"
     >
       {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
+        <Tooltip label={'Community contribution'} hasArrow placement="top">
-          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
+          <InfoIcon opacity={0.5} position="absolute" top="10px" right="10px" />
         </Tooltip>
       )}
 
-      <Heading fontSize={['17px', '17px', '22px']} color={bgColorList[colorIndex]} mb='5px'>{title}</Heading>
+      <Heading
-      <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
+        fontSize={['17px', '17px', '22px']}
+        color={bgColorList[colorIndex]}
+        mb="5px"
+      >
+        {title}
+      </Heading>
+      <Text color="gray.200" fontSize={['13px']}>
+        {subtitle}
+      </Text>
 
       {isUpcoming && (
         <Flex
-          alignItems='center'
+          alignItems="center"
-          justifyContent='center'
+          justifyContent="center"
-          pos='absolute'
+          pos="absolute"
           left={0}
           right={0}
           top={0}
           bottom={0}
-          rounded='10px'
+          rounded="10px"
         >
-          <Text color='white' bg='gray.600' zIndex={1} fontWeight={600} p={'5px 10px'}
+          <Text
-                rounded='10px'>Upcoming</Text>
+            color="white"
-          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
+            bg="gray.600"
+            zIndex={1}
+            fontWeight={600}
+            p={'5px 10px'}
+            rounded="10px"
+          >
+            Upcoming
+          </Text>
+          <Box
+            bg={'black'}
+            pos="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            rounded={'10px'}
+            opacity={0.5}
+          />
         </Flex>
       )}
     </Box>

pages/index.tsx

@@ -53,17 +53,6 @@ export default function Home(props: HomeProps) {
           <SimpleGrid
             columns={[1, 2, 3]}
             spacing={['10px', '10px', '15px']}
-            sx={{
-              // Don't change the opacity on mobile devices
-              '@media (hover: none)': {
-                '&:hover': {
-                  '.home-roadmap-item': {
-                    opacity: 1
-                  }
-                }
-              }
-            }}
-            _hover={{ '& .home-roadmap-item': { opacity: '0.5'} }}
           >
             {roadmaps.map((roadmap: RoadmapType, counter: number) => (
               <HomeRoadmapItem