diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json
index a98a13218..a317d9a40 100644
--- a/public/locales/bg/index.json
+++ b/public/locales/bg/index.json
@@ -1,6 +1,12 @@
{
"podkrepi": "Подкрепи.бг",
"title": "прозрачна дарителска онлайн платформа",
+ "beta-pop-up": {
+ "beta-version": "Това е бета версията на платформата на <1>Подкрепи.бг преди предстоящия наесен официален старт.",
+ "feedback": "Ще сме благодарни, ако ни помогнете като тествате платформата и ни върнете обратна връзка на <1>feedback@podkrepi.bg с нещата, които според Вас могат да се подобрят.",
+ "close": "Затвори",
+ "do-not-show-again": "Не показвай отново"
+ },
"jumbotron": {
"heading": "Стимулираме дарителската култура чрез прозрачност в набирането и разпределянето на средства за каузите, без да удържаме такси и комисиони за Подкрепи.бг.",
"maximum-transparency": "с максимална степен на прозрачност",
diff --git a/public/locales/en/index.json b/public/locales/en/index.json
index 8fcfd78a0..772da3a4e 100644
--- a/public/locales/en/index.json
+++ b/public/locales/en/index.json
@@ -1,6 +1,12 @@
{
"podkrepi": "Podkrepi.bg",
"title": "a transparent online donation platform",
+ "beta-pop-up": {
+ "beta-version": "This is the beta version of the <1>Podkrepi.bg platform before the official launch in the fall.",
+ "feedback": "We would be grateful if you could help us by testing the platform and giving us feedback at <1>feedback@podkrepi.bg with the things you think can be improved.",
+ "close": "Close",
+ "do-not-show-again": "Don't show again!"
+ },
"jumbotron": {
"heading": "We stimulate the donation culture through transparency in raising and allocating funds to the causes without deducting fees and commissions for Podkrepi.bg.",
"maximum-transparency": "with maximum transparency",
diff --git a/src/components/index/IndexPage.tsx b/src/components/index/IndexPage.tsx
index baf4e7109..7bdaa104a 100644
--- a/src/components/index/IndexPage.tsx
+++ b/src/components/index/IndexPage.tsx
@@ -8,6 +8,7 @@ import WhatUnitesUsSection from './sections/WhatUnitesUsSection'
import WantToHelpPodkrepiBgSection from './sections/WantToHelpPodkrepiBg'
import FaqSection from './sections/FaqSection'
import TeamMembersSection from './sections/TeamMembersSection'
+import BetaPopUpDialog from './sections/BetaPopUpDialog'
export default function IndexPage() {
const { t } = useTranslation()
@@ -19,6 +20,7 @@ export default function IndexPage() {
disableGutters
title={t('index:jumbotron.heading')}
metaDescription={t('index:jumbotron.heading')}>
+
diff --git a/src/components/index/helpers/betaPopUp/BetaPopUpTextCard.tsx b/src/components/index/helpers/betaPopUp/BetaPopUpTextCard.tsx
new file mode 100644
index 000000000..599f50924
--- /dev/null
+++ b/src/components/index/helpers/betaPopUp/BetaPopUpTextCard.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Trans, useTranslation } from 'next-i18next'
+import { Grid, Typography } from '@mui/material'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+
+type BetaPopUpTextProps = {
+ translationKey: string
+}
+export default function BetaPopUpTextCard({ translationKey }: BetaPopUpTextProps) {
+ const { t } = useTranslation()
+
+ return (
+
+ ({ height: '28px', color: '#00B0FF', marginRight: '10px' })} />
+ ({
+ marginBottom: '10px',
+ lineHeight: '28px',
+ fontWeight: '500',
+ letterSpacing: '0.15px',
+ [theme.breakpoints.down('md')]: {
+ lineHeight: '24px',
+ fontWeight: '500',
+ marginBottom: '5px',
+ },
+ })}>
+
+ {t(translationKey)}
+
+
+
+
+ )
+}
diff --git a/src/components/index/icons/BetaManIcon.tsx b/src/components/index/icons/BetaManIcon.tsx
new file mode 100644
index 000000000..8f9a61be0
--- /dev/null
+++ b/src/components/index/icons/BetaManIcon.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+import theme from 'common/theme'
+
+export default function BetaManIcon({ ...props }: SvgIconProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/index/icons/BetaWomanIcon.tsx b/src/components/index/icons/BetaWomanIcon.tsx
new file mode 100644
index 000000000..6a567eb2f
--- /dev/null
+++ b/src/components/index/icons/BetaWomanIcon.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+import theme from 'common/theme'
+
+export default function BetaManIcon({ ...props }: SvgIconProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/index/sections/BetaPopUpDialog.tsx b/src/components/index/sections/BetaPopUpDialog.tsx
new file mode 100644
index 000000000..9db3dfadf
--- /dev/null
+++ b/src/components/index/sections/BetaPopUpDialog.tsx
@@ -0,0 +1,153 @@
+import React, { ChangeEvent, useEffect, useState } from 'react'
+import { useTranslation } from 'next-i18next'
+import {
+ Button,
+ Grid,
+ Checkbox,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ FormControl,
+ FormControlLabel,
+ Typography,
+} from '@mui/material'
+import { CircleOutlined } from '@mui/icons-material'
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+
+import BetaPopUpTextCard from 'components/index/helpers/betaPopUp/BetaPopUpTextCard'
+import BetaManIcon from 'components/index/icons/BetaManIcon'
+import BetaWomanIcon from 'components/index/icons/BetaWomanIcon'
+
+let showAgainProp = true
+
+export default function BetaPopUpDialog() {
+ const { t } = useTranslation('index')
+ const [open, setOpen] = useState(false)
+ const [showAgain, setShowAgain] = useState(true)
+
+ const handleClose = () => {
+ setOpen(false)
+ showAgainProp = showAgain
+ }
+
+ useEffect(() => {
+ if (showAgainProp === true && open === false) {
+ setTimeout(() => {
+ setOpen(true)
+ }, 10000)
+ }
+ }, [showAgainProp])
+
+ const handleCheckboxChange = (event: ChangeEvent, checked: boolean) => {
+ setShowAgain(!checked)
+ }
+
+ return (
+
+ )
+}