550-refactor: Widget mentors wanted

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 = {

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 = () => {
       <Communication courseName={COURSE_NAME} />
       <StudyPath path={COURSE_NAME} />
       <Required courseName={COURSE_NAME} marked1 />
-      <MentorsWanted />
+      <MentorsWantedCourse link={LINKS.ANGULAR_MENTORING} />
       <Trainers trainers={angular} />
     </>
   );

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 = () => {
       <StudyWithUs />
       <UpcomingCourses />
       <Alumni />
-      <Mentors />
+      <MentorsWanted />
       <Mentoring />
       <Requirements />
     </>

src/widgets/mentors-wanted-course/index.ts

@@ -0,0 +1 @@
+export { MentorsWantedCourse } from './ui/mentors-wanted-course';

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;
+    }
+  }
+}

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(<MentorsWantedCourse link={href} />);
+    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);
+  });
+});

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 (
+    <section className={cx('mentors-wanted', 'container')} data-testid="mentors-wanted">
+      <article className={cx('mentors-wanted-content', 'content')}>
+        <div className={cx('content-left')}>
+          <WidgetTitle id="mentors-wanted" mods="lines">
+            Mentors Wanted!
+          </WidgetTitle>
+          <Paragraph>
+            If&nbsp;you are interested in mentoring our students, please go through the
+            {' '}
+            <LinkCustom href={link} external data-testid="link-custom">
+              Mentoring Documentation
+            </LinkCustom>
+            {' '}
+            for&nbsp;the course.
+          </Paragraph>
+        </div>
+        <Image
+          className={cx('sloth-mascot')}
+          src={mentorImg}
+          alt="Sloth - mascot dresses as a detective"
+          data-testid="sloth-mascot"
+        />
+      </article>
+    </section>
+  );
+};

src/widgets/mentors-wanted/ui/mentors-wanted.module.scss

@@ -1,58 +1,27 @@
-.mentors-wanted {
-  display: flex;
-  gap: 20px;
-  background-color: $color-yellow-50;
+.mentors-container {
+  background: $color-gray-100;
 
-  .content-left {
-    display: flex;
-    flex-direction: column;
-    gap: 40px;
+  .mentors-content {
+    flex-direction: row;
 
-    max-width: 43%;
+    .mentors-info {
+      max-width: 640px;
 
-    text-align: left;
-  }
-
-  .content {
-    display: flex;
-    align-items: start;
-    justify-content: space-between;
-    padding: 80px 120px;
-
-    p {
-      max-width: 825px;
-      font-size: 18px;
-      line-height: 28px;
+      @include media-tablet-large {
+        width: 100%;
+      }
     }
-  }
-
-  .picture {
-    align-self: center;
-    max-width: 290px;
 
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
+    .sloth-mascot {
+      @include media-tablet {
+        width: 296px;
+        height: 272px;
+      }
     }
-  }
 
-  @include media-laptop {
-    .content {
-      padding: 80px 40px;
-    }
-  }
-
-  @include media-tablet {
-    .content {
+    @include media-tablet-large {
       flex-direction: column;
       gap: 40px;
-      align-items: start;
-      padding: 40px 16px;
-    }
-
-    .content-left {
-      max-width: 100%;
     }
   }
 }

src/widgets/mentors/ui/mentors.test.tsx → src/widgets/mentors-wanted/ui/mentors-wanted.test.tsx

@@ -1,14 +1,14 @@
 import { screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { Mentors } from './mentors';
+import { MentorsWanted } from './mentors-wanted';
 import { MOCKED_IMAGE_PATH } from '@/shared/__tests__/constants';
 import { renderWithRouter } from '@/shared/__tests__/utils';
 
 const registerLink = 'https://app.rs.school/registry/mentor';
 
 describe('Mentors', () => {
   beforeEach(() => {
-    renderWithRouter(<Mentors />);
+    renderWithRouter(<MentorsWanted />);
   });
 
   it('renders the widget', () => {

src/widgets/mentors-wanted/ui/mentors-wanted.tsx

@@ -1,40 +1,42 @@
-import classNames from 'classnames';
-import classNamesBind from 'classnames/bind';
-import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
+import classNames from 'classnames/bind';
+import { ANCHORS, LINKS } from '@/app/const';
+import mentorImg from '@/shared/assets/mentors-wanted.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.module.scss';
 
-const cx = classNamesBind.bind(styles);
+const cx = classNames.bind(styles);
 
 export const MentorsWanted = () => {
   return (
-    <section className={cx('mentors-wanted', 'container')}>
-      <article className={classNames('content', cx('content'))}>
-        <div className={cx('content-left')}>
-          <WidgetTitle id="mentors-wanted" mods="lines">
-            Mentors Wanted!
-          </WidgetTitle>
-          <Paragraph>
-            If&nbsp;you are interested in mentoring our students, please go through the
-            {' '}
-            <LinkCustom
-              href="https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring"
-              external
-            >
-              Mentoring Documentation
-            </LinkCustom>
-            {' '}
-            for&nbsp;the Angular Course.
+    <section className={cx('mentors-container', 'container')} id={ANCHORS.MENTORS_WANTED} data-testid="mentors-wanted">
+      <div className={cx('mentors-content', 'content', 'column-2')}>
+        <article className={cx('mentors-info')}>
+          <WidgetTitle size="large" mods="lines">Mentors wanted!</WidgetTitle>
+          <Paragraph fontSize="large">
+            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.
           </Paragraph>
-        </div>
-        <div className={cx('picture')}>
-          <Image src={mentorImg} alt="Sloth - mascot dresses as a detective" />
-        </div>
-      </article>
+          <LinkCustom
+            href={LINKS.BECOME_MENTOR}
+            variant="primary"
+            external
+          >
+            Become a mentor
+          </LinkCustom>
+        </article>
+        <Image
+          className={cx('sloth-mascot')}
+          src={mentorImg}
+          alt="Sloth - mascot dressed as a detective"
+          data-testid="sloth-mascot"
+        />
+      </div>
     </section>
   );
 };