diff --git a/src/assets/sass/mixins/_utils.mixins.scss b/src/assets/sass/mixins/_utils.mixins.scss
index 8032dee65..3e0094802 100644
--- a/src/assets/sass/mixins/_utils.mixins.scss
+++ b/src/assets/sass/mixins/_utils.mixins.scss
@@ -181,6 +181,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: $text-overflow;
+ word-break: break-word;
@supports (-webkit-line-clamp: $line-num) {
overflow: hidden;
@@ -250,4 +251,4 @@
@keyframes #{$name} {
@content;
}
-}
\ No newline at end of file
+}
diff --git a/src/features/AboutUsPage/Founders/Founders.component.tsx b/src/features/AboutUsPage/Founders/Founders.component.tsx
index 000fc0c6b..7e73012a2 100644
--- a/src/features/AboutUsPage/Founders/Founders.component.tsx
+++ b/src/features/AboutUsPage/Founders/Founders.component.tsx
@@ -1,37 +1,38 @@
-import './Founders.styles.scss'
-import Founder from './Founder/Founder.component'
-import TeamMemberCard from '../TeamMemberCard/TeamMemberCard.component'
-import TeamMember from '@/models/team/team.model'
-import Inna from '@assets/images/about-us/Inna.png'
-import Natalia from '@assets/images/about-us/Nata.png'
-import InnaSmall from '@assets/images/about-us/InnaWithBG.png'
-import NataliaSmall from '@assets/images/about-us/NataliaWithBG.png'
+import './Founders.styles.scss';
+
+import Inna from '@assets/images/about-us/Inna.png';
+import InnaSmall from '@assets/images/about-us/InnaWithBG.png';
+import Natalia from '@assets/images/about-us/Nata.png';
+import NataliaSmall from '@assets/images/about-us/NataliaWithBG.png';
+
+import TeamMember from '@/models/team/team.model';
+
+import TeamMemberCard from '../TeamMemberCard/TeamMemberCard.component';
+
+import Founder from './Founder/Founder.component';
// тут лежить хардкод
-const FounderInna: FounderProps =
-{
+const FounderInna: FounderProps = {
founderName: 'Інна Крупник',
founderRole: 'Голова і співзасновниця ГО',
founderImage: Inna,
founderInstagram: 'https://www.instagram.com/krupnyk_inna/',
founderFacebook: 'https://www.facebook.com/krupnyk.inna',
founderText: '«На участь, до того ж найактивнішу, в проєкті «Стріткод: історія на кожному кроці» мене надихає розуміння того, наскільки українське суспільство та нація проапгрейдили власне розуміння себе та своєї історії за останні роки, наскільки відкриті вони до вивчення історії та спростування історичних міфів, наскільки хочуть бачити цю історію близькою до себе, пережитою та бути дотичною до неї. Це все наштовхує на необхідність важливих історичних проєктів, як просвітницьких, так і розважальних. Для широких верств та найширшого залучення в історію. Занурюймося!»',
- order: true
-}
+ order: true,
+};
-const FounderNatalia: FounderProps =
-{
+const FounderNatalia: FounderProps = {
founderName: 'Наталя Демідова',
founderRole: 'Авторка ідеї, співзасновниця проєкту',
founderImage: Natalia,
founderInstagram: 'https://www.instagram.com/notatka8/',
founderFacebook: 'https://www.facebook.com/NatalyaDemydiv',
founderText: '«Я хочу, щоб українські діти, які зростатимуть після Перемоги, знали, хто в цьому світі на що здатний. Хочу, щоби розуміли причинно-наслідкові зв’язки і були захищені цим знанням. Для того маємо відновлювати історичну пам’ять вже зараз. Це водночас і просто, і складно. Просто – бо є проєкт «Стріткод», бачення, як його втілити, і команда, яка вже це робить. Складно, бо масштаби – вся Україна. Але це той проєкт, який має бути реалізований, тут без варіантів. Тому несемось!) Приєднуйтеся ;)»',
- order: false
-}
+ order: false,
+};
-const TeamMemberCardInna: TeamMember =
-{
+const TeamMemberCardInna: TeamMember = {
id: -1,
isMain: true,
imageId: -1,
@@ -39,12 +40,12 @@ const TeamMemberCardInna: TeamMember =
description: FounderInna.founderRole,
image: {
id: -1,
- base64: InnaSmall+'',
+ base64: `${InnaSmall}`,
blobName: 'Inna',
mimeType: 'png',
},
teamMemberLinks: [
- {
+ {
id: -1,
targetUrl: FounderInna.founderFacebook,
logoType: 2,
@@ -53,13 +54,12 @@ const TeamMemberCardInna: TeamMember =
id: -2,
targetUrl: FounderInna.founderInstagram,
logoType: 1,
- }
+ },
],
positions: [],
-}
+};
-const TeamMemberCardNatalia: TeamMember =
-{
+const TeamMemberCardNatalia: TeamMember = {
id: -2,
isMain: true,
imageId: -2,
@@ -67,12 +67,12 @@ const TeamMemberCardNatalia: TeamMember =
description: FounderNatalia.founderRole,
image: {
id: -2,
- base64: NataliaSmall,
+ base64: NataliaSmall,
blobName: 'Natalia',
mimeType: 'png',
},
teamMemberLinks: [
- {
+ {
id: -1,
targetUrl: FounderInna.founderFacebook,
logoType: 2,
@@ -81,22 +81,24 @@ const TeamMemberCardNatalia: TeamMember =
id: -2,
targetUrl: FounderInna.founderInstagram,
logoType: 1,
- }
+ },
],
positions: [],
-}
+};
// Кінець хардкода
-const Founders = () => {
- return (
-
-
Засновниці
-
- {window.innerWidth > 600 ? : }
- {window.innerWidth > 600 ? : }
-
+const Founders = () => (
+
+
+
+ Засновниці
+
+
+
+ {window.innerWidth > 600 ? : }
+ {window.innerWidth > 600 ? : }
- );
-}
+
+);
-export default Founders;
\ No newline at end of file
+export default Founders;
diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx
index f0f5b04db..c5f21e429 100644
--- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx
+++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx
@@ -1,25 +1,40 @@
-import './TeamMemberCard.styles.scss'
+import './TeamMemberCard.styles.scss';
+
+import base64ToUrl from '@/app/common/utils/base64ToUrl.utility';
import TeamMember from '@/models/team/team.model';
+
import TeamMemberLinks from './TeamMemberLinks/TeamMemberLinks.component';
-import base64ToUrl from '@/app/common/utils/base64ToUrl.utility';
-const TeamMemberCard = (member : TeamMember) => (
-
-
-
0 ? base64ToUrl(member.image?.base64, member.image?.mimeType) : member.image?.base64}/>
+type Props = {
+ person: TeamMember,
+ isSingleCard?: boolean
+};
+
+const TeamMemberCard = ({ person, isSingleCard }: Props) => (
+
+
+
0
+ ? base64ToUrl(person.image?.base64, person.image?.mimeType)
+ : person.image?.base64}
+ alt="team person"
+ />
-
-
{member.name}
-
{member.description}
-
- {member.teamMemberLinks.map(
- (link)=>(
-
- )
+
+
+
{person.name}
+
{person.description}
+
+
+
+ {person.teamMemberLinks.map(
+ (link) => (
+
+ ),
)}
);
-export default TeamMemberCard
\ No newline at end of file
+export default TeamMemberCard;
diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss
index a4dfba294..64b8b2720 100644
--- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss
+++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss
@@ -8,43 +8,69 @@
{
display: flex;
flex-direction: column;
- gap: f.pxToRem(30px);
+ justify-content: space-between;
+ gap: 5%;
border-radius: 50px;
box-shadow: 0px 7px 17px 2px #5b5b5b40;
+
max-width: f.pxToRem(310px);
min-width: f.pxToRem(310px);
- height: 100%;
-
+ height: f.pxToRem(479px);
padding: f.pxToRem(20px);
+ position: relative;
+
+ &_single{
+ margin: f.pxToRem(30px) auto;
+ }
+
.photoContainer{
+ height: 65%;
+
img{
border-radius: 50px;
width: 100%;
+ height: 100%;
+ object-fit: cover;
}
}
-
- .textContainer {
+
+ .content{
+ height: 30%;
display: flex;
+ justify-content: space-between;
flex-direction: column;
- gap: f.pxToRem(10px);
- padding: 0 f.pxToRem(8px);
- text-align: center;
- word-break: break-all;
- h2 {
- @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 23px);
- }
- p {
- @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 19px);
- color: c.$sliders-text-grey-color;
+
+ .textContainer {
+ display: flex;
+ flex-direction: column;
+ gap: f.pxToRem(10px);
+ padding: 0 f.pxToRem(8px);
+ text-align: center;
+ word-break: break-all;
+
+ h2 {
+ @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 23px);
+ @include mut.truncated($line-num: 1);
+ }
+
+ p {
+ @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 19px);
+ color: c.$sliders-text-grey-color;
+ @include mut.truncated($line-num: 2);
+ }
}
+
.linksContainer {
display: flex;
justify-content: center;
gap: f.pxToRem(10px);
+ margin-bottom: f.pxToRem(5px);
+
a {
min-width: f.pxToRem(25px);
min-height: f.pxToRem(25px);
+
img{
width: 100%;
height: 100%;
@@ -52,5 +78,4 @@
}
}
}
-
-}
\ No newline at end of file
+}
diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx b/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx
index e5006be64..0f1eb4aae 100644
--- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx
+++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx
@@ -6,11 +6,13 @@ import youtube from '@assets/images/partners/youtube.webp';
import { TeamMemberLinkCreateUpdate } from '@/models/team/team.model';
const LogoType = [twitter, instagram, facebook, youtube];
-
-const TeamMemberLinks = (link: TeamMemberLinkCreateUpdate) => (
-
-
-
+type Props = {
+ link: TeamMemberLinkCreateUpdate
+};
+const TeamMemberLinks = ({ link }: Props) => (
+
+
+
);
-export default TeamMemberLinks;
\ No newline at end of file
+export default TeamMemberLinks;
diff --git a/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx b/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx
index 83804ea66..7d4854b0e 100644
--- a/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx
+++ b/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx
@@ -1,23 +1,25 @@
-import TeamMember from "@/models/team/team.model";
-import TeamMemberCard from "../../TeamMemberCard/TeamMemberCard.component";
-import './TeamMemberList.styles.scss'
+import './TeamMemberList.styles.scss';
+
+import TeamMember from '@/models/team/team.model';
+
+import TeamMemberCard from '../../TeamMemberCard/TeamMemberCard.component';
+
interface TeamMemberListProps {
teamMembers: TeamMember[];
}
-const TeamMemberList = (props: TeamMemberListProps) => {
- return (
-
- {
- props.teamMembers.map(
- (founder)=>
-
-
-
- )
- }
-
- )
-}
+const TeamMemberList = ({ teamMembers }: TeamMemberListProps) => (
+
+ {
+ teamMembers.map(
+ (founder) => (
+
+
+
+ ),
+ )
+ }
+
+);
-export default TeamMemberList;
\ No newline at end of file
+export default TeamMemberList;
diff --git a/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx b/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx
index 7f8bf4fec..d3f18abed 100644
--- a/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx
+++ b/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx
@@ -14,21 +14,25 @@ const TeamMemberSlider: React.FC
= ({ team }) => {
const getSliderData = () => {
if (team.length > 0) {
return (
-
- {
- team.map((member) => (
-
-
-
- ))}
-
+ team.length === 1
+ ?
+ : (
+
+ {
+ team.map((member) => (
+
+
+
+ ))
+ }
+
+ )
);
}
return <>>;
diff --git a/src/features/MainPage/TopCarousel/TopCarousel.styles.scss b/src/features/MainPage/TopCarousel/TopCarousel.styles.scss
index b04654bdf..80b28eeb5 100644
--- a/src/features/MainPage/TopCarousel/TopCarousel.styles.scss
+++ b/src/features/MainPage/TopCarousel/TopCarousel.styles.scss
@@ -19,7 +19,7 @@
.carousel-image {
width: 100%;
- height: f.pxToRem(737px);
+ height: 100%;
}
.slick-dots li button {
@@ -63,7 +63,7 @@
@media screen and (min-width: 1800px) {
.carousel-image {
- height: f.pxToRem(830px);
+ height: auto;
}
}
}