fix: light mode cards for /about (#5605)

* fix: light mode cards for /about

* transparent

src/pages/About/Card.tsx

 import { Link } from 'react-router-dom'
+import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 
-const StyledCard = styled.div`
+const StyledCard = styled.div<{ isDarkMode: boolean }>`
   display: flex;
-  background: linear-gradient(180deg, rgba(19, 22, 27, 0.54) 0%, #13161b 100%);
+  background: ${({ isDarkMode }) =>
+    isDarkMode ? 'linear-gradient(180deg, rgba(19, 22, 27, 0.54) 0%, #13161b 100%)' : 'transparent'};
   flex-direction: column;
   justify-content: space-between;
   text-decoration: none;
@@ -12,6 +14,7 @@ const StyledCard = styled.div`
   height: 400px;
   border-radius: 24px;
   transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease}  background-color`};
+  border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? 'transparent' : theme.backgroundOutline)};
 
   &:hover {
     background-color: ${({ theme }) => theme.backgroundModule};
@@ -41,6 +44,7 @@ const Card = ({
   to: string
   external?: boolean
 }) => {
+  const isDarkMode = useIsDarkMode()
   return (
     <StyledCard
       as={external ? 'a' : Link}
@@ -48,6 +52,7 @@ const Card = ({
       href={external ? to : undefined}
       target={external ? '_blank' : undefined}
       rel={external ? 'noopenener noreferrer' : undefined}
+      isDarkMode={isDarkMode}
     >
       <CardTitle>{title}</CardTitle>
       <CardDescription>{description}</CardDescription>