Implement Media section, add ui updated on Homepage (#1473)

Co-authored-by: ani-kalpachka <[email protected]>

public/locales/bg/index.json

@@ -43,6 +43,7 @@
     "donated-users": "дарители",
     "donated-leva": "дарени лева"
   },
+  "media-heading": "Медиите за нас",
   "join-podkrepi-bg-section": {
     "heading": "Станете част от идеята на Подкрепи.бг",
     "become-volunteer": "Станете доброволец"

public/locales/en/index.json

@@ -43,6 +43,7 @@
     "donated-users": "donors",
     "donated-leva": "donated leva"
   },
+  "media-heading": "Media",
   "join-podkrepi-bg-section": {
     "heading": "Join Podkrepi.bg",
     "become-volunteer": "Become a volunteer"

src/components/client/index/IndexPage.styled.tsx

@@ -5,7 +5,7 @@ import theme from 'common/theme'
 import LinkButton from 'components/common/LinkButton'
 
 export const Heading = styled(Typography)(() => ({
-  color: theme.palette.primary.dark,
+  color: '#212121',
   textAlign: 'center',
   fontWeight: 500,
   marginBottom: theme.spacing(6),

src/components/client/index/IndexPage.tsx

@@ -3,11 +3,12 @@ import { useTranslation } from 'next-i18next'
 import Layout from 'components/client/layout/Layout'
 import ActiveCampaignsSection from './sections/ActiveCampaignsSection/ActiveCampaignsSection'
 import CompletedCampaignsSection from './sections/CompletedCampaignsSection/CompletedCampaignsSection'
+import PlatformStatisticsSection from './sections/PlatformStatisticsSection/PlatformStatisticsSection'
+import MediaSection from './sections/MediaSection/MediaSection'
 import HowWeWorkSection from './sections/HowWeWorkSection/HowWeWorkSection'
 import TeamMembersSection from './sections/TeamMembersSection/TeamMembersSection'
 import JoinPodkrepiBgSection from './sections/JoinPodkrepiBgSection/JoinPodkrepiBgSection'
 import FaqSection from './sections/FaqSection/FaqSection'
-import PlatformStatisticsSection from './sections/PlatformStatisticsSection/PlatformStatisticsSection'
 
 export default function IndexPage() {
   const { t } = useTranslation('index')
@@ -21,6 +22,7 @@ export default function IndexPage() {
       <ActiveCampaignsSection />
       <CompletedCampaignsSection />
       <PlatformStatisticsSection />
+      <MediaSection />
       <HowWeWorkSection />
       <TeamMembersSection />
       <JoinPodkrepiBgSection />

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx

@@ -86,6 +86,7 @@ export const DonateButton = styled(LinkButton)(() => ({
   fontFamily: 'Montserrat, sans-serif',
   width: theme.spacing(11.125),
   height: theme.spacing(4.5),
+  padding: theme.spacing(0.75, 2),
   marginRight: theme.spacing(1),
   backgroundColor: theme.palette.secondary.main,
   boxShadow:
@@ -114,6 +115,12 @@ export const LearnMoreButton = styled(LinkButton)(() => ({
   border: `2px solid ${theme.palette.secondary.main}`,
   height: theme.spacing(4.5),
 
+  padding: theme.spacing(0.75, 2),
+
+  svg: {
+    width: theme.spacing(2.12),
+  },
+
   '&:hover': {
     color: theme.palette.common.black,
   },

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx

@@ -82,7 +82,7 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
         </DonateButton>
         <LearnMoreButton
           href={routes.campaigns.viewCampaignBySlug(slug)}
-          endIcon={<ArrowForwardIcon color="warning" fontSize="medium" />}>
+          endIcon={<ArrowForwardIcon color="inherit" />}>
           {t('campaign.learn-more')}
         </LearnMoreButton>
       </StyledCardActions>

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx

@@ -4,7 +4,11 @@ import { styled } from '@mui/material/styles'
 import theme from 'common/theme'
 import LinkButton from 'components/common/LinkButton'
 
-export const Root = styled(Grid)(() => ({
+export const Root = styled('section')(() => ({
+  padding: theme.spacing(0, 2),
+}))
+
+export const ActiveCampaignsWrapper = styled(Grid)(() => ({
   display: 'grid',
   marginTop: theme.spacing(3.875),
   gap: theme.spacing(4.62),

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx

@@ -7,7 +7,12 @@ import { routes } from 'common/routes'
 import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums'
 import ActiveCampaignCard from './ActiveCampaignCard/ActiveCampaignCard'
 
-import { Root, SeeAllButton, SeeAllButtonWrapper } from './ActiveCampaignsSection.styled'
+import {
+  Root,
+  ActiveCampaignsWrapper,
+  SeeAllButton,
+  SeeAllButtonWrapper,
+} from './ActiveCampaignsSection.styled'
 
 export default function ActiveCampaignsSection() {
   const { t } = useTranslation('index')
@@ -20,16 +25,16 @@ export default function ActiveCampaignsSection() {
     return null
   } else {
     return (
-      <Grid component="section">
-        <Root>
+      <Root>
+        <ActiveCampaignsWrapper>
           {activeCampaigns?.map((campaign, index) => (
             <ActiveCampaignCard index={index} key={index} campaign={campaign} />
           ))}
-        </Root>
+        </ActiveCampaignsWrapper>{' '}
         <SeeAllButtonWrapper>
           <SeeAllButton href={routes.campaigns.index}>{t('campaign.see-all')}</SeeAllButton>
         </SeeAllButtonWrapper>
-      </Grid>
+      </Root>
     )
   }
 }

src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx

@@ -8,6 +8,7 @@ import theme from 'common/theme'
 
 export const Root = styled('section')(() => ({
   marginTop: theme.spacing(12),
+  padding: theme.spacing(0, 2),
 }))
 
 export const CarouselWrapper = styled(Slider)(() => ({

src/components/client/index/sections/MediaSection/MediaCarouselSettings.tsx

@@ -0,0 +1,40 @@
+import { Settings } from 'react-slick'
+
+export const settings: Settings = {
+  infinite: true,
+  speed: 500,
+  slidesToShow: 5,
+  slidesToScroll: 1,
+  arrows: false,
+  dots: true,
+  lazyLoad: 'ondemand',
+  autoplay: true,
+  autoplaySpeed: 2000,
+
+  responsive: [
+    {
+      breakpoint: 1000,
+      settings: {
+        slidesToShow: 4,
+      },
+    },
+    {
+      breakpoint: 900,
+      settings: {
+        slidesToShow: 3,
+      },
+    },
+    {
+      breakpoint: 700,
+      settings: {
+        slidesToShow: 2,
+      },
+    },
+    {
+      breakpoint: 400,
+      settings: {
+        slidesToShow: 1,
+      },
+    },
+  ],
+}

src/components/client/index/sections/MediaSection/MediaSection.styled.tsx

@@ -0,0 +1,43 @@
+import theme from 'common/theme'
+import Link from 'components/common/Link'
+import Slider from 'react-slick'
+
+import { styled } from '@mui/material/styles'
+
+export const Root = styled('section')(() => ({
+  backgroundColor: '#EAF4FC',
+  padding: theme.spacing(10, 0, 15),
+}))
+
+export const CarouselWrapper = styled(Slider)(() => ({
+  display: 'contents',
+
+  '.slick-list': {
+    paddingBottom: theme.spacing(3),
+  },
+
+  '.slick-dots li button::before': {
+    fontSize: theme.typography.pxToRem(10),
+    color: '#D9D9D9',
+    opacity: 1,
+  },
+
+  '.slick-dots li.slick-active button::before': {
+    fontSize: theme.typography.pxToRem(10),
+    color: '#B0E5FF',
+    opacity: 1,
+  },
+
+  [theme.breakpoints.up(2000)]: {
+    maxWidth: theme.spacing(165),
+    margin: `0 auto ${theme.spacing(4)} auto`,
+  },
+}))
+
+export const ArticleLink = styled(Link)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  background: theme.palette.background.default,
+  boxShadow:
+    '0px 1px 8px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px -2px rgba(0, 0, 0, 0.20)',
+}))

src/components/client/index/sections/MediaSection/MediaSection.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'next-i18next'
+
+import { CardMedia } from '@mui/material'
+
+import { articles } from 'components/admin/partners/helpers/mediaAboutUsData'
+import theme from 'common/theme'
+import { settings } from './MediaCarouselSettings'
+
+import { Heading } from '../../IndexPage.styled'
+import { ArticleLink, CarouselWrapper, Root } from './MediaSection.styled'
+
+export default function MediaSection() {
+  const { t } = useTranslation('index')
+
+  return (
+    <Root>
+      <Heading variant="h4" px={3}>
+        {t('media-heading')}
+      </Heading>
+      <CarouselWrapper {...settings}>
+        {articles.map((article, index) => (
+          <ArticleLink href={article.url} key={index}>
+            <CardMedia
+              component="img"
+              height="100%"
+              image={article.img}
+              alt={article.title}
+              sx={{ height: theme.spacing(12.5), width: theme.spacing(12.5), margin: '0 auto' }}
+            />
+          </ArticleLink>
+        ))}
+      </CarouselWrapper>
+    </Root>
+  )
+}