Migrate About Page styles (#1084)

* Migrate styles for About Page - initial commit

* Migrate styles for AssociationMembersSection, extract common styles

* Migrate styles on About page - minor changes

* Fix build

* Migrate styles for ManagementBoardSection

* Migrate styles for SupervisoryBoardSection

* Delete unused image

* Change discord team image, extract AboutWrapper styles

* Migarte styles for PrinciplesThatUniteUs

* Migrate styles for PrincipleCard

* Fix build error

* Fix LinkedIn button

src/components/about/AboutPage.styled.tsx

@@ -0,0 +1,58 @@
+import Image from 'next/image'
+
+import { styled } from '@mui/system'
+import { Grid, Link, Typography } from '@mui/material'
+
+import theme from 'common/theme'
+import { LinkedIn } from '@mui/icons-material'
+
+export const AboutHeading = styled(Typography)(() => ({
+  fontWeight: 500,
+  margin: theme.spacing(15, 0, 8, 0),
+  textAlign: 'center',
+}))
+
+export const Avatar = styled(Image)(() => ({
+  borderRadius: '50%',
+  textAlign: 'center',
+  width: '150px',
+  objectFit: 'cover',
+}))
+
+export const TeamMemberName = styled(Typography)(() => ({
+  fontWeight: 700,
+  margin: theme.spacing(3, 0),
+}))
+
+export const LinkedInButton = styled(Link)(() => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  textAlign: 'center',
+  marginTop: theme.spacing(3),
+  '&:hover': {
+    '&>svg, &>h6': {
+      textDecoration: 'underline',
+      color: theme.palette.primary.main,
+    },
+  },
+}))
+
+export const LinkedInIcon = styled(LinkedIn)(() => ({
+  marginLeft: '-4px',
+}))
+
+export const LinkedInText = styled(Typography)(() => ({
+  marginLeft: theme.spacing(1),
+  color: theme.palette.common.black,
+}))
+
+export const Description = styled(Typography)(() => ({
+  textAlign: 'initial',
+}))
+
+export const AboutWrapper = styled(Grid)(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: theme.spacing(3),
+  flexWrap: 'wrap',
+}))

src/components/about/AboutPage.tsx

@@ -1,15 +1,17 @@
-import Layout from 'components/layout/Layout'
 import { useTranslation } from 'next-i18next'
