diff --git a/dev-data/about-video.data.ts b/dev-data/about-video.data.ts
new file mode 100644
index 000000000..bea6b1a2c
--- /dev/null
+++ b/dev-data/about-video.data.ts
@@ -0,0 +1,4 @@
+export const videoTitleLocalized = {
+ en: { title: 'RS School video' },
+ ru: { title: 'Видео RS School' },
+};
diff --git a/dev-data/index.ts b/dev-data/index.ts
index aafd76231..f6e744345 100644
--- a/dev-data/index.ts
+++ b/dev-data/index.ts
@@ -1,7 +1,12 @@
export type { AngularAwsPath, CoursesPath, DataMap, JSPath } from './courses-data.types';
export { COURSE_TITLES } from './courseTitles.data';
export { type CourseNames, contentMap } from './training-program.data';
-export { type CourseNamesChannels, DISCORD_LINKS, RS_DOCS_COMMUNICATION_LINK, RS_DOCS_TELEGRAM_CHATS_LINK } from './communication.data';
+export {
+ type CourseNamesChannels,
+ DISCORD_LINKS,
+ RS_DOCS_COMMUNICATION_LINK,
+ RS_DOCS_TELEGRAM_CHATS_LINK,
+} from './communication.data';
export { angular } from './angular.data';
export { angularPath } from './angular-path.data';
export { awsDev } from './awsDev.data';
@@ -21,3 +26,4 @@ export { nodejs } from './nodejs.data';
export { preSchoolEn, preSchoolRu } from './preSchool.data';
export { reactEn } from './react-en.data';
export { reactRu } from './react-ru.data';
+export { videoTitleLocalized } from './about-video.data';
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index 634f4a67f..500dc5cb6 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -2,3 +2,4 @@ export const TABLET_W = import.meta.env.VITE_TABLET;
export const MOBILE_W = import.meta.env.VITE_MOBILE;
export const DESKTOP_W = 1280;
export const IS_DEV = import.meta.env.DEV;
+export const RS_INTRO_URL = 'https://www.youtube.com/embed/n4unZLVpnaU';
diff --git a/src/widgets/about-video/about-video.test.tsx b/src/widgets/about-video/about-video.test.tsx
deleted file mode 100644
index 83e3f541f..000000000
--- a/src/widgets/about-video/about-video.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { AboutVideo } from './ui/about-video';
-
-describe('AboutVideo', () => {
- it('renders the title correctly', () => {
- render();
- expect(screen.getByText('RS School video')).toBeInTheDocument();
- });
-
- it('renders the placeholder in development mode', () => {
- vi.stubEnv('DEV', true);
- render();
- expect(screen.getByText('Video Placeholder')).toBeInTheDocument();
- });
-
- it('renders the YouTube embed in production mode', () => {
- vi.stubEnv('DEV', false);
- render();
- expect(screen.getByTitle('RS School Intro')).toHaveAttribute(
- 'src',
- 'https://www.youtube.com/embed/n4unZLVpnaU',
- );
- });
-});
diff --git a/src/widgets/about-video/ui/about-video.module.scss b/src/widgets/about-video/ui/about-video.module.scss
new file mode 100644
index 000000000..9994451b1
--- /dev/null
+++ b/src/widgets/about-video/ui/about-video.module.scss
@@ -0,0 +1,50 @@
+.video-wrapper {
+ padding: 24px 67px 0;
+
+ .video-container {
+ position: relative;
+
+ overflow: hidden;
+
+ width: 100%;
+ max-height: 600px;
+ padding-top: 56.25%;
+
+ .video-frame {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 100%;
+
+ border: 0;
+ }
+
+ .video-placeholder {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+
+ font-size: 24px;
+ color: $color-white;
+
+ background: $color-gray-400;
+ }
+
+ @include media-laptop-medium {
+ max-height: 410px;
+ }
+ }
+
+ @include media-tablet-large {
+ padding: 24px 0 0;
+ }
+}
diff --git a/src/widgets/about-video/ui/about-video.scss b/src/widgets/about-video/ui/about-video.scss
deleted file mode 100644
index 1134c086b..000000000
--- a/src/widgets/about-video/ui/about-video.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.about-video {
- &.content {
- & > .video-wrapper {
- margin-top: 24px;
- padding: 0 67px;
-
- .video-container {
- position: relative;
-
- overflow: hidden;
-
- width: 100%;
- max-height: 600px;
- padding-top: 56.25%;
-
- iframe {
- position: absolute;
- top: 0;
- left: 0;
-
- width: 100%;
- height: 100%;
-
- border: 0;
- }
-
- .video-placeholder {
- position: absolute;
- top: 0;
- left: 0;
-
- display: flex;
- align-items: center;
- justify-content: center;
-
- width: 100%;
- height: 100%;
-
- font-size: 24px;
- color: white;
-
- background: #ccc;
- }
-
- @include media-laptop-medium {
- max-height: 411px;
- }
- }
-
- @include media-tablet-large {
- padding: 0;
- }
- }
- }
-}
diff --git a/src/widgets/about-video/ui/about-video.test.tsx b/src/widgets/about-video/ui/about-video.test.tsx
new file mode 100644
index 000000000..06f726ac2
--- /dev/null
+++ b/src/widgets/about-video/ui/about-video.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { AboutVideo } from './about-video';
+import { RS_INTRO_URL } from '@/shared/constants';
+import { videoTitleLocalized } from 'data';
+
+describe('AboutVideo component', () => {
+ it('renders without crashing with default title', () => {
+ render();
+ const aboutVideo = screen.getByTestId('about-video');
+ const title = screen.getByTestId('widget-title');
+
+ expect(aboutVideo).toBeVisible();
+ expect(title).toBeVisible();
+ expect(title).toHaveTextContent(videoTitleLocalized['en'].title);
+ });
+
+ it('displays the RU title correctly', () => {
+ render();
+ const title = screen.getByTestId('widget-title');
+
+ expect(title).toHaveTextContent(videoTitleLocalized['ru'].title);
+ });
+
+ it('renders the placeholder in development mode', () => {
+ vi.stubEnv('DEV', true);
+ render();
+ const placeholder = screen.getByText('Video Placeholder');
+
+ expect(placeholder).toBeVisible();
+ });
+
+ it('renders the YouTube embed in production mode', () => {
+ vi.stubEnv('DEV', false);
+ render();
+ const video = screen.getByTitle('Introduction to The Rolling Scopes School Online Courses');
+
+ expect(video).toHaveAttribute('src', RS_INTRO_URL);
+ });
+});
diff --git a/src/widgets/about-video/ui/about-video.tsx b/src/widgets/about-video/ui/about-video.tsx
index a1cb12774..f2def05e2 100644
--- a/src/widgets/about-video/ui/about-video.tsx
+++ b/src/widgets/about-video/ui/about-video.tsx
@@ -1,33 +1,34 @@
+import classNames from 'classnames/bind';
+import { RS_INTRO_URL } from '@/shared/constants';
import { WidgetTitle } from '@/shared/ui/widget-title';
+import { videoTitleLocalized } from 'data';
-import './about-video.scss';
+import styles from './about-video.module.scss';
-type AboutVideoProps = { lang?: 'en' | 'ru' };
+const cx = classNames.bind(styles);
-const localizedContent = {
- en: { title: 'RS School video' },
- ru: { title: 'Видео RS School' },
-};
+type AboutVideoProps = { lang?: 'en' | 'ru' };
export const AboutVideo = ({ lang = 'en' }: AboutVideoProps) => {
// Needed to prevent flakiness in screenshot tests
const isRunningInDev = import.meta.env.DEV;
return (
-
-
-
{localizedContent[lang].title}
-
-
+
+
+ {videoTitleLocalized[lang].title}
+
+
{isRunningInDev
? (
-
Video Placeholder
+
Video Placeholder
)
: (