diff --git a/src/pages/home/home.page.tsx b/src/pages/home/home.page.tsx index 73acbe0..1c68fa0 100644 --- a/src/pages/home/home.page.tsx +++ b/src/pages/home/home.page.tsx @@ -1,9 +1,11 @@ import Form from '@/widgets/form/form.widget'; import classes from './styles.module.scss'; +import Laptop from '@shared/assets/icons/laptop.svg'; const HomePage = () => { return (
+
diff --git a/src/pages/home/styles.module.scss b/src/pages/home/styles.module.scss index db7b8e9..dad5215 100644 --- a/src/pages/home/styles.module.scss +++ b/src/pages/home/styles.module.scss @@ -2,9 +2,9 @@ .home { display: flex; + flex-direction: column; justify-content: center; width: 100%; - height: 1000px; .container { padding: 15px; diff --git a/src/shared/assets/fonts/Urbanist-Medium.ttf b/src/shared/assets/fonts/Urbanist-Medium.ttf new file mode 100644 index 0000000..e9a6dbb Binary files /dev/null and b/src/shared/assets/fonts/Urbanist-Medium.ttf differ diff --git a/src/shared/assets/fonts/Urbanist-SemiBold.ttf b/src/shared/assets/fonts/Urbanist-SemiBold.ttf new file mode 100644 index 0000000..6d393d1 Binary files /dev/null and b/src/shared/assets/fonts/Urbanist-SemiBold.ttf differ diff --git a/src/shared/assets/icons/background.jpg b/src/shared/assets/icons/background.jpg deleted file mode 100644 index e628165..0000000 Binary files a/src/shared/assets/icons/background.jpg and /dev/null differ diff --git a/src/shared/assets/icons/display.svg b/src/shared/assets/icons/display.svg new file mode 100644 index 0000000..959a6a4 --- /dev/null +++ b/src/shared/assets/icons/display.svg @@ -0,0 +1 @@ +50-Computer-Hardware \ No newline at end of file diff --git a/src/shared/assets/icons/gpu.svg b/src/shared/assets/icons/gpu.svg new file mode 100644 index 0000000..d1b7163 --- /dev/null +++ b/src/shared/assets/icons/gpu.svg @@ -0,0 +1 @@ +50-Computer-Hardware \ No newline at end of file diff --git a/src/shared/assets/icons/laptop.svg b/src/shared/assets/icons/laptop.svg new file mode 100644 index 0000000..17981ee --- /dev/null +++ b/src/shared/assets/icons/laptop.svg @@ -0,0 +1,659 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/assets/icons/os.svg b/src/shared/assets/icons/os.svg new file mode 100644 index 0000000..ec86c0f --- /dev/null +++ b/src/shared/assets/icons/os.svg @@ -0,0 +1 @@ +Development \ No newline at end of file diff --git a/src/shared/assets/icons/processor.svg b/src/shared/assets/icons/processor.svg new file mode 100644 index 0000000..ac44c35 --- /dev/null +++ b/src/shared/assets/icons/processor.svg @@ -0,0 +1 @@ +50-Computer-Hardware \ No newline at end of file diff --git a/src/shared/assets/icons/ram.svg b/src/shared/assets/icons/ram.svg new file mode 100644 index 0000000..2b744a4 --- /dev/null +++ b/src/shared/assets/icons/ram.svg @@ -0,0 +1 @@ +50-Computer-Hardware \ No newline at end of file diff --git a/src/shared/assets/icons/ssd.svg b/src/shared/assets/icons/ssd.svg new file mode 100644 index 0000000..10f27a3 --- /dev/null +++ b/src/shared/assets/icons/ssd.svg @@ -0,0 +1 @@ +50-Computer-Hardware \ No newline at end of file diff --git a/src/shared/assets/styles/_colors.scss b/src/shared/assets/styles/_colors.scss index 52f44e2..b7575fe 100644 --- a/src/shared/assets/styles/_colors.scss +++ b/src/shared/assets/styles/_colors.scss @@ -1,5 +1,7 @@ :root { - --primary-black: #000000; + --primary-black: #040404; --transparent-black: rgba(0, 0, 0, 0.8); --primary-white: #ffffff; + --secondary-gray: #D9D9D9; + --active-color: #007AFF; } \ No newline at end of file diff --git a/src/shared/assets/styles/_fonts.scss b/src/shared/assets/styles/_fonts.scss index e69de29..2cf8797 100644 --- a/src/shared/assets/styles/_fonts.scss +++ b/src/shared/assets/styles/_fonts.scss @@ -0,0 +1,20 @@ +// Fonts +@font-face { + font-family: 'Urbanist'; + src: url('../fonts/Urbanist-Medium.ttf') format('truetype'); + font-style: normal; + font-weight: 500; +} + +@font-face { + font-family: 'Urbanist'; + src: url('../fonts/Urbanist-SemiBold.ttf') format('truetype'); + font-style: normal; + font-weight: 600; +} + +@mixin urbanist-font($size: 14px, $weight: 500) { + font-family: 'Urbanist', sans-serif; + font-weight: $weight; + font-size: $size; +} \ No newline at end of file diff --git a/src/shared/assets/styles/globals.scss b/src/shared/assets/styles/globals.scss index ff5e070..4b21599 100644 --- a/src/shared/assets/styles/globals.scss +++ b/src/shared/assets/styles/globals.scss @@ -5,6 +5,4 @@ body { margin: 0; padding: 0; - background-image: url('../icons/background.jpg'); - background-size: cover; } \ No newline at end of file diff --git a/src/shared/components/button/styles.module.scss b/src/shared/components/button/styles.module.scss index c30be80..f07ca25 100644 --- a/src/shared/components/button/styles.module.scss +++ b/src/shared/components/button/styles.module.scss @@ -1,20 +1,22 @@ +@use '../../assets/styles/fonts' as fonts; + .button { - background-color: rgba(255, 255, 255, 0.2); // прозрачный белый фон - border: 2px solid var(--primary-white); // белая обводка + background-color: var(--primary-white); + border: 2px solid var(--secondary-gray); // белая обводка border-radius: 8px; // закруглённые углы - color: var(--primary-white); // белый текст + color: var(--primary-black); // белый текст padding: 10px 20px; // внутренних отступов - font-size: 16px; // размер шрифта cursor: pointer; // курсор при наведении - transition: background-color 0.3s ease; // плавный переход фона + transition: 0.3s ease; // плавный переход фона + @include fonts.urbanist-font(20px, 600); &:hover { - background-color: rgba(255, 255, 255, 0.4); // изменение цвета фона при наведении + background-color: var(--active-color); + color: var(--primary-white); // белый текст } &:focus { outline: none; // убираем стандартный контур при фокусировке - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); // добавляем тень при фокусировке } } \ No newline at end of file diff --git a/src/shared/constants/index.ts b/src/shared/constants/index.ts new file mode 100644 index 0000000..822f230 --- /dev/null +++ b/src/shared/constants/index.ts @@ -0,0 +1,37 @@ +// MockUp Selectors data options +export const mockUpOptions: { [key: string]: string[] | number[] } = { + brand: [ + 'Dell', + 'HP', + 'Lenovo', + 'Apple', + 'Asus', + 'Acer', + 'MSI', + 'Microsoft', + 'Samsung', + 'Toshiba', + ], + processor: [ + 'Intel Core i3 10th Gen', + 'Intel Core i5 10th Gen', + 'Intel Core i7 10th Gen', + 'AMD Ryzen 3 4000 Series', + 'AMD Ryzen 5 4000 Series', + 'AMD Ryzen 7 4000 Series', + ], + os: ['Windows 10', 'Windows 11', 'macOS', 'Linux'], + gpu: [ + 'Integrated', + 'NVIDIA GeForce GTX 1650', + 'NVIDIA GeForce RTX 3060', + 'AMD Radeon RX 5600M', + ], + display: [13.3, 14.0, 15.6, 17.3], + display_type: ['HD', 'Full HD', '4K', 'OLED'], + ram: [4, 8, 16, 32], + ssd: [0, 256, 512, 1024], + weight: [1.2, 1.5, 2.0, 2.5, 3.0], + battery_size: [45, 60, 70, 90, 100], + release_year: [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024], +}; diff --git a/src/widgets/form/form.widget.tsx b/src/widgets/form/form.widget.tsx index 50ca123..96c22bf 100644 --- a/src/widgets/form/form.widget.tsx +++ b/src/widgets/form/form.widget.tsx @@ -7,44 +7,7 @@ import { FormEvent, useCallback, useState } from 'react'; import classes from './styles.module.scss'; import { Button } from '@/shared/components/button'; import { Selector } from '@/shared/components/selector'; - -// MockUp Selectors data options -const mockUpOptions: { [key: string]: string[] | number[] } = { - brand: [ - 'Dell', - 'HP', - 'Lenovo', - 'Apple', - 'Asus', - 'Acer', - 'MSI', - 'Microsoft', - 'Samsung', - 'Toshiba', - ], - processor: [ - 'Intel Core i3 10th Gen', - 'Intel Core i5 10th Gen', - 'Intel Core i7 10th Gen', - 'AMD Ryzen 3 4000 Series', - 'AMD Ryzen 5 4000 Series', - 'AMD Ryzen 7 4000 Series', - ], - os: ['Windows 10', 'Windows 11', 'macOS', 'Linux'], - gpu: [ - 'Integrated', - 'NVIDIA GeForce GTX 1650', - 'NVIDIA GeForce RTX 3060', - 'AMD Radeon RX 5600M', - ], - display: [13.3, 14.0, 15.6, 17.3], - display_type: ['HD', 'Full HD', '4K', 'OLED'], - ram: [4, 8, 16, 32], - ssd: [0, 256, 512, 1024], - weight: [1.2, 1.5, 2.0, 2.5, 3.0], - battery_size: [45, 60, 70, 90, 100], - release_year: [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024], -}; +import { mockUpOptions } from '@/shared/constants'; const Form = () => { const [request, setRequest] = useState({ @@ -101,7 +64,7 @@ const Form = () => {