feat:added word form block

src/1_pages/Word/Word.tsx

@@ -4,13 +4,15 @@ import Associations from '@widgets/Associations';
 import Synonyms from '@widgets/SynonymsAntonyms/Synonyms';
 import Antonyms from '@widgets/SynonymsAntonyms/Antonyms';
 import styles from './Word.module.scss';
+import WordForms from '@widgets/WordForms/WordForms';
 
 const Word = () => {
 	return (
 		<div className={styles.container}>
 			<WordInfo />
 			<WordCollection />
 			<Associations />
+			<WordForms />
 			<Synonyms />
 			<Antonyms />
 		</div>

src/2_widgets/WordForms/WordForms.module.scss

@@ -0,0 +1,10 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+}

src/2_widgets/WordForms/WordForms.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable prettier/prettier */
+import { useTranslation } from 'react-i18next';
+import SvgWordForms from '@assets/icons/icon_word_forms.svg?react';
+import styles from './WordForms.module.scss';
+import { CustomLink, SectionTitle } from '@ui/index';
+import WordFormsList from './WordFormsList';
+
+
+export default function WordForms() {
+    const { t } = useTranslation('word-profile');
+    return (
+        <section className={styles.container}>
+            <div className={styles.header}>
+                <SectionTitle theme="bold">
+                    <SvgWordForms />
+                    {t('forms')}
+                </SectionTitle>
+                <CustomLink apperance="button" href="#" target="_self">
+                    {t('allForms')} 3
+                </CustomLink>
+            </div>
+            <WordFormsList />
+
+        </section>
+    );
+}

src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss

@@ -0,0 +1,28 @@
+@import '@styles/colors';
+@import '@styles/mixins/font';
+
+.container {
+	width: 240px;
+	height: 164px;
+	border-radius: 5px;
+	box-shadow:
+		0px 0px 8px 0px rgba(17, 17, 26, 0.1),
+		0px 1px 0px 0px rgba(17, 17, 26, 0.05);
+	padding: 14px 24px;
+	background-color: $neutral-background-main-color;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.word {
+	@include font-source-sans(24px, $neutral-text-main-color, 500, 24px);
+	letter-spacing: 0.18px;
+	padding-bottom: 20px;
+}
+
+.form {
+	text-transform: uppercase;
+	@include font-source-sans(12px, $neutral-text-main-color, 400, 12px);
+}

src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable prettier/prettier */
+import styles from './WordFormsCard.module.scss';
+
+interface Props {
+    type?: string;
+}
+
+const getRandomColor = () => {
+    const colors = ['#FFFFFF', '#FFD4CC', '#E0F5FF', '#C1FBB4', '#D7E0FF', '#FFE89B', '#C2E8FF', '#FF8F87', '#97F48D'];
+    const randomIndex = Math.floor(Math.random() * colors.length);
+    return colors[randomIndex];
+};
+
+export default function WordFormsCard({ type = "определите форму слова" }: Props) {
+    const randomColor = getRandomColor();
+
+    const containerStyle: React.CSSProperties = {
+        backgroundColor: randomColor,
+    };
+
+    return (
+        <div className={styles.container} style={containerStyle}>
+            {/* TODO заменить Learn и 'type' на данные с бэка */}
+            <span className={styles.word}>Learn</span>
+            <label className={styles.form}>{type}</label>
+        </div>
+    )
+}

src/2_widgets/WordForms/WordFormsCard/index.ts

@@ -0,0 +1 @@
+export { default } from './WordFormsCard';

src/2_widgets/WordForms/WordFormsList/WordFormsList.module.scss

@@ -0,0 +1,7 @@
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 40px;
+}

src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable prettier/prettier */
+import WordFormsCard from '../WordFormsCard';
+import styles from './WordFormsList.module.scss';
+
+export default function WordFormsList() {
+    return (
+        <div className={styles.list}>
+            <WordFormsCard />
+            <WordFormsCard type='past participle' />
+            <WordFormsCard type='present perfect' />
+            <WordFormsCard type='past perfect' />
+        </div>
+    );
+}

src/2_widgets/WordForms/WordFormsList/index.ts

@@ -0,0 +1 @@
+export { default } from './WordFormsList';

src/2_widgets/WordForms/index.ts

@@ -0,0 +1 @@
+export { default } from './WordForms';

src/5_shared/styles/colors.scss

@@ -6,6 +6,7 @@ $primary-button-dark-color: #5775dc;
 
 $secondary-button-color: #add3ff;
 $secondary-button-bright-color: #81bbff;
+$secondary-background-very-light-color: #e0f5ff;
 
 $neutral-background-main-color: #ffffff;
 $neutral-background-second-color: #fafafa;
@@ -18,5 +19,9 @@ $neutral-text-middle-color: #656a76;
 $neutral-text-dark-color: #595d68;
 
 $success-color: #70a872;
+$success-background-light-color: #c1fbb4;
+
 $danger-color: #ca2744;
+$danger-background-light-color: #ffd4cc;
+
 $warning-color: #ffaf05;