-
{AboutText.title}
-
-
- {renderParagraphs(1)}
-
-
- {renderParagraphs(2)}
-
-
+
+
+
{AboutText.title}
+
+ {AboutText.content.map((item) => (
+
+
+
+
{item.text}
+
-
);
};
-export default AboutSectionText;
-
+export default AboutSectionText;
\ No newline at end of file
diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js
index d2ac50788..5abfe98dc 100644
--- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js
+++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js
@@ -1,49 +1,49 @@
const AboutText = {
- id: 1,
- title: 'ДЛЯ КОГО',
- level: 2,
- content: [
- {
- id: 2,
- paragraph: 1,
- text: 'Виробники крафтової продукції: винороби, сировари, медовари та інші майстри своєї справи.'
- },
- {
- id: 3,
- paragraph: 1,
- text: 'Сомельє та ресторатори: знавці, які прагнуть до нових смаків та ексклюзивних продуктів.'
- },
- {
- id: 4,
- paragraph: 1,
- text: 'Представники готельно-ресторанного бізнесу: шукаєте унікальні пропозиції для своїх гостей?'
- },
- {
- id: 5,
- paragraph: 1,
- text: 'Представники роздрібних та гуртових торгових мереж: розширяйте асортимент крафтовими делікатесами.'
- },
- {
- id: 6,
- paragraph: 2,
- text: 'Представники пакувальної індустрії: знаходьте нових клієнтів та партнерів.'
- },
- {
- id: 7,
- paragraph: 2,
- text: 'Представники логістичних компаній та служб доставки: пропонуйте еко-рішення для крафтового бізнесу.'
- },
- {
- id: 8,
- paragraph: 2,
- text: 'Стартапери: втілюйте свої ідеї у життя за підтримки спільноти.'
- },
- {
- id: 9,
- paragraph: 2,
- text: 'Інші фахівці галузі: діліться досвідом, знаннями та знаходьте однодумців.'
- },
- ],
+ id: 1,
+ title: 'Для кого',
+ level: 2,
+ content: [
+ {
+ id: 2,
+ icon: 'baget.svg',
+ text: 'Виробники крафтової продукції'
+ },
+ {
+ id: 3,
+ icon: 'wine.svg',
+ text: 'Сомельє та ресторатори'
+ },
+ {
+ id: 4,
+ icon: 'hotel.svg',
+ text: 'Представники готельно-ресторанного бізнесу'
+ },
+ {
+ id: 5,
+ icon: 'shop.svg',
+ text: 'Представники роздрібних та гуртових торгових мереж'
+ },
+ {
+ id: 6,
+ icon: 'post.svg',
+ text: 'Представники пакувальної індустрії'
+ },
+ {
+ id: 7,
+ icon: 'car.svg',
+ text: 'Представники логістичних компаній та служб доставки'
+ },
+ {
+ id: 8,
+ icon: 'rocket.svg',
+ text: 'Стартапери'
+ },
+ {
+ id: 9,
+ icon: 'people.svg',
+ text: 'Інші фахівці галузі'
+ },
+ ],
};
-export default AboutText;
\ No newline at end of file
+export default AboutText;
diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css
index 100e04297..f4891898c 100644
--- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css
+++ b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css
@@ -1,110 +1,132 @@
+.about-us-cards-main-container {
+ display: flex;
+ justify-content: center;
+ background: #fff;
+ width: 100vw;
+}
+
.about-us-cards-section {
display: flex;
- width: 1304px;
- padding: 80px 104px;
flex-direction: column;
- justify-content: center;
align-items: center;
- gap: 24px;
- background: var(--about-cards-background-color);
+ max-width: 1260px;
+ width: 100%;
+ height: 448px;
+ padding: 80px 104px;
}
+
.about-us-cards-section__header-text {
- color: var(--about-cards-font-color);
- font-family: var(--font-main);
- font-size: 32px;
- font-style: normal;
- font-weight: 700;
- line-height: 120%; /* 38.4px */
+ font-family: Geologica, sans-serif;
+ font-size: 40px;
+ font-weight: bold;
+ line-height: 48px;
+ color: #232424;
+ margin-bottom: 40px;
+ text-align: center;
}
+
.about-us-cards-section__cards {
- display: flex;
- width: 884px;
- align-items: flex-start;
- align-content: flex-start;
- gap: 24px;
- flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 32px;
+
}
-.about-us-cards-section__first-card {
+
+.about-us-cards-section__card {
display: flex;
- width: 430px;
- height: 128px;
flex-direction: column;
- align-items: flex-start;
- gap: 10px;
- flex-shrink: 0;
- box-shadow: 0 0 2px 0 rgba(65, 64, 69, 0.20);
- border-radius: 9999px;
+ justify-content: space-between;
+ background-color: #f9f5ec;
+ border-radius: 12px;
+ box-shadow: 0 0 2px 0 rgba(65, 64, 69, 0.2);
transition: transform 0.2s ease;
}
+
.about-us-cards-section__cards-content {
display: flex;
- padding: 36px 16px 16px 16px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
- border-radius: 12px;
- background: var(--about-cards-background-content-color);
-}
-.about-us-cards-section__cards-logo {
- width: 54px;
- height: 50px;
- position: relative;
- right: 0;
-}
-.about-us-cards-section__cards-logo__intersect {
- width: 54px;
- height: 50px;
- flex-shrink: 0;
- fill: #F1FFF7;
- position: relative;
- right: -360px;
- top: -36.2px;
-}
-.about-us-cards-section__cards-logo__expert {
- width: 24px;
- height: 24px;
- flex-shrink: 0;
- position: absolute;
- right: -350px;
- top: -28px;
+ width: 367px;
+ height: 80px;
+ padding: 32px 23px 52px 23px;
}
+
.about-us-cards-section__cards-content__text-header {
- align-self: stretch;
- color: var(--about-cards-font-color);
- font-feature-settings: 'calt' off;
- font-family: var(--font-main);
- font-size: 16px;
- font-style: normal;
- font-weight: 600;
- line-height: 20px; /* 125% */
- letter-spacing: -0.16px;
- position: absolute;
- text-transform: uppercase;
+ font-family: Geologica, sans-serif;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 1.2;
+ color: #232424;
}
.about-us-cards-section__cards-content__text {
- width: 398px;
- height: 40px;
- color: var(--about-cards-font-color);
- font-feature-settings: 'calt' off;
- font-family: var(--font-main);
+ font-family: Geologica, sans-serif;
font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 20px; /* 125% */
- letter-spacing: -0.16px;
- position: relative;
- top: -20px;
+ line-height: 1.25;
+ color: #292e32;
}
-.about-us-cards-section__next-card {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 10px;
- border-radius: 9999px;
- box-shadow: 0 0 2px 0 rgba(65, 64, 69, 0.20);
- transition: transform 0.2s ease;
+
+@media (min-width: 768px) and (max-width: 1511px) {
+ .about-us-cards-section__cards {
+ grid-template-columns: repeat(2, 1fr);
+ justify-content: center;
+ box-sizing: border-box;
+
+ }
+
+ .about-us-cards-section {
+ height: auto;
+ padding: 48px 24px;
+
+ }
+
+ .about-us-cards-section__cards-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+ width: 296px;
+ height: 100px;
+ padding: 32px 24px;
+
+ }
+
+ .about-us-cards-section__card {
+ width: 343px;
+
+ }
+
+}
+
+@media (max-width: 767px) {
+ .about-us-cards-section {
+ max-width: 345px;
+ height: auto;
+ padding: 24px 16px;
+
+ }
+
+ .about-us-cards-section__card {
+ width: 343px;
+
+ }
+
+ .about-us-cards-section__cards-content {
+ width: 296px;
+ height: 100px;
+ padding: 16px 24px;
+
+ }
+
+ .about-us-cards-section__header-text {
+ font-size: 24px;
+ margin-bottom: 24px;
+
+ }
+
+ .about-us-cards-section__cards {
+ grid-template-columns: 1fr;
+
+ }
}
-.about-us-cards-section__next-card:hover, .about-us-cards-section__first-card:hover {
- transform: scale(1.1);
-}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx
index 8351a1066..41b4ae043 100644
--- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx
+++ b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx
@@ -3,32 +3,22 @@ import AboutUsText from './text.js';
const AboutSectionCards = () => {
return (
-
-
{AboutUsText.title}
-
- {AboutUsText.content.map((card, index) => (
-
-
-
-
-
+
+
+
{AboutUsText.title}
+
+ {AboutUsText.content.map((card, index) => (
+
+
+
{card.title}
+
{card.text}
-
{card.title}
-
{card.text}
-
- ))}
+ ))}
+
);
};
-export default AboutSectionCards;
+export default AboutSectionCards;
\ No newline at end of file
diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js
index 049d38e78..fa47df38b 100644
--- a/FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js
+++ b/FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js
@@ -1,43 +1,43 @@
const AboutUsText = {
id: 1,
- title: 'ЧОМУ ВАРТО',
+ title: 'Чому варто',
level: 2,
content: [
{
id: 2,
logo: 'expert.svg',
title: 'Прямий зв\'язок з виробниками',
- text: 'Знайомтеся з історією та цінностями брендів.'
+ text: 'Знайомтеся з історією та цінностями брендів'
},
{
id: 3,
logo: 'info.svg',
title: 'Ексклюзивні пропозиції',
- text: 'Знаходьте унікальні продукти, недоступні в масовому продажі.'
+ text: 'Знаходьте унікальні продукти, недоступні в масовому продажі'
},
{
id: 4,
logo: 'contacts.svg',
title: 'Інновації та тренди',
- text: 'Будьте в курсі останніх новинок та технологій галузі.'
+ text: 'Будьте в курсі останніх новинок та технологій галузі'
},
{
id: 5,
logo: 'contacts.svg',
title: 'Співпраця та синергія',
- text: 'Об\'єднуйтесь, щоб творити нове та ділитися досвідом.'
+ text: 'Об\'єднуйтесь, щоб творити нове та ділитися досвідом'
},
{
id: 6,
logo: 'contacts.svg',
title: 'Розвиток та масштабування',
- text: 'Знаходьте нових партнерів, клієнтів та ринки збуту.'
+ text: 'Знаходьте нових партнерів, клієнтів та ринки збуту'
},
{
id: 7,
logo: 'exchange.svg',
title: 'Підтримка та знання',
- text: 'Отримуйте консультації, експертну допомогу та доступ до освітніх ресурсів.'
+ text: 'Отримуйте консультації, експертну допомогу та доступ до освітніх ресурсів'
},
],
};
diff --git a/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css b/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css
index f28729247..868aa2061 100644
--- a/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css
+++ b/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css
@@ -5,49 +5,51 @@
width: 100vw;
}
-.main-container{
- display:flex;
+.main-container {
+ display: flex;
justify-content: center;
- flex-direction:row;
+ flex-direction: row;
+ width: 1512px;
padding: 32px 104px 32px 104px;
+ box-sizing: border-box;
}
-.main-baner-text{
+.main-baner-text {
display: flex;
flex-direction: column;
justify-content: center;
- align-items:flex-start;
+ align-items: flex-start;
font-family: Geologica;
font-weight: 900;
line-height: 57.6px;
letter-spacing: 0.01em;
}
-.main-baner-text__logo{
+.main-baner-text__logo {
margin-bottom: 10px;
font-size: 48px;
}
-.main-banner-link__container{
+.main-banner-link__container {
display: flex;
max-width: 194px;
max-height: 46px;
- justify-content:center;
+ justify-content: center;
align-items: center;
border-radius: 4px;
border: 1px solid black;
padding: 13px 16px 13px 16px;
margin-top: 30px;
background: #000000;
- box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
+ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
}
-.main-baner-text__explanation{
- font-size: 40px;
- max-width: 557px;
+.main-baner-text__explanation {
+ font-size: 40px;
+ max-width: 557px;
}
-.main-banner-link{
+.main-banner-link {
font-family: Geologica;
font-size: 15px;
font-weight: 500;
@@ -56,24 +58,27 @@
color: #FFFFFF;
}
-.main-banner__img{
+.main-banner__img {
max-width: 100vw;
height: auto;
}
-@media (min-width: 768px) and (max-width: 1511px) {
- .main-container{
- flex-direction:column-reverse;
+@media (min-width: 768px) and (max-width: 1511px) {
+ .main-container {
+ flex-direction: column-reverse;
+ max-width: 768px;
}
- .main-baner-text{
+
+ .main-baner-text {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 5vh;
}
- .main-baner-text__explanation{
+
+ .main-baner-text__explanation {
display: flex;
align-items: center;
justify-content: center;
@@ -81,31 +86,35 @@
text-align: center;
font-size: 30px;
}
- .main-banner__img{
+
+ .main-banner__img {
max-width: 100%;
}
}
@media (max-width: 767px) {
- .main-baner__container{
- display:flex;
- justify-content:space-around;
+ .main-baner__container {
+ display: flex;
+ justify-content: space-around;
align-items: center;
padding: 0px;
-
+
}
- .main-container{
- display:flex;
+
+ .main-container {
+ display: flex;
justify-content: center;
- flex-direction:column-reverse;
+ flex-direction: column-reverse;
background-color: #B4D27A;
max-width: 375px;
padding: 16px 32px 16px 32px;
}
- .main-baner-text__logo{
+
+ .main-baner-text__logo {
font-size: 34px;
}
- .main-baner-text{
+
+ .main-baner-text {
display: flex;
flex-direction: column;
align-items: center;
@@ -114,7 +123,8 @@
text-align: center;
margin: 0px;
}
- .main-baner-text__explanation{
+
+ .main-baner-text__explanation {
display: flex;
align-items: center;
justify-content: center;
@@ -126,7 +136,8 @@
line-height: 28.8px;
letter-spacing: 0.01em;
}
- .main-banner__img{
- max-width: 344px;
+
+ .main-banner__img {
+ max-width: 314px;
}
}
diff --git a/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicy.module.css b/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicy.module.css
index 7e6f1043f..61f17efc4 100644
--- a/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicy.module.css
+++ b/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicy.module.css
@@ -1,68 +1,19 @@
.privacy_policy {
display: flex;
- margin: 80px 100px 80px 100px;
- width: 100%;
- max-height: auto;
+ padding: 40px 16px;
background-color: var(--light-text-color);
scroll-behavior: smooth;
color: var(--main-text-color);
}
-.privacy_policy__title{
+.privacy_policy__title {
font-family: var(--font-main);
- font-size: 32px;
+ font-size: 18px;
font-weight: 700;
line-height: 38px;
letter-spacing: 0em;
text-align: left;
-}
-
-.privacy_policy__link_container {
- margin-right: 100px;
- max-width: 234px;
- max-height: 1400px;
-}
-
-.link {
- display: flex;
- flex-direction: column;
- font-family: var(--font-main);
- font-size: 20px;
- font-weight: 700;
- line-height: 24px;
- letter-spacing: 0em;
- text-align: left;
-}
-
-.link_text {
- color: var(--main-footer-background);
- text-transform: uppercase;
- margin-bottom: 24px;
-}
-
-.link_text__active{
- width: 234px;
- color: var(--main-header-color);
- text-transform: uppercase;
- margin-bottom: 24px;
-}
-
-.link_text:hover {
- color: var(--main-header-color);
-}
-
-.privacy_policy__img1{
- width: auto;
- height: 266px;
- margin-left: -100px;
- margin-top: 100px;
-}
-
-.privacy_policy__img2{
- height: 266px;
- margin-top: 335px;
- width: auto;
- margin-left: -100px;
+ padding-bottom: 5px;
}
.privacy_policy__text_container{
@@ -71,34 +22,18 @@
max-width: 971px;
}
-.text_content {
- font-family: var(--font-main);
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
-}
-
-.text_content__margin_bottom{
- margin-bottom: 24px;
- font-family: var(--font-main);
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
-}
-
-.text_content__heading{
- margin-top: 24px;
+@media only screen and (min-width: 768px) {
+ .privacy_policy {
+ padding: 48px 24px;
+ }
+ .privacy_policy__title {
+ font-size: 34px;
+ }
}
-.custom-list {
- margin:0px;
- padding-left: 16px;
-}
-
-.custom-list__item{
- font-family: var(--font-main);
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
+@media only screen and (min-width: 1200px) {
+ .privacy_policy {
+ padding: 80px 214px;
+ }
}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.jsx b/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.jsx
index f9fd2a9c8..7269dd6f1 100644
--- a/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.jsx
+++ b/FrontEnd/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.jsx
@@ -2,7 +2,6 @@ import React from 'react';
import styles from './PrivacyPolicy.module.css';
import privacyPolicyText from './text';
import TEXT_CONTENT from './text';
-import LinkContainer from '../CookiesPolicyPage/LinkContainer.jsx';
import renderContent from '../CookiesPolicyPage/RenderContent.jsx';
import useScrollToTop from '../../hooks/useScrollToTop';
@@ -12,15 +11,6 @@ const PrivacyPolicy = () => {
return (
-
-
-
-
-
{privacyPolicyText.title}
{renderContent(TEXT_CONTENT)}
diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css
index 0d0a2ee79..baf2f8471 100644
--- a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css
+++ b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css
@@ -21,7 +21,7 @@
.data-block_render-contact,
.data-content_render-data {
display: flex;
- width: 345px;
+ width: 343px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css
index a141383c3..8473c8c46 100644
--- a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css
+++ b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css
@@ -15,7 +15,7 @@
.title-block__content-info {
display: flex;
flex-direction: column;
- width: 345px;
+ width: 343px;
padding: 24px 16px;
}
@@ -104,7 +104,7 @@
.title-block__button {
display: flex;
height: 46px;
- width: 345px;
+ width: 343px;
justify-content: center;
align-items: center;
gap: 4px;
@@ -112,6 +112,7 @@
border: 1px solid var(--profile-detail-title-color-company-button);
cursor: pointer;
padding: 7px 16px;
+ box-sizing: border-box;
}
.title-block__button--text {
diff --git a/FrontEnd/src/pages/SearchPage/Search.jsx b/FrontEnd/src/pages/SearchPage/Search.jsx
index 5fa418371..a5fdab3f1 100644
--- a/FrontEnd/src/pages/SearchPage/Search.jsx
+++ b/FrontEnd/src/pages/SearchPage/Search.jsx
@@ -1,15 +1,14 @@
import axios from 'axios';
import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
-import BreadCrumbs from '../../components/BreadCrumbs/BreadCrumbs';
import SearchResults from './SearchField/SearchResults';
import link_to_left from './img/link_to_left.svg';
import link_to_right from './img/link_to_right.svg';
-import styles from './search.module.css';
+import styles from './search.module.scss';
import PropTypes from 'prop-types';
import useSWR from 'swr';
-const ITEMS_PER_PAGE = 6;
+const ITEMS_PER_PAGE = 100;
export function Search({ isAuthorized }) {
const [searchResults, setSearchResults] = useState([]);
@@ -69,101 +68,90 @@ export function Search({ isAuthorized }) {
return (
-
-
-
-
+
{searchResults && (
-
+
- РЕЗУЛЬТАТІВ ЗА ПОШУКОМ
+ Результати пошуку
- {` ${searchTerm} `}
+ {` “${searchTerm}” `}
: {searchResults.length > 0 ? searchResults.length : 0}
)}
-
- {!error && searchResults.length > 0 ? (
- <>
-
-
- ) : (
-
-
- Пошук не дав результатів: компанії з іменем
-
- {` ${searchTerm} `}
-
- не було виявлено на даний момент
-
-
- )}
-
-
- {totalPages > 1 && (
-
- {currentPage > 1 && (
-
- )}
- {currentPage > 1 && (
- <>
-
- {currentPage > 2 && (
-
...
- )}
-
- )}
- {Array.from({ length: totalPages }, (_, i) => {
- if (
- i === 2 ||
- i === totalPages ||
- (i >= currentPage - 1 && i <= currentPage)
- ) {
- return (
-
+
+ )}
+ {searchResults.length === 0 &&
+
+
+ Пошук не дав результатів
+
+
}
);
}
diff --git a/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.jsx b/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.jsx
index 531812b65..8871d4fac 100644
--- a/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.jsx
+++ b/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import { Row, Col} from 'antd';
import CompanyCard from '../../../components/CompanyCard/CompanyCard';
import styles from './SearchResults.module.css';
import PropTypes from 'prop-types';
@@ -15,21 +17,19 @@ const SearchResults = ({
}
return (
-
+
{!error && (
-
-
+
{displayedResults.map((result, resultIndex) => (
-
+
-
+
))}
-
-
+
)}
);
diff --git a/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.module.css b/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.module.css
index 169ede0ee..ad8067862 100644
--- a/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.module.css
+++ b/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.module.css
@@ -1,25 +1,18 @@
.new-companies-block {
- display: flex;
- margin-top: 3%;
- padding: 16px 8px;
- flex-direction: column;
- align-items: center;
- gap: 26px;
+ width: 375px;
+ padding: 18px 0px 38px 0px;
}
-.row {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- justify-content: space-between;
- margin: 20px;
- position: relative;
- z-index: 100;
+
+@media only screen and (min-width: 768px) {
+ .new-companies-block {
+ width: 768px;
+ }
}
-.col-md-4 {
- flex-basis: calc(33.3% - 80px);
- margin: 20px;
- z-index: 1000;
- position: relative;
- z-index: 100;
+@media only screen and (min-width: 1512px) {
+ .new-companies-block {
+ width: 1304px;
+ }
}
+
diff --git a/FrontEnd/src/pages/SearchPage/SearchField/tests/SearchResults.test.js b/FrontEnd/src/pages/SearchPage/SearchField/tests/SearchResults.test.js
index 79a458ef0..2ec9fbc7f 100644
--- a/FrontEnd/src/pages/SearchPage/SearchField/tests/SearchResults.test.js
+++ b/FrontEnd/src/pages/SearchPage/SearchField/tests/SearchResults.test.js
@@ -20,6 +20,19 @@ afterEach(cleanup);
describe('SearchResults component unit tests', () => {
test('renders search results', () => {
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+ });
const results = [
{
id: 1,
diff --git a/FrontEnd/src/pages/SearchPage/search.module.css b/FrontEnd/src/pages/SearchPage/search.module.css
deleted file mode 100644
index e2c7e6e04..000000000
--- a/FrontEnd/src/pages/SearchPage/search.module.css
+++ /dev/null
@@ -1,96 +0,0 @@
-.main_block_outer {
- padding-top: 10px;
- min-height: var(--min-height-block-main);
-}
-
-.new-companies-main {
- background-color: var(--search-new-companies-main);
-}
-
-.new-companies-main__error {
- display: flex;
- min-height: 539px;
- margin-top: 3%;
- align-content: center;
-}
-
-.main_block {
- position: relative;
-}
-
-.new-companies-search_count {
- display: flex;
- margin: auto;
- margin-bottom: 20px;
- padding-left: 10%;
-}
-
-.search_field_entered_value {
- color: #0b6c61;
- font: normal normal normal 20px/2 var(--font-main);
- font-weight: 600;
- font-style: italic;
-}
-
-.search_results_text {
- font: var(--font-main);
- font-weight: 700;
-}
-
-.search_result_error {
- margin-left: 140px;
- margin-top: 15%;
- width: 80%;
- flex-direction: row;
- font-weight: 600;
- color: var(--search-text-color);
- font: normal normal bold 20px/2 var(--font-main);
-}
-
-.search_result_error_color {
- color: #0b6c61;
- font: normal normal normal 20px/2 var(--font-main);
- font-weight: 600;
-}
-
-.dot-img-right {
- width: 179px;
- height: 150px;
- display: inline-flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 24px;
- margin-top: 1%;
- margin-left: 87%;
- position: absolute;
- z-index: 10;
-}
-
-.new-companies-result_pages {
- padding: 40px;
-}
-
-.pagination {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 20px;
-}
-
-.pagination button {
- all: unset;
- /* border: none; */
- font-size: 16px;
- font-weight: 500;
- padding: 8px 16px;
- margin: 0 4px;
- cursor: pointer;
-}
-
-.pagination button.active {
- background-color: transparent;
- color: var(--search-pagination-style-color);
- border: 1px solid var(--search-pagination-style-color);
- border-radius: 5px;
- transition: background-color 0.3s, color 0.3s;
-}
diff --git a/FrontEnd/src/pages/SearchPage/search.module.scss b/FrontEnd/src/pages/SearchPage/search.module.scss
new file mode 100644
index 000000000..7ed26a476
--- /dev/null
+++ b/FrontEnd/src/pages/SearchPage/search.module.scss
@@ -0,0 +1,119 @@
+.main_block_outer {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+}
+
+.new-companies-result_pages {
+ padding: 40px;
+}
+
+.new-companies-main__error {
+ width: 100%;
+ background-color: rgba(249, 245, 236, 1);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 288px;
+ flex-grow: 1;
+}
+
+.new-companies-main {
+ display: flex;
+ align-self: center;
+ align-items: flex-start;
+ flex-direction: column;
+ background: var(--new-companies-background-color);
+ min-width: 375px;
+}
+
+.new-companies-search_count {
+ display: flex;
+ flex-direction: row;
+ padding: 40px 16px;
+}
+
+.search_field_entered_value {
+ color: #707070;
+ font: var(--font-main);
+ font-weight: 300;
+ font-size: 18px ;
+}
+
+.search_results_text {
+ font: normal normal bold 18px/2 var(--font-main);
+ font-size: 18px;
+ font-weight: 700;
+ color: #232424;
+ line-height: 22px;
+}
+
+.search_result_error {
+ width: 100%;
+ color: var(--search-text-color);
+ font: normal normal bold 24px/2 var(--font-main);
+ text-align: center;
+ white-space: nowrap;
+}
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 20px;
+}
+
+.pagination button {
+ all: unset;
+ font-size: 16px;
+ font-weight: 500;
+ padding: 8px 16px;
+ margin: 0 4px;
+ cursor: pointer;
+}
+
+.pagination button.active {
+ background-color: transparent;
+ color: var(--search-text-color);
+ border: 1px solid var(--search-text-color);
+ border-radius: 5px;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+
+
+
+@media only screen and (min-width: 768px){
+ .search_results_text {
+ font-size: 34px;
+ line-height: 41px;
+ }
+
+ .search_field_entered_value{
+ font-size: 34px;
+ }
+
+ .search_result_error {
+ font: normal normal bold 40px/2 var(--font-main);
+ }
+
+ .new-companies-search_count {
+ padding: 40px 24px;
+ }
+
+ .new-companies-main {
+ width: 768px;
+ }
+
+}
+
+@media only screen and (min-width: 1512px){
+ .new-companies-search_count {
+ padding: 40px 14px;
+ }
+
+ .new-companies-main {
+ width: 1304px;
+ }
+
+}
diff --git a/FrontEnd/src/pages/SearchPage/tests/Search.test.js b/FrontEnd/src/pages/SearchPage/tests/Search.test.js
index f5a1dd22d..57ad370df 100644
--- a/FrontEnd/src/pages/SearchPage/tests/Search.test.js
+++ b/FrontEnd/src/pages/SearchPage/tests/Search.test.js
@@ -18,7 +18,7 @@ describe('Search component unit tests', () => {
);
- const counterElement = screen.getByText(/РЕЗУЛЬТАТІВ ЗА ПОШУКОМ/i, {
+ const counterElement = screen.getByText(/Результати пошуку/i, {
exact: false,
});
expect(counterElement).toBeInTheDocument();
diff --git a/FrontEnd/src/routes/ClientRouter.jsx b/FrontEnd/src/routes/ClientRouter.jsx
index 8c8245a18..217970bf4 100644
--- a/FrontEnd/src/routes/ClientRouter.jsx
+++ b/FrontEnd/src/routes/ClientRouter.jsx
@@ -7,6 +7,7 @@ import 'react-toastify/dist/ReactToastify.css';
import customTheme from '../pages/CustomThemes/customTheme.js';
import LoginPage from '../pages/Authorization/LoginPage';
+import AboutUsPage from '../pages/AboutUsPage/AboutUsPage.jsx';
import CookiesPolicyComponent from '../pages/CookiesPolicyPage/CookiesPolicyComponent';
import Footer from '../components/Footer/Footer';
import Header from '../components/Header/Header';
@@ -30,7 +31,7 @@ import TermsAndConditions from '../components/TermsAndConditionsApp/terms_condit
import { useAuth } from '../hooks';
import { Search } from '../pages/SearchPage/Search';
import '../pages/CustomThemes/customToastStyles.css';
-import Contact from '../components/Contact/Contact';
+import Contact from '../pages/Contact/Contact.jsx';
import ErrorPage404 from '../pages/ErrorPages/ErrorPage404';
import { BurgerMenuProvider } from '../context/BurgerMenuContext';
@@ -59,6 +60,7 @@ function ClientRouter() {
} />
+ } />
{isAuth ? (
} />
) : (
+