225-feat: update angular info

src/features/angular-topics/angular-topics.module.scss

@@ -0,0 +1,7 @@
+.angular-topics {
+  .angular-topics-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+}

src/features/angular-topics/angular-topics.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames/bind';
+import { Actions, Title } from '@/app/components';
+
+import styles from './angular-topics.module.scss';
+
+const cx = classNames.bind(styles);
+
+export const AngularTopics = () => {
+  const topicsList = [
+    'TypeScript',
+    'Components',
+    'Directives & Pipes',
+    'Modules & Services, Dependency Injection',
+    'Routing',
+    'RxJS & Observables',
+    'HTTP',
+    'Forms',
+    'Redux & NgRx',
+    'Unit Testing',
+  ];
+
+  return (
+    <section className={cx('angular-topics', 'container')}>
+      <article className={cx('content', 'angular-topics-content')}>
+        <Title text="Topics Covered:" hasAsterisk />
+        <Actions actions={topicsList} marked />
+      </article>
+    </section>
+  );
+};

src/features/angular-topics/index.ts

@@ -0,0 +1 @@
+export { AngularTopics } from './angular-topics';

src/features/mentors-wanted/index.ts

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

src/features/mentors-wanted/mentors-wanted.module.scss

@@ -0,0 +1,63 @@
+.mentors-wanted {
+  display: flex;
+  gap: 20px;
+  background-color: $color-yellow-50;
+
+  .content-left {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+
+    max-width: 43%;
+
+    text-align: left;
+  }
+
+  .link {
+    font-size: 18px;
+    text-decoration: underline;
+  }
+
+  .content {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    padding: 80px 120px;
+
+    p {
+      max-width: 825px;
+      font-size: 18px;
+      line-height: 28px;
+    }
+  }
+
+  .picture {
+    align-self: center;
+    max-width: 290px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  @include media-laptop {
+    .content {
+      padding: 80px 40px;
+    }
+  }
+
+  @include media-tablet {
+    .content {
+      flex-direction: column;
+      gap: 40px;
+      align-items: start;
+      padding: 40px 16px;
+    }
+
+    .content-left {
+      max-width: 100%;
+    }
+  }
+}

src/features/mentors-wanted/mentors-wanted.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import classNamesBind from 'classnames/bind';
+import { Link } from 'react-router-dom';
+import { Paragraph, Title } from '@/app/components';
+import mentorImg from '@/assets/mentors-wanted-poster.webp';
+import Image from '@/features/image';
+
+import styles from './mentors-wanted.module.scss';
+
+const cx = classNamesBind.bind(styles);
+
+export const MentorsWanted = () => {
+  // todo use custom link
+  return (
+    <section className={cx('mentors-wanted', 'container')}>
+      <article className={classNames('content', cx('content'))}>
+        <div className={cx('content-left')}>
+          <Title text="Mentors Wanted!" hasLines />
+          <Paragraph>
+            If&nbsp;you are interested in mentoring our students, please go through the
+            {' '}
+            <Link
+              className={cx('link')}
+              to="https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring"
+              target="blank"
+            >
+              Mentoring Documentation
+            </Link>
+            {' '}
+            for&nbsp;the Angular Course.
+          </Paragraph>
+        </div>
+        <div className={cx('picture')}>
+          <Image src={mentorImg} alt="Sloth - mascot dresses as a detective" />
+        </div>
+      </article>
+    </section>
+  );
+};

src/features/required/required.data.ts

@@ -307,11 +307,10 @@ export const courseDataMap: CourseMap = {
     knowBefore: {
       title: 'Required before the start',
       description: [
-        'JavaScript',
-        'Typescript',
+        'JavaScript, TypeScript Basics, CSS3, HTML5, NPM',
         'Git, GitHub (clone, add, commit, push, pull, merge, rebase, work with Pull Request)',
-        'npm, webpackCSS3 / HTML5',
-        'Chrome DevTools Figma',
+        'Chrome DevTools',
+        'Figma',
         'Understanding the concept of REST API',
       ],
     },

src/features/required/required.test.tsx

@@ -25,12 +25,11 @@ describe('Required', () => {
   it('renders correct requirements with "angular" props', () => {
     render(<Required courseName="angular" />);
     const requirements = [
-      'JavaScript',
-      'Typescript',
+      'JavaScript, TypeScript Basics, CSS3, HTML5, NPM',
       'Git, GitHub',
-      'npm, webpackCSS3',
-      'Chrome DevTools Figma',
-      'REST API',
+      'Chrome DevTools',
+      'Figma',
+      'Understanding the concept of REST API',
     ];
 
     requirements.forEach((requirement) => {

src/features/training-program/training-program.data.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { Actions, Paragraph, Subtitle } from '@/app/components';
 
 import awsPractitionerBadge from '@/assets/aws-cloud-pract-badge.webp';
@@ -114,24 +115,21 @@ export const contentMap: ContentMap = {
     title: 'Training Program',
     content: [
       <Paragraph>
-        The program consists of 3 stages. There may be requirements for advancing to each higher
-        stage, which will be described below. This specific run of the program will take the form of
-        self-study. This means that you will have access to pre-recorded webinars, recommended
-        materials, and weekly live Q&A sessions with our mentors/coordinators to answer any
-        questions you might have.
+        This course is designed for individuals with a solid foundation in JavaScript, TypeScript,
+        and front-end development. Familiarity with RS School processes and RS Stage #2 certification is a plus.
       </Paragraph>,
       <Paragraph>
-        You will also have the ability to communicate with other students and help each other solve
-        any problems you might face. We will provide you with a list of topics that should be
-        covered for each stage with recommended deadlines, but you will have the freedom to choose
-        when you want to watch the lectures and complete the tasks.
+        The course lasts 11 weeks, requiring approximately 20-40 hours of study per week.
       </Paragraph>,
+      // todo use custom link
       <Paragraph>
-        <span>BE AWARE</span>
+        All webinars are recorded and available on our
         {' '}
-        that practical tasks’ deadlines are not suggestions, and should be respected.
+        <Link className="link" to="https://www.youtube.com/c/rollingscopesschool" target="blank">
+          Youtube
+        </Link>
+        . Theoretical materials are provided as recorded lectures from previous courses.
       </Paragraph>,
-      <Subtitle text="Attention! Mentors on this course will be first assigned to the graduates of the RS School Stage #2." />,
     ],
     image: angularImg,
   },

src/features/training-program/training-program.scss

@@ -1,4 +1,8 @@
 .training-program {
+  .link {
+    text-decoration: underline;
+  }
+
   &.content {
     @include media-laptop {
       padding: 75px 40px 40px;

src/features/training-program/training-program.test.tsx

@@ -36,10 +36,10 @@ describe('TrainingProgram', () => {
 
     it('renders correct paragraphs', () => {
       const paragraphs = [
-        'The program consists of 3 stages. There may be requirements for advancing to each higher stage',
-        'You will also have the ability to communicate with other students and help each other solve any problems you might face',
-        'deadlines are not suggestions, and should be respected',
-        'Attention! Mentors on this course will be first',
+        'This course is designed for individuals with a solid foundation in JavaScript, TypeScript, and front-end development. Familiarity with RS School processes and RS Stage #2 certification is a plus.',
+        'The course lasts 11 weeks, requiring approximately 20-40 hours of study per week.',
+        'All webinars are recorded and available on our',
+        '. Theoretical materials are provided as recorded lectures from previous courses.',
       ];
 
       paragraphs.forEach((p) => {

src/pages/angular.tsx

@@ -1,8 +1,10 @@
 import { Breadcrumbs } from '@/app/components';
 import { About } from '@/features/about';
+import { AngularTopics } from '@/features/angular-topics';
 import { Certification } from '@/features/certification';
 import { Communication } from '@/features/communication';
 import { CourseMain } from '@/features/course-main';
+import { MentorsWanted } from '@/features/mentors-wanted';
 import { Required } from '@/features/required';
 import { StudyPath } from '@/features/study-path';
 import { Trainers } from '@/features/trainers';
@@ -17,11 +19,13 @@ export const Angular = () => {
       <CourseMain courseName={COURSE_NAME} />
       <Breadcrumbs />
       <TrainingProgram courseName={COURSE_NAME} />
+      <AngularTopics />
       <About courseName={COURSE_NAME} />
       <Certification courseName={COURSE_NAME} />
       <Communication courseName={COURSE_NAME} />
       <StudyPath path={COURSE_NAME} />
       <Required courseName={COURSE_NAME} marked1 />
+      <MentorsWanted />
       <Trainers trainers={angular} />
     </>
   );