556-feat: Widget not found

src/app/mentorship/[course]/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from 'next';
+import { Mentorship } from '@/views/mentorship';
+import { MentorshipCourseRouteKeys, mentorshipCourses, mentorshipCoursesDefault } from 'data';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const title = `Mentorship · The Rolling Scopes School`;
+
+  return { title };
+}
+export async function generateStaticParams(): Promise<{ course: MentorshipCourseRouteKeys }[]> {
+  return [
+    { course: 'reactjs' },
+    { course: 'angular' },
+    { course: 'javascript' },
+    { course: 'javascript-ru' },
+  ];
+}
+export default async function MentorshipRoute({
+  params,
+}: {
+  params: Promise<{
+    course: MentorshipCourseRouteKeys;
+  }>;
+}) {
+  const { course } = await params;
+  const mentorshipCourse =
+    mentorshipCourses.find((item) => item.detailsUrl.includes(`/${course}`))
+    || mentorshipCoursesDefault;
+
+  return <Mentorship mentorshipData={mentorshipCourse} />;
+}

src/app/mentorship/page.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from 'next';
+import { Mentorship } from '@/views/mentorship';
+import { mentorshipCoursesDefault } from 'data';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const title = `Mentorship · The Rolling Scopes School`;
+
+  return { title };
+}
+
+export default async function MentorshipRoute() {
+  return <Mentorship mentorshipData={mentorshipCoursesDefault} />;
+}

src/app/not-found.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import { NotFound } from '@/views/not-found';
+import { NotFound } from '@/views/not-found/not-found';
 
 export async function generateMetadata(): Promise<Metadata> {
   const title = '404 Not Found';

src/shared/__tests__/visual/not-found.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+import { takeScreenshot } from './utils';
+import { ROUTES } from '@/core/const';
+
+test('Not-found page', async ({ page }) => {
+  await page.goto(ROUTES.NOT_FOUND);
+
+  await takeScreenshot(page, 'Not-found page');
+});
+
+test('Not-found home button', async ({ page }) => {
+  await page.goto(ROUTES.NOT_FOUND);
+
+  const homeButton = await page.getByTestId('home-link');
+
+  expect(homeButton).toBeVisible();
+  await homeButton.click();
+  await expect(page).toHaveURL(ROUTES.HOME);
+});

src/views/not-found/not-found.module.scss

@@ -0,0 +1,19 @@
+.not-found {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  min-height: 100vh;
+}
+
+.not-found-image {
+  max-width: 170px;
+  height: auto;
+}
+
+.not-found-paragraph {
+  max-width: 480px;
+
+  @include media-mobile-landscape {
+    text-align: center;
+  }
+}

src/views/not-found/not-found.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+import notFoundImg from '@/shared/assets/404.webp';
+import { LinkCustom } from '@/shared/ui/link-custom';
+import { Paragraph } from '@/shared/ui/paragraph';
+
+import styles from './not-found.module.scss';
+
+const cx = classNames.bind(styles);
+
+export const NotFound = () => {
+  return (
+    <main className={cx('container', 'not-found')}>
+      <Image
+        className={cx('not-found-image')}
+        src={notFoundImg}
+        alt="Sloth mascot in an RS-branded T-shirt sits on a chair, looking puzzled, symbolizing that the page was not found"
+      />
+      <Paragraph className={cx('not-found-paragraph')}>
+        The page you are looking for doesn&apos;t exist or has been moved. Please go back to the
+        homepage.
+      </Paragraph>
+      <LinkCustom href="/" variant="primary" data-testid="home-link">
+        Go back home
+      </LinkCustom>
+    </main>
+  );
+};