Add the new support page

components/CustomCard/index.tsx

@@ -0,0 +1,39 @@
+import { Card, Typography } from '@mui/material'
+
+import css from './styles.module.css'
+
+const CustomCard: React.FC<{
+  title: string
+  description: string
+  url: string
+}> = ({ title, description, url }) => (
+  <Card
+    sx={{
+      transition: 'all 0.2s ease-in-out',
+      border: '1px solid',
+      borderColor: 'transparent',
+      '&:hover': {
+        borderColor: 'secondary.light'
+      },
+      width: '100%'
+    }}
+    className={css.card}
+  >
+    <a href={url} target='_blank' rel='noreferrer' style={{ width: '100%' }}>
+      <div style={{ width: '100%' }}>
+        <Typography fontWeight='500' mb={0.5}>
+          {title}
+        </Typography>
+        <Typography
+          variant='body2'
+          color='text.secondary'
+          className={css.description}
+        >
+          {description}
+        </Typography>
+      </div>
+    </a>
+  </Card>
+)
+
+export default CustomCard

components/CustomCard/styles.module.css

@@ -0,0 +1,24 @@
+.card {
+  background: var(--mui-palette-border-background);
+  box-shadow: inset 0 0 0 1px var(--mui-palette-border-light);
+  border-radius: 6px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  transition: 0.3s;
+}
+
+.outline:hover {
+  box-shadow: inset 0 0 0 1px var(--mui-palette-primary-main);
+}
+
+.description {
+  color: var(--mui-palette-primary-light);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  flex-shrink: 0;
+}

pages/_meta.json

@@ -57,9 +57,10 @@
   },
   "bug-bounty": "Bug Bounty",
   "support": {
-    "title": "Support ↗",
+    "title": "Support",
     "type": "page",
-    "href": "https://ethereum.stackexchange.com/questions/tagged/safe-core",
-    "newWindow": true
-  }
+    "theme": {
+      "layout": "full"
+    }
+  } 
 }

pages/support.mdx

@@ -0,0 +1,34 @@
+import { Grid, Container} from '@mui/material'
+import CustomCard from '../components/CustomCard'
+
+<Container>
+<Grid container mb={8} mt={4}>
+
+# Support
+
+If you have a question, chances are high that somebody else might have the same question, too. You help yourself and everyone who comes after you by asking your questions. 
+
+Please help us respond faster by asking your question in the correct place.
+
+<Grid
+container
+spacing={2}
+display='flex'
+alignContent='flex-start'
+mt={3}
+>
+<Grid item xs={12} md={4}>
+  <CustomCard title={'Safe{Wallet}'} description={'For questions about the Safe{Wallet} - the web app and the mobile apps, please ask your questions at our Help Center.'} url={'https://help.safe.global/en/'} />
+</Grid>
+
+<Grid item xs={12} md={4}>
+  <CustomCard title={'Safe{Core}'} description={'For technical questions about Safe Smart Accounts (smart contracts), SDK, and the API, please ask your questions on our Stack Exchange.'} url={'https://ethereum.stackexchange.com/questions/tagged/safe-core'} />
+</Grid>
+
+<Grid item xs={12} md={4}>
+  <CustomCard title={'Report Bugs'} description={'Please file an issue in the associated GitHub repository for things not working as expected and for reporting bugs.'} url={'https://github.com/safe-global'} />
+</Grid>
+
+</Grid>
+</Grid>
+</Container>