feat: link to request integration (#4634)

## About the changes

![image](https://github.com/Unleash/unleash/assets/2625371/5c0852d2-28cf-4272-8892-e36de782ab61)

https://linear.app/unleash/issue/1-1343/request-integration

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -1,12 +1,13 @@
 import { type VFC } from 'react';
+import { Typography, styled } from '@mui/material';
 import type { AddonTypeSchema } from 'openapi';
 import useLoading from 'hooks/useLoading';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { IntegrationCard } from '../IntegrationCard/IntegrationCard';
 import { JIRA_INFO } from '../../JiraIntegration/JiraIntegration';
 import { StyledCardsGrid } from '../IntegrationList.styles';
-import { Typography, styled } from '@mui/material';
+import { RequestIntegrationCard } from '../RequestIntegrationCard/RequestIntegrationCard';
 import { OFFICIAL_SDKS } from './SDKs';
 
 interface IAvailableIntegrationsProps {
@@ -89,6 +90,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                                 />
                             )
                         )}
+                        <RequestIntegrationCard />
                     </StyledCardsGrid>
                 </StyledSection>
                 <StyledSection>

frontend/src/component/integrations/IntegrationList/RequestIntegrationCard/RequestIntegrationCard.tsx

@@ -0,0 +1,47 @@
+import { VFC } from 'react';
+import { styled, Typography } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+
+const StyledLink = styled('a')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(3),
+    borderRadius: `${theme.shape.borderRadiusMedium}px`,
+    border: `1px dashed ${theme.palette.secondary.border}`,
+    textDecoration: 'none',
+    color: 'inherit',
+    background: theme.palette.background.elevation1,
+    ':hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
+}));
+
+const StyledAction = styled(Typography)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold,
+    paddingTop: theme.spacing(3),
+    gap: theme.spacing(0.5),
+}));
+
+export const RequestIntegrationCard: VFC = () => (
+    <StyledLink
+        href="https://docs.google.com/forms/d/e/1FAIpQLScR1_iuoQiKq89c0TKtj0gM02JVWyQ2hQ-YchBMc2GRrGf7uw/viewform"
+        target="_blank"
+        rel="noopener noreferrer"
+    >
+        <Typography variant="body2" color="text.secondary" data-loading>
+            Are we missing any integration that you need?
+        </Typography>
+        <Typography variant="body2" color="text.secondary" data-loading>
+            Go ahead and request it!
+        </Typography>
+        <StyledAction data-loading>
+            <AddIcon />
+            Request integration
+        </StyledAction>
+    </StyledLink>
+);