From 24f94118d4a8a8e1f401f0194a4f9b08899fd907 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 18:39:12 +0300
Subject: [PATCH 01/67] feat: 348 - add cva package

---
 package-lock.json | 20 ++++++++++++++++++++
 package.json      |  3 ++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 858902a3d..a9390cd6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "rs-site",
       "version": "0.0.0",
       "dependencies": {
+        "class-variance-authority": "^0.7.0",
         "classnames": "^2.5.1",
         "dayjs": "^1.11.11",
         "nextjs-toploader": "^1.6.12",
@@ -3628,6 +3629,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -3745,6 +3757,14 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/package.json b/package.json
index 2f8ac6c88..0cb8fc7f6 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
     "nextjs-toploader": "^1.6.12",
@@ -71,4 +72,4 @@
     "vite": "^5.2.12",
     "vitest": "^1.5.0"
   }
-}
\ No newline at end of file
+}

From ef00d5e915b15a51c29aaedfb3137b5e88885c08 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:01:50 +0300
Subject: [PATCH 02/67] feat: 348 - add new size constants

---
 src/app/styles/_constants.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/styles/_constants.scss b/src/app/styles/_constants.scss
index 949d546cf..3fb6282a8 100644
--- a/src/app/styles/_constants.scss
+++ b/src/app/styles/_constants.scss
@@ -14,6 +14,11 @@ $font-weight-regular: 400;
 $font-weight-medium: 500;
 $font-weight-bold: 700;
 
+// font sizes
+$widget-title-font-size-small: 36px;
+$widget-title-font-size-medium: 44px;
+$widget-title-font-size-large: 52px;
+
 // COLORS
 
 // Primary colors

From 209f463701728238b51edf0cb32707ea8363920d Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:02:29 +0300
Subject: [PATCH 03/67] feat: 348 - delete h2 default margin

---
 src/app/styles/index.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
index 576189a72..afc3c1d64 100644
--- a/src/app/styles/index.scss
+++ b/src/app/styles/index.scss
@@ -27,6 +27,10 @@ li {
   padding: 0;
 }
 
