Fix broken hover state on mobile

components/roadmap/home-roadmap-item.tsx

@@ -31,7 +31,19 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
     <Box
       as={Link}
       href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)', opacity: '1 !important' }}
+      _hover={{
+        textDecoration: 'none',
+        transform: 'scale(1.02)',
+        opacity: '1 !important'
+      }}
+      sx={{
+        // On mobile devices, don't change the scale
+        '@media (hover: none)': {
+          '&:hover': {
+            transform: 'scale(1)'
+          }
+        }
+      }}
       flex={1}
       shadow='2xl'
       className={'home-roadmap-item'}

pages/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Heading, Link, SimpleGrid, Text } from '@chakra-ui/react';
+import { Box, Container, Heading, Link, SimpleGrid, Text, useMediaQuery } from '@chakra-ui/react';
 import { GlobalHeader } from '../components/global-header';
 import { Footer } from '../components/footer';
 import { UpdatesBanner } from '../components/updates-banner';
@@ -53,6 +53,16 @@ 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) => (