diff --git a/src/app/const/index.ts b/src/app/const/index.ts
index 44a8675b3..bedc17bc6 100644
--- a/src/app/const/index.ts
+++ b/src/app/const/index.ts
@@ -13,6 +13,7 @@ export const LINKS = {
'https://docs.google.com/forms/d/e/1FAIpQLSdGKdEHK1CnZjgll9PpMU0xD1m0hm6xGoXc98H7woCDulyQkg/viewform',
MERCH: 'https://sloths.rs.school/',
DONATE: 'https://opencollective.com/rsschool',
+ ANGULAR_MENTORING: 'https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring',
};
export const ROUTES = {
diff --git a/src/pages/angular.tsx b/src/pages/angular.tsx
index f97a1a99b..79e45ff06 100644
--- a/src/pages/angular.tsx
+++ b/src/pages/angular.tsx
@@ -1,10 +1,11 @@
+import { LINKS } from '@/app/const';
import { AboutCourse } from '@/widgets/about-course';
import { AngularTopics } from '@/widgets/angular-topics';
import { Breadcrumbs } from '@/widgets/breadcrumbs';
import { Certification } from '@/widgets/certification';
import { Communication } from '@/widgets/communication';
import { HeroCourse } from '@/widgets/hero-course';
-import { MentorsWanted } from '@/widgets/mentors-wanted';
+import { MentorsWantedCourse } from '@/widgets/mentors-wanted-course';
import { Required } from '@/widgets/required';
import { StudyPath } from '@/widgets/study-path';
import { Trainers } from '@/widgets/trainers';
@@ -25,7 +26,7 @@ export const Angular = () => {
-
+
);
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 094fb9cc0..8600801c3 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -6,7 +6,7 @@ import { Alumni } from '@/widgets/alumni';
import { Breadcrumbs } from '@/widgets/breadcrumbs';
import { HeroPage } from '@/widgets/hero-page';
import { Mentoring } from '@/widgets/mentoring';
-import { Mentors } from '@/widgets/mentors';
+import { MentorsWanted } from '@/widgets/mentors-wanted';
import { Principles } from '@/widgets/principles';
import { Requirements } from '@/widgets/requirements';
import { StudyWithUs } from '@/widgets/study-with-us';
@@ -24,7 +24,7 @@ export const Home: FC = () => {
-
+
diff --git a/src/widgets/mentors-wanted-course/index.ts b/src/widgets/mentors-wanted-course/index.ts
new file mode 100644
index 000000000..dd4f56556
--- /dev/null
+++ b/src/widgets/mentors-wanted-course/index.ts
@@ -0,0 +1 @@
+export { MentorsWantedCourse } from './ui/mentors-wanted-course';
diff --git a/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss
new file mode 100644
index 000000000..34ccb5228
--- /dev/null
+++ b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss
@@ -0,0 +1,30 @@
+.mentors-wanted {
+ background-color: $color-yellow-50;
+
+ .mentors-wanted-content {
+ display: flex;
+ align-items: start;
+ justify-content: space-between;
+
+ .content-left {
+ display: flex;
+ flex-direction: column;
+ max-width: 50%;
+
+ @include media-tablet {
+ max-width: 100%;
+ }
+ }
+
+ .sloth-mascot {
+ align-self: center;
+ max-width: 290px;
+ object-fit: contain;
+ }
+
+ @include media-tablet {
+ flex-direction: column;
+ gap: 40px;
+ }
+ }
+}
diff --git a/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.test.tsx b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.test.tsx
new file mode 100644
index 000000000..7843a82a3
--- /dev/null
+++ b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.test.tsx
@@ -0,0 +1,40 @@
+import { screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MentorsWantedCourse } from './mentors-wanted-course';
+import { LINKS } from '@/app/const';
+import { renderWithRouter } from '@/shared/__tests__/utils';
+import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
+
+const mockedData = {
+ titleText: 'Mentors Wanted!',
+ paragraphText: /If you are interested in mentoring our students/i,
+ href: LINKS.ANGULAR_MENTORING,
+ image: mentorImg,
+ alt: 'Sloth - mascot dresses as a detective',
+};
+
+const { titleText, paragraphText, href, image, alt } = mockedData;
+
+describe('MentorsWantedCourse component', () => {
+ it('renders the component content correctly', () => {
+ renderWithRouter();
+ const mentorsWantedCourse = screen.getByTestId('mentors-wanted');
+ const title = screen.getByTestId('widget-title');
+ const paragraph = screen.getByTestId('paragraph');
+ const link = screen.getByTestId('link-custom');
+ const slothImage = screen.getByTestId('sloth-mascot');
+
+ expect(mentorsWantedCourse).toBeVisible();
+ expect(title).toBeVisible();
+ expect(paragraph).toBeVisible();
+ expect(link).toBeVisible();
+ expect(slothImage).toBeVisible();
+
+ expect(title).toHaveTextContent(titleText);
+ expect(paragraph).toHaveTextContent(paragraphText);
+
+ expect(link).toHaveAttribute('href', href);
+ expect(slothImage).toHaveAttribute('src', image);
+ expect(slothImage).toHaveAttribute('alt', alt);
+ });
+});
diff --git a/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.tsx b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.tsx
new file mode 100644
index 000000000..797a9823b
--- /dev/null
+++ b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.tsx
@@ -0,0 +1,43 @@
+import classNamesBind from 'classnames/bind';
+import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
+import { Image } from '@/shared/ui/image';
+import { LinkCustom } from '@/shared/ui/link-custom';
+import { Paragraph } from '@/shared/ui/paragraph';
+import { WidgetTitle } from '@/shared/ui/widget-title';
+
+import styles from './mentors-wanted-course.module.scss';
+
+const cx = classNamesBind.bind(styles);
+
+type MentorsWantedCourseProps = {
+ link: string;
+};
+
+export const MentorsWantedCourse = ({ link }: MentorsWantedCourseProps) => {
+ return (
+
+
+
+
+ Mentors Wanted!
+
+
+ If you are interested in mentoring our students, please go through the
+ {' '}
+
+ Mentoring Documentation
+
+ {' '}
+ for the course.
+
+
-
- Mentors Wanted!
-
-
- If you are interested in mentoring our students, please go through the
- {' '}
-
- Mentoring Documentation
-
- {' '}
- for the Angular Course.
+
+
+
+ Mentors wanted!
+
+ The Rolling Scopes School is constantly looking for mentors from all over the world to
+ teach everyone who wants to learn the JavaScript language and the world of Front-end.
+ Over the past few years, over 1500+ people have successfully completed our six month
+ training program.
-
-
-
-
+
+ Become a mentor
+
+
+
+
-
- Mentors wanted!
-
- The Rolling Scopes School is constantly looking for mentors from all over the world to
- teach everyone who wants to learn the JavaScript language and the world of Front-end.
- Over the past few years, over 1500+ people have successfully completed our six month
- training program.
-
-
- Become a mentor
-
-
-
-