+h2 {
+  margin: 0;
+}
+
 figure {
   margin: 0;
   padding: 0;

From 39d993e509878649d56f176907537b3f48cf302d Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:03:59 +0300
Subject: [PATCH 04/67] feat: 348 - add widget-title component

---
 .../ui/widget-title/widget-title.module.scss  | 43 ++++++++++++
 .../ui/widget-title/widget-title.test.tsx     | 68 +++++++++++++++++++
 src/shared/ui/widget-title/widget-title.tsx   | 51 ++++++++++++++
 3 files changed, 162 insertions(+)
 create mode 100644 src/shared/ui/widget-title/widget-title.module.scss
 create mode 100644 src/shared/ui/widget-title/widget-title.test.tsx
 create mode 100644 src/shared/ui/widget-title/widget-title.tsx

diff --git a/src/shared/ui/widget-title/widget-title.module.scss b/src/shared/ui/widget-title/widget-title.module.scss
new file mode 100644
index 000000000..c7c133ca1
--- /dev/null
+++ b/src/shared/ui/widget-title/widget-title.module.scss
@@ -0,0 +1,43 @@
+.title {
+  font-weight: $font-weight-medium;
+  letter-spacing: -0.04em;
+
+  &::before {
+    margin-right: 8px;
+    color: $color-red;
+  }
+}
+
+.small {
+  font-size: $widget-title-font-size-small;
+  line-height: 44px;
+  letter-spacing: 0;
+}
+
+.medium {
+  font-size: $widget-title-font-size-medium;
+  line-height: 52px;
+
+  @include media-tablet {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+
+.large {
+  @include media-tablet {
+    font-size: 36px;
+    line-height: 44px;
+  }
+
+  font-size: $widget-title-font-size-large;
+  line-height: 64px;
+}
+
+.lines::before {
+  content: '‖';
+}
+
+.asterisk::before {
+  content: '*';
+}
diff --git a/src/shared/ui/widget-title/widget-title.test.tsx b/src/shared/ui/widget-title/widget-title.test.tsx
new file mode 100644
index 000000000..cb9c3901d
--- /dev/null
+++ b/src/shared/ui/widget-title/widget-title.test.tsx
@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { WidgetTitle } from './widget-title';
+
+import styles from './widget-title.module.scss';
+
+describe('WidgetTitle component', () => {
+  it('renders without crashing', () => {
+    render(<WidgetTitle>TestTitle</WidgetTitle>);
+    const title = screen.getByText('TestTitle');
+
+    expect(title).toBeInTheDocument();
+  });
+
+  it('displays h2 tag', () => {
+    render(<WidgetTitle />);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toBeInTheDocument();
+  });
+
+  it('displays size correctly when size=small', () => {
+    render(<WidgetTitle size="small">TestTitle</WidgetTitle>);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toHaveClass(styles.small);
+  });
+
+  it('displays size correctly when size=medium', () => {
+    render(<WidgetTitle size="medium">TestTitle</WidgetTitle>);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toHaveClass(styles.medium);
+  });
+
+  it('displays size correctly when size=large', () => {
+    render(<WidgetTitle size="large">TestTitle</WidgetTitle>);
+    const element = screen.getByRole('heading', { level: 2 });
+
+    expect(element).toHaveClass(styles.large);
+  });
+
+  it('displays an asterisk when mods=asterisk', () => {
+    render(<WidgetTitle mods="asterisk">TestTitle</WidgetTitle>);
+    const asterisk = screen.getByRole('heading', { level: 2 });
+
+    expect(asterisk).toHaveClass(styles.asterisk);
+  });
+
+  it('displays lines when mods=lines', () => {
+    render(<WidgetTitle mods="lines">TestTitle</WidgetTitle>);
+    const lines = screen.getByRole('heading', { level: 2 });
+
+    expect(lines).toHaveClass(styles.lines);
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <WidgetTitle>
+        <div>Child element</div>
+      </WidgetTitle>,
+    );
+
+    const child = screen.getByText('Child element');
+
+    expect(child).toBeInTheDocument();
+  });
+});
diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
new file mode 100644
index 000000000..a68a65a65
--- /dev/null
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -0,0 +1,51 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import styles from './widget-title.module.scss';
+
+export type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+
+export const widgetTitleVariants = cva(styles.title, {
+  variants: {
+    // accent: {
+    //   left: styles.leftAccent,
+    //   top: styles.topAccent,
+    // },
+    // variant: {
+    //   primary: styles.primary,
+    //   secondary: styles.secondary,
+    //   danger: styles.danger,
+    //   warning: styles.warning,
+    //   success: styles.success,
+    // },
+    mods: {
+      lines: styles.lines,
+      asterisk: styles.asterisk,
+    },
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+      large: styles.large,
+    },
+  },
+  defaultVariants: {
+    // accent: null,
+    size: 'medium',
+    mods: null,
+    // variant: 'primary',
+  },
+});
+
+export const WidgetTitle = ({ children, size, mods, className, ...props }: WidgetTitleProps) => {
+  return (
+    <h2
+      {...props}
+      className={widgetTitleVariants({
+        size,
+        mods,
+        className,
+      })}
+    >
+      {children}
+    </h2>
+  );
+};

From 662fb8f8db53092be8adcf3851bb778405c3ad81 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:04:54 +0300
Subject: [PATCH 05/67] refactor: 348 - Title to WidgetTitle in Parthered

---
 src/app/layouts/base-layout/components/partnered/partnered.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/layouts/base-layout/components/partnered/partnered.tsx b/src/app/layouts/base-layout/components/partnered/partnered.tsx
index 8d7cb0c7d..804f76bc9 100644
--- a/src/app/layouts/base-layout/components/partnered/partnered.tsx
+++ b/src/app/layouts/base-layout/components/partnered/partnered.tsx
@@ -1,11 +1,12 @@
 import { AwsLogo, EpamLogo, GithubLogo, JetBrainsLogo } from '@/shared/icons';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './partnered.scss';
 
 export const Partnered = () => (
   <div className="partnered container" data-testid="partnered">
     <div className="partnered content">
-      <div className="title">Partnered with</div>
+      <WidgetTitle size="small">Partnered with</WidgetTitle>
       <div className="partners">
         <EpamLogo />
         <JetBrainsLogo />

From 7ad774a511fd1a2c0ee7ba262185c9222a870cb0 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:05:19 +0300
Subject: [PATCH 06/67] refactor: 348 - Title to WidgetTitle in General

---
 src/entities/courses/ui/general/general.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/entities/courses/ui/general/general.tsx b/src/entities/courses/ui/general/general.tsx
index 3cc35ed42..19ca250f2 100644
--- a/src/entities/courses/ui/general/general.tsx
+++ b/src/entities/courses/ui/general/general.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './general.scss';
 
@@ -7,7 +7,7 @@ export const General = () => {
   return (
     <section className="general container">
       <div className="general content">
-        <Title text="General" />
+        <WidgetTitle size="small">General</WidgetTitle>
         <div className="general-info">
           <div className="materials">
             <h2 className="title">Materials</h2>

From 54fd975dd20556496f970f0c824e59503e221674 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:06:07 +0300
Subject: [PATCH 07/67] refactor: 348 - add fixme anchor for h1 in main

---
 src/entities/courses/ui/main/main.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/entities/courses/ui/main/main.tsx b/src/entities/courses/ui/main/main.tsx
index 31d69ddeb..26f51ea60 100644
--- a/src/entities/courses/ui/main/main.tsx
+++ b/src/entities/courses/ui/main/main.tsx
@@ -4,6 +4,7 @@ import { Title, TitleType } from '@/shared/ui/title';
 
 import './main.scss';
 
+// FIXME Title to h1
 export const Main = () => {
   return (
     <main id="main" className="courses-main container">

From cf3e2c84cce9839db830725d53124efa6d58cfce Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:06:31 +0300
Subject: [PATCH 08/67] refactor: 348 - Title to WidgetTitle in About

---
 src/widgets/about/ui/about.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/about/ui/about.tsx b/src/widgets/about/ui/about.tsx
index 6c8cde3e0..d0b9c6224 100644
--- a/src/widgets/about/ui/about.tsx
+++ b/src/widgets/about/ui/about.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable @stylistic/jsx-one-expression-per-line */
 import { InfoGrid } from './info-grid/info-grid';
 import { contentMap } from '../about.data';
-
 import { type Course } from '@/app/types';
 import { useCourseByTitle } from '@/shared/hooks/use-course-by-title';
 import { ArrowIcon } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './about.scss';
 
@@ -64,7 +63,7 @@ export const About = ({ courseName, type = 'en' }: AboutProps) => {
   return (
     <section className="course-about container">
       <div className="course-about content">
-        <Title text={localizedContent[type].title} />
+        <WidgetTitle size="medium">{localizedContent[type].title}</WidgetTitle>
         {localizedContent[type].paragraph && (
           <Paragraph>{localizedContent[type].paragraph}</Paragraph>
         )}

From e85543f075e5db0fa2b7785a9ce708a35ce7a564 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:06:59 +0300
Subject: [PATCH 09/67] refactor: 348 - Title to WidgetTitle in About-Home

---
 src/widgets/about-home/ui/about.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/about-home/ui/about.tsx b/src/widgets/about-home/ui/about.tsx
index 37bca8a25..1f3f01af7 100644
--- a/src/widgets/about-home/ui/about.tsx
+++ b/src/widgets/about-home/ui/about.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/about.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './about.scss';
 
@@ -11,7 +11,7 @@ export const About = () => {
     <div className="about container" id="about">
       <div className="about content column-2">
         <div className="left">
-          <Title text="Who we are" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">Who we are</WidgetTitle>
           <Subtitle
             text="Our mission is to provide free education in intriguing subjects, connect people, and grow
           together."

From 39e24a3a94fef4263a83d1f830b7047be468a45e Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:07:27 +0300
Subject: [PATCH 10/67] refactor: 348 - Title to WidgetTitle in About-School

---
 src/widgets/about-school/ui/about.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/about-school/ui/about.tsx b/src/widgets/about-school/ui/about.tsx
index bab123508..d9c4aab21 100644
--- a/src/widgets/about-school/ui/about.tsx
+++ b/src/widgets/about-school/ui/about.tsx
@@ -1,6 +1,6 @@
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './about.scss';
 
@@ -10,7 +10,7 @@ export const About = () => {
       <div className="rs-about content">
         <div className="column-2">
           <div className="info">
-            <Title text="About RS School" hasAsterisk />
+            <WidgetTitle size="medium" mods="asterisk">About RS School</WidgetTitle>
             <Subtitle text="No matter your age, professional employment, or place of residence." />
             <Paragraph>
               RS School offers a unique learning experience as a free, community-based online

From b43e5b1b3c319e0c2dc4215dd13196e8200051d1 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:08:02 +0300
Subject: [PATCH 11/67] refactor: 348 - Title to WidgetTitle in Alumni

---
 src/widgets/alumni/ui/alumni.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/alumni/ui/alumni.tsx b/src/widgets/alumni/ui/alumni.tsx
index 6e6a8e044..f86631c21 100644
--- a/src/widgets/alumni/ui/alumni.tsx
+++ b/src/widgets/alumni/ui/alumni.tsx
@@ -1,9 +1,8 @@
 import { alumni } from '../constants';
-
 import { useWindowSize } from '@/shared/hooks/use-window-size';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './alumni.scss';
 
@@ -28,7 +27,7 @@ export const Alumni = () => {
   return (
     <article className="alumni container">
       <section className="alumni content">
-        <Title text="Our alumni" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">Our alumni</WidgetTitle>
         <Paragraph>
           We are immensely proud of RS School alumni who build their successful careers in ambitious
           IT companies

From 359dd9d8d5d7d1cdb202bcd0c096d45884788bcf Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:08:48 +0300
Subject: [PATCH 12/67] refactor: 348 - Title to WidgetTitle in Angular-Topics

---
 src/widgets/angular-topics/ui/angular-topics.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/angular-topics/ui/angular-topics.tsx b/src/widgets/angular-topics/ui/angular-topics.tsx
index a8fbdf2a1..5d785ccda 100644
--- a/src/widgets/angular-topics/ui/angular-topics.tsx
+++ b/src/widgets/angular-topics/ui/angular-topics.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames/bind';
-
 import { Actions } from '@/shared/ui/actions/actions';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './angular-topics.module.scss';
 
@@ -24,7 +23,7 @@ export const AngularTopics = () => {
   return (
     <section className={cx('angular-topics', 'container')}>
       <article className={cx('content', 'angular-topics-content')}>
-        <Title text="Topics Covered:" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">Topics Covered:</WidgetTitle>
         <Actions actions={topicsList} marked />
       </article>
     </section>

From aada313e66e0f3fd641dd1c3eb083cd72f865336 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:09:20 +0300
Subject: [PATCH 13/67] refactor: 348 - Title to WidgetTitle in Certification

---
 src/widgets/certification/ui/certification.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/certification/ui/certification.tsx b/src/widgets/certification/ui/certification.tsx
index c077538bc..be8a3bded 100644
--- a/src/widgets/certification/ui/certification.tsx
+++ b/src/widgets/certification/ui/certification.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames/bind';
 import { CourseNames } from '@/shared/data/communication.data';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './certification.module.scss';
 
@@ -44,7 +44,7 @@ export const Certification = ({ courseName }: RequiredProps) => {
   return (
     <section className={cx('certification', 'container')}>
       <article className={cx('certification', 'content', 'info-wrapper')}>
-        <Title text={title} hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">{title}</WidgetTitle>
         <div className={cx('paragraphs-wrapper')}>
           <Paragraph>{firstParagraph}</Paragraph>
           {secondParagraph && <Paragraph>{secondParagraph}</Paragraph>}

From 7a612e160056aa758c5d37f568bc25ce7de9c484 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:09:53 +0300
Subject: [PATCH 14/67] refactor: 348 - Title to WidgetTitle in Communication

---
 src/widgets/communication/ui/communication.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx
index 09461a969..deb2d4cb5 100644
--- a/src/widgets/communication/ui/communication.tsx
+++ b/src/widgets/communication/ui/communication.tsx
@@ -10,7 +10,7 @@ import { DiscordLogo } from '@/shared/icons/discord-logo';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './communication.scss';
 
@@ -55,7 +55,7 @@ export const Communication = ({ courseName, lang = 'en' }: RequiredProps) => {
   return (
     <section className="communication container">
       <article className="communication content info-wrapper">
-        <Title text={localizedContent[lang].title} hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">{localizedContent[lang].title}</WidgetTitle>
         <div className="column-2">
           <figure className="disclogo-wrapper">
             <DiscordLogo />

From f9a6a0388d6712394cb5b1df5e9115c4f9b903e1 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:10:55 +0300
Subject: [PATCH 15/67] refactor: 348 - Title to WidgetTitle in Community

---
 src/widgets/community/ui/community.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/community/ui/community.tsx b/src/widgets/community/ui/community.tsx
index 05e0f3212..78ffca1c3 100644
--- a/src/widgets/community/ui/community.tsx
+++ b/src/widgets/community/ui/community.tsx
@@ -3,7 +3,7 @@ import { FacebookIcon, InstagramIcon, LinkedInIcon, TelegramIcon, YouTubeIcon }
 import Image from '@/shared/ui/image';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './community.scss';
 
@@ -59,7 +59,7 @@ export const Community = () => (
   <div id="community" className="community container">
     <div className="community content column-2">
       <div className="info">
-        <Title text="Join RS Community" type={TitleType.Big} hasAsterisk={false} hasLines={true} />
+        <WidgetTitle size="large" mods="lines">Join RS Community</WidgetTitle>
         <Subtitle text="If you want to learn coding or be a RS School mentor, speaking at developers meetups and conferences or taking part in RS clubs welcome to the Rolling Scopes community! Join us in social networks to be in touch!" />
         <div className="social-media-container">
           {communityGroups.map(({ title, href, icon }) => (

From cdbb271f067c25cf8d8c3e1662806d522336a14f Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:11:23 +0300
Subject: [PATCH 16/67] refactor: 348 - Title to WidgetTitle in Contribute

---
 src/widgets/contribute/ui/contribute.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/contribute/ui/contribute.tsx b/src/widgets/contribute/ui/contribute.tsx
index 4ae343064..8b00d4f17 100644
--- a/src/widgets/contribute/ui/contribute.tsx
+++ b/src/widgets/contribute/ui/contribute.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/contribute.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 import { OptionItem, OptionItemProps } from '@/widgets/option-item';
 
 import './contribute.scss';
@@ -29,7 +29,7 @@ export const Contribute = () => (
     <div className="contribute content">
       <div className="general">
         <div className="info">
-          <Title text="How to Contribute" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">How to Contribute</WidgetTitle>
           <Subtitle text="Contributing to The Rolling Scopes is not only a great way to give back to the community, but it's also an excellent way to enhance your own knowledge." />
           <Paragraph>
             Remember, teaching others is one of the best ways to learn - this is known as The

From 90a3cb62cd94658e6a10a59c9a530f09b3407485 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:11:52 +0300
Subject: [PATCH 17/67] refactor: 348 - Title to WidgetTitle in Course-main

---
 src/widgets/course-main/course-main.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/course-main/course-main.tsx b/src/widgets/course-main/course-main.tsx
index a5ec2f32f..2d1ab5402 100644
--- a/src/widgets/course-main/course-main.tsx
+++ b/src/widgets/course-main/course-main.tsx
@@ -9,7 +9,7 @@ import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './course-main.module.scss';
 
@@ -44,7 +44,7 @@ export const CourseMain = ({ courseName, lang = 'en', type }: CourseMainProps) =
         <Image className={styles.icon} src={secondaryIcon} alt={title} lazy="false" />
         <div className={styles.info}>
           <SectionLabel label={status} />
-          <Title text={`${altTitle || title} Course`} />
+          <WidgetTitle size="medium">{`${altTitle || title} Course`}</WidgetTitle>
           {type && <Subtitle text={type} type="course-main" />}
           <DateLang startDate={startDate} language={language} mode={mode} type="main" />
           <LinkCustom

From 0476e9d97f7d21caced57210433ee781a868f16d Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:12:16 +0300
Subject: [PATCH 18/67] refactor: 348 - Title to WidgetTitle in Courses

---
 src/widgets/courses/ui/courses.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/courses/ui/courses.tsx b/src/widgets/courses/ui/courses.tsx
index b899c9fcc..22a218e52 100644
--- a/src/widgets/courses/ui/courses.tsx
+++ b/src/widgets/courses/ui/courses.tsx
@@ -2,7 +2,7 @@ import { CourseCard, finedNearestCourse } from '@/entities/courses';
 import { compareNumbers } from '@/entities/courses/helpers/compare-courses';
 import { isCourse } from '@/entities/courses/helpers/is-course';
 import { useDataByName } from '@/shared/hooks/use-data-by-name';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './courses.scss';
 
@@ -30,7 +30,7 @@ export const Courses = () => {
   return (
     <section className="rs-courses container" id="upcoming-courses">
       <div className="rs-courses content">
-        <Title text="All courses" type={TitleType.Regular} />
+        <WidgetTitle size="medium">All courses</WidgetTitle>
         <div className="rs-courses-wrapper" data-testid="courses-fancy">
           {sortedCourses.map((course) => {
             return <CourseCard key={course.id} {...course} />;

From 055ef8da9e64fbe7de1a5f03f01f36ec02af5b6c Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:13:34 +0300
Subject: [PATCH 19/67] refactor: 348 - remove unsused styles in courses

---
 src/widgets/courses-school/ui/courses.module.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/widgets/courses-school/ui/courses.module.scss b/src/widgets/courses-school/ui/courses.module.scss
index f219bb270..8b3703cf3 100644
--- a/src/widgets/courses-school/ui/courses.module.scss
+++ b/src/widgets/courses-school/ui/courses.module.scss
@@ -1,11 +1,6 @@
 .course-title {
   margin-top: 24px;
   margin-bottom: 0;
-
-  font-size: 36px;
-  font-weight: $font-weight-medium;
-  line-height: 44px;
-  letter-spacing: 0;
 }
 
 .image {

From c5ec4879cd2532787c99e2f25549df814f501f21 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:14:30 +0300
Subject: [PATCH 20/67] refactor: 348 - add widget-title in course-school

---
 src/widgets/courses-school/ui/courses.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses.tsx
index 894ef6b32..740ac114f 100644
--- a/src/widgets/courses-school/ui/courses.tsx
+++ b/src/widgets/courses-school/ui/courses.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames/bind';
 import { CourseCard } from './CourseCard';
 import { selectCourses } from '../lib/selectCourses';
 import { ROUTES } from '@/app/const';
-
 import { courses } from '@/app/services/data';
 import { useWindowSize } from '@/shared/hooks/use-window-size';
 import { ArrowIcon, RsBanner } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './courses.module.scss';
 
@@ -43,7 +43,7 @@ export const Courses = () => {
   return (
     <article id="upcoming-courses" className={cx('container')}>
       <section className={cx('content')}>
-        <h4 className={cx('course-title')}>Upcoming courses</h4>
+        <WidgetTitle size="small" className={cx('course-title')}>Upcoming courses</WidgetTitle>
         <div className={cx('column-2')}>
           <div className={cx('course-list')} data-testid="courses-list">
             {coursesContent}

From 21559551c0080990f1948576775969c3b60e2e1e Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:15:01 +0300
Subject: [PATCH 21/67] refactor: 348 - Title to WidgetTitle in Events

---
 src/widgets/events/ui/events.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/events/ui/events.tsx b/src/widgets/events/ui/events.tsx
index 39b167142..1d6caa766 100644
--- a/src/widgets/events/ui/events.tsx
+++ b/src/widgets/events/ui/events.tsx
@@ -9,7 +9,7 @@ import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './events.module.scss';
 
@@ -34,7 +34,7 @@ export const Events = () => {
       <div className={cn(cx('events', 'content'), 'content')}>
         <section className={cx('info')}>
           <SectionLabel label="events & meetups" />
-          <Title text="Meet us at events" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">Meet us at events</WidgetTitle>
           <Subtitle text="For years we have been organizing meetups and conferences, where you can always learn something new, share your knowledge, discover new technologies, meet old and find new friends." />
           <Paragraph>
             During

From 6c2d58b0909861ba83a16798ad75e5dffda166e3 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:15:25 +0300
Subject: [PATCH 22/67] refactor: 348 - Title to WidgetTitle in FAQ

---
 src/widgets/faq/ui/faq.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/faq/ui/faq.tsx b/src/widgets/faq/ui/faq.tsx
index 8139b268d..f55ee993b 100644
--- a/src/widgets/faq/ui/faq.tsx
+++ b/src/widgets/faq/ui/faq.tsx
@@ -2,7 +2,7 @@
 import classNames from 'classnames/bind';
 import { faqData } from '../faq.data';
 import { TextWithLink } from '@/shared/ui/text-with-link';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './faq.module.scss';
 
@@ -12,7 +12,7 @@ export const Faq = () => {
   return (
     <section className={cx('faq', 'container')}>
       <div className={cx('content', 'info-wrapper')}>
-        <Title text="FAQ" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">FAQ</WidgetTitle>
         <ol className={cx('list')}>
           {faqData.map(({ question, answer }, index) => (
             <li className={cx('list-item')} key={question}>

From 93722c0145ca398eb5abe27ab234b2b508a0e874 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:15:46 +0300
Subject: [PATCH 23/67] refactor: 348 - Title to WidgetTitle in Main

---
 src/widgets/main/ui/main.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/main/ui/main.tsx b/src/widgets/main/ui/main.tsx
index cf6e493bc..422926414 100644
--- a/src/widgets/main/ui/main.tsx
+++ b/src/widgets/main/ui/main.tsx
@@ -3,6 +3,7 @@ import { Title, TitleType } from '@/shared/ui/title';
 
 import './main.scss';
 
+// FIXME title to h1
 export const Main = () => {
   return (
     <main id="main" className="school-main container">

From 195f076b9a1bd69b60bcba056d1a60bd75a73fbd Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:16:13 +0300
Subject: [PATCH 24/67] refactor: 348 - Title to WidgetTitle in Mentoring

---
 src/widgets/mentoring/ui/mentoring.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/widgets/mentoring/ui/mentoring.tsx b/src/widgets/mentoring/ui/mentoring.tsx
index 5d7aa71d8..420bdfee8 100644
--- a/src/widgets/mentoring/ui/mentoring.tsx
+++ b/src/widgets/mentoring/ui/mentoring.tsx
@@ -1,3 +1,5 @@
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+
 import './mentoring.scss';
 
 const mentorshipBenefits = [
@@ -27,7 +29,7 @@ export const Mentoring = () => {
   return (
     <section className="mentoring container">
       <div className="mentoring content">
-        <div className="title">Mentoring is for you if you</div>
+        <WidgetTitle size="small">Mentoring is for you if you</WidgetTitle>
         <div className="benefits">
           {mentorshipBenefits.map(({ id, info }) => (
             <div key={id} className="benefit">

From c4aa427893ef5310dac0f7d48ed405315ccf7e02 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:16:36 +0300
Subject: [PATCH 25/67] refactor: 348 - Title to WidgetTitle in Mentors

---
 src/widgets/mentors/ui/mentors.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/mentors/ui/mentors.tsx b/src/widgets/mentors/ui/mentors.tsx
index ca7ae33ef..e026519e2 100644
--- a/src/widgets/mentors/ui/mentors.tsx
+++ b/src/widgets/mentors/ui/mentors.tsx
@@ -4,7 +4,7 @@ import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './mentors.scss';
 
@@ -13,7 +13,7 @@ export const Mentors = () => {
     <section className="mentors container" id="mentors-wanted">
       <div className="mentors content column-2">
         <div className="mentors-info">
-          <Title text="Mentors wanted!" hasLines type={TitleType.Big} />
+          <WidgetTitle size="large" mods="lines">Mentors wanted!</WidgetTitle>
           <Subtitle
             text="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.

From 6a8ba39bbacf52959ac21d77edb7b3d4c3b9c8db Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:16:59 +0300
Subject: [PATCH 26/67] refactor: 348 - Title to WidgetTitle in Mentors-wanted

---
 src/widgets/mentors-wanted/ui/mentors-wanted.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/mentors-wanted/ui/mentors-wanted.tsx b/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
index 35faf39b1..95b509fc8 100644
--- a/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
+++ b/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './mentors-wanted.module.scss';
 
@@ -16,7 +16,7 @@ export const MentorsWanted = () => {
     <section className={cx('mentors-wanted', 'container')}>
       <article className={classNames('content', cx('content'))}>
         <div className={cx('content-left')}>
-          <Title text="Mentors Wanted!" hasLines />
+          <WidgetTitle size="medium" mods="lines">Mentors Wanted!</WidgetTitle>
           <Paragraph>
             If&nbsp;you are interested in mentoring our students, please go through the
             {' '}

From 5fa330af8e792fbb111cba7d6f4b7f1f1f209687 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:17:23 +0300
Subject: [PATCH 27/67] refactor: 348 - Title to WidgetTitle in Merch

---
 src/widgets/merch/ui/merch.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/merch/ui/merch.tsx b/src/widgets/merch/ui/merch.tsx
index bcd123ffe..3d09b8bac 100644
--- a/src/widgets/merch/ui/merch.tsx
+++ b/src/widgets/merch/ui/merch.tsx
@@ -7,7 +7,7 @@ import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import styles from './merch.module.scss';
 
@@ -18,7 +18,7 @@ export const Merch = () => (
     <div className={cx('content', 'merch', 'column-2')}>
       <div className={cx('info')}>
         <SectionLabel label="merch" />
-        <Title text="RS merch" hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">RS merch</WidgetTitle>
         <Subtitle text="Are you an RS sloth fan and looking for RS merch?" />
         <Paragraph>
           The wait is almost over as we&apos;re gearing up for the catalog of free web and print

From 5b2a46ef0d7744aeb095460b1e2e1b85fcb28719 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:17:48 +0300
Subject: [PATCH 28/67] refactor: 348 - Title to WidgetTitle in Numbers

---
 src/widgets/numbers/ui/numbers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/numbers/ui/numbers.tsx b/src/widgets/numbers/ui/numbers.tsx
index 80210efcd..c34a91e96 100644
--- a/src/widgets/numbers/ui/numbers.tsx
+++ b/src/widgets/numbers/ui/numbers.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/map.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './numbers.scss';
 
@@ -26,7 +26,7 @@ export const Numbers = () => {
       <div className="numbers content">
         <div className="text-container">
           <div>
-            <Title text="The Rolling Scopes in numbers" hasAsterisk />
+            <WidgetTitle size="medium" mods="asterisk">The Rolling Scopes in numbers</WidgetTitle>
             <Subtitle
               text="Everyone can discover our community, regardless of age, professional employment, or
             place of residence."

From 8d1f86f8eb5df7c9852f4670b31e70f62bcc41f6 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:18:14 +0300
Subject: [PATCH 29/67] refactor: 348 - Title to WidgetTitle in Pictures

---
 src/widgets/pictures/ui/pictures.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/pictures/ui/pictures.tsx b/src/widgets/pictures/ui/pictures.tsx
index 974ba82af..89dcbc8c5 100644
--- a/src/widgets/pictures/ui/pictures.tsx
+++ b/src/widgets/pictures/ui/pictures.tsx
@@ -13,7 +13,7 @@ import { FacebookIcon, InstagramIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import './pictures.scss';
@@ -46,7 +46,7 @@ const photos = [photo1, photo2, photo3, photo4, photo5, photo6, photo7, photo8,
 export const Pictures = () => (
   <div className="pictures container">
     <div className="pictures content">
-      <Title text="The Rolling Scopes in pictures" hasAsterisk />
+      <WidgetTitle size="medium" mods="asterisk">The Rolling Scopes in pictures</WidgetTitle>
       <Carousel
         className="carousel"
         showArrows={true}

From 56b9cfe6255c7fe21a7706decc7c1cbdd7db22cc Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:18:46 +0300
Subject: [PATCH 30/67] refactor: 348 - Title to WidgetTitle in Principles

---
 src/widgets/principles/ui/principle-card/principles.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/widgets/principles/ui/principle-card/principles.tsx b/src/widgets/principles/ui/principle-card/principles.tsx
index 4b6cc7cfb..59fefb90b 100644
--- a/src/widgets/principles/ui/principle-card/principles.tsx
+++ b/src/widgets/principles/ui/principle-card/principles.tsx
@@ -1,18 +1,13 @@
 import { PrincipleCard } from './principle-card';
 import { cards } from '../../constants';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './principles.scss';
 
 export const Principles = () => (
   <div className="principles container">
     <div className="principles content">
-      <Title
-        text="RS School Principles are an ability to complete our mission"
-        type={TitleType.Big}
-        hasAsterisk={false}
-        hasLines={true}
-      />
+      <WidgetTitle size="large" mods="lines">RS School Principles are an ability to complete our mission</WidgetTitle>
       <div className="cards column-3 ">
         {cards.map(({ title, description, icon }) => (
           <PrincipleCard key={title} description={description} icon={icon} title={title} />

From 4b9f8624e36a09b861adef93aa115b9690a409fb Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:19:19 +0300
Subject: [PATCH 31/67] refactor: 348 - Title to WidgetTitle in Required

---
 src/widgets/required/ui/required.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/required/ui/required.tsx b/src/widgets/required/ui/required.tsx
index 67751fccf..57dd445f8 100644
--- a/src/widgets/required/ui/required.tsx
+++ b/src/widgets/required/ui/required.tsx
@@ -1,9 +1,8 @@
 import { courseDataMap } from '../required.data';
 import type { CourseName } from '../required.types';
-
 import { Actions } from '@/shared/ui/actions/actions';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './required.scss';
 
@@ -30,7 +29,7 @@ export const Required = ({ courseName, marked1, marked2 }: RequiredProps) => {
   return (
     <section className="required container">
       <div className="required content info-wrapper">
-        <Title text={title} hasAsterisk />
+        <WidgetTitle size="medium" mods="asterisk">{title}</WidgetTitle>
 
         <div className="column-2">
           {isKnowBeforeExist && (

From 91ba3c80d0c11341055f0ae0895aff2a730dd776 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:19:46 +0300
Subject: [PATCH 32/67] refactor: 348 - Title to WidgetTitle in Speakers

---
 src/widgets/speakers/ui/speakers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/speakers/ui/speakers.tsx b/src/widgets/speakers/ui/speakers.tsx
index 4392a976b..07c202f08 100644
--- a/src/widgets/speakers/ui/speakers.tsx
+++ b/src/widgets/speakers/ui/speakers.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/speakers-wanted.webp';
 import { EmailIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './speakers.scss';
 
@@ -10,7 +10,7 @@ export const Speakers = () => (
   <div className="speakers container">
     <div className="speakers content">
       <div className="info">
-        <Title text="Speakers wanted" type={TitleType.Big} hasAsterisk={false} hasLines={true} />
+        <WidgetTitle size="large" mods="lines">Speakers wanted</WidgetTitle>
         <Subtitle text="If you want to give a talk or conduct a workshop, present your open source project or share a success story, the Rolling Scopes welcomes all kinds of talk proposals." />
         <Subtitle text="So don't hesitate to drop a short synopsis to RS Head " />
 

From cc960aa4e058d69722eca9d58a45416968b91c1d Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:20:16 +0300
Subject: [PATCH 33/67] refactor: 348 - Title to WidgetTitle in Study-path

---
 src/widgets/study-path/ui/study-path.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/study-path/ui/study-path.tsx b/src/widgets/study-path/ui/study-path.tsx
index 0673e39cc..7181d5bb0 100644
--- a/src/widgets/study-path/ui/study-path.tsx
+++ b/src/widgets/study-path/ui/study-path.tsx
@@ -3,7 +3,7 @@ import { Stages } from './stages';
 import { type DataMap } from '@/app/services/data/courses-data.types';
 import { useDataByName } from '@/shared/hooks/use-data-by-name';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './study-path.scss';
 
@@ -45,7 +45,7 @@ export const StudyPath = ({ path, marked, lang = 'en' }: StudyPathProps) => {
     <LangContext.Provider value={lang}>
       <section className="study-path container" id="learning-path">
         <div className="study-path content upd">
-          <Title text={title} hasAsterisk />
+          <WidgetTitle size="small" mods="asterisk">{title}</WidgetTitle>
           <Paragraph>{paragraph}</Paragraph>
           <Stages stages={coursesPath} marked={marked} />
         </div>

From 64dc15689e217e14c1b76edb27658dbcbe9f26b9 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:20:38 +0300
Subject: [PATCH 34/67] refactor: 348 - Title to WidgetTitle in Study-with-us

---
 src/widgets/study-with-us/ui/study-with-us.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/study-with-us/ui/study-with-us.tsx b/src/widgets/study-with-us/ui/study-with-us.tsx
index 40ae661cf..9d1f2f29d 100644
--- a/src/widgets/study-with-us/ui/study-with-us.tsx
+++ b/src/widgets/study-with-us/ui/study-with-us.tsx
@@ -4,7 +4,7 @@ import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 import { OptionItem } from '@/widgets/option-item';
 
 import './study-with-us.scss';
@@ -15,7 +15,7 @@ export const StudyWithUs = () => (
       <div className="study">
         <div className="left">
           <SectionLabel label="education" />
-          <Title text="Study with RS School" hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">Study with RS School</WidgetTitle>
           <Subtitle text="RS School is a free and community-based online education program conducted by The Rolling Scopes Community since 2013. " />
           <Paragraph>
             Currently 500+ developers from different countries and companies involve in the

From 2b67df98a445f3f3be431e5d9facde6996806473 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:21:04 +0300
Subject: [PATCH 35/67] refactor: 348 - Title to WidgetTitle in Support

---
 src/widgets/support/ui/support.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/support/ui/support.tsx b/src/widgets/support/ui/support.tsx
index d2f55b3ab..dee662914 100644
--- a/src/widgets/support/ui/support.tsx
+++ b/src/widgets/support/ui/support.tsx
@@ -4,7 +4,7 @@ import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './support.scss';
 
@@ -12,7 +12,7 @@ export const Support = () => (
   <div className="support container">
     <div className="support content">
       <div className="info">
-        <Title text="Support Us" type={TitleType.Big} hasAsterisk={false} hasLines={true} />
+        <WidgetTitle size="large" mods="lines">Support Us</WidgetTitle>
         <Subtitle text="Your donations help us cover hosting, domains, licenses, and advertising for courses and events. Every donation, big or small, helps!" />
         <Subtitle text="Thank you for your support!" />
         <LinkCustom

From 1fd8a023ff0438f3cb98d91386e316369f8c9f2a Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:21:26 +0300
Subject: [PATCH 36/67] refactor: 348 - Title to WidgetTitle in Trainers

---
 src/widgets/trainers/ui/trainers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/trainers/ui/trainers.tsx b/src/widgets/trainers/ui/trainers.tsx
index 8d2eba5dc..3c3bc0fe0 100644
--- a/src/widgets/trainers/ui/trainers.tsx
+++ b/src/widgets/trainers/ui/trainers.tsx
@@ -1,5 +1,5 @@
 import { TrainerCard } from './trainers-card/trainer-card';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 import { Trainer } from '@/widgets/trainers/trainers.types';
 
 import './trainers.scss';
@@ -30,7 +30,7 @@ export const Trainers = ({ trainers, lang = 'en' }: TrainersProps) => {
   return (
     <section className="nodejs-trainer container">
       <div className="nodejs-trainer content gap">
-        <Title text={title} hasLines />
+        <WidgetTitle size="medium" mods="lines">{title}</WidgetTitle>
         <div className="trainers-list">
           {trainers.map(({ name, bio, photo, role }) => (
             <TrainerCard

From 5c5e9d68b380fe84ba20438dfd9615907b2b1b2f Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:22:45 +0300
Subject: [PATCH 37/67] refactor: 348 - Title to WidgetTitle in
 Training-program

---
 src/widgets/training-program/ui/training-program.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/training-program/ui/training-program.tsx b/src/widgets/training-program/ui/training-program.tsx
index 1b3cc7056..37ca8217c 100644
--- a/src/widgets/training-program/ui/training-program.tsx
+++ b/src/widgets/training-program/ui/training-program.tsx
@@ -1,12 +1,11 @@
 import { cloneElement } from 'react';
 import { type CourseNames, contentMap } from '../training-program.data';
-
 import type { Course } from '@/app/types';
 import { useCourseByTitle } from '@/shared/hooks/use-course-by-title';
 import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './training-program.scss';
 
@@ -34,7 +33,7 @@ export const TrainingProgram = ({ courseName, lang = 'en' }: TrainingProgramProp
     <section className="training-program container">
       <div className="training-program content column-2">
         <div className="left">
-          <Title text={title} hasAsterisk />
+          <WidgetTitle size="medium" mods="asterisk">{title}</WidgetTitle>
 
           {content.map((component, index) => cloneElement(component, { key: index }))}
 

From 008d6e4099c3a75d177301f35631c26a9fb1fb7a Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Wed, 26 Jun 2024 23:43:10 +0300
Subject: [PATCH 38/67] refactor: 348 - deletw commented code

---
 src/shared/ui/widget-title/widget-title.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
index a68a65a65..584a459fb 100644
--- a/src/shared/ui/widget-title/widget-title.tsx
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -6,17 +6,6 @@ export type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & Varian
 
 export const widgetTitleVariants = cva(styles.title, {
   variants: {
-    // accent: {
-    //   left: styles.leftAccent,
-    //   top: styles.topAccent,
-    // },
-    // variant: {
-    //   primary: styles.primary,
-    //   secondary: styles.secondary,
-    //   danger: styles.danger,
-    //   warning: styles.warning,
-    //   success: styles.success,
-    // },
     mods: {
       lines: styles.lines,
       asterisk: styles.asterisk,
@@ -28,10 +17,8 @@ export const widgetTitleVariants = cva(styles.title, {
     },
   },
   defaultVariants: {
-    // accent: null,
     size: 'medium',
     mods: null,
-    // variant: 'primary',
   },
 });
 

From 75b7a68eefd6b424d2c85e4fbbb787dca82cfea8 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 08:40:05 +0300
Subject: [PATCH 39/67] refactor: 348 - add vars for tablet font-size

---
 src/app/styles/_constants.scss                      |  2 ++
 src/shared/ui/widget-title/widget-title.module.scss | 10 +++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/styles/_constants.scss b/src/app/styles/_constants.scss
index 3fb6282a8..0a5009f1a 100644
--- a/src/app/styles/_constants.scss
+++ b/src/app/styles/_constants.scss
@@ -17,7 +17,9 @@ $font-weight-bold: 700;
 // font sizes
 $widget-title-font-size-small: 36px;
 $widget-title-font-size-medium: 44px;
+$widget-title-font-size-medium-tablet: 36px;
 $widget-title-font-size-large: 52px;
+$widget-title-font-size-large-tablet: 36px;
 
 // COLORS
 
diff --git a/src/shared/ui/widget-title/widget-title.module.scss b/src/shared/ui/widget-title/widget-title.module.scss
index c7c133ca1..fbac61311 100644
--- a/src/shared/ui/widget-title/widget-title.module.scss
+++ b/src/shared/ui/widget-title/widget-title.module.scss
@@ -19,19 +19,19 @@
   line-height: 52px;
 
   @include media-tablet {
-    font-size: 36px;
+    font-size: $widget-title-font-size-medium-tablet;
     line-height: 44px;
   }
 }
 
 .large {
+  font-size: $widget-title-font-size-large;
+  line-height: 64px;
+
   @include media-tablet {
-    font-size: 36px;
+    font-size: $widget-title-font-size-large-tablet;
     line-height: 44px;
   }
-
-  font-size: $widget-title-font-size-large;
-  line-height: 64px;
 }
 
 .lines::before {

From 709c9954b324eeca6cb0aed95db265e34e85d22b Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 08:43:28 +0300
Subject: [PATCH 40/67] refactor: 348 - Title to WidgetTitle in About-video

---
 src/widgets/about-video/ui/about-video.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/about-video/ui/about-video.tsx b/src/widgets/about-video/ui/about-video.tsx
index e11ff2199..365dd9a8f 100644
--- a/src/widgets/about-video/ui/about-video.tsx
+++ b/src/widgets/about-video/ui/about-video.tsx
@@ -1,4 +1,4 @@
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
 
 import './about-video.scss';
 
@@ -13,7 +13,7 @@ export const AboutVideo = ({ lang = 'en' }: AboutVideoProps) => {
   return (
     <div className="about-video container">
       <div className="about-video content">
-        <Title hasLines text={localizedContent[lang].title} />
+        <WidgetTitle size="medium" mods="lines">{localizedContent[lang].title}</WidgetTitle>
         <div className="video-wrapper">
           <div className="video-container">
             <iframe

From a77ca10b29f14c07c3c0addc66c48d9662fb3b61 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 09:38:24 +0300
Subject: [PATCH 41/67] refactor: 348 - Add vars for MainTitle

---
 src/app/styles/_constants.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/styles/_constants.scss b/src/app/styles/_constants.scss
index 0a5009f1a..47b6968e2 100644
--- a/src/app/styles/_constants.scss
+++ b/src/app/styles/_constants.scss
@@ -20,6 +20,8 @@ $widget-title-font-size-medium: 44px;
 $widget-title-font-size-medium-tablet: 36px;
 $widget-title-font-size-large: 52px;
 $widget-title-font-size-large-tablet: 36px;
+$main-title-font-size: 96px;
+$main-title-font-size-tablet: 61px;
 
 // COLORS
 

From 6590407d5592016babf4f420da4fa5aa89c93e1c Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 09:38:49 +0300
Subject: [PATCH 42/67] refactor: 348 - reset default h1 margin

---
 src/app/styles/index.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
index afc3c1d64..c16892ba6 100644
--- a/src/app/styles/index.scss
+++ b/src/app/styles/index.scss
@@ -27,6 +27,10 @@ li {
   padding: 0;
 }
 
+h1 {
+  margin: 0;
+}
+
 h2 {
   margin: 0;
 }

From 4e2d85b711c3541b3fb4bff28bd221d7d56705a8 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 09:39:50 +0300
Subject: [PATCH 43/67] refactor: 348 - add MainTitle comp

---
 .../ui/main-title/main-title.module.scss       | 12 ++++++++++++
 src/shared/ui/main-title/main-title.tsx        | 18 ++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/shared/ui/main-title/main-title.module.scss
 create mode 100644 src/shared/ui/main-title/main-title.tsx

diff --git a/src/shared/ui/main-title/main-title.module.scss b/src/shared/ui/main-title/main-title.module.scss
new file mode 100644
index 000000000..ec9e5616c
--- /dev/null
+++ b/src/shared/ui/main-title/main-title.module.scss
@@ -0,0 +1,12 @@
+.title {
+  font-size: $main-title-font-size;
+  font-weight: 700;
+  line-height: 19px;
+  color: $color-black;
+  text-align: left;
+  letter-spacing: -0.04em;
+
+  @include media-tablet {
+    font-size: $main-title-font-size-tablet;
+  }
+}
diff --git a/src/shared/ui/main-title/main-title.tsx b/src/shared/ui/main-title/main-title.tsx
new file mode 100644
index 000000000..1c16d2f96
--- /dev/null
+++ b/src/shared/ui/main-title/main-title.tsx
@@ -0,0 +1,18 @@
+import { VariantProps, cva } from 'class-variance-authority';
+
+import styles from './main-title.module.scss';
+
+type MainTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
+
+const mainTitleVariants = cva(styles.title);
+
+export const MainTitle = ({ children, className, ...props }: MainTitleProps) => {
+  return (
+    <h1
+      {...props}
+      className={mainTitleVariants({ className })}
+    >
+      {children}
+    </h1>
+  );
+};

From bc87ae7bb15e5cd0d5a6edfdda9de860b987906e Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 09:40:37 +0300
Subject: [PATCH 44/67] refactor: 348 - Title to MainTitle in courses/main

---
 src/entities/courses/ui/main/main.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/entities/courses/ui/main/main.tsx b/src/entities/courses/ui/main/main.tsx
index 26f51ea60..c1410442a 100644
--- a/src/entities/courses/ui/main/main.tsx
+++ b/src/entities/courses/ui/main/main.tsx
@@ -1,17 +1,16 @@
 import mentors from '@/shared/assets/mentor-with-his-students.webp';
 import Image from '@/shared/ui/image';
-import { Title, TitleType } from '@/shared/ui/title';
+import { MainTitle } from '@/shared/ui/main-title/main-title';
 
 import './main.scss';
 
-// FIXME Title to h1
 export const Main = () => {
   return (
     <main id="main" className="courses-main container">
       <div className="courses-main content">
         <div className="left">
           <div className="title-container">
-            <Title text="Our Courses" type={TitleType.ExtraBig} />
+            <MainTitle>Our Courses</MainTitle>
           </div>
           <h2 className="description">Journey to full stack mastery</h2>
         </div>

From d35f028ef2fcad4a32754755643abbab012ce3bb Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 09:41:42 +0300
Subject: [PATCH 45/67] refactor: 348 - delete widget main styles for title

---
 src/widgets/main/ui/main.scss | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/widgets/main/ui/main.scss b/src/widgets/main/ui/main.scss
index 70edeee9c..24c40a806 100644
--- a/src/widgets/main/ui/main.scss
+++ b/src/widgets/main/ui/main.scss
@@ -9,7 +9,7 @@
 
   &.content {
     @include media-laptop {
-      padding: 120px 40px 120px;
+      padding: 120px 40px;
     }
 
     @include media-tablet {
@@ -26,12 +26,6 @@
     max-width: 640px;
 
     .title-container {
-      & > .title {
-        @media (min-width: $tablet-width) {
-          font-size: 96px;
-        }
-      }
-
       & > .subtitle {
         padding-left: 4px;
 

From 706509d1316c0bd65f56463080fafd6bb19f92c0 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 09:42:10 +0300
Subject: [PATCH 46/67] refactor: 348 - Title to MainTitle in widgets/main

---
 src/widgets/main/ui/main.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/main/ui/main.tsx b/src/widgets/main/ui/main.tsx
index 422926414..9cd13567b 100644
--- a/src/widgets/main/ui/main.tsx
+++ b/src/widgets/main/ui/main.tsx
@@ -1,16 +1,15 @@
+import { MainTitle } from '@/shared/ui/main-title/main-title';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { Title, TitleType } from '@/shared/ui/title';
 
 import './main.scss';
 
-// FIXME title to h1
 export const Main = () => {
   return (
     <main id="main" className="school-main container">
       <div className="school-main content">
         <div className="left">
           <div className="title-container">
-            <Title text="RS School" type={TitleType.ExtraBig} />
+            <MainTitle>RS School</MainTitle>
             <Subtitle text="Free courses. High motivation" />
           </div>
           <h2 className="description">Connecting people, growing together, having fun</h2>

From 5b336088b5aae1327e4e9ce1ca52d59a0d5177ab Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 09:42:50 +0300
Subject: [PATCH 47/67] refactor: 348 - Delete exports in widget-title

---
 src/shared/ui/widget-title/widget-title.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
index 584a459fb..c85707ce4 100644
--- a/src/shared/ui/widget-title/widget-title.tsx
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -2,9 +2,9 @@ import { type VariantProps, cva } from 'class-variance-authority';
 
 import styles from './widget-title.module.scss';
 
-export type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
 
-export const widgetTitleVariants = cva(styles.title, {
+const widgetTitleVariants = cva(styles.title, {
   variants: {
     mods: {
       lines: styles.lines,

From 8179dbd00773dedb016bb2314a355d48f96ac39d Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 13:40:30 +0300
Subject: [PATCH 48/67] refactor: 348 - update vars for widget-title

---
 src/app/styles/_constants.scss                      | 4 +---
 src/shared/ui/widget-title/widget-title.module.scss | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/styles/_constants.scss b/src/app/styles/_constants.scss
index 47b6968e2..6592df7a0 100644
--- a/src/app/styles/_constants.scss
+++ b/src/app/styles/_constants.scss
@@ -17,11 +17,9 @@ $font-weight-bold: 700;
 // font sizes
 $widget-title-font-size-small: 36px;
 $widget-title-font-size-medium: 44px;
-$widget-title-font-size-medium-tablet: 36px;
 $widget-title-font-size-large: 52px;
-$widget-title-font-size-large-tablet: 36px;
 $main-title-font-size: 96px;
-$main-title-font-size-tablet: 61px;
+$main-title-font-size-tablet: 60px;
 
 // COLORS
 
diff --git a/src/shared/ui/widget-title/widget-title.module.scss b/src/shared/ui/widget-title/widget-title.module.scss
index fbac61311..714fcf352 100644
--- a/src/shared/ui/widget-title/widget-title.module.scss
+++ b/src/shared/ui/widget-title/widget-title.module.scss
@@ -19,7 +19,7 @@
   line-height: 52px;
 
   @include media-tablet {
-    font-size: $widget-title-font-size-medium-tablet;
+    font-size: $widget-title-font-size-small;
     line-height: 44px;
   }
 }
@@ -29,7 +29,7 @@
   line-height: 64px;
 
   @include media-tablet {
-    font-size: $widget-title-font-size-large-tablet;
+    font-size: $widget-title-font-size-small;
     line-height: 44px;
   }
 }

From 99f9c51454fe4be2463e9b54b74ff70d4964a77b Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 13:42:27 +0300
Subject: [PATCH 49/67] refactor: 348 - update reset for headiang tag

---
 src/app/styles/index.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
index c16892ba6..8637875a6 100644
--- a/src/app/styles/index.scss
+++ b/src/app/styles/index.scss
@@ -27,10 +27,7 @@ li {
   padding: 0;
 }
 
-h1 {
-  margin: 0;
-}
-
+h1,
 h2 {
   margin: 0;
 }
@@ -44,9 +41,7 @@ figure {
   display: flex;
   align-items: center;
   justify-content: center;
-
   width: 100%;
-
   text-align: left;
 }
 

From 27c99a59d72835fb79a4d91e7055962672378bef Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 14:04:58 +0300
Subject: [PATCH 50/67] refactor: 348 - to model and bind classnames

---
 .../ui/widget-title/widget-title.model.ts     | 26 +++++++++++++++++++
 src/shared/ui/widget-title/widget-title.tsx   | 24 +----------------
 2 files changed, 27 insertions(+), 23 deletions(-)
 create mode 100644 src/shared/ui/widget-title/widget-title.model.ts

diff --git a/src/shared/ui/widget-title/widget-title.model.ts b/src/shared/ui/widget-title/widget-title.model.ts
new file mode 100644
index 000000000..fdfd45799
--- /dev/null
+++ b/src/shared/ui/widget-title/widget-title.model.ts
@@ -0,0 +1,26 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
+
+import styles from './widget-title.module.scss';
+
+export type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+
+const cx = classNames.bind(styles);
+
+export const widgetTitleVariants = cva(cx('title'), {
+  variants: {
+    mods: {
+      lines: cx('lines'),
+      asterisk: cx('asterisk'),
+    },
+    size: {
+      small: cx('small'),
+      medium: cx('medium'),
+      large: cx('large'),
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+    mods: null,
+  },
+});
diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
index c85707ce4..ed176c8d1 100644
--- a/src/shared/ui/widget-title/widget-title.tsx
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -1,26 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-
-import styles from './widget-title.module.scss';
-
-type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
-
-const widgetTitleVariants = cva(styles.title, {
-  variants: {
-    mods: {
-      lines: styles.lines,
-      asterisk: styles.asterisk,
-    },
-    size: {
-      small: styles.small,
-      medium: styles.medium,
-      large: styles.large,
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-    mods: null,
-  },
-});
+import { WidgetTitleProps, widgetTitleVariants } from './widget-title.model';
 
 export const WidgetTitle = ({ children, size, mods, className, ...props }: WidgetTitleProps) => {
   return (

From 2f695f6b0a0ba9870a0984046f8c8b791db8efc4 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 14:37:19 +0300
Subject: [PATCH 51/67] refactor: 348 - delete h1 margin

---
 src/app/styles/_normalize.scss                  | 3 ++-
 src/shared/ui/main-title/main-title.module.scss | 1 -
 src/widgets/about/ui/info-grid/info-grid.scss   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/styles/_normalize.scss b/src/app/styles/_normalize.scss
index 25ef0e31c..677bed312 100644
--- a/src/app/styles/_normalize.scss
+++ b/src/app/styles/_normalize.scss
@@ -35,10 +35,11 @@ main {
 /**
    * Correct the font size and margin on `h1` elements within `section` and
    * `article` contexts in Chrome, Firefox, and Safari.
+   * delete h1 margin
    */
 
 h1 {
-  margin: 0.67em 0;
+  margin: 0;
   font-size: 2em;
 }
 
diff --git a/src/shared/ui/main-title/main-title.module.scss b/src/shared/ui/main-title/main-title.module.scss
index ec9e5616c..36636c576 100644
--- a/src/shared/ui/main-title/main-title.module.scss
+++ b/src/shared/ui/main-title/main-title.module.scss
@@ -1,7 +1,6 @@
 .title {
   font-size: $main-title-font-size;
   font-weight: 700;
-  line-height: 19px;
   color: $color-black;
   text-align: left;
   letter-spacing: -0.04em;
diff --git a/src/widgets/about/ui/info-grid/info-grid.scss b/src/widgets/about/ui/info-grid/info-grid.scss
index c55f0bb3d..d2cf97a10 100644
--- a/src/widgets/about/ui/info-grid/info-grid.scss
+++ b/src/widgets/about/ui/info-grid/info-grid.scss
@@ -48,7 +48,7 @@
         max-height: 40px;
       }
 
-      h2 {
+      > h2 {
         margin: 0;
         font-size: 20px;
         font-weight: $font-weight-medium;

From fb3b8b06a86d68018669915d7dbaf5c656c75dc3 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 14:39:10 +0300
Subject: [PATCH 52/67] refactor: 348 - add public api for widget-title

---
 src/shared/ui/widget-title/index.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/shared/ui/widget-title/index.ts

diff --git a/src/shared/ui/widget-title/index.ts b/src/shared/ui/widget-title/index.ts
new file mode 100644
index 000000000..11764e165
--- /dev/null
+++ b/src/shared/ui/widget-title/index.ts
@@ -0,0 +1 @@
+export { WidgetTitle } from './widget-title';

From b4563d5feeab691f8ecff2c74988e180f4bf4e4f Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 14:40:41 +0300
Subject: [PATCH 53/67] refactor: 348 - update paths /widget-title

---
 src/app/layouts/base-layout/components/partnered/partnered.tsx | 2 +-
 src/entities/courses/ui/general/general.tsx                    | 2 +-
 src/widgets/about-home/ui/about.tsx                            | 2 +-
 src/widgets/about-school/ui/about.tsx                          | 2 +-
 src/widgets/about-video/ui/about-video.tsx                     | 2 +-
 src/widgets/about/ui/about.tsx                                 | 2 +-
 src/widgets/alumni/ui/alumni.tsx                               | 2 +-
 src/widgets/angular-topics/ui/angular-topics.tsx               | 2 +-
 src/widgets/certification/ui/certification.tsx                 | 2 +-
 src/widgets/communication/ui/communication.tsx                 | 2 +-
 src/widgets/community/ui/community.tsx                         | 2 +-
 src/widgets/contribute/ui/contribute.tsx                       | 2 +-
 src/widgets/course-main/course-main.tsx                        | 2 +-
 src/widgets/courses-school/ui/courses.tsx                      | 2 +-
 src/widgets/courses/ui/courses.tsx                             | 2 +-
 src/widgets/events/ui/events.tsx                               | 2 +-
 src/widgets/faq/ui/faq.tsx                                     | 2 +-
 src/widgets/mentoring/ui/mentoring.tsx                         | 2 +-
 src/widgets/mentors-wanted/ui/mentors-wanted.tsx               | 2 +-
 src/widgets/mentors/ui/mentors.tsx                             | 2 +-
 src/widgets/merch/ui/merch.tsx                                 | 2 +-
 src/widgets/numbers/ui/numbers.tsx                             | 2 +-
 src/widgets/pictures/ui/pictures.tsx                           | 2 +-
 src/widgets/principles/ui/principle-card/principles.tsx        | 2 +-
 src/widgets/required/ui/required.tsx                           | 2 +-
 src/widgets/speakers/ui/speakers.tsx                           | 2 +-
 src/widgets/study-path/ui/study-path.tsx                       | 2 +-
 src/widgets/study-with-us/ui/study-with-us.tsx                 | 2 +-
 src/widgets/support/ui/support.tsx                             | 2 +-
 src/widgets/trainers/ui/trainers.tsx                           | 2 +-
 src/widgets/training-program/ui/training-program.tsx           | 2 +-
 31 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/app/layouts/base-layout/components/partnered/partnered.tsx b/src/app/layouts/base-layout/components/partnered/partnered.tsx
index 804f76bc9..df306a941 100644
--- a/src/app/layouts/base-layout/components/partnered/partnered.tsx
+++ b/src/app/layouts/base-layout/components/partnered/partnered.tsx
@@ -1,5 +1,5 @@
 import { AwsLogo, EpamLogo, GithubLogo, JetBrainsLogo } from '@/shared/icons';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './partnered.scss';
 
diff --git a/src/entities/courses/ui/general/general.tsx b/src/entities/courses/ui/general/general.tsx
index 19ca250f2..9eff99c1a 100644
--- a/src/entities/courses/ui/general/general.tsx
+++ b/src/entities/courses/ui/general/general.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './general.scss';
 
diff --git a/src/widgets/about-home/ui/about.tsx b/src/widgets/about-home/ui/about.tsx
index 1f3f01af7..b72029308 100644
--- a/src/widgets/about-home/ui/about.tsx
+++ b/src/widgets/about-home/ui/about.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/about.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about.scss';
 
diff --git a/src/widgets/about-school/ui/about.tsx b/src/widgets/about-school/ui/about.tsx
index d9c4aab21..1d24c5568 100644
--- a/src/widgets/about-school/ui/about.tsx
+++ b/src/widgets/about-school/ui/about.tsx
@@ -1,6 +1,6 @@
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about.scss';
 
diff --git a/src/widgets/about-video/ui/about-video.tsx b/src/widgets/about-video/ui/about-video.tsx
index 365dd9a8f..30f18c7f6 100644
--- a/src/widgets/about-video/ui/about-video.tsx
+++ b/src/widgets/about-video/ui/about-video.tsx
@@ -1,4 +1,4 @@
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about-video.scss';
 
diff --git a/src/widgets/about/ui/about.tsx b/src/widgets/about/ui/about.tsx
index d0b9c6224..437c4e521 100644
--- a/src/widgets/about/ui/about.tsx
+++ b/src/widgets/about/ui/about.tsx
@@ -6,7 +6,7 @@ import { useCourseByTitle } from '@/shared/hooks/use-course-by-title';
 import { ArrowIcon } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './about.scss';
 
diff --git a/src/widgets/alumni/ui/alumni.tsx b/src/widgets/alumni/ui/alumni.tsx
index f86631c21..a97ef2d09 100644
--- a/src/widgets/alumni/ui/alumni.tsx
+++ b/src/widgets/alumni/ui/alumni.tsx
@@ -2,7 +2,7 @@ import { alumni } from '../constants';
 import { useWindowSize } from '@/shared/hooks/use-window-size';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './alumni.scss';
 
diff --git a/src/widgets/angular-topics/ui/angular-topics.tsx b/src/widgets/angular-topics/ui/angular-topics.tsx
index 5d785ccda..6766a9f72 100644
--- a/src/widgets/angular-topics/ui/angular-topics.tsx
+++ b/src/widgets/angular-topics/ui/angular-topics.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames/bind';
 import { Actions } from '@/shared/ui/actions/actions';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './angular-topics.module.scss';
 
diff --git a/src/widgets/certification/ui/certification.tsx b/src/widgets/certification/ui/certification.tsx
index be8a3bded..7af351221 100644
--- a/src/widgets/certification/ui/certification.tsx
+++ b/src/widgets/certification/ui/certification.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames/bind';
 import { CourseNames } from '@/shared/data/communication.data';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './certification.module.scss';
 
diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx
index deb2d4cb5..0b137bbcf 100644
--- a/src/widgets/communication/ui/communication.tsx
+++ b/src/widgets/communication/ui/communication.tsx
@@ -10,7 +10,7 @@ import { DiscordLogo } from '@/shared/icons/discord-logo';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './communication.scss';
 
diff --git a/src/widgets/community/ui/community.tsx b/src/widgets/community/ui/community.tsx
index 78ffca1c3..b0e9532e2 100644
--- a/src/widgets/community/ui/community.tsx
+++ b/src/widgets/community/ui/community.tsx
@@ -3,7 +3,7 @@ import { FacebookIcon, InstagramIcon, LinkedInIcon, TelegramIcon, YouTubeIcon }
 import Image from '@/shared/ui/image';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './community.scss';
 
diff --git a/src/widgets/contribute/ui/contribute.tsx b/src/widgets/contribute/ui/contribute.tsx
index 8b00d4f17..52dd4414f 100644
--- a/src/widgets/contribute/ui/contribute.tsx
+++ b/src/widgets/contribute/ui/contribute.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/contribute.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 import { OptionItem, OptionItemProps } from '@/widgets/option-item';
 
 import './contribute.scss';
diff --git a/src/widgets/course-main/course-main.tsx b/src/widgets/course-main/course-main.tsx
index 2d1ab5402..e65fb884a 100644
--- a/src/widgets/course-main/course-main.tsx
+++ b/src/widgets/course-main/course-main.tsx
@@ -9,7 +9,7 @@ import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './course-main.module.scss';
 
diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses.tsx
index 740ac114f..b89c5d288 100644
--- a/src/widgets/courses-school/ui/courses.tsx
+++ b/src/widgets/courses-school/ui/courses.tsx
@@ -6,7 +6,7 @@ import { courses } from '@/app/services/data';
 import { useWindowSize } from '@/shared/hooks/use-window-size';
 import { ArrowIcon, RsBanner } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './courses.module.scss';
 
diff --git a/src/widgets/courses/ui/courses.tsx b/src/widgets/courses/ui/courses.tsx
index 22a218e52..fc2a4ebeb 100644
--- a/src/widgets/courses/ui/courses.tsx
+++ b/src/widgets/courses/ui/courses.tsx
@@ -2,7 +2,7 @@ import { CourseCard, finedNearestCourse } from '@/entities/courses';
 import { compareNumbers } from '@/entities/courses/helpers/compare-courses';
 import { isCourse } from '@/entities/courses/helpers/is-course';
 import { useDataByName } from '@/shared/hooks/use-data-by-name';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './courses.scss';
 
diff --git a/src/widgets/events/ui/events.tsx b/src/widgets/events/ui/events.tsx
index 1d6caa766..935b4a914 100644
--- a/src/widgets/events/ui/events.tsx
+++ b/src/widgets/events/ui/events.tsx
@@ -9,7 +9,7 @@ import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './events.module.scss';
 
diff --git a/src/widgets/faq/ui/faq.tsx b/src/widgets/faq/ui/faq.tsx
index f55ee993b..b0d066efc 100644
--- a/src/widgets/faq/ui/faq.tsx
+++ b/src/widgets/faq/ui/faq.tsx
@@ -2,7 +2,7 @@
 import classNames from 'classnames/bind';
 import { faqData } from '../faq.data';
 import { TextWithLink } from '@/shared/ui/text-with-link';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './faq.module.scss';
 
diff --git a/src/widgets/mentoring/ui/mentoring.tsx b/src/widgets/mentoring/ui/mentoring.tsx
index 420bdfee8..33ca8f9f8 100644
--- a/src/widgets/mentoring/ui/mentoring.tsx
+++ b/src/widgets/mentoring/ui/mentoring.tsx
@@ -1,4 +1,4 @@
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './mentoring.scss';
 
diff --git a/src/widgets/mentors-wanted/ui/mentors-wanted.tsx b/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
index 95b509fc8..fb43064b5 100644
--- a/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
+++ b/src/widgets/mentors-wanted/ui/mentors-wanted.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './mentors-wanted.module.scss';
 
diff --git a/src/widgets/mentors/ui/mentors.tsx b/src/widgets/mentors/ui/mentors.tsx
index e026519e2..447c7bc8d 100644
--- a/src/widgets/mentors/ui/mentors.tsx
+++ b/src/widgets/mentors/ui/mentors.tsx
@@ -4,7 +4,7 @@ import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './mentors.scss';
 
diff --git a/src/widgets/merch/ui/merch.tsx b/src/widgets/merch/ui/merch.tsx
index 3d09b8bac..1fb2786a1 100644
--- a/src/widgets/merch/ui/merch.tsx
+++ b/src/widgets/merch/ui/merch.tsx
@@ -7,7 +7,7 @@ import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './merch.module.scss';
 
diff --git a/src/widgets/numbers/ui/numbers.tsx b/src/widgets/numbers/ui/numbers.tsx
index c34a91e96..c95557e89 100644
--- a/src/widgets/numbers/ui/numbers.tsx
+++ b/src/widgets/numbers/ui/numbers.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/map.webp';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './numbers.scss';
 
diff --git a/src/widgets/pictures/ui/pictures.tsx b/src/widgets/pictures/ui/pictures.tsx
index 89dcbc8c5..aa4ebf5ce 100644
--- a/src/widgets/pictures/ui/pictures.tsx
+++ b/src/widgets/pictures/ui/pictures.tsx
@@ -13,7 +13,7 @@ import { FacebookIcon, InstagramIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import './pictures.scss';
diff --git a/src/widgets/principles/ui/principle-card/principles.tsx b/src/widgets/principles/ui/principle-card/principles.tsx
index 59fefb90b..df32dd4ce 100644
--- a/src/widgets/principles/ui/principle-card/principles.tsx
+++ b/src/widgets/principles/ui/principle-card/principles.tsx
@@ -1,6 +1,6 @@
 import { PrincipleCard } from './principle-card';
 import { cards } from '../../constants';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './principles.scss';
 
diff --git a/src/widgets/required/ui/required.tsx b/src/widgets/required/ui/required.tsx
index 57dd445f8..1613739d8 100644
--- a/src/widgets/required/ui/required.tsx
+++ b/src/widgets/required/ui/required.tsx
@@ -2,7 +2,7 @@ import { courseDataMap } from '../required.data';
 import type { CourseName } from '../required.types';
 import { Actions } from '@/shared/ui/actions/actions';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './required.scss';
 
diff --git a/src/widgets/speakers/ui/speakers.tsx b/src/widgets/speakers/ui/speakers.tsx
index 07c202f08..141a4dc9b 100644
--- a/src/widgets/speakers/ui/speakers.tsx
+++ b/src/widgets/speakers/ui/speakers.tsx
@@ -2,7 +2,7 @@ import image from '@/shared/assets/speakers-wanted.webp';
 import { EmailIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './speakers.scss';
 
diff --git a/src/widgets/study-path/ui/study-path.tsx b/src/widgets/study-path/ui/study-path.tsx
index 7181d5bb0..0d162137e 100644
--- a/src/widgets/study-path/ui/study-path.tsx
+++ b/src/widgets/study-path/ui/study-path.tsx
@@ -3,7 +3,7 @@ import { Stages } from './stages';
 import { type DataMap } from '@/app/services/data/courses-data.types';
 import { useDataByName } from '@/shared/hooks/use-data-by-name';
 import { Paragraph } from '@/shared/ui/paragraph';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './study-path.scss';
 
diff --git a/src/widgets/study-with-us/ui/study-with-us.tsx b/src/widgets/study-with-us/ui/study-with-us.tsx
index 9d1f2f29d..d65c8546b 100644
--- a/src/widgets/study-with-us/ui/study-with-us.tsx
+++ b/src/widgets/study-with-us/ui/study-with-us.tsx
@@ -4,7 +4,7 @@ import Image from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 import { OptionItem } from '@/widgets/option-item';
 
 import './study-with-us.scss';
diff --git a/src/widgets/support/ui/support.tsx b/src/widgets/support/ui/support.tsx
index dee662914..5b359da12 100644
--- a/src/widgets/support/ui/support.tsx
+++ b/src/widgets/support/ui/support.tsx
@@ -4,7 +4,7 @@ import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Subtitle } from '@/shared/ui/subtitle';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './support.scss';
 
diff --git a/src/widgets/trainers/ui/trainers.tsx b/src/widgets/trainers/ui/trainers.tsx
index 3c3bc0fe0..3213efdd5 100644
--- a/src/widgets/trainers/ui/trainers.tsx
+++ b/src/widgets/trainers/ui/trainers.tsx
@@ -1,5 +1,5 @@
 import { TrainerCard } from './trainers-card/trainer-card';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 import { Trainer } from '@/widgets/trainers/trainers.types';
 
 import './trainers.scss';
diff --git a/src/widgets/training-program/ui/training-program.tsx b/src/widgets/training-program/ui/training-program.tsx
index 37ca8217c..6fcdd7ad0 100644
--- a/src/widgets/training-program/ui/training-program.tsx
+++ b/src/widgets/training-program/ui/training-program.tsx
@@ -5,7 +5,7 @@ import { useCourseByTitle } from '@/shared/hooks/use-course-by-title';
 import { ArrowIcon } from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
-import { WidgetTitle } from '@/shared/ui/widget-title/widget-title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './training-program.scss';
 

From 9c3d31f993e400b1311d531f39e3abb980f1a5b7 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 14:44:36 +0300
Subject: [PATCH 54/67] refactor: 348 - add model and bind calssnames for
 main-title

---
 src/shared/ui/main-title/main-title.model.ts | 10 ++++++++++
 src/shared/ui/main-title/main-title.tsx      |  8 +-------
 2 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 src/shared/ui/main-title/main-title.model.ts

diff --git a/src/shared/ui/main-title/main-title.model.ts b/src/shared/ui/main-title/main-title.model.ts
new file mode 100644
index 000000000..dc0f32d20
--- /dev/null
+++ b/src/shared/ui/main-title/main-title.model.ts
@@ -0,0 +1,10 @@
+import { VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
+
+import styles from './main-title.module.scss';
+
+export type MainTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
+
+const cx = classNames.bind(styles);
+
+export const mainTitleVariants = cva(cx('title'));
diff --git a/src/shared/ui/main-title/main-title.tsx b/src/shared/ui/main-title/main-title.tsx
index 1c16d2f96..11d48a21d 100644
--- a/src/shared/ui/main-title/main-title.tsx
+++ b/src/shared/ui/main-title/main-title.tsx
@@ -1,10 +1,4 @@
-import { VariantProps, cva } from 'class-variance-authority';
-
-import styles from './main-title.module.scss';
-
-type MainTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
-
-const mainTitleVariants = cva(styles.title);
+import { MainTitleProps, mainTitleVariants } from './main-title.model';
 
 export const MainTitle = ({ children, className, ...props }: MainTitleProps) => {
   return (

From 61dbfeb9f714c0ae3f076aa1788cd3e53a792d50 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 16:24:18 +0300
Subject: [PATCH 55/67] refactor: 348 - delete unused &

---
 src/widgets/main/ui/main.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/main/ui/main.scss b/src/widgets/main/ui/main.scss
index 24c40a806..dfe5b9772 100644
--- a/src/widgets/main/ui/main.scss
+++ b/src/widgets/main/ui/main.scss
@@ -26,7 +26,7 @@
     max-width: 640px;
 
     .title-container {
-      & > .subtitle {
+      > .subtitle {
         padding-left: 4px;
 
         font-size: 18px;

From 60a37f44cff50850f404f6bb79f4b2ab71bb7b6e Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 16:31:03 +0300
Subject: [PATCH 56/67] refactor: 348 - update classnames name and add to tests

---
 src/shared/ui/widget-title/widget-title.model.ts | 14 +++++++-------
 src/shared/ui/widget-title/widget-title.test.tsx | 13 ++++++-------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/shared/ui/widget-title/widget-title.model.ts b/src/shared/ui/widget-title/widget-title.model.ts
index fdfd45799..f95f69acf 100644
--- a/src/shared/ui/widget-title/widget-title.model.ts
+++ b/src/shared/ui/widget-title/widget-title.model.ts
@@ -5,18 +5,18 @@ import styles from './widget-title.module.scss';
 
 export type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
 
-const cx = classNames.bind(styles);
+export const widgetTitleClassNames = classNames.bind(styles);
 
-export const widgetTitleVariants = cva(cx('title'), {
+export const widgetTitleVariants = cva(widgetTitleClassNames('title'), {
   variants: {
     mods: {
-      lines: cx('lines'),
-      asterisk: cx('asterisk'),
+      lines: widgetTitleClassNames('lines'),
+      asterisk: widgetTitleClassNames('asterisk'),
     },
     size: {
-      small: cx('small'),
-      medium: cx('medium'),
-      large: cx('large'),
+      small: widgetTitleClassNames('small'),
+      medium: widgetTitleClassNames('medium'),
+      large: widgetTitleClassNames('large'),
     },
   },
   defaultVariants: {
diff --git a/src/shared/ui/widget-title/widget-title.test.tsx b/src/shared/ui/widget-title/widget-title.test.tsx
index cb9c3901d..16845dbab 100644
--- a/src/shared/ui/widget-title/widget-title.test.tsx
+++ b/src/shared/ui/widget-title/widget-title.test.tsx
@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import { WidgetTitle } from './widget-title';
-
-import styles from './widget-title.module.scss';
+import { widgetTitleClassNames } from './widget-title.model';
 
 describe('WidgetTitle component', () => {
   it('renders without crashing', () => {
@@ -23,35 +22,35 @@ describe('WidgetTitle component', () => {
     render(<WidgetTitle size="small">TestTitle</WidgetTitle>);
     const element = screen.getByRole('heading', { level: 2 });
 
-    expect(element).toHaveClass(styles.small);
+    expect(element).toHaveClass(widgetTitleClassNames('small'));
   });
 
   it('displays size correctly when size=medium', () => {
     render(<WidgetTitle size="medium">TestTitle</WidgetTitle>);
     const element = screen.getByRole('heading', { level: 2 });
 
-    expect(element).toHaveClass(styles.medium);
+    expect(element).toHaveClass(widgetTitleClassNames('medium'));
   });
 
   it('displays size correctly when size=large', () => {
     render(<WidgetTitle size="large">TestTitle</WidgetTitle>);
     const element = screen.getByRole('heading', { level: 2 });
 
-    expect(element).toHaveClass(styles.large);
+    expect(element).toHaveClass(widgetTitleClassNames('large'));
   });
 
   it('displays an asterisk when mods=asterisk', () => {
     render(<WidgetTitle mods="asterisk">TestTitle</WidgetTitle>);
     const asterisk = screen.getByRole('heading', { level: 2 });
 
-    expect(asterisk).toHaveClass(styles.asterisk);
+    expect(asterisk).toHaveClass(widgetTitleClassNames('asterisk'));
   });
 
   it('displays lines when mods=lines', () => {
     render(<WidgetTitle mods="lines">TestTitle</WidgetTitle>);
     const lines = screen.getByRole('heading', { level: 2 });
 
-    expect(lines).toHaveClass(styles.lines);
+    expect(lines).toHaveClass(widgetTitleClassNames('lines'));
   });
 
   it('renders children correctly', () => {

From 946783ef115291c7b63c4ff35131d0a1f92e3c44 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 16:50:15 +0300
Subject: [PATCH 57/67] refactor: 348 - add export for cx and add tests for
 MainTitle

---
 src/shared/ui/main-title/main-title.model.ts |  2 +-
 src/shared/ui/main-title/main-title.test.tsx | 39 ++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/shared/ui/main-title/main-title.test.tsx

diff --git a/src/shared/ui/main-title/main-title.model.ts b/src/shared/ui/main-title/main-title.model.ts
index dc0f32d20..71c4ee945 100644
--- a/src/shared/ui/main-title/main-title.model.ts
+++ b/src/shared/ui/main-title/main-title.model.ts
@@ -5,6 +5,6 @@ import styles from './main-title.module.scss';
 
 export type MainTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
 
-const cx = classNames.bind(styles);
+export const cx = classNames.bind(styles);
 
 export const mainTitleVariants = cva(cx('title'));
diff --git a/src/shared/ui/main-title/main-title.test.tsx b/src/shared/ui/main-title/main-title.test.tsx
new file mode 100644
index 000000000..03df25561
--- /dev/null
+++ b/src/shared/ui/main-title/main-title.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MainTitle } from './main-title';
+import { cx } from './main-title.model';
+
+describe('MainTitle component', () => {
+  it('renders without crashing', () => {
+    render(<MainTitle>TestTitle</MainTitle>);
+    const title = screen.getByText('TestTitle');
+
+    expect(title).toBeInTheDocument();
+  });
+
+  it('displays h1 tag', () => {
+    render(<MainTitle />);
+    const element = screen.getByRole('heading', { level: 1 });
+
+    expect(element).toBeInTheDocument();
+  });
+
+  it('displays styles correctly', () => {
+    render(<MainTitle />);
+    const element = screen.getByRole('heading', { level: 1 });
+
+    expect(element).toHaveClass(cx('title'));
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <MainTitle>
+        <div>Child element</div>
+      </MainTitle>,
+    );
+
+    const child = screen.getByText('Child element');
+
+    expect(child).toBeInTheDocument();
+  });
+});

From 29af17ce58f20caf6da186a6b0538a94ab0bd15f Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 16:52:24 +0300
Subject: [PATCH 58/67] feat: 348 - add public api and update paths

---
 src/entities/courses/ui/main/main.tsx | 2 +-
 src/shared/ui/main-title/index.ts     | 1 +
 src/widgets/main/ui/main.tsx          | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 src/shared/ui/main-title/index.ts

diff --git a/src/entities/courses/ui/main/main.tsx b/src/entities/courses/ui/main/main.tsx
index c1410442a..a9eca7f41 100644
--- a/src/entities/courses/ui/main/main.tsx
+++ b/src/entities/courses/ui/main/main.tsx
@@ -1,6 +1,6 @@
 import mentors from '@/shared/assets/mentor-with-his-students.webp';
 import Image from '@/shared/ui/image';
-import { MainTitle } from '@/shared/ui/main-title/main-title';
+import { MainTitle } from '@/shared/ui/main-title';
 
 import './main.scss';
 
diff --git a/src/shared/ui/main-title/index.ts b/src/shared/ui/main-title/index.ts
new file mode 100644
index 000000000..effb75a0e
--- /dev/null
+++ b/src/shared/ui/main-title/index.ts
@@ -0,0 +1 @@
+export { MainTitle } from './main-title';
diff --git a/src/widgets/main/ui/main.tsx b/src/widgets/main/ui/main.tsx
index 9cd13567b..9e5bdf904 100644
--- a/src/widgets/main/ui/main.tsx
+++ b/src/widgets/main/ui/main.tsx
@@ -1,4 +1,4 @@
-import { MainTitle } from '@/shared/ui/main-title/main-title';
+import { MainTitle } from '@/shared/ui/main-title';
 import { Subtitle } from '@/shared/ui/subtitle';
 
 import './main.scss';

From 3c41102c9a53e84886aac065730b45bc44dcb3b2 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 17:24:31 +0300
Subject: [PATCH 59/67] refactor: 348 - delete unused style

---
 src/widgets/courses-school/ui/courses.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/widgets/courses-school/ui/courses.module.scss b/src/widgets/courses-school/ui/courses.module.scss
index 8b3703cf3..28464ba5d 100644
--- a/src/widgets/courses-school/ui/courses.module.scss
+++ b/src/widgets/courses-school/ui/courses.module.scss
@@ -1,6 +1,5 @@
 .course-title {
   margin-top: 24px;
-  margin-bottom: 0;
 }
 
 .image {

From a25eabca71216cfa946db29f1d3ed7ec979dc8b6 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 20:37:31 +0300
Subject: [PATCH 60/67] refactor: 348 - delete dublicate style

---
 src/app/styles/index.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
index 8637875a6..afc3c1d64 100644
--- a/src/app/styles/index.scss
+++ b/src/app/styles/index.scss
@@ -27,7 +27,6 @@ li {
   padding: 0;
 }
 
-h1,
 h2 {
   margin: 0;
 }
@@ -41,7 +40,9 @@ figure {
   display: flex;
   align-items: center;
   justify-content: center;
+
   width: 100%;
+
   text-align: left;
 }
 

From a720115cd5d6cbc2fd42188ac3a6745ff64e6ee6 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 20:40:31 +0300
Subject: [PATCH 61/67] refactor: 348 - delete model in widget-title and update
 naming for bind classnanes

---
 .../ui/widget-title/widget-title.model.ts     | 26 ------------------
 .../ui/widget-title/widget-title.test.tsx     | 13 +++++----
 src/shared/ui/widget-title/widget-title.tsx   | 27 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 34 deletions(-)
 delete mode 100644 src/shared/ui/widget-title/widget-title.model.ts

diff --git a/src/shared/ui/widget-title/widget-title.model.ts b/src/shared/ui/widget-title/widget-title.model.ts
deleted file mode 100644
index f95f69acf..000000000
--- a/src/shared/ui/widget-title/widget-title.model.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import classNames from 'classnames/bind';
-
-import styles from './widget-title.module.scss';
-
-export type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
-
-export const widgetTitleClassNames = classNames.bind(styles);
-
-export const widgetTitleVariants = cva(widgetTitleClassNames('title'), {
-  variants: {
-    mods: {
-      lines: widgetTitleClassNames('lines'),
-      asterisk: widgetTitleClassNames('asterisk'),
-    },
-    size: {
-      small: widgetTitleClassNames('small'),
-      medium: widgetTitleClassNames('medium'),
-      large: widgetTitleClassNames('large'),
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-    mods: null,
-  },
-});
diff --git a/src/shared/ui/widget-title/widget-title.test.tsx b/src/shared/ui/widget-title/widget-title.test.tsx
index 16845dbab..43f4a2289 100644
--- a/src/shared/ui/widget-title/widget-title.test.tsx
+++ b/src/shared/ui/widget-title/widget-title.test.tsx
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { WidgetTitle } from './widget-title';
-import { widgetTitleClassNames } from './widget-title.model';
+import { WidgetTitle, cx } from './widget-title';
 
 describe('WidgetTitle component', () => {
   it('renders without crashing', () => {
@@ -22,35 +21,35 @@ describe('WidgetTitle component', () => {
     render(<WidgetTitle size="small">TestTitle</WidgetTitle>);
     const element = screen.getByRole('heading', { level: 2 });
 
-    expect(element).toHaveClass(widgetTitleClassNames('small'));
+    expect(element).toHaveClass(cx('small'));
   });
 
   it('displays size correctly when size=medium', () => {
     render(<WidgetTitle size="medium">TestTitle</WidgetTitle>);
     const element = screen.getByRole('heading', { level: 2 });
 
-    expect(element).toHaveClass(widgetTitleClassNames('medium'));
+    expect(element).toHaveClass(cx('medium'));
   });
 
   it('displays size correctly when size=large', () => {
     render(<WidgetTitle size="large">TestTitle</WidgetTitle>);
     const element = screen.getByRole('heading', { level: 2 });
 
-    expect(element).toHaveClass(widgetTitleClassNames('large'));
+    expect(element).toHaveClass(cx('large'));
   });
 
   it('displays an asterisk when mods=asterisk', () => {
     render(<WidgetTitle mods="asterisk">TestTitle</WidgetTitle>);
     const asterisk = screen.getByRole('heading', { level: 2 });
 
-    expect(asterisk).toHaveClass(widgetTitleClassNames('asterisk'));
+    expect(asterisk).toHaveClass(cx('asterisk'));
   });
 
   it('displays lines when mods=lines', () => {
     render(<WidgetTitle mods="lines">TestTitle</WidgetTitle>);
     const lines = screen.getByRole('heading', { level: 2 });
 
-    expect(lines).toHaveClass(widgetTitleClassNames('lines'));
+    expect(lines).toHaveClass(cx('lines'));
   });
 
   it('renders children correctly', () => {
diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
index ed176c8d1..114d9ace4 100644
--- a/src/shared/ui/widget-title/widget-title.tsx
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -1,4 +1,29 @@
-import { WidgetTitleProps, widgetTitleVariants } from './widget-title.model';
+import { type VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
+
+import styles from './widget-title.module.scss';
+
+ type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+
+export const cx = classNames.bind(styles);
+
+export const widgetTitleVariants = cva(cx('title'), {
+  variants: {
+    mods: {
+      lines: cx('lines'),
+      asterisk: cx('asterisk'),
+    },
+    size: {
+      small: cx('small'),
+      medium: cx('medium'),
+      large: cx('large'),
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+    mods: null,
+  },
+});
 
 export const WidgetTitle = ({ children, size, mods, className, ...props }: WidgetTitleProps) => {
   return (

From 45f8b35ea8ebe7eb793b59c65709e53287cc587c Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Thu, 27 Jun 2024 20:42:05 +0300
Subject: [PATCH 62/67] refactor: 348 - delete model in main-title

---
 src/shared/ui/main-title/main-title.model.ts | 10 ----------
 src/shared/ui/main-title/main-title.test.tsx |  3 +--
 src/shared/ui/main-title/main-title.tsx      | 11 ++++++++++-
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/shared/ui/main-title/main-title.model.ts b/src/shared/ui/main-title/main-title.model.ts
index 71c4ee945..e69de29bb 100644
--- a/src/shared/ui/main-title/main-title.model.ts
+++ b/src/shared/ui/main-title/main-title.model.ts
@@ -1,10 +0,0 @@
-import { VariantProps, cva } from 'class-variance-authority';
-import classNames from 'classnames/bind';
-
-import styles from './main-title.module.scss';
-
-export type MainTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
-
-export const cx = classNames.bind(styles);
-
-export const mainTitleVariants = cva(cx('title'));
diff --git a/src/shared/ui/main-title/main-title.test.tsx b/src/shared/ui/main-title/main-title.test.tsx
index 03df25561..5cd1cba82 100644
--- a/src/shared/ui/main-title/main-title.test.tsx
+++ b/src/shared/ui/main-title/main-title.test.tsx
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { MainTitle } from './main-title';
-import { cx } from './main-title.model';
+import { MainTitle, cx } from './main-title';
 
 describe('MainTitle component', () => {
   it('renders without crashing', () => {
diff --git a/src/shared/ui/main-title/main-title.tsx b/src/shared/ui/main-title/main-title.tsx
index 11d48a21d..5333e5a81 100644
--- a/src/shared/ui/main-title/main-title.tsx
+++ b/src/shared/ui/main-title/main-title.tsx
@@ -1,4 +1,13 @@
-import { MainTitleProps, mainTitleVariants } from './main-title.model';
+import { VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
+
+import styles from './main-title.module.scss';
+
+type MainTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
+
+export const cx = classNames.bind(styles);
+
+export const mainTitleVariants = cva(cx('title'));
 
 export const MainTitle = ({ children, className, ...props }: MainTitleProps) => {
   return (

From f40928de614c237296958d4908e9d4410a14be97 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Fri, 28 Jun 2024 11:05:25 +0300
Subject: [PATCH 63/67] refactro: 348 - delete old Title component

---
 src/shared/ui/title/index.ts       |  2 --
 src/shared/ui/title/title.scss     | 58 ------------------------------
 src/shared/ui/title/title.test.tsx | 46 ------------------------
 src/shared/ui/title/title.tsx      | 26 --------------
 src/shared/ui/title/types.ts       |  6 ----
 5 files changed, 138 deletions(-)
 delete mode 100644 src/shared/ui/title/index.ts
 delete mode 100644 src/shared/ui/title/title.scss
 delete mode 100644 src/shared/ui/title/title.test.tsx
 delete mode 100644 src/shared/ui/title/title.tsx
 delete mode 100644 src/shared/ui/title/types.ts

diff --git a/src/shared/ui/title/index.ts b/src/shared/ui/title/index.ts
deleted file mode 100644
index db61d4bcd..000000000
--- a/src/shared/ui/title/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Title } from './title';
-export { TitleType } from './types';
diff --git a/src/shared/ui/title/title.scss b/src/shared/ui/title/title.scss
deleted file mode 100644
index fbd48d76c..000000000
--- a/src/shared/ui/title/title.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.title {
-  @include media-tablet {
-    font-size: 36px;
-    line-height: 44px;
-  }
-
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-
-  font-size: 44px;
-  font-weight: 500;
-  line-height: 52px;
-  color: $color-black;
-  text-align: left;
-  letter-spacing: -0.04em;
-
-  &.big {
-    @include media-tablet {
-      font-size: 36px;
-      line-height: 44px;
-    }
-
-    font-size: 52px;
-    line-height: 64px;
-  }
-
-  &.bigger {
-    @include media-laptop {
-      font-size: 96px;
-      line-height: 1.2em;
-    }
-
-    font-size: 75px;
-    font-weight: 600;
-    line-height: 77px;
-    letter-spacing: -0.04em;
-  }
-
-  &.extra-big {
-    @include media-laptop {
-      font-size: 77px;
-    }
-
-    @include media-tablet {
-      font-size: 61px;
-    }
-
-    font-size: 96px;
-    font-weight: 700;
-    line-height: 1.2em;
-  }
-
-  & .before {
-    margin-right: 8px;
-    color: $color-red;
-  }
-}
diff --git a/src/shared/ui/title/title.test.tsx b/src/shared/ui/title/title.test.tsx
deleted file mode 100644
index 841231266..000000000
--- a/src/shared/ui/title/title.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Title } from './title';
-import { TitleType } from './types';
-
-describe('Title component', () => {
-  it('renders without crashing', () => {
-    render(<Title text="TestTitle" />);
-    const title = screen.getByText('TestTitle');
-
-    expect(title).toBeInTheDocument();
-  });
-
-  it('applies correct CSS based on Title Type Extra Big', () => {
-    render(<Title text="TestTitle" type={TitleType.ExtraBig} />);
-    const title = screen.getByText('TestTitle');
-
-    expect(title.parentElement).toHaveClass('extra-big');
-  });
-
-  it('displays an asterisk when hasAsterisk prop is set', () => {
-    render(<Title text="TestTitle" hasAsterisk />);
-    const asterisk = screen.getByText('*');
-
-    expect(asterisk).toBeInTheDocument();
-  });
-
-  it('displays lines when hasLines prop is set', () => {
-    render(<Title text="TestTitle" hasLines />);
-    const lines = screen.getByText('‖');
-
-    expect(lines).toBeInTheDocument();
-  });
-
-  it('renders children correctly', () => {
-    render(
-      <Title>
-        <div>Child element</div>
-      </Title>,
-    );
-
-    const child = screen.getByText('Child element');
-
-    expect(child).toBeInTheDocument();
-  });
-});
diff --git a/src/shared/ui/title/title.tsx b/src/shared/ui/title/title.tsx
deleted file mode 100644
index 4c8a5d694..000000000
--- a/src/shared/ui/title/title.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TitleType } from './types';
-
-import './title.scss';
-
-type TitleProps = PropsWithChildren<{
-  text?: string;
-  type?: TitleType;
-  hasAsterisk?: boolean;
-  hasLines?: boolean;
-}>;
-
-export const Title = ({ text, type, hasAsterisk, hasLines, children }: TitleProps) => {
-  const titleType = type ?? TitleType.Regular;
-
-  return (
-    <div className={`title ${titleType}`}>
-      {hasLines && <span className="before">‖</span>}
-      {hasAsterisk && <span className="before">*</span>}
-      <div>
-        {text}
-        {children}
-      </div>
-    </div>
-  );
-};
diff --git a/src/shared/ui/title/types.ts b/src/shared/ui/title/types.ts
deleted file mode 100644
index 87874ac05..000000000
--- a/src/shared/ui/title/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum TitleType {
-  Regular = 'regular',
-  Big = 'big',
-  Bigger = 'bigger',
-  ExtraBig = 'extra-big',
-}

From 9cb8134d15648e27b5685e79388b1f8b8470bea1 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Fri, 28 Jun 2024 11:09:56 +0300
Subject: [PATCH 64/67] refactor: 348 - update import into react

---
 src/shared/ui/main-title/main-title.tsx     | 3 ++-
 src/shared/ui/widget-title/widget-title.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/main-title/main-title.tsx b/src/shared/ui/main-title/main-title.tsx
index 5333e5a81..e1689bef1 100644
--- a/src/shared/ui/main-title/main-title.tsx
+++ b/src/shared/ui/main-title/main-title.tsx
@@ -1,9 +1,10 @@
+import { HTMLAttributes } from 'react';
 import { VariantProps, cva } from 'class-variance-authority';
 import classNames from 'classnames/bind';
 
 import styles from './main-title.module.scss';
 
-type MainTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
+type MainTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
 
 export const cx = classNames.bind(styles);
 
diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
index 114d9ace4..eec6dfcc8 100644
--- a/src/shared/ui/widget-title/widget-title.tsx
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -1,9 +1,10 @@
+import { HTMLAttributes } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import classNames from 'classnames/bind';
 
 import styles from './widget-title.module.scss';
 
- type WidgetTitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+ type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
 
 export const cx = classNames.bind(styles);
 

From e9117a21d5e0803a9445e8e6f2722d3032228811 Mon Sep 17 00:00:00 2001
From: NikitaStarmoussov <nikta.starmousov@gmail.com>
Date: Sat, 29 Jun 2024 16:34:55 +0300
Subject: [PATCH 65/67] refactor: 348 delete model file for main-title

---
 src/shared/ui/main-title/main-title.model.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/shared/ui/main-title/main-title.model.ts

diff --git a/src/shared/ui/main-title/main-title.model.ts b/src/shared/ui/main-title/main-title.model.ts
deleted file mode 100644
index e69de29bb..000000000

From 7e04bc6f48267258627fe77b4952071e260959da Mon Sep 17 00:00:00 2001
From: ansivgit <ansiv@yandex.ru>
Date: Tue, 2 Jul 2024 16:49:25 +0300
Subject: [PATCH 66/67] fix: 348 - fix after review

---
 src/app/styles/_constants.scss                      |  7 -------
 src/shared/ui/main-title/main-title.module.scss     |  4 ++--
 src/shared/ui/main-title/main-title.tsx             |  2 +-
 src/shared/ui/widget-title/widget-title.module.scss | 10 +++++-----
 src/shared/ui/widget-title/widget-title.tsx         |  4 ++--
 5 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/app/styles/_constants.scss b/src/app/styles/_constants.scss
index 6592df7a0..949d546cf 100644
--- a/src/app/styles/_constants.scss
+++ b/src/app/styles/_constants.scss
@@ -14,13 +14,6 @@ $font-weight-regular: 400;
 $font-weight-medium: 500;
 $font-weight-bold: 700;
 
-// font sizes
-$widget-title-font-size-small: 36px;
-$widget-title-font-size-medium: 44px;
-$widget-title-font-size-large: 52px;
-$main-title-font-size: 96px;
-$main-title-font-size-tablet: 60px;
-
 // COLORS
 
 // Primary colors
diff --git a/src/shared/ui/main-title/main-title.module.scss b/src/shared/ui/main-title/main-title.module.scss
index 36636c576..ea996ec80 100644
--- a/src/shared/ui/main-title/main-title.module.scss
+++ b/src/shared/ui/main-title/main-title.module.scss
@@ -1,11 +1,11 @@
 .title {
-  font-size: $main-title-font-size;
+  font-size: 96px;
   font-weight: 700;
   color: $color-black;
   text-align: left;
   letter-spacing: -0.04em;
 
   @include media-tablet {
-    font-size: $main-title-font-size-tablet;
+    font-size: 60px;
   }
 }
diff --git a/src/shared/ui/main-title/main-title.tsx b/src/shared/ui/main-title/main-title.tsx
index e1689bef1..7f1c7878c 100644
--- a/src/shared/ui/main-title/main-title.tsx
+++ b/src/shared/ui/main-title/main-title.tsx
@@ -8,7 +8,7 @@ type MainTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof m
 
 export const cx = classNames.bind(styles);
 
-export const mainTitleVariants = cva(cx('title'));
+const mainTitleVariants = cva(cx('title'));
 
 export const MainTitle = ({ children, className, ...props }: MainTitleProps) => {
   return (
diff --git a/src/shared/ui/widget-title/widget-title.module.scss b/src/shared/ui/widget-title/widget-title.module.scss
index 714fcf352..b640adcd4 100644
--- a/src/shared/ui/widget-title/widget-title.module.scss
+++ b/src/shared/ui/widget-title/widget-title.module.scss
@@ -9,27 +9,27 @@
 }
 
 .small {
-  font-size: $widget-title-font-size-small;
+  font-size: 36px;
   line-height: 44px;
   letter-spacing: 0;
 }
 
 .medium {
-  font-size: $widget-title-font-size-medium;
+  font-size: 44px;
   line-height: 52px;
 
   @include media-tablet {
-    font-size: $widget-title-font-size-small;
+    font-size: 36px;
     line-height: 44px;
   }
 }
 
 .large {
-  font-size: $widget-title-font-size-large;
+  font-size: 52px;
   line-height: 64px;
 
   @include media-tablet {
-    font-size: $widget-title-font-size-small;
+    font-size: 36px;
     line-height: 44px;
   }
 }
diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
index eec6dfcc8..fdb777f40 100644
--- a/src/shared/ui/widget-title/widget-title.tsx
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -4,11 +4,11 @@ import classNames from 'classnames/bind';
 
 import styles from './widget-title.module.scss';
 
- type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
 
 export const cx = classNames.bind(styles);
 
-export const widgetTitleVariants = cva(cx('title'), {
+const widgetTitleVariants = cva(cx('title'), {
   variants: {
     mods: {
       lines: cx('lines'),

From 266530d765ff1454dda71c46e0d78d332e1e9d69 Mon Sep 17 00:00:00 2001
From: ansivgit <ansiv@yandex.ru>
Date: Tue, 2 Jul 2024 16:59:52 +0300
Subject: [PATCH 67/67] fix: 348 - off eslint issue

---
 eslint.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eslint.config.js b/eslint.config.js
index a5a20186a..68a4ba5a0 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -80,7 +80,7 @@ export default [
       'react/prop-types': 'off',
       'react/react-in-jsx-scope': 'off',
       'react-refresh/only-export-components': [
-        'warn',
+        'off',
         { allowConstantExport: true },
       ],