-import ManagementBoardSection from './sections/ManagementBoardSection'
-import ActiveMembersSection from './sections/ActiveMembersSection'
-import SupervisoryBoardSection from './sections/SupervisoryBoardSection'
-import AssociationMembersSection from './sections/AssociationMembersSection'
-import AboutTheTeamSection from './sections/AboutTheTeamSection'
+
+import Layout from 'components/layout/Layout'
+import ManagementBoardSection from './sections/ManagementBoardSection/ManagementBoardSection'
+import ActiveMembersSection from './sections/ActiveMembersSection/ActiveMembersSection'
+import SupervisoryBoardSection from './sections/SupervisoryBoardSection/SupervisoryBoardSection'
+import AssociationMembersSection from './sections/AssociationMembersSection/AssociationMembersSection'
+import AboutTheTeamSection from './sections/AboutTheTeamSection/AboutTheTeamSection'
 
 export default function AboutPage() {
-  const { t } = useTranslation()
+  const { t } = useTranslation('about')
+
   return (
-    <Layout title={t('about:about.title')} maxWidth="xl">
+    <Layout title={t('about.title')} maxWidth="xl">
       <ManagementBoardSection />
       <AssociationMembersSection />
       <ActiveMembersSection />

src/components/about/helpers/principlesData.tsx

@@ -1,4 +1,5 @@
 import { SvgIconProps } from '@mui/material'
+
 import VoluntaryIcon from '../icons/VoluntaryIcon'
 import ProactiveIcon from '../icons/ProactiveIcon'
 import ExpertiseIcon from '../icons/ExpertiseIcon'

src/components/about/helpers/supervisoryBoardData.tsx

@@ -9,7 +9,7 @@ export const data: TeamData[] = [
   {
     img: '/img/team-photos/GeorgiMalchev.jpg',
     name: 'Георги Малчев',
-    linkedInProfile: 'https://www.linkedin.com/in/georgimalchev//',
+    linkedInProfile: 'https://www.linkedin.com/in/georgimalchev/',
     description:
       'Преподавател, Съдружник в агенция Xplora.bg. Член на управителния съвет на IAB Bulgaria. Маркетингът е моето призвание. Гордея се, че за почти 6 години от основаването си агенцията за интегриран дигитален маркетинг Xplora, в която съм управляващ съдружник, е сред водещите дигитални агенции в България. Имаме над 90 текущи клиенти - български и мултинационални компании, които са сред топ 3 в сектора си в областта на финансите, IT и технологичните решения, хранително-вкусовата промишленост и търговията.',
   },

src/components/about/sections/AboutTheTeamSection/AboutTheTeamSection.styled.tsx

@@ -0,0 +1,10 @@
+import { styled } from '@mui/system'
+import { Typography } from '@mui/material'
+
+import theme from 'common/theme'
+
+export const DiscordTeamImage = styled(Typography)(() => ({
+  marginTop: theme.spacing(8),
+  display: 'flex',
+  justifyContent: 'center',
+}))

src/components/about/sections/AboutTheTeamSection/AboutTheTeamSection.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image'
+import { useTranslation } from 'next-i18next'
+
+import { Grid, Typography } from '@mui/material'
+
+import { DiscordTeamImage } from './AboutTheTeamSection.styled'
+import { AboutHeading } from 'components/about/AboutPage.styled'
+
+export default function AboutTheTeamSection() {
+  const { t } = useTranslation('about')
+  const discordTeamImagePath = '/img/team-photos/discord-team-image.jpg'
+
+  return (
+    <Grid component="section">
+      <AboutHeading variant="h4">{t('about.about-the-team')}</AboutHeading>
+      <Typography variant="body2">{t('about.team-description')}</Typography>
+      <DiscordTeamImage>
+        <Image alt="Discord team image" src={discordTeamImagePath} width="1189px" height="789px" />
+      </DiscordTeamImage>
+    </Grid>
+  )
+}

src/components/about/sections/ActiveMembersSection/ActiveMembersSection.styled.tsx

@@ -0,0 +1,22 @@
+import { styled } from '@mui/system'
+import { Grid } from '@mui/material'
+
+import theme from 'common/theme'
+
+export const ТeamMemberWrapper = styled(Grid)(() => ({
+  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 14%',
+  },
+}))

src/components/about/sections/ActiveMembersSection/ActiveMembersSection.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from 'next-i18next'
+
+import { Grid, Typography } from '@mui/material'
+
+import { data } from '../../helpers/activeMembersData'
+
+import { ТeamMemberWrapper } from './ActiveMembersSection.styled'
+import {
+  AboutHeading,
+  AboutWrapper,
+  Avatar,
+  LinkedInButton,
+  LinkedInIcon,
+  LinkedInText,
+  TeamMemberName,
+} from 'components/about/AboutPage.styled'
+
+export default function ActiveMembersSection() {
+  const { t } = useTranslation('about')
+
+  return (
+    <Grid component="section">
+      <AboutHeading variant="h4">{t('about.active-team-members')}</AboutHeading>
+      <AboutWrapper>
+        {data.map((teamMember) => (
+          <ТeamMemberWrapper key={teamMember.name}>
+            <Avatar alt="Team member avatar" src={teamMember.img} width="200px" height="200px" />
+            <TeamMemberName variant="subtitle1">{teamMember.name}</TeamMemberName>
+            <Typography variant="body2">{teamMember.description}</Typography>
+            <LinkedInButton href={teamMember.linkedInProfile} target="_blank">
+              <LinkedInIcon color="action" fontSize="large" />
+              <LinkedInText variant="subtitle1">{t('about.linkedIn')}</LinkedInText>
+            </LinkedInButton>
+          </ТeamMemberWrapper>
+        ))}
+      </AboutWrapper>
+    </Grid>
+  )
+}