diff --git a/front/src/i18n.js b/front/src/i18n.js
index 3f9990a2..1d8dab38 100644
--- a/front/src/i18n.js
+++ b/front/src/i18n.js
@@ -64,6 +64,7 @@ i18n.use(initReactI18next).init({
'change_password',
'forgot_password',
'verify_email',
+ 'invite',
],
defaultNS: 'common',
keySeparator: '.',
diff --git a/front/src/pages/Invite/Invite.jsx b/front/src/pages/Invite/Invite.jsx
new file mode 100644
index 00000000..d91f0599
--- /dev/null
+++ b/front/src/pages/Invite/Invite.jsx
@@ -0,0 +1,94 @@
+import { Row, Skeleton } from 'antd';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
+import { useParams } from 'react-router-dom';
+
+import LessonKeywords from '@sb-ui/components/atoms/LessonKeywords';
+import * as SM from '@sb-ui/pages/User/EnrollCourseModal/EnrollModal.mobile.styled';
+import { getInvite } from '@sb-ui/utils/api/v1/invite';
+import { INVITE_LESSON_QUERY } from '@sb-ui/utils/queries';
+
+import SignUp from './SignUp';
+import * as S from './Invite.styled';
+
+const Invite = () => {
+ const { id } = useParams();
+ const { t } = useTranslation('invite');
+
+ const { data: responseData, isLoading } = useQuery(
+ [INVITE_LESSON_QUERY, { id }],
+ getInvite,
+ );
+
+ const { lesson, keywords, email, isRegistered, inviteUser } =
+ responseData || {};
+
+ const { name, description, author, image } = lesson || {};
+
+ const fullName = useMemo(
+ () => `${author?.firstName} ${author?.lastName}`.trim(),
+ [author],
+ );
+
+ const firstNameLetter = useMemo(
+ () => author?.firstName?.[0] || author?.lastName?.[0],
+ [author],
+ );
+
+ const isAuth = false;
+
+ return (
+
+
+
+ {isLoading ? (
+
+ ) : (
+ <>
+
+
+
+
+ {t('header', { inviteUser, email })}
+
+
+ )}
+
+
+
+ {isLoading ? (
+
+ ) : (
+ <>
+
+
+ {firstNameLetter}
+ {fullName}
+
+
+ )}
+
+
+ {name}
+
+
+ {description}
+ {keywords && (
+
+
+
+ )}
+
+ {isAuth ? (
+ {t('buttons.join')}
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+export default Invite;
diff --git a/front/src/pages/Invite/Invite.styled.jsx b/front/src/pages/Invite/Invite.styled.jsx
new file mode 100644
index 00000000..8db8dbd6
--- /dev/null
+++ b/front/src/pages/Invite/Invite.styled.jsx
@@ -0,0 +1,66 @@
+import {
+ Avatar as AvatarAntd,
+ Button as ButtonAntd,
+ Form as FormAntd,
+ Input,
+} from 'antd';
+import styled from 'styled-components';
+import { UserOutlined } from '@ant-design/icons';
+
+export const Page = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
+export const Container = styled.div`
+ max-width: 500px;
+ width: 100%;
+`;
+
+export const Button = styled(ButtonAntd).attrs({
+ type: 'primary',
+ htmlType: 'submit',
+})`
+ width: 100%;
+`;
+
+export const JoinButton = styled(ButtonAntd).attrs({
+ type: 'primary',
+})`
+ margin-top: 1rem;
+ width: 100%;
+`;
+
+export const Form = styled(FormAntd).attrs({
+ layout: 'vertical',
+ size: 'large',
+})`
+ margin-top: 1rem;
+`;
+
+export const HeaderBlock = styled.div`
+ background-color: white;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+`;
+
+export const HeaderTitle = styled.div`
+ margin-left: 1rem;
+`;
+
+export const Avatar = styled(AvatarAntd).attrs({
+ size: 'large',
+ icon: ,
+})``;
+
+export const BodyBlock = styled.div`
+ background-color: white;
+ padding: 2rem;
+`;
+
+export const EmailInput = styled(Input)`
+ margin-bottom: 1.5rem;
+`;
diff --git a/front/src/pages/Invite/SignUp/SignUp.jsx b/front/src/pages/Invite/SignUp/SignUp.jsx
new file mode 100644
index 00000000..cc3fcaab
--- /dev/null
+++ b/front/src/pages/Invite/SignUp/SignUp.jsx
@@ -0,0 +1,97 @@
+import { Alert, Form, Input } from 'antd';
+import T from 'prop-types';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PasswordStrengthIndicator from '@sb-ui/components/atoms/PasswordStrengthIndicator';
+import { useAuthentication } from '@sb-ui/hooks/useAuthentication';
+import { useForm } from '@sb-ui/pages/Invite/useForm';
+import { postSignUp } from '@sb-ui/utils/api/v1/user';
+
+import * as S from '../Invite.styled';
+
+const SignUp = ({ email, isRegistered }) => {
+ const { t } = useTranslation('sign_up');
+ const [form] = Form.useForm();
+
+ const [isFormErrors, setIsFormErrors] = useState(false);
+
+ const handleFieldsChange = useCallback(() => {
+ setIsFormErrors(form.getFieldsError().some(({ errors }) => errors.length));
+ }, [form]);
+
+ const { formRules, password } = useForm({ isRegistered });
+
+ const handleSubmit = async () => {
+ // TODO: make here implementation after connecting with API;
+ };
+
+ // TODO: remove it after connecting with API;
+ // eslint-disable-next-line no-unused-vars
+ const [auth, error, setError] = useAuthentication({
+ requestFunc: postSignUp,
+ message: 'sign_up:email_verification',
+ });
+
+ const loading = false;
+
+ const buttonKey = isRegistered
+ ? 'invite:buttons.sign_in'
+ : 'invite:buttons.sign_up';
+
+ return (
+
+ {error && (
+
+ setError(null)}
+ message={t(error)}
+ type="error"
+ showIcon
+ closable
+ />
+
+ )}
+
+
+
+ {!isRegistered && (
+ <>
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ {!isRegistered &&
}
+