Skip to content

Commit

Permalink
Merge pull request #968 from ita-social-projects/#837ValueProposition…
Browse files Browse the repository at this point in the history 
…SectionRedesign

#837 value proposition section redesign
  • Loading branch information
@ohorodnykostap
ohorodnykostap authored Nov 26, 2024
2 parents 518f2b9 + f2855cb commit 8048b18
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 157 deletions.
209 changes: 114 additions & 95 deletions FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.css
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,129 @@
.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);
display: flex;
flex-direction: column;
align-items: center;
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 {
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;
transition: transform 0.2s ease;

.about-us-cards-section__card {
display: flex;
flex-direction: column;
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;
display: flex;
flex-direction: column;
align-items:flex-start;
gap: 16px;
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-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
letter-spacing: -0.16px;
position: relative;
top: -20px;
font-family: Geologica, sans-serif;
font-size: 16px;
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 {
width: 680px;
height: auto;

}
.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: 344px;

}

}

@media (max-width: 767px) {
.about-us-cards-section {
max-width: 345px;
height: auto;
padding: 24px 16px;

}
.about-us-cards-section__card {
width: 344px;

}
.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 {
padding: 24px 16px;

}
}
.about-us-cards-section__next-card:hover, .about-us-cards-section__first-card:hover {
transform: scale(1.1);
}
32 changes: 11 additions & 21 deletions FrontEnd/src/pages/LandingPage/AboutSection/Cards/AboutCards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,19 @@ import AboutUsText from './text.js';

const AboutSectionCards = () => {
return (
<div className="about-us-cards-section">
<h2 className="about-us-cards-section__header-text">{AboutUsText.title}</h2>
<div className="about-us-cards-section__cards">
{AboutUsText.content.map((card, index) => (
<div key={index} className={`about-us-cards-section__card
${index === 0 ? 'about-us-cards-section__first-card' : 'about-us-cards-section__next-card'}`}
>
<div className="about-us-cards-section__cards-content">
<div className="about-us-cards-section__cards-logo">
<img className="about-us-cards-section__cards-logo__intersect"
src={`${process.env.REACT_APP_PUBLIC_URL}/svg/intersect.svg`}
alt="About us cards"
/>
<img className="about-us-cards-section__cards-logo__expert"
src={`${process.env.REACT_APP_PUBLIC_URL}/svg/${card.logo}`}
alt="Logo"
/>
<div className="about-us-cards-main-container">
<div className="about-us-cards-section">
<h2 className="about-us-cards-section__header-text">{AboutUsText.title}</h2>
<div className="about-us-cards-section__cards">
{AboutUsText.content.map((card, index) => (
<div key={index} className="about-us-cards-section__card">
<div className="about-us-cards-section__cards-content">
<h3 className="about-us-cards-section__cards-content__text-header">{card.title}</h3>
<p className="about-us-cards-section__cards-content__text">{card.text}</p>
</div>
<h3 className="about-us-cards-section__cards-content__text-header">{card.title}</h3>
<p className="about-us-cards-section__cards-content__text">{card.text}</p>
</div>
</div>
))}
))}
</div>
</div>
</div>
);
Expand Down
82 changes: 41 additions & 41 deletions FrontEnd/src/pages/LandingPage/AboutSection/Cards/text.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
const AboutUsText = {
id: 1,
title: 'ЧОМУ ВАРТО',
level: 2,
content: [
{
id: 2,
logo: 'expert.svg',
title: 'Прямий зв\'язок з виробниками',
text: 'Знайомтеся з історією та цінностями брендів.'
},
{
id: 3,
logo: 'info.svg',
title: 'Ексклюзивні пропозиції',
text: 'Знаходьте унікальні продукти, недоступні в масовому продажі.'
},
{
id: 4,
logo: 'contacts.svg',
title: 'Інновації та тренди',
text: 'Будьте в курсі останніх новинок та технологій галузі.'
},
{
id: 5,
logo: 'contacts.svg',
title: 'Співпраця та синергія',
text: 'Об\'єднуйтесь, щоб творити нове та ділитися досвідом.'
},
{
id: 6,
logo: 'contacts.svg',
title: 'Розвиток та масштабування',
text: 'Знаходьте нових партнерів, клієнтів та ринки збуту.'
},
{
id: 7,
logo: 'exchange.svg',
title: 'Підтримка та знання',
text: 'Отримуйте консультації, експертну допомогу та доступ до освітніх ресурсів.'
},
],
id: 1,
title: 'Чому варто',
level: 2,
content: [
{
id: 2,
logo: 'expert.svg',
title: 'Прямий зв\'язок з виробниками',
text: 'Знайомтеся з історією та цінностями брендів'
},
{
id: 3,
logo: 'info.svg',
title: 'Ексклюзивні пропозиції',
text: 'Знаходьте унікальні продукти, недоступні в масовому продажі'
},
{
id: 4,
logo: 'contacts.svg',
title: 'Інновації та тренди',
text: 'Будьте в курсі останніх новинок та технологій галузі'
},
{
id: 5,
logo: 'contacts.svg',
title: 'Співпраця та синергія',
text: 'Об\'єднуйтесь, щоб творити нове та ділитися досвідом'
},
{
id: 6,
logo: 'contacts.svg',
title: 'Розвиток та масштабування',
text: 'Знаходьте нових партнерів, клієнтів та ринки збуту'
},
{
id: 7,
logo: 'exchange.svg',
title: 'Підтримка та знання',
text: 'Отримуйте консультації, експертну допомогу та доступ до освітніх ресурсів'
},
],
};

export default AboutUsText;

0 comments on commit 8048b18

Please sign in to comment.