diff --git a/public/img/team-photos/AnaNikolova.png b/public/img/team-photos/AnaNikolova.png new file mode 100644 index 000000000..b91e69240 Binary files /dev/null and b/public/img/team-photos/AnaNikolova.png differ diff --git a/public/img/team-photos/DianaDobreva.jpg b/public/img/team-photos/DianaDobreva.jpg new file mode 100644 index 000000000..879013776 Binary files /dev/null and b/public/img/team-photos/DianaDobreva.jpg differ diff --git a/public/img/team-photos/GeorgiMalchev.jpg b/public/img/team-photos/GeorgiMalchev.jpg new file mode 100644 index 000000000..d8e4e1eeb Binary files /dev/null and b/public/img/team-photos/GeorgiMalchev.jpg differ diff --git a/public/img/team-photos/IvanGoychev.jpg b/public/img/team-photos/IvanGoychev.jpg new file mode 100644 index 000000000..6c9ec3fac Binary files /dev/null and b/public/img/team-photos/IvanGoychev.jpg differ diff --git a/public/img/team-photos/IvayloIvanov.jpg b/public/img/team-photos/IvayloIvanov.jpg new file mode 100644 index 000000000..8356cbdbf Binary files /dev/null and b/public/img/team-photos/IvayloIvanov.jpg differ diff --git a/public/img/team-photos/JulianKalderon.png b/public/img/team-photos/JulianKalderon.png new file mode 100644 index 000000000..a96e0b6d1 Binary files /dev/null and b/public/img/team-photos/JulianKalderon.png differ diff --git a/public/img/team-photos/MarianaKaroleva.jpg b/public/img/team-photos/MarianaKaroleva.jpg new file mode 100644 index 000000000..17b1f642b Binary files /dev/null and b/public/img/team-photos/MarianaKaroleva.jpg differ diff --git a/public/img/team-photos/MartinKovachev.jpg b/public/img/team-photos/MartinKovachev.jpg new file mode 100644 index 000000000..1fcaef619 Binary files /dev/null and b/public/img/team-photos/MartinKovachev.jpg differ diff --git a/public/img/team-photos/RadoslavBozhinov.jpg b/public/img/team-photos/RadoslavBozhinov.jpg new file mode 100644 index 000000000..17d6437dc Binary files /dev/null and b/public/img/team-photos/RadoslavBozhinov.jpg differ diff --git a/public/img/team-photos/StankaCherkezova.jpg b/public/img/team-photos/StankaCherkezova.jpg new file mode 100644 index 000000000..606cd68fe Binary files /dev/null and b/public/img/team-photos/StankaCherkezova.jpg differ diff --git a/public/img/team-photos/discord-team-image.jpg b/public/img/team-photos/discord-team-image.jpg new file mode 100644 index 000000000..c8898edba Binary files /dev/null and b/public/img/team-photos/discord-team-image.jpg differ diff --git a/public/locales/bg/about.json b/public/locales/bg/about.json index bf20c7969..92301d419 100644 --- a/public/locales/bg/about.json +++ b/public/locales/bg/about.json @@ -1,11 +1,11 @@ { "about": { - "title": "За доброволците в проекта", - "description": "Ние сме група доброволци с обща цел: да създадем прозрачна платформа за дарения, която да не взима комисиона от дарените средства." - }, - "howEverythingBegin": { - "title": "Как започна всичко?", - "volunteers": "Ние сме група доброволци от IT средите, юристи, счетоводители, маркетолози, медици, НПО представители. Обединява ни желанието да създадем подобрена дарителска среда в България, създавайки максимално прозрачна платформа за дарения. Целта ни е платформата да се издържа от членски внос и дарения към нея, а не от процент комисиона от кампаниите, които тя обслужва." + "title": "Кои сме ние?", + "management-board-members": "Членове на управителен съвет", + "supervisory-board-members": "Членове на надзорен съвет", + "linkedIn": "LinkedIn", + "about-the-team": "За екипа", + "team-description": "Ние сме група доброволци от IT средите, юристи, счетоводители, маркетолози, медици, НПО представители. Обединява ни желанието да създадем подобрена дарителска среда в България, създавайки максимално прозрачна платформа за дарения. Целта ни е платформата да се издържа от членски внос и дарения към нея, а не от процент комисиона от кампаниите, които тя обслужва." }, "principlesThatUniteUs": { "title": "Принципи, които ни обединяват", diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json index 87fa3949c..890377acd 100644 --- a/public/locales/bg/index.json +++ b/public/locales/bg/index.json @@ -20,28 +20,7 @@ "team-section": { "heading": "Кой стои зад Подкрепи.бг?", "content": "Подкрепи.бг представлява общност от специалисти в областта на програмирането, правото, маркетинга, дизайна, медицината, финансите, социалното предприемачество и др. Обединени сме от целта да създадем устойчива и прозрачна платформа за дарения, която подкрепя каузи и хора в нужда, като заедно с това популяризира и връща доверието към дарителството в България.", - "meet-our-team": "Запознайте се с екипа в нашия блог", - "ilko-kacharov": "Илко Качаров", - "radoslav-bozhinov": "Радослав Божинов", - "ana-nikolova": "Ана Николова", - "organizational-team": "Организационен екип" - }, - "team-chart-section": { - "heading": "Как започна всичко?", - "data": { - "back-end": "Backend (146)", - "frontend": "Frontend (89)", - "full-stack": "Full-Stack (82)", - "dev-ops": "DevOps (78)", - "qa": "QA (61)", - "design": "Дизайн (35)", - "law": "Право (16)", - "management": "Мениджмънт (88)", - "accounting": "Счетоводство и Финанси (16)", - "marketing": "Маркетинг и PR (72)", - "ngo": "НПО/Доброволчество (37)", - "others": "Други (16)" - } + "meet-our-team": "Запознайте се с екипа в нашия блог" }, "support-us-section": { "heading": "Подкрепете ни като:", diff --git a/public/locales/en/about.json b/public/locales/en/about.json index 60b2da070..300fe1fd4 100644 --- a/public/locales/en/about.json +++ b/public/locales/en/about.json @@ -1,11 +1,11 @@ { "about": { - "title": "About us", - "description": "We are a group of volunteers with a common goal: to create a transparent platform for donations that does not take a commission from successful campaigns." - }, - "howEverythingBegin": { - "title": "How everything started?", - "volunteers": "We are volunteers from the IT community, lawyers, accountants, marketers, medics, and NGO representatives. We are united by the desire to create an improved fundraising environment in Bulgaria by developing the most transparent platform for donations. The platform will support itself by membership fees and grants and not by charging a percentage of the funds raised for the campaigns that go through it." + "title": "Who are we?", + "management-board-members": "Management Board members", + "supervisory-board-members": "Supervisory Board Members", + "linkedIn": "LinkedIn", + "about-the-team": "About the team", + "team-description": "We are volunteers from the IT community, lawyers, accountants, marketers, medics, and NGO representatives. We are united by the desire to create an improved fundraising environment in Bulgaria by developing the most transparent platform for donations. The platform will support itself by membership fees and grants and not by charging a percentage of the funds raised for the campaigns that go through it." }, "principlesThatUniteUs": { "title": "Our principles", diff --git a/public/locales/en/index.json b/public/locales/en/index.json index e498c9d8e..99a143c2f 100644 --- a/public/locales/en/index.json +++ b/public/locales/en/index.json @@ -20,28 +20,7 @@ "team-section": { "heading": "Who is behind Podkrepi.bg?", "content": "Podkrepi.bg is a community of specialists in the field of programming, law, marketing, design, medicine, finance, social entrepreneurship and others. We are united by the goal of creating a sustainable and transparent donation platform that supports causes and people in need, while promoting and restoring trust in donations in Bulgaria.", - "meet-our-team": "Meet our team in the blog", - "ilko-kacharov": "Ilko Kacharov", - "radoslav-bozhinov": "Radoslav Bozhinov", - "ana-nikolova": "Ana Nikolova", - "organizational-team": "Organizational team" - }, - "team-chart-section": { - "heading": "How it all started?", - "data": { - "back-end": "Backend (146)", - "frontend": "Frontend (89)", - "full-stack": "Full-Stack (82)", - "dev-ops": "DevOps (78)", - "qa": "QA (61)", - "design": "Design (35)", - "law": "Law (16)", - "management": "Management (88)", - "accounting": "Accounting and Finance (16)", - "marketing": "Marketing and PR (72)", - "ngo": "NGO/Volunteering (37)", - "others": "Others (16)" - } + "meet-our-team": "Meet our team in the blog" }, "support-us-section": { "heading": "Support us as:", diff --git a/src/components/about/AboutPage.tsx b/src/components/about/AboutPage.tsx index 24ec43cd5..dc30f49dc 100644 --- a/src/components/about/AboutPage.tsx +++ b/src/components/about/AboutPage.tsx @@ -1,23 +1,17 @@ -import { Box } from '@mui/system' -import { routes } from 'common/routes' -import LinkButton from 'components/common/LinkButton' import Layout from 'components/layout/Layout' import { useTranslation } from 'next-i18next' - -import HowEveryThingBegin from './sections/HowEverythingBegin' -import PrinciplesThatUniteUs from './sections/PrinciplesThatUniteUs' +import AboutTheTeamSection from './sections/AboutTheTeamSection' +import ManagementBoardSection from './sections/ManagementBoardSection' +import SupervisoryBoardSection from './sections/SupervisoryBoardSection' export default function AboutPage() { const { t } = useTranslation() return ( - - - - - - {t('nav.about.support-us')} - - + + + + + {/* */} ) } diff --git a/src/components/about/ManagementBoardMembers.tsx b/src/components/about/ManagementBoardMembers.tsx new file mode 100644 index 000000000..302ee89e4 --- /dev/null +++ b/src/components/about/ManagementBoardMembers.tsx @@ -0,0 +1,115 @@ +import { Grid, Theme, Typography, Button, Link } from '@mui/material' +import Heading from 'components/common/Heading' +import { useTranslation } from 'next-i18next' +import { data } from './helpers/managementBoardData' +import Image from 'next/image' +import { createStyles, makeStyles } from '@mui/styles' +import { LinkedIn } from '@mui/icons-material' + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + managemtenBoardWrapper: { + display: 'flex', + justifyContent: 'space-between', + gap: theme.spacing(3), + flexWrap: 'wrap', + }, + managementBoardHeading: { + fontWeight: 500, + }, + teamMemberWrapper: { + flexGrow: 1, + width: '100%', + textAlign: 'center', + marginBottom: theme.spacing(3), + [theme.breakpoints.up('sm')]: { + width: '10%', + flex: '1 0 40%', + marginBottom: theme.spacing(0), + }, + [theme.breakpoints.up('md')]: { + flex: '1 0 30%', + }, + [theme.breakpoints.up('lg')]: { + flex: '1 0 10%', + }, + }, + description: { + textAlign: 'initial', + }, + avatar: { + borderRadius: '50%', + textAlign: 'center', + width: '150px', + objectFit: 'cover', + }, + name: { + fontWeight: 700, + margin: theme.spacing(3, 0), + }, + linkedInButton: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(3), + '&:hover': { + '&>svg, &>h6': { + textDecoration: 'underline', + color: theme.palette.primary.main, + }, + }, + }, + LinkedInIcon: { + marginLeft: '-4px', + }, + linkedInText: { + marginLeft: theme.spacing(1), + color: theme.palette.common.black, + }, + }), +) + +export default function ManagementBoardMembers() { + const { t } = useTranslation('about') + const classes = useStyles() + + return ( + + + {t('about.management-board-members')} + + + {data.map((teamMember) => ( + + teamMemberAvatar + + {teamMember.name} + + + {teamMember.description} + + + + + {t('about.linkedIn')} + + + + ))} + + + ) +} diff --git a/src/components/about/helpers/managementBoardData.tsx b/src/components/about/helpers/managementBoardData.tsx new file mode 100644 index 000000000..1f958b87f --- /dev/null +++ b/src/components/about/helpers/managementBoardData.tsx @@ -0,0 +1,58 @@ +export type TeamData = { + img: string + name: string + description: string + linkedInProfile: string +} + +export const data: TeamData[] = [ + { + img: '/img/team-photos/StankaCherkezova.jpg', + name: 'Станка Черкезова-Калайджиева', + description: + 'Ръководител Правен Eкип. Близо 15 години подпомагам бизнеси и отделни физически лица с консултации и процесуално представителство в сферата на търговското и гражданското право, включително в казуси с международен елемент. Имам богат юридически опит както в България, така и в чужбина, с работа като външен консултант по различни проекти, свързани с национално и европейско право.', + linkedInProfile: 'https://www.linkedin.com/in/stanka-cherkezova-b2b5845/', + }, + { + img: '/img/team-photos/AnaNikolova.png', + name: 'Ана Николова', + description: + 'Доктор по Управление на международни проекти. 12 години опит в неправителствения сектор и развитието на младежко лидерство и предприемачество. Помагам на стартиращи и малки бизнеси със силен фокус към иновациите да развият своите идеи в бизнес начинания, чрез развитие на концепции, проектно планиране и управление и достъп до финансиране. Опитът ми в планирането и управлението на проекти ме доведе също до това да стана и външен експерт-оценител по програми на Европейската комисия и да правя обучения по тази и други теми, свързани с развитие на бизнеса.', + linkedInProfile: 'https://www.linkedin.com/in/anatnikolova/', + }, + { + img: '/img/team-photos/MarianaKaroleva.jpg', + name: 'Марияна Каролева', + description: + 'От години се занимавам с доброволчество, като подкрепям каузи на различни организации, и в качеството си на частно лице помагам със средства, време и внимание на хора в нужда. Като ръководител на Екип Кампании участвам в процеса по структуриране и управление на кампаниите и платформата, в изграждането на различните експертни съвети и набирането на членовете им и в избора и обработката на първите кампании.', + linkedInProfile: 'https://www.linkedin.com/in/anatnikolova/', + }, + { + img: '/img/team-photos/JulianKalderon.png', + name: 'Юлиян Калдерон', + description: + "Над 20 години опит като предприемач. Издател на Gamers' Workshop и основател на БГСервиз, където вече 16 години развиваме бизнес софтуерния продукт nZoom. С него помагаме на фирмите да бъдат по-успешни, чрез дигитализация и ефективно използване на информационните технологии. Имам натрупан значителен опит в развитието на софтуерни продукти, който, надявам се, ще бъде от полза в организационен и чисто оперативен план за Подкрепи.бг", + linkedInProfile: 'https://www.linkedin.com/in/jucalderon/', + }, + { + img: '/img/team-photos/DianaDobreva.jpg', + name: 'Диана Добрева', + description: + 'Над 20 год. опит в организация и управление на финансови потоци, вкл. развитие на 3 новостартиращи в БГ компании със съсредоточен голям финансов ресурс. В последните две години подпомагам стартиращи дружества, които получават инвестиции за да оптимизират финансовите потоци така, че да прескочат 87%-ния риск от неуспех вследствие на недобро планиране и разпределение на ресурсите. Обичаща природата и водеща йогийски начин на живот, в който основно място заема дарителството и помощта към другите.', + linkedInProfile: 'https://www.linkedin.com/in/diana-dobreva-acca-5749b520/', + }, + { + img: '/img/team-photos/RadoslavBozhinov.jpg', + name: 'Радослав Божинов', + description: + 'Дизайн Лийд в British Telecom (BT), отговорен за стратегията и дизайн екипа към BT индиректен партньорски онлайн портал. Работил в БНТ, маркетинг агенции, няколко Английски студиа и компании приди BT. Занимава се с дизайн-а от 2007 насам. Участвал в набирането на средства за земетресението в Турция, BBC деца в нужда ', + linkedInProfile: 'https://www.linkedin.com/in/radoslavbozhinov/', + }, + { + img: '/img/team-photos/IvanGoychev.jpg', + name: 'Иван Гойчев', + description: + 'Технологичен мениджър с над 15 години опит в създаване на успешни стартъпи и реализиране на големи софтуерни продукти. Като технически директор съм водил развитието на 2 успешни стартъпа във финансовата и самолетната индустрия. Натрупах сериозен опит в огромни компании като Amazon AWS, а сега водя софтуерния отдел на Кобилдър, където дигитализираме строителната индустрия.', + linkedInProfile: 'https://www.linkedin.com/in/igoychev/', + }, +] diff --git a/src/components/about/helpers/supervisoryBoardData.tsx b/src/components/about/helpers/supervisoryBoardData.tsx new file mode 100644 index 000000000..bd8faf176 --- /dev/null +++ b/src/components/about/helpers/supervisoryBoardData.tsx @@ -0,0 +1,30 @@ +export type TeamData = { + img: string + name: string + linkedInProfile: string + description: string +} + +export const data: TeamData[] = [ + { + img: '/img/team-photos/GeorgiMalchev.jpg', + name: 'Георги Малчев', + linkedInProfile: 'https://www.linkedin.com/in/georgimalchev//', + description: + 'Преподавател, Съдружник в агенция Xplora.bg. Член на управителния съвет на IAB Bulgaria. Маркетингът е моето призвание. Гордея се, че за почти 6 години от основаването си агенцията за интегриран дигитален маркетинг Xplora, в която съм управляващ съдружник, е сред водещите дигитални агенции в България. Имаме над 90 текущи клиенти - български и мултинационални компании, които са сред топ 3 в сектора си в областта на финансите, IT и технологичните решения, хранително-вкусовата промишленост и търговията.', + }, + { + img: '/img/team-photos/MartinKovachev.jpg', + name: 'Мартин Ковачев', + linkedInProfile: 'https://www.linkedin.com/in/martin-kovachev-56984012/', + description: + 'Кариерата си започнах пред вече далечната 2001г. От 2007г. стартирах собствена компания за софтуерни разработки и оттогава имаме опит в разнородни проекти с дългосрочни клиенти, основно от чужбина (Испания, САЩ, Германия и др). Всичко разработваме самостоятелно с inhouse екип и много рядко наемаме външни лица. Основната ни насоченост е разработване на мобилни приложения и intranet web платформи.', + }, + { + img: '/img/team-photos/IvayloIvanov.jpg', + name: 'Ивайло Иванов', + linkedInProfile: 'https://www.linkedin.com/in/idivanov/', + description: + 'Занимава се с дигитална трансформация на бизнес процеси от 1998г. с клиенти на международния пазар. Основател и CEO на SoftConsultGroup, създал и участвал в редица стартъп компании.', + }, +] diff --git a/src/components/about/sections/AboutTheTeamSection.tsx b/src/components/about/sections/AboutTheTeamSection.tsx new file mode 100644 index 000000000..f39205a22 --- /dev/null +++ b/src/components/about/sections/AboutTheTeamSection.tsx @@ -0,0 +1,41 @@ +import Image from 'next/image' +import { useTranslation } from 'next-i18next' +import { Grid, Theme, Typography } from '@mui/material' +import Heading from 'components/common/Heading' +import { createStyles, makeStyles } from '@mui/styles' + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + AboutTheTeamHeading: { + fontWeight: 500, + margin: theme.spacing(10, 0, 8, 0), + }, + DiscordTeamImage: { + marginTop: theme.spacing(8), + display: 'flex', + justifyContent: 'center', + }, + }), +) + +export default function AboutTheTeamSection() { + const { t } = useTranslation('about') + const classes = useStyles() + const discordTeamImagePath = '/img/team-photos/discord-team-image.jpg' + + return ( + + + {t('about.about-the-team')} + + {t('about.team-description')} + + Discord team image + + + ) +} diff --git a/src/components/about/sections/HowEverythingBegin.tsx b/src/components/about/sections/HowEverythingBegin.tsx deleted file mode 100644 index f9222152a..000000000 --- a/src/components/about/sections/HowEverythingBegin.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react' -import { styled } from '@mui/material/styles' -import { useTranslation } from 'next-i18next' -import { Grid, Typography } from '@mui/material' - -import DiscordImage from '../DiscordImage' -import Heading from 'components/common/Heading' - -const PREFIX = 'HowEverythingBegin' - -const classes = { - title: `${PREFIX}-title`, -} - -const StyledGrid = styled(Grid)(({ theme }) => ({ - [`& .${classes.title}`]: { - color: theme.palette.primary.dark, - paddingTop: theme.spacing(5), - paddingBottom: theme.spacing(3), - }, -})) - -export default function HowEverythingBegin() { - const { t } = useTranslation() - - return ( - - - - {t('about:howEverythingBegin.title')} - - - - - {t('about:howEverythingBegin.volunteers')} - - - - - - - ) -} diff --git a/src/components/about/sections/ManagementBoardSection.tsx b/src/components/about/sections/ManagementBoardSection.tsx new file mode 100644 index 000000000..13773bfa2 --- /dev/null +++ b/src/components/about/sections/ManagementBoardSection.tsx @@ -0,0 +1,115 @@ +import { useTranslation } from 'next-i18next' +import Image from 'next/image' +import { Grid, Theme, Typography, Link } from '@mui/material' +import Heading from 'components/common/Heading' +import { createStyles, makeStyles } from '@mui/styles' +import { LinkedIn } from '@mui/icons-material' +import { data } from '../helpers/managementBoardData' + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + managemtenBoardMembersWrapper: { + display: 'flex', + justifyContent: 'space-between', + gap: theme.spacing(3), + flexWrap: 'wrap', + }, + managementBoardHeading: { + fontWeight: 500, + marginBottom: theme.spacing(8), + }, + teamMemberWrapper: { + flexGrow: 1, + width: '100%', + textAlign: 'center', + marginBottom: theme.spacing(3), + [theme.breakpoints.up('sm')]: { + width: '10%', + flex: '1 0 40%', + marginBottom: theme.spacing(0), + }, + [theme.breakpoints.up('md')]: { + flex: '1 0 30%', + }, + [theme.breakpoints.up('lg')]: { + flex: '1 0 10%', + }, + }, + description: { + textAlign: 'initial', + }, + avatar: { + borderRadius: '50%', + textAlign: 'center', + width: '150px', + objectFit: 'cover', + }, + name: { + fontWeight: 700, + margin: theme.spacing(3, 0), + }, + linkedInButton: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(3), + '&:hover': { + '&>svg, &>h6': { + textDecoration: 'underline', + color: theme.palette.primary.main, + }, + }, + }, + LinkedInIcon: { + marginLeft: '-4px', + }, + linkedInText: { + marginLeft: theme.spacing(1), + color: theme.palette.common.black, + }, + }), +) + +export default function ManagementBoardSection() { + const { t } = useTranslation('about') + const classes = useStyles() + + return ( + + + {t('about.management-board-members')} + + + {data.map((teamMember) => ( + + Team member avatar + + {teamMember.name} + + + {teamMember.description} + + + + + {t('about.linkedIn')} + + + + ))} + + + ) +} diff --git a/src/components/about/sections/SupervisoryBoardSection.tsx b/src/components/about/sections/SupervisoryBoardSection.tsx new file mode 100644 index 000000000..517295ca5 --- /dev/null +++ b/src/components/about/sections/SupervisoryBoardSection.tsx @@ -0,0 +1,141 @@ +import { useTranslation } from 'next-i18next' +import Image from 'next/image' +import { Grid, Theme, Typography, Link } from '@mui/material' +import Heading from 'components/common/Heading' +import { createStyles, makeStyles } from '@mui/styles' +import { LinkedIn } from '@mui/icons-material' +import { data } from '../helpers/supervisoryBoardData' + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + supervisoryBoardMembersWrapper: { + flexGrow: 1, + width: '100%', + textAlign: 'center', + flexWrap: 'wrap', + + [theme.breakpoints.up('sm')]: { + display: 'flex', + gap: theme.spacing(3), + }, + }, + supervisoryBoardHeading: { + fontWeight: 500, + margin: theme.spacing(8, 0), + }, + teamMemberWrapper: { + width: '100%', + backgroundColor: theme.palette.secondary.light, + padding: theme.spacing(4), + marginBottom: theme.spacing(3), + [theme.breakpoints.up('sm')]: { + width: '10%', + flex: '1 0 40%', + marginBottom: theme.spacing(0), + }, + [theme.breakpoints.up('md')]: { + marginBottom: theme.spacing(0), + flex: '1 0 30%', + }, + }, + avatar: { + borderRadius: '50%', + textAlign: 'center', + width: '150px', + objectFit: 'cover', + }, + infoWrapper: { + dispay: 'block', + marginBottom: theme.spacing(4), + [theme.breakpoints.up('md')]: { + display: 'flex', + justifyContent: 'space-around', + gap: theme.spacing(2), + alignItems: 'center', + }, + }, + name: { + fontWeight: 700, + marginTop: theme.spacing(2), + [theme.breakpoints.up('md')]: { + marginTop: 0, + }, + }, + imageLinkedInWrapper: { + display: 'flex', + flexDirection: 'column', + }, + linkedInButton: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(3), + alignSelf: 'center', + '&:hover': { + '&>svg, &>h6': { + textDecoration: 'underline', + color: theme.palette.primary.main, + }, + }, + }, + LinkedInIcon: { + marginLeft: '-4px', + }, + linkedInText: { + marginLeft: theme.spacing(1), + color: theme.palette.common.black, + fontWeight: 500, + }, + description: { + textAlign: 'initial', + }, + }), +) + +export default function SupervisoryBoardSection() { + const { t } = useTranslation('about') + const classes = useStyles() + + return ( + + + {t('about.supervisory-board-members')} + + + {data.map((teamMember) => ( + + + Team member avatar + + + {teamMember.name} + + + + + {t('about.linkedIn')} + + + + + + {teamMember.description} + + + ))} + + + ) +} diff --git a/src/components/index/helpers/chart/TeamPie.tsx b/src/components/index/helpers/chart/TeamPie.tsx deleted file mode 100644 index 36fdf22eb..000000000 --- a/src/components/index/helpers/chart/TeamPie.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { useEffect, useState } from 'react' -import Highcharts from 'highcharts' -import HighchartsReact from 'highcharts-react-official' -import { teamPieData, teamPieOptions, TeamPieItem } from 'components/index/helpers/chart/pieData' -import { useTranslation } from 'next-i18next' -import handleViewport from 'react-in-viewport' - -export type TeamPieProps = { - inViewport: boolean - forwardedRef: React.RefObject - enterCount: number -} - -const TeamPie = ({ inViewport, forwardedRef, enterCount }: TeamPieProps) => { - const { t } = useTranslation() - teamPieData.forEach((item: TeamPieItem): void => { - item.name = t(`index:team-chart-section.data.${item.id}`) - }) - - const [runAnimation, setRunAnimation] = useState(inViewport || enterCount > 0) - - useEffect(() => { - setRunAnimation(inViewport || enterCount > 0) - - function handleResize(): void { - setRunAnimation(false) - setRunAnimation(inViewport || enterCount > 0) - } - window.addEventListener('resize', handleResize) - - return () => { - window.removeEventListener('resize', handleResize) - } - }) - - return ( -
- {runAnimation && } -
- ) -} - -export default handleViewport(TeamPie, {}, { disconnectOnLeave: true }) diff --git a/src/components/index/helpers/chart/pieData.ts b/src/components/index/helpers/chart/pieData.ts deleted file mode 100644 index 14b8e9cb7..000000000 --- a/src/components/index/helpers/chart/pieData.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { Options } from 'highcharts' - -export type TeamPieItem = { - id: string - y: number - color: string - name?: string -} - -export const teamPieData: Array = [ - { id: 'others', y: 2.2, color: '#bb8bbc' }, - { id: 'law', y: 2.2, color: '#3acbb0' }, - { id: 'accounting', y: 2.2, color: '#b9c6cc' }, - { id: 'design', y: 4.7, color: '#ffe149' }, - { id: 'ngo', y: 5.0, color: '#58c7ff' }, - { id: 'qa', y: 8.3, color: '#fe97dc' }, - { id: 'marketing', y: 9.8, color: '#fdc781' }, - { id: 'dev-ops', y: 10.6, color: '#9897ff' }, - { id: 'full-stack', y: 11.1, color: '#7fffc0' }, - { id: 'management', y: 12.0, color: '#d4caff' }, - { id: 'frontend', y: 12.1, color: '#7ef4f4' }, - { id: 'back-end', y: 19.8, color: '#ffa9a8' }, -] - -export const teamPieOptions: Options = { - chart: { - type: 'pie', - backgroundColor: '', - }, - credits: { - enabled: false, - }, - title: { - text: '', - }, - plotOptions: { - pie: { - allowPointSelect: true, - cursor: 'pointer', - dataLabels: { - enabled: true, - format: '{point.name}: {point.percentage:.1f} %', - style: { - color: '#444444', - fontSize: '12px', - }, - }, - innerSize: '35%', - }, - }, - series: [ - { - type: 'pie', - name: '', - data: teamPieData, - animation: { - duration: 2000, - }, - }, - ], -} diff --git a/src/components/index/helpers/teamMembers/MemberCard.tsx b/src/components/index/helpers/teamMembers/MemberCard.tsx deleted file mode 100644 index 610d0bce6..000000000 --- a/src/components/index/helpers/teamMembers/MemberCard.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useTranslation } from 'next-i18next' -import { Avatar, Box, Button, Card, CardActions, CardContent, Typography } from '@mui/material' -import DoubleArrowIcon from '@mui/icons-material/DoubleArrow' -import { WhatUnitesUsItem } from './memberData' -import { staticUrls } from 'common/routes' -import theme from 'common/theme' - -type MemberCardProps = { - info: WhatUnitesUsItem -} - -export default function MemberCard({ info }: MemberCardProps) { - const { t } = useTranslation() - - return ( - - - - - - - {t(info.title)} - - - {t(info.content)} - - - - - - - - ) -} diff --git a/src/components/index/helpers/teamMembers/memberData.ts b/src/components/index/helpers/teamMembers/memberData.ts deleted file mode 100644 index a2985ba5c..000000000 --- a/src/components/index/helpers/teamMembers/memberData.ts +++ /dev/null @@ -1,57 +0,0 @@ -export type WhatUnitesUsItem = { - title: string - content: string - img: string - blogLink: string -} - -export const data: WhatUnitesUsItem[] = [ - { - title: 'index:team-section.ilko-kacharov', - content: 'Технически екип', - blogLink: '/meet-ilko-kacharov', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/08/10371344_10205834730922836_3851201459026933124_o.jpg', - }, - { - title: 'index:team-section.radoslav-bozhinov', - content: 'UI/UX Team', - blogLink: '/meet-radoslav-bozhinov', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/09/IMG_20210325_110922.jpg', - }, - { - title: 'index:team-section.ana-nikolova', - content: 'index:team-section.organizational-team', - blogLink: '/meet-ana-nikolova', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/09/Ana-s-photo--casual--3.jpg', - }, - { - title: 'Георги Малчев', - content: 'Маркетинг Екип', - blogLink: '/meet-georgi-malchev', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/09/-------------.jpg', - }, - { - title: 'Диана Добрева', - content: 'Финансов Екип', - blogLink: '/meet-diana-dobreva', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/08/IMG_7546-.jpg', - }, - { - title: 'Иван Гойчев', - content: 'Технически екип', - blogLink: '/meet-ivan-goychev', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/08/157988039_10158327680609565_6852032729861838089_n-2.jpg', - }, - { - title: 'Юлиян Калдерон', - content: 'Организационен екип', - blogLink: '/meet-julian-kalderon', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/08/unnamed-1-1.png', - }, - { - title: 'Станка Черкезова', - content: 'Правен екип', - blogLink: '/meet-stanka-cherkezova/', - img: 'https://blog.podkrepi.bg/content/images/size/w2000/2021/08/22096097_10155366639738122_7995363511683904116_o-1.jpg', - }, -] diff --git a/src/components/index/sections/TeamMembersSection.tsx b/src/components/index/sections/TeamMembersSection.tsx index 693883db6..c0573e77e 100644 --- a/src/components/index/sections/TeamMembersSection.tsx +++ b/src/components/index/sections/TeamMembersSection.tsx @@ -1,46 +1,17 @@ import React from 'react' import { useTranslation } from 'next-i18next' -import { Navigation, A11y, Autoplay } from 'swiper' -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' import ChevronRightIcon from '@mui/icons-material/ChevronRight' -import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react' -import { Container, Grid, IconButton, Typography } from '@mui/material' +import { Container, Grid, Typography } from '@mui/material' import theme from 'common/theme' import { staticUrls } from 'common/routes' import Heading from 'components/common/Heading' import LinkButton from 'components/common/LinkButton' -import MemberCard from '../helpers/teamMembers/MemberCard' -import { data } from '../helpers/teamMembers/memberData' - import 'swiper/css' import 'swiper/css/a11y' - -const swiperOptions: SwiperProps = { - loop: true, - observer: true, - loopAdditionalSlides: 3, - modules: [Navigation, A11y, Autoplay], - autoplay: { delay: 5000 }, - breakpoints: { - [theme.breakpoints.values.xs]: { - slidesPerView: 1, - }, - [theme.breakpoints.values.md]: { - slidesPerView: 2, - }, - [theme.breakpoints.values.lg]: { - slidesPerView: 3, - }, - }, - spaceBetween: 30, -} - export default function TeamMembersSection() { const { t } = useTranslation() - const navigationPrevRef = React.useRef(null) - const navigationNextRef = React.useRef(null) return ( @@ -62,36 +33,6 @@ export default function TeamMembersSection() { justifyContent="center" paddingTop={theme.spacing(3)} paddingBottom={theme.spacing(7)}> - {/* TODO: fix swiper as it displays mixed names and images when they are more than 3 - // - - - - - - - - { - if (!swiper.params.navigation || swiper.params.navigation === true) { - return - } - swiper.params.navigation.prevEl = navigationPrevRef.current - swiper.params.navigation.nextEl = navigationNextRef.current - }}> - {data.map((member) => ( - - - - ))} - - */}