diff --git a/FrontEnd/public/svg/baget.svg b/FrontEnd/public/svg/baget.svg new file mode 100644 index 000000000..c56202f38 --- /dev/null +++ b/FrontEnd/public/svg/baget.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/car.svg b/FrontEnd/public/svg/car.svg new file mode 100644 index 000000000..23e6ebbf1 --- /dev/null +++ b/FrontEnd/public/svg/car.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/hotel.svg b/FrontEnd/public/svg/hotel.svg new file mode 100644 index 000000000..f74fcef79 --- /dev/null +++ b/FrontEnd/public/svg/hotel.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/people.svg b/FrontEnd/public/svg/people.svg new file mode 100644 index 000000000..a729ee4e5 --- /dev/null +++ b/FrontEnd/public/svg/people.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/post.svg b/FrontEnd/public/svg/post.svg new file mode 100644 index 000000000..71e6ed313 --- /dev/null +++ b/FrontEnd/public/svg/post.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/rocket.svg b/FrontEnd/public/svg/rocket.svg new file mode 100644 index 000000000..044c4b44f --- /dev/null +++ b/FrontEnd/public/svg/rocket.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/shop.svg b/FrontEnd/public/svg/shop.svg new file mode 100644 index 000000000..7b4f5365c --- /dev/null +++ b/FrontEnd/public/svg/shop.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/public/svg/wine.svg b/FrontEnd/public/svg/wine.svg new file mode 100644 index 000000000..bf9f7f6a3 --- /dev/null +++ b/FrontEnd/public/svg/wine.svg @@ -0,0 +1,3 @@ + + + diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css index b38dc7b96..47b63d9fb 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.css @@ -1,88 +1,102 @@ -.about-us-text-section { +.about-us-section-background { display: flex; - padding: 80px 104px; - flex-direction: column; - align-items: flex-start; - gap: 80px; - background: var(--about-text-background-color); - overflow: hidden; + justify-content: center; + background-color: #f9f4ea; + width: 100vw; + height: auto; } -.about-us-text-section__text-field { + +.about-us-text-section { display: flex; flex-direction: column; - align-items: flex-end; - gap: 24px; - position: relative; - z-index: 1; + align-items: center; + gap :24px; + width: 375px; + padding: 40px 16px; + box-sizing: border-box; + background-color: #f9f4ea; } + .about-us-text-section__header-text { - width: 990px; - color: var(--about-text-font-color); - font-family: var(--font-main); - font-size: 32px; - font-style: normal; + font-family: var(--font-logo); + font-size: 24px; font-weight: 700; - line-height: 120%; -} -.about-us-text-section__text { - width: 971px; - height: 62px; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 20px; /* 125% */ - letter-spacing: -0.16px; + line-height: 28px; + text-align: center; + color: #232424; } -.about-us-text-section__paragraphs { +.about-us-text-section__card { display: flex; - width: 1304px; - justify-content: flex-end; - align-items: flex-start; - gap: 36px; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #fff; + width: 155px; + height: 155px; + border-radius: 6px; + gap: 8px; + padding: 16px; + box-sizing: border-box; } -.about-us-text-section__paragraph-one { - align-self: flex-start; - width: 466px; - flex-shrink: 0; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 30px; /* 187.5% */ - letter-spacing: -0.16px; - /* content: "\2022"; */ + +.about-us-text-section__icon { + width: 36px; + height: 36px; } -.about-us-text-section__paragraph-two { - align-self: flex-start; - width: 489px; - flex-shrink: 0; - color: var(--about-text-font-color); - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; + +.about-us-text-section__card-text { + font-family: var(--font-logo); + font-size: 14px; font-weight: 600; - line-height: 30px; /* 187.5% */ - letter-spacing: -0.16px; + color: #232424; + line-height: 19.6px; + letter-spacing: -0.14px; + text-align: center; } -.about-us-text-section__paragraph-one span::before, -.about-us-text-section__paragraph-two span::before { - /* content: "\2022"; */ - margin-right: 8px; + +@media only screen and (min-width: 768px) { + .about-us-text-section { + width: 768px; + padding: 48px 24px; + } + + .about-us-text-section__header-text { + font-size: 40px; + line-height: 48px; + letter-spacing: 0.4px; + } + + .about-us-text-section__card { + flex-direction: row; + height: 102px; + width: 345px; + gap: 18px; + padding: 18px; + justify-content: flex-start; + } + + .about-us-text-section__card-text { + font-size: 16px; + letter-spacing: -0.16px; + line-height: 22.4px; + text-align: start; + } } -.about-us-text-section__dots { - width: 353px; - height: auto; - padding: 50px 0 0 10px; - object-fit: cover; - position: absolute; - transform: translateX(-50%); - z-index: 0; +@media only screen and (min-width: 1512px) { + .about-us-text-section { + width: 1512px; + padding: 80px 104px; + gap: 40px; + } + + .about-us-text-section__header-text { + font-size: 32px; + line-height: 36px; + } + + .about-us-text-section__card { + width: 302px; + } } \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx index 9bebdcc02..0370bdfc5 100644 --- a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx +++ b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/AboutText.jsx @@ -1,31 +1,33 @@ +import React from 'react'; +import { Row, Col } from 'antd'; import './AboutText.css'; import AboutText from './text.js'; const AboutSectionText = () => { - const renderParagraphs = (paragraphNumber) => { - return AboutText.content - .filter(item => item.paragraph === paragraphNumber) - .map((item, index) => ( -
  • {item.text}
    • - )); - }; - return ( -
    -
    -
    {AboutText.title}
    -
    -
      - {renderParagraphs(1)} -
    -
      - {renderParagraphs(2)} -
    -
    +
    +
    +

    {AboutText.title}

    + + {AboutText.content.map((item) => ( + +
    + {item.text} +

    {item.text}

    +
    + + ))} +
    - dots_12x10.png
    ); }; diff --git a/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js b/FrontEnd/src/pages/LandingPage/AboutSection/AboutText/text.js index 6147a0d81..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: 'ДЛЯ КОГО', + 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: 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;