news notifications added

public/locales/bg/campaigns.json

@@ -55,6 +55,13 @@
     "submit": "Изпрати",
     "apply": "Кандидатствайте",
     "subscribe": "Абонирай се за email известия за кампанията",
+    "subscribeFooter": "Абонирай се за бюлетина",
+    "subscribeGeneral": "Абонирайте се за email известия от Подкрепи.бг",
+    "subscribe-monthly-newsletter": "Месечен бюлтеин на Подкрепи.бг",
+    "subscribeGeneralSubtext": "Получавайте нашия месечен бюлетин, в който ще Ви информираме за най-интересните новини от Подкрепи.бг!",
+    "subscribe-general-monthly-newsletter": "Получавайте нашия месечен бюлетин, за да сте в час най-интересните новини от Подкрепи.бг!",
+    "subscribeGeneralButton": "Абонирайте се за новини",
+    "subscribe-general-newsletter-button": "Абонирайте се",
     "support": "Дарете",
     "support-cause-today": "Подкрепете кауза днес!",
     "support-now": "Подкрепете сега",
@@ -78,10 +85,12 @@
   "subscribe": {
     "confirm-sent": "Моля, <strong>активирай</strong> абонамента си от email-a, който ти изпратихме на {{email}}",
     "confirm-subscribe": "Записа се успешно.",
-    "subscribe-title": "Абониране за известия и новини от Podkrepi.bg",
+    "subscribe-title": "Абониране за новините на Подкрепи.бг",
     "subscribe-campaign-title": "Абониране за новините по кампанията",
     "subscribe-text-nonLoggedUser": "Моля, продължи като гост и въведи email адреса, на който желаеш да получаваш известия за тази кампания, или влез в профила си. Вписвайки се с потребителското си име и парола, ще можеш да управляваш абонамента си от своя Личен профил.",
+    "subscribe-text-nonLoggedUser-general": "Моля, продължи като гост и въведи email адреса, на който желаеш да получаваш известия от нас, или влез в профила си. Вписвайки се с потребителското си име и парола, ще можеш да управляваш абонамента си от своя Личен профил.",
     "subscribe-text-loggedUser": "Моля, избери дали желаеш да получаваш новините за кампанията на email адреса, асоцииран с профила ти, или на алтернативен адрес:",
+    "subscribe-subtitle": "Искам да получавам новини и известия от Подкрепи.бг на този email адрес:",
     "subscribe-campaign-subtTitle": "Искам да получавам новини за кампанията на този email адрес:",
     "subscribe-button": "Запиши ме",
     "profile-button": "На профилния",

public/locales/bg/index.json

@@ -10,6 +10,10 @@
     "content": "Подкрепи.бг представлява общност от специалисти в областта на програмирането, правото, маркетинга, дизайна, медицината, финансите, социалното предприемачество и др. Обединени сме от целта да създадем устойчива и прозрачна платформа за дарения, която подкрепя каузи и хора в нужда, като заедно с това популяризира и връща доверието към дарителството в България.",
     "meet-our-team": "Запознайте се с екипа ни"
   },
