feat(frontend): add resources in home page (#3678)

web/src/components/Resources/Content/Content.styled.ts

@@ -0,0 +1,39 @@
+import {Typography} from 'antd';
+import styled from 'styled-components';
+
+export const Body = styled.div`
+  display: flex;
+  gap: 24px;
+  width: 100%;
+`;
+
+export const Container = styled.div`
+  padding: 0;
+`;
+
+export const Title = styled(Typography.Title)`
+  && {
+    margin-bottom: 6px;
+  }
+`;
+
+export const Text = styled(Typography.Text)``;
+
+export const Link = styled(Typography.Link)`
+  font-weight: bold;
+`;
+
+export const Card = styled.div`
+  background-color: ${({theme}) => theme.color.white};
+  border-radius: 2px;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 14px;
+  padding: 24px;
+`;
+
+export const Icon = styled.img`
+  width: 64px;
+  height: auto;
+`;

web/src/components/Resources/Content/Content.tsx

@@ -0,0 +1,62 @@
+import {ArrowRightOutlined} from '@ant-design/icons';
+import pagesIcon from 'assets/pages.svg';
+import groupIcon from 'assets/group.svg';
+import mediaIcon from 'assets/media.svg';
+import {COMMUNITY_SLACK_URL, DOCUMENTATION_URL} from 'constants/Common.constants';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
+import * as S from './Content.styled';
+
+const Content = () => {
+  const {navigate} = useDashboard();
+
+  return (
+    <S.Container>
+      <S.Body>
+        <S.Card>
+          <S.Icon src={groupIcon} />
+          <div>
+            <S.Title>Tests</S.Title>
+            <S.Text>
+              Haven&apos;t created a test yet? Go to the &apos;Tests&apos; page to kickstart your testing adventure.
+            </S.Text>
+            <S.Link
+              onClick={e => {
+                e.preventDefault();
+                navigate(`/tests`);
+              }}
+            >
+              {' '}
+              Go to tests <ArrowRightOutlined />
+            </S.Link>
+          </div>
+        </S.Card>
+
+        <S.Card>
+          <S.Icon src={pagesIcon} />
+          <div>
+            <S.Title>Documentation</S.Title>
+            <S.Text>The ultimate technical resources and step-by-step guides that allows you to quickly start.</S.Text>
+            <S.Link target="_blank" href={DOCUMENTATION_URL}>
+              {' '}
+              View documentation <ArrowRightOutlined />
+            </S.Link>
+          </div>
+        </S.Card>
+
+        <S.Card>
+          <S.Icon src={mediaIcon} />
+          <div>
+            <S.Title>Community</S.Title>
+            <S.Text>Check the latest updates and support from the community.</S.Text>
+            <S.Link target="_blank" href={COMMUNITY_SLACK_URL}>
+              {' '}
+              Join our community <ArrowRightOutlined />
+            </S.Link>
+          </div>
+        </S.Card>
+      </S.Body>
+    </S.Container>
+  );
+};
+
+export default Content;

web/src/components/Resources/Content/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './Content';