+  "subscription-section": {
+    "heading": "Искаш да си в час с бъдещите ни постижения?",
+    "content": "Абонирай се за нашия бюлетин и ние ще те информираме за най-важното от живота на Подкрепи.бг. Всеки месец ще получваш email от нас, в който ще ти споделяме най-интересното за кампаниите, които поддържаме, както и за техните организатори и бенефициенти. Ще получаваш новините за нашите партньори, доброволци и дарители в електронната си пощенска кутия. Ако ти звучи добре, запиши се, като въведеш email адреса си тук:"
+  },
   "support-us-section": {
     "heading": "Подкрепете ни като:",
     "financial-support": "- дарител",

public/locales/en/campaigns.json

@@ -56,6 +56,13 @@
     "submit": "Submit",
     "apply": "Apply",
     "subscribe": "Subscribe for email notifications for the campaign",
+    "subscribeFooter": "Subscribe for the newsletter",
+    "subscribeGeneral": "Subscribe for email notifications from Podkrepi.bg",
+    "subscribe-monthly-newsletter": "Monthly newsletter of Podkrepi.bg",
+    "subscribeGeneralSubtext": "Receive our monthly newsletter which will inform you about the most interesting news from Podkrepi.bg!!",
+    "subscribe-general-monthly-newsletter": "Receive our monthly newsletter so that you are aware of the most interesting news from Podkrepi.bg!",
+    "subscribeGeneralButton": "Subscribe for news",
+    "subscribe-general-newsletter-button": "Subscribe",
     "support": "Donate",
     "support-cause-today": "Support a campaign today!",
     "support-now": "Support now",
@@ -78,9 +85,12 @@
   "subscribe": {
     "confirm-sent": "Please, <bold>activate</bold> your subscription from the email that we sent to {{email}}",
     "confirm-subscribe": "You subscribed successfully",
+    "subscribe-title": "Subscribe for news from Podkrepi.bg",
     "subscribe-campaign-title": "Subscribe for news about the campaign",
     "subscribe-text-nonLoggedUser": "Please, proceed as a guest and write down your email, on which you want to receive notifications for this campaign or you can log in. If you log in with your and password you will be able to manage your subscription from your Personal profile",
+    "subscribe-text-nonLoggedUser-general": "Please, proceed as a guest and write down your email, on which you want to receive notifications from us or you can log in. If you log in with your and password you will be able to manage your subscription from your Personal profile",
     "subscribe-text-loggedUser": "Please, choose if you want to receive the news about the campaign on your profile email or on another one:",
+    "subscribe-subtitle": "I want to receive news and notifications from Podkrepi.bg on this email:",
     "subscribe-campaign-subtTitle": "I want to receive news about the campaign on this email:",
     "subscribe-button": "Subscribe me",
     "profile-button": "On the profile one",

public/locales/en/index.json

@@ -10,6 +10,10 @@
     "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"
   },
+  "subscription-section": {
+    "heading": "You want to know about our future achievements?",
+    "content": "Subscribe for our newsletter we will infrom you about the most important from the life of Podkrepi.bg. Every month you will receive email from us in which we will share with you the most important things about the campaigns that we have and their organizers and beneficiaries. You will receive news for our partners, volunteers and donors in your email box. If this sounds good for you, subscribe as you fill in your email here:"
+  },
   "support-us-section": {
     "heading": "Support us as:",
     "financial-support": "- a benefactor",

public/locales/en/validation.json

@@ -16,6 +16,7 @@
   "agree-terms": "Agree to the Terms and Conditions",
   "agree-with": "I agree to the",
   "informed-agree-with": "I understand and I agree to the",
+  "agree-with-newsletter": "I agree to receive news",
   "agree-with-newsletter-campaign": "I agree to receive news about this campaign and news by Podkrepi.bg *",
   "terms-and-conditions": "Terms and Conditions",
   "gdpr": "General Data Protection Regulation (GDPR)",

src/components/client/index/IndexPage.tsx

@@ -1,3 +1,4 @@
+import dynamic from 'next/dynamic'
 import { useTranslation } from 'next-i18next'
 
 import Layout from 'components/client/layout/Layout'
@@ -7,10 +8,10 @@ import PlatformStatisticsSection from './sections/PlatformStatisticsSection/Plat
 import MediaSection from './sections/MediaSection/MediaSection'
 import HowWeWorkSection from './sections/HowWeWorkSection/HowWeWorkSection'
 import PartnersSection from './sections/PartnersSection/PartnersSection'
+import SubscriptionSection from './sections/SubscriptionSection/SubscriptionSection'
 import TeamMembersSection from './sections/TeamMembersSection/TeamMembersSection'
 import JoinPodkrepiBgSection from './sections/JoinPodkrepiBgSection/JoinPodkrepiBgSection'
 import FaqSection from './sections/FaqSection/FaqSection'
-import dynamic from 'next/dynamic'
 
 const HotJar = dynamic(() => import('common/hotjar/HotJar'), { ssr: false })
 
@@ -32,6 +33,7 @@ export default function IndexPage() {
       <PartnersSection />
       <TeamMembersSection />
       <JoinPodkrepiBgSection />
+      <SubscriptionSection />
       <FaqSection />
     </Layout>
   )

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

@@ -1,4 +1,4 @@
-import { Typography, Grid } from '@mui/material'
+import { Button, Typography, Grid } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
@@ -42,6 +42,7 @@ export const Subtitle = styled(Typography)(() => ({
   display: 'inline-block',
   fontSize: theme.typography.pxToRem(16),
   lineHeight: theme.spacing(3),
+  marginTop: theme.spacing(2),
 }))
 
 export const HelpThoseInNeedButton = styled(LinkButton)(() => ({
@@ -73,3 +74,40 @@ export const HelpThoseInNeedButton = styled(LinkButton)(() => ({
     },
   },
 }))
+
+export const SubscribeHeading = styled(Typography)(() => ({
+  fontWeight: 500,
+  fontSize: theme.typography.pxToRem(16.5),
+  textAlign: 'center',
+
+  '&:hover': {
+    textDecoration: 'underline',
+    transform: 'scale(1.01)',
+    cursor: 'pointer',
+    transition: 'all 0.3s ease',
+  },
+}))
+
+export const SubscribeButton = styled(Button)(() => ({
+  fontWeight: 600,
+  borderRadius: theme.borders.round,
+  backgroundColor: theme.palette.secondary.main,
+  minWidth: theme.spacing(3.75),
+  fontSize: theme.typography.pxToRem(15),
+  margin: theme.spacing(2, 0, 0, 'auto'),
+  boxShadow:
+    '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)',
+
+  '& span': {
+    display: 'none',
+  },
+
+  [theme.breakpoints.up('md')]: {
+    fontSize: theme.typography.pxToRem(17),
+    minWidth: theme.spacing(50),
+
+    '& span': {
+      display: 'inline-flex',
+    },
+  },
+}))

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

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'next-i18next'
 
-import ArrowForwardSharp from '@mui/icons-material/ArrowForwardSharp'
 import { Grid } from '@mui/material'
+import ArrowForwardSharp from '@mui/icons-material/ArrowForwardSharp'
+import EmailIcon from '@mui/icons-material/Email'
 
 import { routes } from 'common/routes'
 import Statistics from './Statistics/Statistics'
@@ -13,10 +14,14 @@ import {
   Root,
   SectionGridWrapper,
   Subtitle,
+  SubscribeButton,
+  SubscribeHeading,
 } from './PlatformStatisticsSection.styled'
+import RenderSubscribeModal from 'components/client/notifications/GeneralSubscribeModal'
 
 export default function PlatformStatisticsSection() {
-  const { t } = useTranslation('index')
+  const { t } = useTranslation()
+  const [subscribeIsOpen, setSubscribeOpen] = useState(false)
 
   return (
     <Root>
@@ -26,14 +31,34 @@ export default function PlatformStatisticsSection() {
             margin: '0 auto',
             maxWidth: theme.spacing(67),
           })}>
-          <Heading variant="h4">{t('platform-statistics.heading')}</Heading>
-          <Subtitle>{t('platform-statistics.text')}</Subtitle>
+          <Heading variant="h4">{t('index:platform-statistics.heading')}</Heading>
+          <Subtitle>{t('index:platform-statistics.text')}</Subtitle>
           <HelpThoseInNeedButton
             href={routes.campaigns.index}
             variant="contained"
             endIcon={<ArrowForwardSharp />}>
-            {t('platform-statistics.donate-to-those-in-need')}
+            {t('index:platform-statistics.donate-to-those-in-need')}
           </HelpThoseInNeedButton>
+          {subscribeIsOpen && <RenderSubscribeModal setOpen={setSubscribeOpen} />}
+          <Grid item xs={12} display="flex" sx={{ mt: 1.5, mb: 0.5 }}>
+            <EmailIcon
+              color="primary"
+              fontSize="small"
+              sx={{ mr: 0.5 }}
+              onClick={() => setSubscribeOpen(true)}
+              cursor="pointer"
+            />
+            <SubscribeHeading onClick={() => setSubscribeOpen(true)}>
+              {t('campaigns:cta.subscribeGeneral')}
+            </SubscribeHeading>
+          </Grid>
+          <Subtitle>{t('campaigns:cta.subscribeGeneralSubtext')}</Subtitle>
+          <SubscribeButton
+            onClick={() => setSubscribeOpen(true)}
+            variant="contained"
+            endIcon={<ArrowForwardSharp />}>
+            {t('campaigns:cta.subscribeGeneralButton')}
+          </SubscribeButton>
         </Grid>
         <Statistics />
       </SectionGridWrapper>

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

@@ -0,0 +1,28 @@
+import { Grid, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import theme from 'common/theme'
+
+export const InfoText = styled(Typography)(() => ({
+  textAlign: 'center',
+  fontSize: theme.typography.pxToRem(16),
+  lineHeight: theme.spacing(3),
+  padding: theme.spacing(0, 8, 6, 8),
+}))
+
+export const SubscribeGrid = styled(Grid)(() => ({
+  margin: theme.spacing(4, 'auto'),
+
+  [`& .subscribeBtn`]: {
+    fontSize: theme.typography.pxToRem(16),
+    background: `${theme.palette.primary}`,
+
+    '&:hover': {
+      background: theme.palette.primary.main,
+    },
+  },
+
+  [theme.breakpoints.up(768)]: {
+    margin: theme.spacing(8, 'auto'),
+  },
+}))